Deweloperka “w biegu”

Edytory online dla webdeveloperówDziś dotarło o mnie, że narzędzia które są dla mnie oczywistością, dla wielu są całkowicie nieznane. Myślę tu o genialnych, prostych wynalazkach do “przenośnej deweloperki”, które umożliwiają pracę nad kodem html, css, js czy jQuery w oknie przeglądarki, nawet z poziomu tabletu czy telefonu. Zdalne edytory, które pozwalają zapisać efekt pracy i podzielić się nim z innymi lub zabunkrować go po cichu na własny użytek.

Cała koncepcja jest genialna, wykonanie i prostota która towarzyszy tym narzędziom również ujmuje.A jednak nie wszyscy są świadomi istnienia narzędzi takich jak Fiddle.js , CodePen, CodeAnywhere, CodeplyJsBin odmieniły sposób w jaki developerzy porozumiewają się ze sobą oraz światem ludzi mniej zorientowanych. Dziś napiszę o tym parę słów, niosąc przy tym kaganek oświaty 🙂

JsFiddle / Fiddle.js

Pierwszy z edytorów, który poznałem – i kto wie czy nie najstarszy spośród opisywanych przeze mnie .

Pomysł stworzenia narzędzia społecznościowego dla webdeveloperów jest tak samo zaskakujący co genialny a JsFiddle stał się na tyle popularny, że można coraz częściej trafić w rozmaitych serwisach na przyciski prowadzące do źródeł opublikowanych na JsFiddle.

Jest okno dla edytora HTML, CSS, Javascript i okno z rezultatem generowanym przez nasz kod.
Można modyfikować interpretery dla okien CSS czy skryptów – i tak możemy używać procesora skryptów Babel , CofeeScript, js 1.7  oraz CSS / SCSS

Od strony funkcjonalnej, mamy opcję formatowania źródła, kolorowania źródła zgodnie ze standardami i walidację kodu.

Co do bibilotek z których możemy skorzystać, można znaleźć po kilka ostatnich wersji bibliotek :  YUI, jQuery, Mootools, Dojo, AngularJS, FabricJS i wiele innych, o których szczerze mówiąc nawet nie słyszałem.
Można też oczywiście podpiąć zdalne biblioteki używając stosownego URLa.

Wszystko działa świetnie, choć w porównaniu z konkurencją brakuje opcji pracy “real time”.
Nie ma jednak co ukrywać, że nie zawsze taka opcja ma sens, więc nie będziemy się czepiać.
Brakuje za to na pewno mozliwości podpięcia frameworków takich jak Bootstrap, Skeleton czy Foundation. Wówczas, narzędzie znacząco by zyskało na funkcjonalności.

jsFiddle

CodePen.io

Pozornie prosty i mroczny edytor (ciemne tło nadaje mu mrocznego charakteru 🙂
Warto uniknąć pomyłki z projektem CMS-a, który ma podobną nazwę, ale nie wiele wspólnego z omawianym tu edytorem.

Na pierwszy rzut oka jest skromny, ale posiada zaskakująco bogatą funkcjonalność.

Każde z pól edytora konfigurujemy osobno – głównie pod kątem używanego interpretera i bibliotek zewnętrznych.

CODEPEN

Bez względu czy pragniemy popracować z Bootstrapem, czy bardziej wyszukanymi frameworkami zwiększającymi możliwości interakcji naszego kodu, CodePen bez problemu udostępnia wygodny poligon doświadczalny. Wśród bibliotek JS, znajdziemy oczywiście jQuery, Angular.js, Handlebars, Polymer i wiele innych.

Wyróżniają go własne skróty klawiszowe – w tym bardzo użyteczne do łatwej inkrementacji wartości liczbowych w kodzie czy operacji na całych blokach kodu (komentowanie, domykanie struktur itp.)

Opis skrótów sugeruje, że autorzy adresują swój produkt głównie dla użytkowników systemu OSX (z uwagi na opis klawiszy) – co nie umniejsza jednak w żaden sposób jego funkcjonalności również na komputerach z Windowsem.

Jest wersja PRO, z opcją równoległej pracy grupowej i możliwością ładowania własnych plików składowych. Cena nie jest straszna – (od 9 usd miesięcznie) i znajduje całkiem sporo chętnych.

JsBin

JsBin nie wyróżnia się niczym, czego nie znalazłbym w innych edytorach online’owych. Ma nieco prostszy layout i wyraźnie mniej ergonomiczny interfejs – ale funkcjonalnie trudno odmówić mu poręczności.

jsbin

Pewną, unikalną cechą może być możliwość składowania naszego kodu na Dropboxie czy GitHubie.

Jest też oczywiście wersja PRO, dla wymagających większej funkcjonalności. Ceny jednak są dość drakońskie – zwłaszcza porównując z ostatnim z opisywanych edytorów: Code Anywhere .

Nie zmienia to jednak faktu, że wersja darmowa też przedstawia całkiem sporą wartość użytkową.

CodeAnywhere

CodeAnywhere to zdecydowanie najpotężniejsze narzędzie ze wspomnianych tutaj.

Nie mówimy tu o prostym edytorze będącym pomocą w zabawach z kodem, ale o pełnoprawnym środowisku IDE.

Wymaga założenia konta – ale nie powinno to dziwić, biorąc pod uwagę jakie funkcjonalności oferuje.
Można powiedzieć, że jest narzędziem porównywalnym z desktopowym Aptana Studio – przynajmniej w zakresie zadań webdeveloperskich (pracy z językami skryptowymi).

Jest tu nie tylko duże repozytorium frameworków, ale też konsola SSH, klient ftp z możliwością integracji z wieloma, popularnymi usługami “cloud”.

Nie jestem do końca przekonany do przechowywania zdalnie tak wrażliwych danych jak informacje umożliwiające logowanie przez SSH do serwerów www – nawet jeśli jest to dobrze zabezpieczone. Może to moja paranoja, a może kwestia zdrowego rozsądku – ale nie zmienia to faktu, że CodeAnywhere wprowadza zupełnie nową jakość w oprogramowaniu dostępnym przez przeglądarkę.

Code Anywhere

Ma świetnie zorganizowany edytor wprowadzający możliwość wykonywania kodu w czasie rzeczywistym, oraz wersjonowanie kodu.

Oczywiście, jak przystało na tak rozbudowane narzędzie, najlepsze funkcjonalności są płatne.
Zarówno dodatkowe bezpieczeństwo jak i obsługa wielu serwerów zewnętrznych, wparcie czy zasoby udostępniane w przestrzeni CodeAnywhere – wszystko to podzielone jest na zgrabne pakiety. Co ciekawe – najtańszy pakiet jest też chyba najtańszą opcją spośród wspomnianych tu, komercyjnych licencji. (od 7 usd miesięcznie)

Takie czasy. Czasy SAAS…

To wszystko ?

Zapewnie nie.

Te, o których napisałem znalazłem wcześniej lub trafiłem na nie szukając głównie narzędzi do ułatwienia studentom eksperymenów z frameworkami do budowy reponsywnych layoutów www. Szybko przekonałem się, że nisza na rynku szybko się zapełnia i z pewnością tego typu narzędzi będzie nam jeszcze przybywać.  Moc HTML5 sprawia, że aplikacje webowe nabierają rozpędu i zmierza to w bardzo ciekawym kierunku.

Na codzień pracuję z Aptana Studio 3 lub Dreamwaverem. Kiedy nie mam nic innego pod ręką  Notepad++ na Windowsie też jest zabawną opcją. Jednak CodePen – w wersji darmowej jest dla mnie świetną alternatywą i zaczynam się do niej przyzwyczajać.

Cieszę się, że obecnie, można swobodnie uprawiać deweloperkę, nie mając praktycznie żadnego narzędzia zainstalowanego lokalnie na urządzeniu, dysponując wyłącznie przeglądarką i dostępem do internetu.

Jeśli ktoś jeszcze zna inne, nie wymienione tu edytory godne uwagi – będę wdzięczny za dopisanie z pożytkiem dla wszystkich, rozmiłowanych w grzebaniu z kodem 🙂 .

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *