Pracując nad złożonym projektem, niezależnie od tego, czy jesteś doświadczonym programistą, czy nowicjuszem, praktycznie natkniesz się na problemy. Kiedy dzielisz swój projekt na wiele modułów, pojawiają się problemy, które utrudniają wyśledzenie błędów i znalezienie rozwiązań. W innych okolicznościach debugowanie poszczególnych wystąpień może być trudne, ponieważ nie znalazłeś właściwego rozwiązania problemu, nad którym pracujesz.
Czasami pojawia się również jako fragment kodu, który w tym czasie może wydawać się skomplikowany. JavaScript to jeden z języków internetowych, który jest niezwykle prosty do nauczenia. Po prostu uruchom przeglądarkę na komputerze i przejdź do Narzędzi programistycznych (zwykle F12) i gotowe! Możesz wtedy eksperymentować z JS bez konieczności instalowania lub uruchamiania żadnego skomplikowanego oprogramowania.
Aby rozpocząć, potrzebujesz tylko przeglądarki. Wspaniale jest mieć całą tę prostotę zaraz po wyjęciu z pudełka, ale zdarzają się sytuacje, kiedy potrzebujesz więcej. Załóżmy na przykład, że chcesz poeksperymentować z nowym internetowym interfejsem API, który niedawno odkryto, ale nie chcesz rozpoczynać nowego projektu.
W tym poście porównamy i porównamy trzy najpopularniejsze place zabaw JS: CodePen, CodeSandbox i StackBlitz. Zacznijmy!
CodePen
Frontendowe narzędzia do tworzenia stron internetowych stale się rozwijają, a edytory tekstu są ważnym elementem najnowszych technologii, które ułatwiają życie programistom. Oprócz samodzielnych edytorów tekstu, takich jak Atom czy Notepad ++, w ostatnich latach nastąpiła eksplozja edytorów opartych na przeglądarce, które nie wymagają instalacji programów i promują lepszą współpracę.
CodePen to „internetowa społeczność do testowania i prezentowania tworzonych przez użytkowników fragmentów kodu HTML, CSS i JavaScript”, która oferuje fantastyczne możliwości nauczenia się lepszego pisania frontendowych stron internetowych.
CodePen oferuje dwa „tryby”. Pierwszym i najczęściej używanym jest Pen. To tak proste, jak kliknięcie przycisku i przeniesienie bezpośrednio do edytora. Stamtąd możesz uzyskać dostęp do panelu podglądu, a także podstawowych okien edycji HTML, CSS i JS.
Nie ma „systemu plików”, „IntelliSense” ani niczego innego — wystarczy proste podświetlanie składni i szybkie polecenia, takie jak upiększanie. Na karcie opcji możesz wybrać z ograniczonego zakresu preprocesorów dla wszystkich trzech języków (takich jak TypeScript dla JS) lub dodać połączenia do źródeł zewnętrznych.
Jeśli potrzebujesz tylko czegoś do zrobienia za darmo, wystarczy jeden z redaktorów. Sugerowałbym CodePen do wszystkiego, co nie wymaga dużej ilości konfiguracji lub bibliotek – po prostu HTML, CSS i JS z opcjonalnymi preprocesorami na górze. Jeśli chcesz wykorzystać plac zabaw, aby poprawić swoją obecność w mediach społecznościowych lub rozwinąć osobiste portfolio, CodePen jest lepszym rozwiązaniem.
Wersja Premium
Masz jeszcze kilka alternatyw do wyboru w CodePen. Jeśli płacisz rocznie, możesz otrzymać jeden z trzech planów premium za 12, 19 lub 39 USD każdego miesiąca. Możesz tworzyć nieskończoną liczbę prywatnych długopisów, postów i kolekcji na dowolnym z trzech poziomów.
Otrzymasz również plakietkę Pro (wzmocnienie społecznościowe), dostęp do trybu współpracy na żywo, brak reklam i nie tylko. Istnieją również pewne strategie specyficzne dla zespołu i inne rozróżnienia międzypoziomowe. Sprawdź ich oficjalną tablicę rozliczeniową, aby uzyskać więcej informacji.
Podstawowe dane
Oprócz tworzenia HTML, CSS i JavaScript w CodePen, jest jeszcze kilka rzeczy, które go wyróżniają.
- Możliwe jest przeglądanie kodu w czasie rzeczywistym. Nie wymaga kompilacji.
- Eksperymentowanie pozwala uczyć się nowych rzeczy.
- Twórz małe przypadki testowe, aby szukać i rozwiązywać problemy.
- Pokaż swoje wspaniałe dzieła.
- Twórz i przechowuj pióra do późniejszego wykorzystania.
- Wypróbuj kod innych programistów i zobacz, jak działa.
Zalety
- Na początek nie ma żadnych kosztów.
- Wbudowane zasoby edukacyjne.
- Współpracuj z innymi i porównuj projekty, aby zobaczyć, dokąd mogą pójść w przyszłości.
- Interfejs użytkownika jest prosty w obsłudze i prosty.
Niedogodności
- Biblioteka kodów jest mała, automatyczne uzupełnianie kodu jest niewystarczające. Jest po prostu dobry dla jednostronicowych projektów i nie poradzi sobie z niczym większym.
- W CodePen możesz tworzyć prywatne długopisy, ale musisz przejść na członkostwo Pro (9 USD miesięcznie).
piaskownica kodu
CodeSandbox to internetowy edytor kodu. Automatyzuje transpirację, pakowanie i zarządzanie zależnościami, umożliwiając zbudowanie nowego projektu za pomocą jednego kliknięcia. Po stworzeniu czegoś fascynującego możesz podzielić się tym z innymi, po prostu udostępniając witrynę.
Edytor jest kompatybilny z dowolnymi projektami JavaScript, chociaż zawiera pewne funkcje specyficzne dla Reacta, takie jak opcja zapisania projektu w szablonie create-react-app.
Każdy projekt, który budujesz w CodeSandbox, zaczyna się od szablonu. Może odnosić się do konkretnej biblioteki, frameworka lub środowiska wykonawczego (w tym Node.js) lub używać po prostu standardowych technologii internetowych. Po wybraniu szablonu trafiasz do edytora, w którym znajdziesz wszystkie potrzebne pliki oraz otwarte okno podglądu.
Masz dostęp do „systemu plików” we wszystkich piaskownicach, co oznacza, że możesz tworzyć nowe pliki, korzystać z modułów (w tym pakietów NPM) i wchodzić w interakcje z zasobami statycznymi. Istnieje również możliwość modyfikacji plików konfiguracyjnych specyficznych dla szablonu.
Możesz nawet skonstruować własne szablony dla swojego unikalnego przypadku użycia, wraz ze strukturą plików i zależnościami, podobnie jak w IDE. Ponieważ narzędzie jest połączone z Github, możesz szybko generować zatwierdzenia i otwierać PR. Możesz od razu wdrożyć swoją aplikację w ZEIT lub Netlify.
Zespół CodeSandbox Pro
CodeSandbox, holenderska firma, która pozwala programistom tworzyć piaskownicę do tworzenia aplikacji internetowych w przeglądarce, oficjalnie wydała platformę współpracy, która umożliwia zespołom pracę nad kodem w chmurze. Nowy produkt, Team Pro, to rozwiązanie niewymagające kodu, stworzone dla kompletnych zespołów produktowych, od projektantów i menedżerów po zespoły zapewniania jakości (QA) i nie tylko.
Projekty są dostarczane w przyjaznym dla użytkownika interfejsie dla każdego, kto chce wprowadzić lub zaakceptować zmiany w aplikacji internetowej, unikając alternatywnych metod, takich jak wysyłanie notatek i rekomendacji do programistów w celu wykonania zmian, przekazywanie ich z powrotem do dyskusji i powtarzanie procesu.
Podstawowe dane
- Internetowy edytor kodu i narzędzie do tworzenia prototypów.
- Do użytku lokalnego piaskownicę można łatwo pobrać w pliku zip.
- Programowanie odbywa się w piaskownicach, które można łatwo udostępnić współpracownikom.
Zalety
- Lepsze wrażenia użytkownika i większa kontrola nad edytorem.
- Funkcję podglądu na żywo można modyfikować i przeglądać w osobnym oknie.
- Kod jest automatycznie formatowany i zawiera CLI (codesandbox-cli)
- Wsparcie dla zaawansowanych modułów npm.
- Ładne komunikaty o błędach z zaleceniami.
- Poprawia jakość debugowania, zapewniając lepszy terminal, przeglądarkę testów i przeglądarkę problemów.
Niedogodności
- Konsument końcowy narażony jest na wiele personalizacji.
- Przeciąganie i upuszczanie plików z komputera lokalnego nie działa poprawnie.
- W CodeSandbox należy przestrzegać określonej struktury folderów.
- Funkcjonalność prywatnej piaskownicy jest dostępna tylko dla klientów.
StackBlitz
StackBlitz to internetowe IDE oparte na Visual Studio Code dla aplikacji internetowych. Platforma jest tak responsywna i elastyczna, jak wersja na komputery stacjonarne. StackBlitz to internetowe środowisko IDE, które jest fabrycznie wyposażone w Angular i React narzędzia programistyczne.
Firma Thinkster.io stworzyła ten fantastyczny projekt, aby maksymalnie uprościć rozpoczęcie pracy z projektem Angular lub React bez martwienia się o instalację zależności lub ustawienia kompilacji. StackBlitz zapewnia wiele niesamowitych i unikalnych funkcji, których nie ma obecnie żaden inny edytor kodu online. W rezultacie warto dokładniej zbadać StackBlitz i odkryć, co ma do zaoferowania to internetowe IDE.
Stackblitz jest niezwykle porównywalny z kompletnym IDE, zwłaszcza jeśli nie możesz pożegnać się z kodem VS, ponieważ narzędzie jest na nim oparte. Pakiet posiada szereg funkcji, które pozwalają rozpocząć i kontynuować tworzenie aplikacji z pełnym stosem.
Program jest zasilany przez dobrze znane programistom Visual Studio. Edycja offline to wyróżniająca cecha projektu. Aby było to możliwe, zespół Stackblitz stworzył serwer internetowy w przeglądarce. Podczas pisania automatycznie instaluje zależności, kompiluje, pakuje i wykonuje ponowne ładowanie na gorąco.
Wersja Premium
Kadet, astronauta i dowódca są dostępni za darmo, odpowiednio 8 USD miesięcznie i 29 USD miesięcznie. Astronaut and Commander zawiera szereg funkcji, takich jak nieograniczona liczba prywatnych projektów, nieograniczone przesyłanie plików, zapraszanie do kanału podstawowego zespołu i tak dalej. Więcej informacji można znaleźć na oficjalnej tablicy rozliczeniowej.
Podstawowe dane
- Dodawanie pakietów NPM do projektu.
- Dzięki nowatorskiemu serwerowi programistycznemu w przeglądarce możesz edytować w trybie offline.
- Adres URL hostowanej aplikacji, który umożliwia nam dostęp (i udostępnianie) naszej aplikacji na żywo w dowolnym momencie.
- Inne godne uwagi funkcje Visual Studio Code to Intellisense, Wyszukiwanie projektów (Cmd/Ctrl+P), Przejdź do definicji i inne.
Zalety
- Możliwości wdrożenia Firebase.
- Edytor jest naprawdę łatwy w obsłudze i niezwykle szybki.
- Użytkownicy mają dostęp do package.json, index.html i index.js.
- Kod źródłowy, który można udostępniać, który można również osadzić.
- Podgląd na żywo w dużej części strony, z możliwością otwarcia na innej stronie w razie potrzeby.
- Edycja w trybie offline
- Inteligentne uzupełnianie i ulepszony Intellisense.
- Rdzeniem Stackblitz jest open source.
Niedogodności
- Nie masz wpływu na budynek ani serwer deweloperski, ponieważ są one zarządzane przez polecenie create-react-app.
- W React należy przestrzegać podstawowej struktury folderów.
- Nie ma możliwości automatycznego formatowania kodu, chociaż można to zrobić ręcznie.
Wnioski
W dzisiejszych czasach plac zabaw dla kodowania, taki jak te, które widzieliśmy powyżej, może być używany do całkowitego skonstruowania dowolnego projektu internetowego. Nie ma potrzeby instalowania nieporęcznych środowisk IDE na komputerze, gdy można budować, debugować, testować i wdrażać bezpośrednio z przeglądarki internetowej.
Moim zdaniem StackBlitz byłby najlepszy wśród nich, ponieważ jest to internetowe IDE, które pozwala na JavaScript, Angular i inne projekty programistyczne od razu po wyjęciu z pudełka, bez konieczności instalowania żadnych lokalnych środowisk programistycznych, takich jak Node.js, npm, lub kątowe. Zapewnia to samo środowisko, co przy użyciu programu Visual Studio Code lokalnie. W rzeczywistości, ponieważ StackBlitz jest napędzany przez Visual Studio Code, wydaje się tak szybki i wszechstronny jak wersja na komputery stacjonarne.
Który z CodePen, CodeSandbox i StackBlitz jest Twoim ulubionym narzędziem? Daj nam znać w komentarzach.
Abbatja
Dziękuję za ten wspaniały artykuł, kiedy zobaczyłem stackblitz.com, wiem, że tego właśnie chcę.