Làm việc trong một dự án phức tạp, cho dù bạn là một lập trình viên có kinh nghiệm hay một sinh viên năm nhất, hầu như bạn sẽ gặp phải các vấn đề. Khi bạn chia dự án của mình thành nhiều mô-đun, các vấn đề phát sinh, khiến việc theo dõi lỗi và tìm giải pháp trở nên khó khăn hơn. Trong các trường hợp khác, việc gỡ lỗi các trường hợp riêng lẻ có thể khó khăn vì bạn chưa tìm ra giải pháp thích hợp cho vấn đề mà bạn đang giải quyết.
Đôi khi, nó cũng xuất hiện như một đoạn mã, có thể trông phức tạp vào thời điểm đó. JavaScript là một trong những ngôn ngữ dựa trên Web cực kỳ đơn giản để học. Chỉ cần khởi chạy trình duyệt trên máy tính để bàn của bạn và điều hướng đến Công cụ dành cho nhà phát triển (thường là F12) và bạn đã hoàn tất! Sau đó, bạn có thể thử nghiệm với JS mà không cần cài đặt hoặc chạy bất kỳ phần mềm phức tạp nào.
Để bắt đầu, tất cả những gì bạn cần là một trình duyệt. Thật tuyệt vời khi có tất cả những điều đơn giản này ngay lập tức, nhưng có những lúc bạn cần nhiều hơn thế. Ví dụ: giả sử bạn muốn thử nghiệm với một API Web mới mà bạn đã khám phá gần đây nhưng không muốn bắt đầu một dự án mới.
Trong bài đăng này, chúng tôi sẽ so sánh và đối chiếu ba sân chơi JS phổ biến nhất, CodePen, CodeSandbox và StackBlitz. Bắt đầu nào!
CodePen
Các công cụ phát triển web giao diện người dùng luôn phát triển và trình soạn thảo văn bản là một thành phần quan trọng của các công nghệ mới nhất giúp cuộc sống của nhà phát triển trở nên đơn giản hơn. Ngoài các trình soạn thảo văn bản độc lập như Atom hoặc Notepad ++, đã có sự bùng nổ của các trình soạn thảo dựa trên trình duyệt trong những năm gần đây không yêu cầu cài đặt chương trình và thúc đẩy sự cộng tác nhiều hơn.
CodePen là một “cộng đồng trực tuyến để thử nghiệm và trình bày các đoạn mã HTML, CSS và JavaScript do người dùng tạo ra” mang đến cơ hội tuyệt vời để tìm hiểu cách viết các trang web giao diện người dùng tốt hơn.
CodePen cung cấp cho bạn hai “chế độ”. Đầu tiên và được sử dụng phổ biến nhất là Pen. Nó đơn giản như nhấp vào một nút và được chuyển ngay đến trình chỉnh sửa. Từ đó, bạn có thể truy cập bảng xem trước cũng như các cửa sổ chỉnh sửa HTML, CSS và JS cơ bản.
Không có “hệ thống tệp”, “IntelliSense” hay bất kỳ thứ gì khác - chỉ là tô sáng cú pháp đơn giản và các lệnh nhanh như điều chỉnh trước. Trong tab tùy chọn, bạn có thể chọn từ một loạt các bộ tiền xử lý hạn chế cho cả ba ngôn ngữ (chẳng hạn như TypeScript cho JS) hoặc thêm các kết nối đến các nguồn bên ngoài.
Nếu bạn chỉ cần làm bất cứ điều gì miễn phí, một trong hai trình chỉnh sửa sẽ đủ. Tôi đề xuất CodePen cho bất kỳ thứ gì không yêu cầu nhiều thiết lập hoặc thư viện - chỉ đơn giản là HTML, CSS và JS với bộ xử lý trước tùy chọn ở trên cùng. Nếu bạn muốn tận dụng sân chơi để cải thiện sự hiện diện trên mạng xã hội của mình hoặc phát triển danh mục đầu tư cá nhân, CodePen là một lựa chọn tốt hơn.
phí bảo hiểm Version
Bạn có một số lựa chọn thay thế khác để lựa chọn trên CodePen. Nếu bạn thanh toán hàng năm, bạn có thể nhận được một trong ba gói cao cấp với $ 12, $ 19 hoặc $ 39 mỗi tháng. Bạn có thể tạo vô số bút, bài đăng và bộ sưu tập cá nhân trên bất kỳ cấp nào trong ba cấp.
Bạn cũng sẽ nhận được huy hiệu Pro (một sự thúc đẩy xã hội), quyền truy cập chế độ cộng tác trực tiếp, không có quảng cáo và hơn thế nữa. Ngoài ra còn có một số chiến lược dành riêng cho nhóm và sự khác biệt giữa các cấp khác nhau. Kiểm tra bảng thanh toán chính thức của họ để biết thêm thông tin.
Các tính năng chính
Ngoài việc tạo HTML, CSS và JavaScript trong CodePen, có một số thứ khác làm cho nó trở nên khác biệt.
- Có thể xem mã của bạn trong thời gian thực. Nó không yêu cầu biên dịch.
- Thử nghiệm cho phép bạn học những điều mới.
- Tạo các trường hợp thử nghiệm nhỏ để tìm kiếm và giải quyết các vấn đề.
- Trưng bày các tác phẩm tuyệt vời của bạn.
- Tạo và lưu trữ Bút để sử dụng sau này.
- Hãy thử mã của các nhà phát triển khác và xem nó hoạt động.
Ưu điểm
- Để bắt đầu, không có chi phí.
- Tài nguyên học tập tích hợp sẵn.
- Cộng tác với những người khác và so sánh các dự án để xem họ có thể đi đến đâu trong tương lai.
- Giao diện người dùng rất dễ sử dụng và đơn giản.
Điểm yếus
- Thư viện mã nhỏ, tự động hoàn thành mã là không đủ. Nó chỉ tốt cho các dự án một trang và không thể xử lý bất cứ điều gì lớn hơn.
- Trên CodePen, bạn có thể tạo bút riêng, nhưng bạn sẽ cần nâng cấp lên thành viên Pro ($ 9 / tháng).
hộp cát mã
CodeSandbox là một trình soạn thảo mã dựa trên web. Nó tự động hóa việc chuyển tải, đóng gói và quản lý sự phụ thuộc cho bạn, cho phép bạn xây dựng một dự án mới chỉ với một cú nhấp chuột. Sau khi bạn đã tạo ra thứ gì đó hấp dẫn, bạn có thể chia sẻ nó với những người khác bằng cách chia sẻ trang web.
Trình chỉnh sửa tương thích với bất kỳ dự án JavaScript nào, mặc dù nó bao gồm một số tính năng dành riêng cho React, chẳng hạn như tùy chọn lưu dự án trong mẫu ứng dụng tạo.
Bất kỳ dự án nào bạn xây dựng trong CodeSandbox đều bắt đầu bằng một mẫu. Nó có thể liên quan đến một thư viện, khung công tác hoặc thời gian chạy cụ thể (bao gồm cả Node.js) hoặc chỉ sử dụng các công nghệ web tiêu chuẩn. Sau khi chọn một mẫu, bạn sẽ được gửi đến trình chỉnh sửa, nơi bạn sẽ tìm thấy tất cả các tệp cần thiết và cửa sổ xem trước đã mở.
Bạn có quyền truy cập vào “hệ thống tệp” trong tất cả các Hộp cát, có nghĩa là bạn có thể tạo tệp mới, sử dụng các mô-đun (bao gồm cả gói NPM) và tương tác với các nội dung tĩnh. Ngoài ra còn có cơ hội sửa đổi các tệp cấu hình dành riêng cho mẫu.
Bạn thậm chí có thể xây dựng các mẫu của riêng mình cho trường hợp sử dụng duy nhất của bạn, hoàn chỉnh với cấu trúc tệp và các phần phụ thuộc, giống như trong một IDE. Vì công cụ được liên kết với Github, bạn có thể nhanh chóng tạo cam kết và mở PR. Bạn có thể triển khai ứng dụng của mình tới ZEIT hoặc Netlify ngay lập tức.
Nhóm CodeSandbox Pro
CodeSandbox, một doanh nghiệp Hà Lan cho phép các nhà phát triển xây dựng hộp cát phát triển ứng dụng web dựa trên trình duyệt, đã chính thức phát hành một nền tảng cộng tác cho phép các nhóm làm việc trên mã trên đám mây. Sản phẩm mới, Team Pro, là một giải pháp không mã được xây dựng cho các nhóm sản phẩm hoàn chỉnh, từ các nhà thiết kế và quản lý thông qua các nhóm đảm bảo chất lượng (QA) và hơn thế nữa.
Các dự án được cung cấp trong giao diện thân thiện với người dùng cho bất kỳ ai muốn thực hiện hoặc chấp nhận các thay đổi đối với ứng dụng web, tránh các phương pháp thay thế như gửi ghi chú và khuyến nghị cho nhà phát triển để thực hiện các thay đổi, chuyển chúng trở lại để thảo luận và lặp lại quy trình.
Các tính năng chính
- Một trình soạn thảo mã dựa trên web và công cụ nguyên mẫu.
- Để sử dụng cục bộ, một hộp cát có thể được tải xuống dễ dàng dưới dạng tệp zip.
- Lập trình được thực hiện trong hộp cát, có thể dễ dàng chia sẻ với đồng nghiệp.
Ưu điểm
- Cải thiện trải nghiệm người dùng và kiểm soát tốt hơn trình chỉnh sửa.
- Tính năng xem trước trực tiếp có thể được sửa đổi và xem trong một cửa sổ riêng biệt.
- Mã được định dạng tự động và bao gồm CLI (mã và hộp thư đến)
- Hỗ trợ các mô-đun npm nâng cao.
- Thông báo lỗi tốt với các khuyến nghị.
- Nó cải thiện trải nghiệm gỡ lỗi bằng cách cung cấp thiết bị đầu cuối, trình xem thử nghiệm và trình xem vấn đề tốt hơn.
Điểm yếus
- Người tiêu dùng cuối cùng tiếp xúc với nhiều cá nhân hóa.
- Kéo và thả tệp từ máy tính cục bộ không hoạt động đúng cách.
- Một cấu trúc thư mục nhất định phải được tuân theo trong CodeSandbox.
- Chức năng của một hộp cát riêng chỉ dành cho khách hàng quen.
StackBlitz
StackBlitz là một IDE trực tuyến được hỗ trợ bởi Visual Studio Code cho các ứng dụng web. Nền tảng này đáp ứng và thích ứng như phiên bản dành cho máy tính để bàn. StackBlitz là một IDE trực tuyến được tải sẵn Angular và React công cụ phát triển.
Thinkster.io đã xây dựng dự án tuyệt vời đó để giúp bạn bắt đầu với dự án Angular hoặc React đơn giản nhất có thể mà không phải lo lắng về cài đặt phụ thuộc hoặc cài đặt xây dựng. StackBlitz cung cấp rất nhiều tính năng tuyệt vời và độc đáo mà không có trình soạn thảo mã trực tuyến nào khác có ngay bây giờ. Do đó, thật đáng giá để điều tra thêm về StackBlitz và khám phá những gì IDE trực tuyến này cung cấp.
Stackblitz cực kỳ có thể so sánh với IDE hoàn chỉnh, đặc biệt nếu bạn không thể nói lời tạm biệt với mã VS vì công cụ này dựa trên nó. Gói này có nhiều tính năng cho phép bạn bắt đầu và tiếp tục tạo một ứng dụng toàn ngăn xếp.
Chương trình được cung cấp bởi Visual Studio, một công cụ nổi tiếng trong giới phát triển. Chỉnh sửa ngoại tuyến là tính năng nổi bật của dự án. Để thực hiện điều này, nhóm Stackblitz đã tạo một máy chủ web trong trình duyệt. Khi bạn nhập, nó sẽ tự động cài đặt các phụ thuộc, biên dịch, gói và tải lại nóng.
phí bảo hiểm Version
Cadet, Phi hành gia và Chỉ huy được cung cấp miễn phí, tương ứng là $ 8 / tháng và $ 29 / tháng. Phi hành gia và Chỉ huy bao gồm một số tính năng như các dự án riêng tư không giới hạn, tải lên tệp không giới hạn, mời tham gia kênh chùng của nhóm cốt lõi, v.v. Để biết thêm thông tin, hãy xem bảng thanh toán chính thức.
Các tính năng chính
- Thêm gói NPM vào dự án của bạn.
- Nhờ một máy chủ nhà phát triển trong trình duyệt mới, bạn có thể chỉnh sửa khi ngoại tuyến.
- URL ứng dụng được lưu trữ cho phép chúng tôi truy cập (và chia sẻ) ứng dụng trực tiếp của mình bất kỳ lúc nào.
- Các tính năng đáng chú ý khác của Visual Studio Code bao gồm Intellisense, Tìm kiếm dự án (Cmd / Ctrl + P), Đi tới Định nghĩa và các tính năng khác.
Ưu điểm
- Khả năng triển khai của Firebase.
- Trình chỉnh sửa thực sự dễ sử dụng và cực kỳ nhanh chóng.
- Người dùng có quyền truy cập vào package.json, index.html và index.js.
- Mã nguồn có thể chia sẻ cũng có thể được nhúng.
- Xem trước trực tiếp trên một phần lớn của trang, với tùy chọn mở trên một trang khác nếu cần.
- Trong khi ngoại tuyến, chỉnh sửa
- Hoàn thiện thông minh và cải tiến Intellisense.
- Cốt lõi của Stackblitz là mã nguồn mở.
Điểm yếus
- Bạn không có ảnh hưởng đối với tòa nhà hoặc máy chủ của nhà phát triển vì chúng được quản lý bởi lệnh create-react-app.
- Trong React, một cấu trúc thư mục cơ bản nên được quan sát.
- Không thể định dạng mã tự động, mặc dù có thể thực hiện theo cách thủ công.
Kết luận
Ngày nay, một sân chơi mã hóa như những sân chơi mà chúng ta đã thấy ở trên có thể được sử dụng để xây dựng hoàn chỉnh bất kỳ dự án web nào. Không cần cài đặt các IDE rườm rà trên PC khi bạn có thể xây dựng, gỡ lỗi, kiểm tra và triển khai trực tiếp từ trình duyệt web của mình.
Theo ý kiến của tôi, StackBlitz sẽ là tốt nhất trong số đó vì nó là IDE dựa trên web cho phép JavaScript, Angular và các dự án phát triển khác ngay lập tức mà không cần cài đặt bất kỳ môi trường phát triển cục bộ nào như Node.js, npm, hoặc Angular. Nó cung cấp trải nghiệm giống như sử dụng Visual Studio Code cục bộ. Trên thực tế, vì StackBlitz được điều khiển bởi Visual Studio Code, nên nó có cảm giác nhanh và linh hoạt như phiên bản dành cho máy tính để bàn.
Công cụ nào trong số CodePen, CodeSandbox và StackBlitz là công cụ bạn nên sử dụng? Hãy cho chúng tôi biết trong các ý kiến.
Abbatiya
Cảm ơn vì bài viết tuyệt vời này, khi tôi xem stackblitz.com, tôi biết đây là điều tôi muốn.