Tradycyjne podejście do edytorów kodu oznacza zazwyczaj oprogramowanie instalowane w systemie operacyjnym programisty. Nie jest to jednak jedyna opcja. Na przestrzeni lat powstały – i nadal powstają – narzędzia programistyczne działające w środowisku przeglądarki internetowej. W przypadku edytorów kodu skupionych wokół technologii frontendowych, programiści mają do dyspozycji co najmniej kilkanaście tego typu aplikacji.
Front-End Code Playground: typy i zastosowanie
Narzędzia typu Front-End Code Playground są edytorami kodu, bardzo często oferującymi zaawansowane funkcjonalności. Najczęściej dostępne są online w formie aplikacji internetowej, chociaż wśród tego typu rozwiązań znajdziemy również rozszerzenia do przeglądarki – działające offline.
Obszar narzędzia najczęściej podzielony jest na cztery części – trzy edytory tekstowe (HTML, CSS i JavaScript) oraz podgląd rezultatów tworzonego kodu, aktualizowany w czasie rzeczywistym – programista od razu widzi skutki wprowadzanych zmian.
Bardziej zaawansowane aplikacje pozwalają także na tworzenie kodu z użyciem narzędzia rozszerzającego dany język – preprocesora. Standardową częścią narzędzia typu FECP jest również mechanizm pozwalający na wygodne dołączenie do projektu zewnętrznego zasobu CSS/JavaScript (biblioteki lub frameworka).
Do innych możliwości tych narzędzi możemy zaliczyć na przykład integrację z systemem kontroli wersji, dzięki czemu projekt możemy przenieść do repozytorium i śledzić zmiany, możliwość osadzenia narzędzia z projektem na innej stronie, a także eksport projektu (np. do pliku ZIP).
Wiele aplikacji typu FECP posiada wbudowane narzędzia, pozwalające na sprawdzanie poprawności tworzonego kodu, oraz wyświetlanie błędów w edytorze. Ciekawą cechą części tych narzędzi jest również publiczny katalog projektów, które stworzone zostały przez innych członków społeczności oraz związany z nim system ocen, w którym użytkownicy mogą wyróżniać projekty.
Jedną z zalet tego typu aplikacji – stanowiących przewagę nad tradycyjnym, desktopowym oprogramowaniem – jest możliwość łatwego i szybkiego udostępniania projektu innym użytkownikom, zazwyczaj za pomocą linku.
FECP czy edytor desktopowy?
Nie należy zapominać również o tym, że aplikacje działające w przeglądarce internetowej nie wymagają instalacji: są gotowe do użycia po przejściu na określoną stronę. Niektóre narzędzia udostępniają także tryb współpracy, w którym w tym samym czasie wiele osób może pracować nad tym samym projektem. Zmiany widoczne są dla pozostałych członków zespołu od razu po wprowadzeniu.
Przewagą oprogramowania instalowanego w systemie operacyjnym jest natomiast łatwiejsze zarządzanie projektem. Narzędzia typu FECP udostępniają trzy edytory, często będące jedynie namiastką trzech plików; część narzędzi umożliwia także użytkownikom korzystanie z symulowanego systemu plików, stwarzając namiastkę projektu. Oprogramowanie desktopowe na ogół ma także lepszą wydajność.
Desktopowe edytory programistyczne bardzo często dysponują także o wiele większą liczbą funkcjonalności, w porównaniu z rodzajem narzędzi będących przedmiotem tego artykułu.
Popularne Front-End Code Playground
Do najpopularniejszych narzędzi typu FECP należą m. in.: StackBlitz, CodePen, JS Bin oraz JSFiddle – warto zaznaczyć, że jest to rozwiązanie opracowane przez polskich deweloperów.
Programiści zajmujący się obszarem frontendu bez wątpienia powinni rozważyć możliwość zweryfikowania działania tych aplikacji w praktyce. Być może nie staną się one dla nich głównym narzędziem w pracy, jednak z pewnością mogą przydać się w innych sytuacjach. Przykładem może być chęć szybkiego przetestowania jakiegoś rozwiązania i podzielenia się nim ze współpracownikami – zastosowanie demonstracyjne.
Narzędzia typu FECP wydają się być również bardzo dobrym rozwiązaniem dla celów edukacyjnych (tworzenie kodu w czasie rzeczywistym, z jednoczesnym podglądem efektów).
Korzystasz z FECP? Jakie są twoje doświadczenia? Napisz nam o tym w komentarzu!