12 najlepszych internetowych IDE i edytorów kodu do tworzenia aplikacji internetowych

Co następuje po opanowaniu podstaw kodowania? Oczywiście, że edytor kodu!

Edytory kodu to drugi najczęstszy powód zażartych sporów wśród programistów (na pierwszym miejscu plasuje się formatowanie kodu).

Dla pewnych osób Vim uchodzi za jedyny sensowny edytor w historii, podczas gdy inni uważają, że wszystko, co odbiega od zawikłanego świata Emacsa, nadaje się wyłącznie do wyśmiania. Jeśli pragniesz zwrócić na siebie uwagę, wystarczy, że na forum programistów zainicjujesz dyskusję typu „Dlaczego uważam, że X (wstaw dowolny popularny edytor) jest beznadziejny/genialny”, usiądziesz wygodnie z piwem i poczekasz.

Burza argumentów, kontrargumentów i wyzwisk zaleje forum przez całą noc, a zanim emocje opadną, minie wiele tygodni.

Nasuwa się pytanie: dlaczego tak się dzieje?

Oczywiście, ludzie potrafią wiele osiągnąć, używając różnych narzędzi, ale uważam, że edytory kodu mają wyjątkowe znaczenie dla programistów. Przeciętny programista spędza zdecydowaną większość swojego czasu (może nawet 98%, jeśli miałbym zgadywać) w wybranym edytorze. Programiści znają swój edytor na wylot – jego mocne strony i słabości, ograniczenia, osobliwości i ukryte funkcje.

Nic tak nie frustruje, jak zmaganie się z edytorem podczas pisania kodu (pomyśl, jakie to denerwujące, kiedy musisz napisać długiego, pilnego e-maila na nowej klawiaturze!). Edytory kodu zmniejszają obciążenie umysłowe i zwiększają produktywność, dlatego są tak ważne i przyciągają tak wiele uwagi.

Jaki jest więc najlepszy edytor kodu?

Szczerze? Nawet nie mam odwagi o tym dyskutować! 😀 😀

Jednak, jeśli interesuje Cię tworzenie stron internetowych, jest alternatywa, którą warto rozważyć – edytory kodu online! Można je też nazwać edytorami kodu działającymi w chmurze.

Nie należy mylić edytora kodu ze zintegrowanym środowiskiem programistycznym (IDE). To dwie różne rzeczy, a programista powinien znać wielojęzyczne IDE.

Mówiąc w skrócie, są to edytory, które działają w całości na zdalnym serwerze i są dostępne przez przeglądarkę.

Brzmi dziwnie, prawda?

Tak samo czułem się, gdy zetknąłem się z nimi 3-4 lata temu. Dlaczego ktoś miałby chcieć powierzyć wszystko przeglądarce?

Czy w ogóle mogą konkurować z edytorem kodu zainstalowanym lokalnie?

Okazuje się, że w wielu przypadkach, zwłaszcza przy tworzeniu stron internetowych, odpowiedź brzmi: tak. Chociaż nie używam edytorów online na co dzień, coraz częściej korzystam z nich w pewnych sytuacjach.

Zanim przejdziemy do dostępnych edytorów kodu, zastanówmy się, kiedy edytory kodu online mogą być dobrym rozwiązaniem.

Brak konfiguracji

Nie wiem, jak to wygląda u was, ale konfiguracja ulubionego edytora w nowym systemie nie jest czymś, na co czekam z niecierpliwością. Wtyczki, motywy, czcionki, skróty, fragmenty kodu, ustawienia… Lista rzeczy, które trzeba ustawić, zanim wszystko zacznie działać, jest nieskończona. Łatwo o czymś zapomnieć, a potem denerwować się, gdy praca zostaje przerwana.

W przeciwieństwie do tego, edytor online nie wymaga żadnej konfiguracji po pierwszym uruchomieniu. Oficjalne wersje, aktualizacje, kompilacje nocne, obsługiwane platformy, architektura systemu, synchronizacja FTP, potoki CI/CD – nic z tego nie ma znaczenia, dopóki masz przeglądarkę!

Współpraca

Często podczas rozwiązywania problemów lub debugowania kodu musisz współpracować z innymi programistami.

Tradycyjny edytor kodu nie jest do tego przystosowany – nie umożliwia jednoczesnej edycji kodu, komentowania czy podświetlania. Dodanie takich funkcji jest trudne.

Bezpieczeństwo danych

Obecnie żaden projekt nie obejdzie się bez kontroli wersji, co oznacza, że kopia kodu jest stale przechowywana w repozytorium. Mimo to, zdarzają się sytuacje, w których kontrola wersji nie wystarcza:

• Zapominasz przesłać zmiany i laptop zaczyna się palić.
• Masz ważne pliki i zrzuty danych, z którymi współpracuje twój kod, ale które nie są częścią działającej aplikacji. Co się z nimi stanie, jeśli laptop się zepsuje?

(Ok, chyba mam obsesję na punkcie psujących się laptopów, ale rozumiesz, o co mi chodzi?!)

Egzekwowanie standardów

Można by się spierać o to, czy jest to w ogóle zgodne z zasadami rozwoju oprogramowania, ale prawda jest taka, że programiści rzadko rezygnują ze swoich przyzwyczajeń dla dobra zespołu.

Na przykład, zagorzały fan Sublime Text nigdy nie zaakceptuje w pełni żadnego z edytorów JetBrains i zawsze będzie wytykał mu, że jest zasobożerny i wolniejszy.

To samo dotyczy tabulatorów i spacji (czy nawet tabulatorów z dwoma lub czterema spacjami). Naiwnością byłoby myśleć, że programiści w twoim zespole nie będą o to spierać.

W takich przypadkach edytor online jest błogosławieństwem – to ty decydujesz o ustawieniach projektów (nawet o tym, jak powinien być sformatowany kod), a edytor po prostu nie przyjmie kodu, jeśli nie będzie spełniał wszystkich standardów. Może to być uciążliwe dla pojedynczych osób, ale świetne dla całego projektu!

Właśnie skończyły mi się przypadki użycia, więc przejdźmy do tego, jakie mamy opcje, jeśli chodzi o edytory kodu online, szczególnie do tworzenia stron internetowych.

JSFiddle

Chociaż JSFiddle nie zastąpi w pełni edytora tekstu, bardzo dobrze sprawdza się przy obsłudze jednorazowych skryptów frontendowych.

Jest tak popularny, że serwisy pytań i odpowiedzi, takie jak StackOverflow, umożliwiają osadzanie linków do JSFiddle bezpośrednio na swojej platformie.

Aby szybko zacząć, JSFiddle oferuje na początku kilka szablonów; jeśli chcesz uruchomić demo, na przykład w React, wystarczy kliknąć odpowiedni przycisk i zacząć pisać kod. Po kliknięciu Zapisz, „fiddle” zostaje zapisany, a ty otrzymujesz stały adres URL (sprawdź ten przykładowy kod, który stworzyłem: https://jsfiddle.net/tuqd76c4/ i zobacz, że możesz wprowadzić zmiany i kliknąć Zapisz, aby utworzyć nową wersję tego adresu URL).

Oto, co sprawia, że JSFiddle jest dobrym wyborem do tworzenia front-endów:

• Bezpłatny w użyciu (bez ukrytych opłat czy funkcji „freemium”). JSFiddle utrzymuje się z reklam (przynajmniej w momencie pisania tego artykułu), a reklamę Adobe można zobaczyć w lewym dolnym rogu powyższego zrzutu ekranu.
• Funkcje współpracy – idealne do wspólnego tworzenia koncepcji, rozmów rekrutacyjnych itp.
• Wiele układów, rozmiarów czcionek, jasne/ciemne motywy itp.
• Formatowanie kodu (porządkowanie), nadchodzące wsparcie dla linterów (CSS i JS) i nie tylko.

A teraz słabe strony:

• JSFiddle to edytor wyłącznie front-endowy. Nie można w nim tworzyć i uruchamiać kodu backendowego.
• Nie ma tutaj pojęcia plików i folderów (ani przesyłanych plików). Wszystko, co masz, to jedno miejsce na kod, niezależnie od jego ilości.
• JSFiddle nie może być używany do hostowania kodu na twoim serwerze. Kod musi znajdować się w JSFiddle i jest zawsze publicznie dostępny.
• Nie ma możliwości utworzenia potoku CI/CD, korzystania z Git itp.

Mimo to, JSFiddle ma swoje miejsce i świetnie się sprawdza, gdy trzeba szybko stworzyć koncepcję i współpracować. Jest i pozostanie jednym z głównych edytorów online.

CodeSandbox

CodeSandbox można uznać za znacznie bardziej zaawansowaną i wszechstronną alternatywę dla JSFiddle. Zgodnie ze swoją nazwą, CodeSandbox zapewnia kompletne środowisko edytora kodu i piaskownicę do programowania front-end.

CodeSandbox to prawdziwa potęga i świetny produkt. Zabrakłoby mi papieru, gdybym chciał wymienić wszystkie jego zalety, ale oto kilka najważniejszych funkcji:

• Obsługa npm: tak, możesz dodać praktycznie każdy pakiet dostępny w npm.
• Pliki, foldery, moduły: możesz podzielić kod na wiele plików, dodawać/usuwać obrazy z folderu publicznego oraz budować/importować moduły. Praca przypomina nowoczesne środowisko modułowe, więc (prawie) nic nie trzeba konfigurować.
• Obsługa TypeScript, przeładowania na gorąco, eksportu na GitHub, hostingu plików statycznych itp.
• Edytor oparty jest na Monaco, tym samym, który napędza popularny VS Code. Daje to dostęp do zaawansowanych funkcji, takich jak „Przejdź do definicji”, „Znajdź odwołania” i refaktoryzacja!
• Obsługa fragmentów kodu dla Emmeta.
• Zintegrowane DevTools, linting, nakładki błędów, frameworki testowe (Jest), skróty klawiszowe i wiele innych.
• Potężny interfejs CLI do importowania lokalnych projektów do CodeSandbox.

Chociaż bezpłatna wersja CodeSandbox nie obsługuje prywatnego kodu, możesz uzyskać tę funkcję (i zwiększyć limity rozmiaru) wspierając projekt na Patreon za jedyne 5 USD miesięcznie (możesz zapłacić więcej, do 50 USD miesięcznie).

CodeAnywhere

Większość edytorów z tej listy (przynajmniej do tej pory) wymaga przechowywania kodu na własnych serwerach lub regularnej synchronizacji kodu za pomocą wiersza poleceń.

Z CodeAnywhere jest inaczej.

CodeAnywhere ma dwie cechy, które go wyróżniają:

• Gotowe obrazy kontenerów dla ponad 72 języków programowania i platform. Oznacza to, że możesz utworzyć nowe środowisko programistyczne bezpośrednio z edytora! Kod jest automatycznie hostowany w nowo utworzonym kontenerze, a pliki są udostępniane bezpośrednio z tego miejsca.
• Możesz połączyć się z czymkolwiek. Tak, dosłownie z czymkolwiek. Nie musisz przechowywać kodu na serwerach CodeAnywhere. Niezależnie od tego, czy twój kod znajduje się na FTP, platformach udostępniania plików, takich jak Dropbox, Amazon S3, czy zaawansowanych platformach kontroli wersji, takich jak GitHub, możesz łatwo skonfigurować CodeAnywhere do odczytu i zapisu z tego źródła, a edytor używać tylko do… edycji kodu.

Jeszcze jedno: jeśli nie czujesz się komfortowo z Gitem, jeśli chodzi o przeglądanie historii zmian, CodeAnywhere może być dla ciebie wybawieniem. Edytor używa własnego systemu do porównywania plików, co pozwala na porównanie dowolnych dwóch wersji (wersja jest tworzona za każdym razem, gdy zapisujesz plik).

Z wersjami jest jednak mały haczyk – bezpłatna wersja pozwala na przechowywanie tylko jednej wersji, podczas gdy najtańszy plan płatny pozwala na przechowywanie maksymalnie 20 wersji. Zazwyczaj nie jest to problem, ponieważ rzadko musisz zaglądać dalej niż do 20 ostatniej wersji, ale ponieważ większość programistów ma w zwyczaju często klikać Zapisz, może to być irytujące.

Podsumowując, CodeAnywhere to solidna, przyjemna w użytkowaniu propozycja dla osób, które chcą przenieść się do chmury i tam pozostać. 🙂 Moim zdaniem jest to bardzo godne polecenia rozwiązanie, ponieważ jego możliwości wykraczają poza tworzenie front-endu!

StackBlitz

Jeśli zajmujesz się głównie front-endem i nie możesz obyć się bez interfejsu VSCode, StackBlitz jest stworzony właśnie dla Ciebie.

Nie widzisz nic specjalnego?

Ja też nie widziałem, dopóki nie przewinąłem trochę w dół i nie kliknąłem przycisku Angular. Bum!

Zgadnij co, to nie jest celowe podobieństwo do VSCode – edytor StackBlitz jest oparty na VSCode! Możesz instalować rozszerzenia, przeszukiwać foldery i organizować pliki tak, jak w zwykłej instancji VSCode.

Ale to nie wszystko!

Może zauważyłeś (lub nie), że:

• Wszystkie aplikacje utworzone w StackBlitz są również automatycznie wdrażane na ich serwerach! Aplikacja Angular, którą właśnie utworzyłem, jest hostowana pod adresem https://angular-yvyi2j.stackblitz.io/. Adres URL prawdopodobnie nadal działa (choć ładowanie może potrwać, jak można się spodziewać po bezpłatnym hostingu)!
• Możesz utworzyć fork projektu i go udostępnić. Udostępniając projekt, masz lepszą kontrolę nad tym, co mogą robić inni.
• Możesz połączyć się z repozytorium GitHub i bezpośrednio pobierać/przesyłać kod z tego miejsca. Możesz też po prostu pobrać projekt jako plik ZIP, tak jak dawniej.

Ale to nie wszystko!

Na serio!

Oto lista oficjalnych funkcji oferowanych przez StackBlitz:

• Wsparcie dla Firebase (osobiście nie korzystam, ale to świetna wiadomość dla osób, które nie chcą grzebać w backendzie)
• Intellisense, wyszukiwanie w projektach
• Przeładowanie na gorąco podczas pisania
• Import pakietów npm
• Edycja offline, gdy nie masz połączenia z Internetem!

StackBlitz jest pełen miłych niespodzianek, jeśli chodzi o usuwanie przeszkód związanych z tworzeniem i wdrażaniem stron internetowych. Umieszczenie VSCode na stronie internetowej nie jest już tylko marzeniem!

AWS Cloud9

Cloud9 było prawdopodobnie pierwszym IDE opartym na przeglądarce, które oferowało zaawansowane funkcje i sprawiło, że pomysł używania przeglądarki jako edytora stał się popularny. Nic dziwnego, że Amazon później go przejął, a dziś Cloud9 jest częścią oferty AWS.

Jeśli jesteś w jakikolwiek sposób związany z platformą AWS (lub jesteś nią zainteresowany), Cloud9 to idealny (ok, prawie idealny) edytor.

Zobaczmy, dlaczego:

• Korzystanie z Cloud9 nie wiąże się z dodatkowymi opłatami. Możesz połączyć Cloud9 z istniejącą/nową instancją AWS i płacisz tylko za tę instancję. Możliwe jest również połączenie z serwerem innej firmy przez SSH – całkowicie za darmo!
• Najwyższej klasy wsparcie dla aplikacji AWS Serverless (debugowanie itp.)
• Bezpośredni dostęp do terminala AWS z poziomu edytora (szczerze, porządny terminal z kartami w edytorze to coś, czego wciąż brakuje mi w VSCode)
• Obsługa ponad 40 języków programowania (Go, C++, Ruby, Node, Python, PHP, Java… wybierz swój ulubiony)

Funkcje współpracy w Cloud9 są również godne pochwały i umożliwiają płynne przeprowadzanie recenzji i rozmów kwalifikacyjnych.

Kolejną świetną funkcją jest możliwość odtwarzania zmian wprowadzonych w pliku, co sprawia, że proces przeglądania kodu jest przyjemniejszy:

Moja rada?

Jeśli lubisz AWS, nie czekaj i wypróbuj Cloud9. A jeśli jeszcze nie korzystasz z chmury, ale myślisz o tym, to warto skorzystać z AWS i zintegrować Cloud9 ze swoją pracą. I tak nie możesz podjąć lepszej decyzji!

Gitpod

Gitpod to świeże podejście do edytorów kodu (lub IDE) w chmurze, które ma na celu zapewnienie, że twój kod jest zawsze przetestowany i aktualny. Innymi słowy, jest głęboko zintegrowany z GitHubem i za każdym razem, gdy dodajesz kod, uruchamia potoki testowe i CI/CD, aby upewnić się, że kod jest zawsze w 100% sprawny.

Warto go sprawdzić, jeśli podoba ci się środowisko VSCode i chcesz czegoś, co obsługuje wszystkie główne języki i frameworki back-end/front-end (Django, Rails, Revel, co tylko chcesz).

Theia

Jeśli jesteś zagorzałym fanem SOLID i architektem oprogramowania, który lubi niuanse, Theia IDE przypadnie ci do gustu. Jest to IDE napisane w TypeScript (brawo za styl!), które ma doskonale oddzielony front-end i back-end. Front-end działa w przeglądarce, a back-end może znajdować się w dowolnym miejscu – na twoim komputerze lokalnym lub w chmurze!

Ale to nie wszystko – front-end może działać jako aplikacja Electron z w pełni funkcjonalnym, izolowanym środowiskiem przeglądarki, dając wrażenie natywnej aplikacji komputerowej, jeśli tego chcesz.

GitHub Codespaces

GitHub Codespaces zapewnia wydajne maszyny wirtualne do uruchamiania kodu w celu tworzenia aplikacji internetowych. Dzięki Visual Studio Code, który zawiera edytor i kompletny ekosystem, praca w przeglądarce jest łatwiejsza.

Wypróbuj najnowsze środowisko deweloperskie dla projektów z gotowymi obrazami. Skalując swoje maszyny wirtualne do 64 GB pamięci RAM i 32 rdzeni, doświadczysz małych opóźnień w różnych regionach. Zacznij kodować, korzystając ze standardowych środowisk, specyfikacji sprzętu, ustawień edytora, rozszerzeń i wymagań dotyczących środowiska wykonawczego.

Możesz izolować zależności między projektami za pomocą docker-compose i kontenerów. Ponadto możesz łatwo podejrzeć zmiany wprowadzone w przeglądarce i udostępniać publiczne i prywatne porty kolegom z zespołu. Możesz również edytować lub dodawać nerdowskie szczegóły, takie jak spacje, tabulatory, jasne/ciemne motywy, upiększanie kodu, Monokai i wiele innych.

Początkujący, którzy chcą spróbować, mogą bezpłatnie korzystać z GitHub Codespaces z ograniczonymi korzyściami, ale będą mieli wystarczająco dużo funkcji, aby zacząć. Jeśli jesteś zespołem lub firmą, możesz zacząć korzystać z GitHub Codespaces za 40 USD rocznie na użytkownika.

JetBrains Space

Uzyskaj świeże, gotowe do użycia i zautomatyzowane środowiska programistyczne w chmurze w kilka sekund i zacznij kodować za pomocą JetBrains IDE – Space. Jest to kompleksowe rozwiązanie dla projektów i zespołów, które obejmuje cały cykl rozwoju, od potoków CI/CD i hostingu repozytoriów Git po pakiety publikacyjne.

Space to dedykowana maszyna wirtualna z kontenerem Docker. Możesz zainstalować wszystkie niezbędne biblioteki i narzędzia, które są potrzebne w projekcie. Usprawnij i przyspiesz proces wdrażania, udostępniając i odtwarzając obszary robocze, kiedy tylko chcesz.

Pozwól nowym programistom od razu rozpocząć tworzenie kodu, bez marnowania czasu na tworzenie lokalnej maszyny. Otrzymasz kompletne, gotowe do użycia IDE za każdym razem, gdy będziesz musiał zacząć pisać kod, debugować i uruchamiać go w kilka sekund, aby przetestować wyniki. JetBrains oferuje scentralizowaną platformę do zarządzania środowiskami deweloperskimi.

Wszystko, co robisz i każdy używany zasób, jest śledzone w jednym miejscu. Możesz również dość łatwo zintegrować zasoby z potokiem programistycznym. W zależności od projektu, możesz wybrać preferowany typ maszyny wirtualnej. Space pozwoli zaoszczędzić twoje zasoby, hibernując obszar roboczy, dzięki czemu po przerwie będziesz mógł kontynuować pracę.

Zacznij swoją przygodę i wypróbuj to narzędzie za darmo.

CodeTasty

CodeTasty to rozszerzalne, inteligentne i nowoczesne IDE w chmurze z wieloma funkcjami, które na pewno ci się spodobają. Pomaga w inteligentniejszym pisaniu czystego i czytelnego kodu w czasie rzeczywistym, w preferowanym języku.

Użyj edytora kodu z wbudowaną kompilacją, uzupełnianiem kodu, narzędziami do wykrywania błędów i wieloma innymi. Nie martw się o konfigurację; po prostu zacznij pracować nad projektami.

Podczas edycji kodów w chmurze, uzyskasz wrażenie pracy na komputerze stacjonarnym, jednocześnie ciesząc się taką samą wydajnością i szybkością. CodeTasty rozumie potrzeby każdego programisty, dlatego pozwala na instalację dowolnej liczby rozszerzeń. Ponadto obsługuje ponad 40 języków i sto linii kodu w jednym pliku.

Wypróbuj CodeTasty za darmo, aby uzyskać jeden obszar roboczy piaskownicy, 2 obszary robocze FTP/SSH, współpracę, opcję terminala i 2 współpracowników. Możesz też zacząć od płatnego planu za 4 USD miesięcznie i mieć możliwość sprawdzenia swojego kodu przed uruchomieniem.

Replit

Ucz się, pisz i twórz kod za pomocą Replit, darmowego, działającego w przeglądarce środowiska IDE, które obsługuje ponad 50 języków bez konieczności konfiguracji. Możesz zacząć pisać kod w swoim języku na dowolnym urządzeniu, systemie operacyjnym i platformie.

Zaproś kolegów z zespołu, współpracowników lub znajomych do edycji kodu w stylu Dokumentów Google. Możesz zaimportować kod z GitHub, aby pracować z repozytoriami GitHub bez konfiguracji. Niezależnie od tego, czy znasz C++, Pythona, CSS, czy HTML, możesz pisać kod i edytować go na jednej platformie.

Co więcej, gdy tylko skończysz pisać kod, możesz go od razu udostępnić. Jeśli chcesz się też uczyć, Replit ma ponad trzy miliony osób z branży technologicznej, pasjonatów i programistów. Dzięki współpracy zespołowej w czasie rzeczywistym Twój zespół będzie bardziej produktywny. Dodatkowo, podczas kodowania możesz tworzyć aplikacje, boty itp.