Przegląd 5 edytorów online dla JavaScriptu

Głównym środowiskiem uruchomieniowym dla JavaScriptu jest przeglądarka internetowa. Samo kodowanie może odbywać się przykładowo poprzez konsolę Firebuga, więc nic nie stoi na przeszkodzie, aby stworzyć swój własny edytor online, który będzie umożliwiał podświetlanie, uruchomienie oraz testowanie kodu JavaScript bezpośrednio na stronie internetowej. Oto przegląd moim zdaniem najciekawszych narzędzi tego typu.




jsFiddle


Moim zdaniem najlepszy edytor online do JavaScriptu/HTML/CSS. Mamy możliwość zimportowania frameworku (jQuery, MooTools itd.), zewnętrznych plików CSS/JS, istnieje dostęp do serwera echo w celu testowania żądań AJAX, dostęp do przykładów.
Walidacja JavaScriptu odbywa się poprzez JSLint.
Całość uzupełnia możliwość zapisywania plików oraz dostęp do jego poszczególnych wersji.

Plusy:
  • prosty, czytelny interfejs
  • import frameworku
  • import zewnętrzych plików
  • dostęp do serwera echo
  • przykłady
  • osobne okna edycji HTML/CSS/JS
  • podgląd na tej samej stronie
  • walidacja JS

Minusy:
  • brak dostępu do całego HTML'a wyświetlanego w podglądzie (tylko do <body>)
  • na mniejszych rozdzielczościach niektóre rzeczy z lewego menu mogą być niewidoczne
  • jak na zaintegrowany edytor JS/HTML/CSS zdecydowanie brak, jeśli chodzi o sam JS trochę brakuje śledzenia kodu, ale zawsze to można nadrobić Firebugiem


JS Bin


Jeden z pierwszych pełnych online-owych edytorów do JavaScriptu przygotowany przez Remy'ego Sharpa. Umożliwia osobno edycję kodu HTML oraz JavaScriptu. Dodatkowym plusem jest możliwość zapisania dokumentu oraz jego kolejnych wersji. Prosty interfejs - pogląd przygotowanego programu jest wyświetlany na osobnym ekranie (który zasłania pola edycji). Podobnie jak w jsFiddle istnieje możliwość zaimportowania frameworku. Import plików zewnętrznych można zdefiniować bezpośrednio w HTML, ponieważ dostajemy pełny dostęp do HTML (w przypadku jsFiddle tylko do tego co jest w <body>).

Plusy:
  • prosty, czytelny interfejs
  • import frameworku
  • pełny dostęp do HTML
  • osobne okna edycji HTML/JS
  • ciekawie zrobiona walidacja kodu
Minusy:
  • podgląd w osobnym oknie
  • podobnie jak w przypadku jsFiddle - jeżeli komuś potrzeba większej kontroli nad JS to trzeba korzystać z Firebuga


TIDE 2.0 beta


Bardzo ciekawe narzędzie do debugowania JavaScriptu. Mamy możliwość śledzenia wartości zmiennych oraz stosu wywołań, uruchamiania kodu krokowo itp. Do okienka output wypisujemy metodą message. Nie ma możliwości edycji HTML czy CSS.
Dodatkowo dostajemy niezłą kolekcję przykładów w JavaScripcie, która pozwala bezboleśnie zapoznać się z aplikacją.
Minusem jest konieczność edycji kodu JS w wyskakującym okienku, a nie bezpośrednio.

Plusy:
  • zaawansowane metody debugowania JavaScriptu
  • duża ilość ciekawych przykładów
  • czytelny interfejs zbudowany na bazie ExtJS
Minusy:
  • brak możliwości edycji kodu bez wyświetlania okienka
  • jako narzędzie przeznaczone tylko do JS nie ma możliwości działania w HTML/CSS
  • brak możliwości zapisu, co może być niebezpieczne, jeżeli przez przypadek wciśniemy np. wstecz


Google Code Playground


Narzędzie dostarczone przez Google jest powiązane głównie z API tej korporacji. Z tego tytułu znajdziemy tam potężną ilość przykładów związanych właśnie z tymi usługami. Oprócz tego wyszukiwarkowy gigant przygotował także katalog z samym JavaScriptem oraz z zastosowaniem popularnych frameworków (oczywiście tych umieszczonych w Google CDN). W ten sposób możemy wykorzystać to narzędzie do kodowania naszej aplikacji, które jest oparte na naszym (i tylko naszym) kodzie JS.
System debugowania opiera się na narzędziu Firebug Lite, który jest dołączany do okienka z wynikiem (output).

Plusy:
  • potężny zestaw przykładów JS
  • integracja z Firebug Lite
  • możliwość edycji HTML
  • możliwość zapisywania swojego kodu
Minusy:
  • jedno okno do JavaScript/HTML - ich przełączanie powoduje brak możliwości zapisania kodu
  • mała czytelność interfejsu (w porównaniu do pozostałych narzędzi)
  • import frameworków poprzez samodzielne grzebanie w kodzie JS


jsdo.it


W przypadku jsdo.it mamy nieco inne podejście do użytkownika - konieczne jest m.in. utworzenie konta (można się logować wykorzystując konta Google, Facebook, Twitter, OpenID). Jednak dzięki temu dostajemy osobną, ładną stronę do naszego projektu, gdzie istnieją statystyki odwiedzin, łatwo można dokonać forka, pobrać kod (przypomina z wyglądu to trochę githuba tylko, że dla JS z możliwością uruchomienia kodu). Dodatkowo dostajemy specjalny widżet do umieszczenia na stronie z naszym kodem lub podglądem działania.

Plusy:
  • specjalna strona projektu umożliwiająca pobranie, forkowanie i podgląd
  • dostępny widżet wyświetlający kod lub działający skrypt
  • podział edytorów na HTML/CSS/JS
  • możliwość zaimportowania popularnych frameworków
  • ukierunkowany na tworzenie społeczności (fork, komentarze, ulubione, rankingi popularności)
 Minusy:
  • stosunkowo mało intuicyjny interfejs graficzny
  • brak bezpośredniego dostępu do HTML
  • walidacja kodu oparte na JSlint'cie - wyświetlane w konsoli w prawym dolnym rogu
  • konieczność logowania, ale dzięki temu większa funkcjonalność


    Poza konkursem startuje jeszcze narzędzie jsconsole, które pozwala uruchamiać zdalnie kod JavaScript (oczywiście po uprzednim zezwoleniu). Przykłady zastosowania pokazują, że może to być pomocne w tworzeniu aplikacji na urządzenia mobilne, gdzie dostęp do narzędzi deweloperskich jest szczególnie utrudniony. Natomiast oprócz dostępu do samej konsoli nie mamy tutaj większych możliwości tworzenia kodu programu (podświetlanie czy inne pomocne rzeczy).

    Podsumowując uważam, że najlepszym obecnie narzędziem do szybkiego kodowania stron jest jsFiddle - łatwy, szybki, bezbolesny. Ciekawą alternatywą jest jsdo.it, który pozwala nam się podpisać pod swoim kodem i jednocześnie umożliwia szybki dostęp do podglądu naszego dzieła. Pozostałe narzędzia posiadają swoje unikalne cechy, ale z reguły brakuje im przejrzystości lub możliwości wcześniej wspomnianych aplikacji.

    Prześlij dalej:

    3 komentarze:

    MichalBe pisze...

    Czemu 'walidacja JSLint' to minus a nie plus rozwiązania?

    Michał Biniek pisze...

    Chodzi o sposób prezentacji wyniku - jako wynik z JSLint gdzieś w prawym dolnym rogu. jsFiddle ma to zdecydowanie ładniej/czytelniej zrobione.

    Krzychu Kula pisze...

    Sporo pracowałem z jsdo.it (wcześniej był czarny edytor). I to nie prawda że nie masz dostępu do HTML! Edytor rozpoznaje czy użyłeś Doctype na początku htmla i wtedy używa w całości wprowadzonego htmla.
    Co do jsFiddle to w chrome po kilku minutach zjada mi 100% procesora więc to nie jest coś czego mógł bym używać.
    Co do jsdo.it wprowadzili oni Edytor ACE, jak np. cloud9ide i w edytorze html jest nawet podpowiadanie znaczników. Co do jsLinta w dolnym rogu to jest jest to dla mnie o wiele przyjemniejsze niż to z jsFiddle.

    Prześlij komentarz