Kiedy dowiedziałam się, że przez jakiś czas będę pracować przy projekcie napisanym w Ext JS, nie miałam w związku z tym szczególnie silnych emocji. Powody ku temu były raczej prozaiczne: nie wiedziałam, co to jest Ext JS. I szybko okazało się, że pochodzi z trochę innej biznesowej rzeczywistości niż popularne React czy Angular.

Co to jest Ext JS?

Ext JS to komercyjny framework dla języka JavaScript, którego celem jest dostarczenie dużej liczby gotowych komponentów do szybkiego budowania gotowych interfejsów. Zasadniczo - jest to framework, który pisze HTML za nas, my tylko piszemy extowe komponenty.

"W ofercie" Ext JS ma przede wszystkim tabele, panele, drzewa folderów, formularze, listy wyboru, przyciski, paski, menu i kalendarze. Czyli elementy często widywane w komercyjnych aplikacjach. Wszystko ma bardzo charakterystyczny wygląd i może być w pewnym zakresie modyfikowane z użyciem CSS, co jednak bywa uciążliwe.

Ext JS powstał w 2007 roku jako rozszerzenie YUI. W 2017 roku został wykupiony przez IDERA i znaczna część jej załogi przestała wówczas pracować nad frameworkim. Jest to technologia wiekowa i rozwijana głównie z pobudek komercyjnych, co widać.

Historia Ext JS

W 2005 roku internetowy świat wyglądał zgoła inaczej niż obecnie. Single Page Application dopiero zaczęło się rodzić, a jedyną poważną alternatywą dla Internet Explorera był Firefox. Programiści nie mieli dostępu do przeglądarkowych narzędzi i konsoli. Wielką technologiczną rewolucją była wersja beta Google Maps, korzystająca z asynchroniczności.

W takiej rzeczywistości narodziło się YUI (Yahoo! User Interface Library). Poza innymi możliwościami, oferowało dużą bibliotekę gotowych komponentów, które na jakiś czas zdominowały internetowy krajobraz.

Mimo ogromnej popularności, pierwsze iteracje YUI nie były najlepiej przemyślane i tworzenie rozbudowanych interfejsów wymagało dodatkowych bibliotek, na czele z Flexem. Odpowiedzią na ten problem był YUI-ext, będący wynikiem eksperymentów Jacka Slockuma z biblioteką Yahoo! Również w tym okresie powstała rozbudowana dokumentacja, napisana w samym YUI-ext.

W 2007 YUI-ext zostało przemianowane na Ext i pod tą nazwą została wypuszczona oficjalna wersja 1.0 frameworka. Ext JS został skomercjalizowany w wersji 2.0.2, co osłabiło skupioną wokół niego społeczność.

Po wypuszczeniu wersji 3.0, została stworzona Sencha, firma która od tamtej pory opiekuje się frameworkiem. Sam Jack Slockum wycofał się nieco z rozwoju swojego "dziecka". Nowa wersja 4.0 wprowadziła do frameworku wiele rewolucyjnych zmian, w tym wzorzec projektowy MVC.

Ext JS 4.0 miał poważne problemy, działał wolno i przez wiele miesięcy kłopoty te nie zostały usunięte. Wtedy rozpoczął się powolny upadek tej technologii, przyspieszony pojawieniem się Angulara, do którego programiści uciekali, by już nigdy nie wrócić.

Ext JS 5.0 przyniósł kolejne zmiany. Technologicznie nie były one szczególnie duże, poza zmianą zalecanego wzorca na MVVM, natomiast naprawdę poważna modyfikacja dotyczyła licencji. Wariant pojedynczy wycofano na rzecz licencji dla minimum 5 programistów, której cena do dziś znacząco przekracza możliwości freelancerów i mikroprzedsiębiorców.

Tymczasem rosła atrakcyjność konkurentów. Kendo UI, Ionic i przede wszystkim React JS podbijały serca programistów, zawiedzionych obranym przez Senchę kursem. Dziś React JS ma dużą, żywą i aktywną społeczność, zupełnie jak Ext JS w swoich wczesnych latach.

Ten ciąg wydarzeń poskutkował sprzedażą Senchy dla IDERA. Dzisiaj społeczność wokół Ext JS jest niewielka, a zasoby internetu na temat nowych wersji frameworka niezbyt bogate, ale firma wciąż istnieje i (prawdopodobnie) zarabia.

MVVM

Od wersji 5, Ext JS zakłada tworzenie kodu zgodnie ze wzorcem MVVM (Model-View-ViewModel).

MVVM jest młodszym wzorcem od popularnego MVC i powstał z myślą o aplikacjach klienckich z graficznym interfejsem. Został opracowany na potrzeby Microsoftu. Odpowiada na konkretne problemy technologii tej firmy, przede wszystkim Silverlighta, czyli brak separacji warstw, podział na XAML i code-behind oraz trudność tworzenia złożonych interfejsów.

Wprowadzony zamiast kontrolera viewmodel zawiera dane, powiązane poprzez data binding z widokiem, tak że zmiana danych w viewmodelu powoduje automatyczne odświeżenie widoku. W viewmodelu znajduje się referencja do modelu i mechanizm obsługi interfejsu.

Model przechowuje przetworzone przez viewmodel dane, zbindowane z widokiem, nie zawiera logiki biznesowej ani elementów GUI.

Najwięcej odpowiedzialności spoczywa na widoku. Tam tworzona jest warstwa wizualna, obsługiwane interakcje użytkownika, wybierany kontekst danych, w widoku także ustawia się pola zdefiniowane w modelu.

Jak się pisze w Ext JS?

Po pierwszym szoku kulturowym, praca w Ext JS staje się stosunkowo przyjemna.

Jest to specyficzny framework, który oferuje ogromną liczbę gotowych komponentów. Można odnieść wrażenie, że potrafi odpowiedzieć na każdą potrzebę, ale często w mocno pokrętny sposób. Posiada sporo core'owych funkcji JS, które nadpisuje i nadaje im wsteczną kompatybilność oraz tajemnicze opcje konfiguracji.

W pierwszym kontakcie, dokumentacja Ext JS sprawia imponujące wrażenie. W drugim zaczyna lekko irytować, bo jest wybrakowana i momentami wprowadza w błąd. W trzeciej po prostu przeglądamy zawarty w niej kod źródłowy i tam mieści się odpowiedź na większość problemów, przy czym kod ten niekoniecznie powinien służyć za wzór pisania JavaScript w 2020.

Poza tym, Ext JS oferuje Kitchen Sink, czyli dema niektórych funkcjonalności i wtyczek wraz z kodem źródłowym.

Nauka Ext JS jest stosunkowo długotrwała i przy tym jak w dzisiejszych czasach kształtuje się rynek, zwyczajnie nieopłacalna. Dodatkowo doświadczenia nabyte z tym frameworkiem nie przekładają się na bardziej nowoczesne technologie.

Wady Ext JS

Dlaczego Ext JS jest zły?

Największym problemem frameworka jest tworzenie skomplikowanego drzewa DOM.

Ext JS został wymyślony jako biblioteka gotowych elementów do łatwego budowania z nich interfejsów użytkownika. Komponenty można zagnieżdżać niemal w nieskończoność. Same w sobie nie mają prostego HTMLa, ale są obudowane w dużą liczbę znaczników.

Jakakolwiek bardziej rozbudowana tabela zamienia drzewo DOM napisanej w Ext JS strony w węzeł gordyjski divów. Bardzo ciężko pisze się przez to autorskie CSSy. Dodatkowo, jeżeli zbudujemy coś naprawdę dużego z użyciem Ext JS, to czas ładowania takiego wielokrotnie zagnieżdżonego DOMu może być problemem.

Drugą wadą jest trudność łączenia Ext JS z innym frameworkiem i trudność migracji. W świecie, gdzie wiele aplikacji to hybrydy starszych i nowszych technologii, kto raz zdecydował się na Exta, musi pozostać z Extem. W przypadku chęci przepisania aplikacji z Ext JS na Reacta, w zasadzie starą wersję aplikacji można wyrzucić do kosza.

Chęć do nadpisywania gotowych już funkcji JS jest widoczna także w sposobie, jaki napisano sam framework i w narzędziach, których on wymaga. Rodzi to szereg problemów. Używanie bardzo przydatnej funkcji "use strict" jest właściwie niemożliwe. Ext posiada też: własny sposób definiowania klas, własny sposób tworzenia klas, własny silnik minifikacji, własny require...

Żeby zbudować aplikację w Ext JS, potrzebujemy dedykowanych narzędzi. Nie możemy użyć powszechnie stosowanego Gulpa. Również pisanie testów wymaga korzystania z własnego środowiska dedykowanego dla Exta, które dalekie jest od doskonałości.

Dawna społeczność skupiona wokół frameworku rozpadła się po wprowadzeniu nowego modelu licencji, który był zbyt drogi dla indywidualnych programistów. W 2021 roku generalnie pomysł płatnego frameworku nie broni się już poza środowiskiem biznesowym. Nikt nie postanowi zbudować nowego, przełomowego "projektu na boku" z użyciem Exta JS przy liczbie i jakości dostępnych za darmo rozwiązań.

Zalety Ext JS

Dlaczego Ext JS jest dobry?

Na dzień dzisiejszy to rozwiązanie raczej niszowe, ale ciągle może okazać się interesujące w przypadku komercyjnych projektów, które wymagają przewidywalności oraz stabilności.

Ext JS zawiera w sobie wszystko, czego potrzeba do stworzenia złożonej z typowych elementów aplikacji o jednolitym, profesjonalnym wyglądzie.

Jeżeli w danym projekcie unikalna identyfikacja wizualna nie jest szczególnie istotna i jego potrzeby spełnia ograniczona możliwość konfiguracji Exta, to tak naprawdę nie trzeba się martwić o nic poza złożeniem systemu z gotowych elementów. Jednak jeśli dany projekt ma przygotowany specyficzny design, łatwiejsze może być zdecydowanie się na inną technologię niż próby dopasowania gotowych komponentów do własnych potrzeb.

Dużym plusem Ext JS w niektórym przypadku może być wsteczna kompatybilność. Framework obsługuje nawet bardzo stare przeglądarki, oferując jednolity wygląd na wszystkich platformach. Ext JS nie jest przy tym brzydki i doskonale wspiera responsywny design oraz spełnia podstawowe wymagania dostępności dla osób niepełnosprawnych.

Dodatkowo Sencha oferuje dla Ext JS support, co może wydawać się w biznesowym środowisku szczególnie atrakcyjne. Programiści raczej nie są przyzwyczajeni do dzwonienia po wsparcie, kiedy natrafiają na jakieś problemy ze swoim kodem, więc pragmatyczność takiego rozwiązania można kwestionować. Niemniej istnieje i jest na tyle unikalnym rozwiązaniem, że warto wziąć ten czynnik od uwagę.

Mam relatywnie długą historię pracy z legacy code i pewnie byłam skazana na spotkanie się z Ext JS raczej wcześniej niż później. Nie jestem przekonana, czy programiści skłaniający się ku projektom w najnowszych technologiach kiedykolwiek się na niego natkną. Teoretycznie dla niektórych organizacji, framework ten wciąż może okazać się interesującym wyborem. Jeżeli pracowałeś z produktem Senchy, koniecznie zostaw komentarz z opisem swoich przeżyć!

>>> Prezentacja o Sencha <<<

>>> Sencha Kitchen Sink <<<

>>> MVC i MVVM w Ext JS <<<

>>> Historia Ext JS <<<

>>> Wady i zalety Ext JS <<<

>>> Wprowadzenie do wzorca MVVM <<<

>>> Wady i zalety MVVVM <<<