Slovenská náhrada za Angular.js, React.js a Vue.js

Mnohí z Vás sa chytia teraz za hlavu, že čo som to napísal. Ale nedá sa mi to inak konštatovať, totiž doma máme výbornú náhradu za existujúce a svetové client-side frameworky a knižnice. Píšem o slovenskej jComponent client-side knižnici, pomocou ktorej môžete vytvárať znovu-použiteľné UI komponenty a celé brutálne optimalizované under control single-page aplikácie.

Áno, nepodarilo sa mi s ňou masovo celosvetovo preraziť a dokonca veľa ľudí mi vraví, že je to one-man show, nič nie je na stackoverflow, malá komunita, bla bla bla bla. S tým sa ja stretávam denno-denne, ale ja si z toho nič nerobím a idem si tú svoju nôtu ďalej. Ako vravím celý život, dôležité sú výsledky a tie veru, tie veru sú. Nie že by sa jComponent vo svete nepoužíval, nižšie uvádzam mapu iba z dnešného použitia v rámci celého sveta:

jComponent knižnica

Knižnica vznikla v roku 2014 ako náhrada za Angular.js. Prečo? Totiž v tomto roku bola oznámená verzia Angular.js v2, ktorá absolútne zmenila všetko, čo niekedy mal Angular v1. Postupne sa aj komunita okolo Angularu začala rozpadať a vývojári ako ja, začali hľadať iné cesty. Ja som išiel svojou, pretože som vedel čo chcem, čo potrebujem a čo je cieľom. Podarilo sa. Po 5 rokoch môžem povedať, že moje rozhodnutie urobiť vlastnú client-side knižnicu bolo absolútne správne, knižnica je konečne stable a je nasadená vo vyše 100vke projektov (aj tento blog ju používa). V podstate som vytvoril už dávno vymyslené koleso, ale určite to stálo za to.

Prečo názov jComponent?

Trošku som sa oklamal pri výbere mena, pretože v roku 2016 (asi) som objavil, že niečo s názvom jComponent už používa niečo v Jave a práve kvôli tomuto si myslím, že jComponent nemá taký úspech ako by mal mať (joke).

jComponent knižnica je vlastne spojením slov jQuery + Component = jComponent. Teraz tvoja otázka: Prečo používaš jQuery, keď je to anti-pattern? Odpoveď je jednoduchá: anti-patterns proste fungujú. jQuery má brutálne vyriešenú spätnú kompatibilitu, eventy, animácie, tisíce pluginov (ani jeden nepoužívam) a aplikácie v jComponent mi dokážu bežať ešte aj na IE 9. Toto je dôvod, prečo používam jQuery. Tento rok som si ho mohol prepísať na niečo "vlastné", ale bolo by to zbytočné.

Čo knižnica ponúka?

Úplne všetko. JJ, úplne všetko. S jComponentom nepotrebuješ žiadne závislosti (iba vo výnimočných prípadoch). Celá knižnica má s knižnicou jQuery 84 kB (minifikovaná + gzip). Až? Čítaj nižšie a pochopíš, prečo až.

• Tvorba znovu-použiteľných komponentov
• Two-way data-binding s možnosťou pridať viacej watcherov na rôzne cesty
• Custom scrollbary
• Cacheovanie
• Podporuje verziovanie komponentov
• Podporuje komponenty alebo celé súčasti uložené na CDN
• Jednoduchý vývoj bez dodatočných nástrojov (stačí notepad)
• Práca s cookies
• HTML 5 History API (client-side routovanie)
• Tangular template engine, lepšia a rýchlejšia alternatíva k Mustache alebo Handlebars
• Array pomocné funkcie
• Date pomocné funkcie a formátovanie
• Number pomocné funkcie a formátovanie (napr. aj currencies)
• String pomocné funkcie a formátovanie
• AJAX operácie, hlavne pokročilé handy možnosti
• Validácie
• Ponúka kopec ďalších pomocných funkcií
• Persistent config, ktorý sa dá ukladať aj na serveri
• Čiastočne podporuje VDOM
• Environment variables (rozumej programátorsky definované konštanty pre SPA)
• Šikovné jQuery nadstavby
• Rieši aj lokalizácie v spolupráci s Total.js frameworkom na pozadí
• Dodržuje validnosť HTML kódu

Knižnica sama o sebe nie je len JavaScript, ale k tomuto pribaľujem aj CSS knižnicu (21 kB), ktorá obsahuje:

• Bootstrap Grid System (v3)
• Font-Awesome
• Custom scrollbary
• Pomocné CSS classy
• Dark-mode

Knižnice sú uložené na CDNku v KeyCDN, avšak knižnice si vieš stiahnúť a používať lokálne v projektoch.

Open-source UI komponenty

Samotná knižnica je ti s prepáčením na hovno, no čo robí jComponent brutálnou knižnicou, tak sú už hotové client-side UI komponenty, ktoré nájdeš na stránke: https://componentator.com. Práve v tomto čase je na stránke uvedených presne 171 komponentov. To je mega veľa a stále to nie je finálne číslo. Ešte sa pochválim, že asi 160 UI komponentov som urobil ja 😀. Väčšina komponentov je responzívna a veľa z nich podporuje dark-mode.

Brutálne UI komponenty

Áno, brutálne open-source UI komponenty. Komponenty je možné upraviť podľa vlastných alebo používať také, aké sú. Medzi komponentami nájdeš napríklad:

• DataGrid, ktorý dokáže vyrenderovať aj 100 000 riadkov a nebude pri scrollovaní mrznúť
• Flow design component
• Prvky do formulárov (inputs, dropdown, checkbox, atď.)
• TreeView
• ColorPicker
• Modal Windows
• DatePicker a TimePicker
• Menu
• Jednoduché grafy
• Atď.

Referencie

jComponent sa používa na rôzne druhy projektov, napríklad jComponent používajú intranetové systémy, rôzne SPA, web stránky, webový mailový klient, Messenger, CMSka, Eshopy, používa sa v IoT, vo finančnom sektore, či v hybridných mobilných aplikáciách. Dokonca máme vlastné online vývojové prostredie ako Visual Studio Code, ktoré používa jComponent knižnicu tiež. Je toho mega veľa. Nižšie uvedené obrázky sú z našich webových appiek (niektoré sú súčasťou Total.js OpenPlatform):

Zaujímavosti pri tvorbe SPA

Knižnica má v sebe niekoľko veľkých vychytávok, ktoré boli pridané na základe denno-denných používateľských skúseností.

Parsovanie JSONu

☝ Taká drobnosť, ale predsa podstatná vec. jComponent parsuje JSON tak, že dátum je parsovaný ako dátum. Ani ľudia v mojom tíme (okrem Denisa) si to neuvedomujú, ale je to veľmi podstatná vec.

Reálne zmeny a validácie

Formuláre sa za pomoci jComponentu a existujúcich komponentov tvoria veľmi pohodlne. jComponent sleduje 2x veci, aby zistil validnosť komponentu a následne celého formulára:

• bol obsah komponenty manuálne upravený užívateľom? Napr. zadal email?
• je komponenta validná? Napr. je email v správnom formáte?

Ak toto komponenta spĺňa, tak je validná. Komponent sa nevaliduje (nie je označený/zvýraznený ako nevalidný) pokiaľ užívateľ neurobí manuálne zásah (avšak komponent je na pozadí v stave nevalidný). Pre formuláre viete nastaviť aj defaultné hodnoty (až dvoma spôsobmi), ktoré vrátia formulár späť do pôvodoného stavu napr. až po odoslaní formulára.

Opakovanie AJAX requestov

Chuťovka, ktorá pomôže pri odosielaní formulárov opakovať request znova-a-znova, pokiaľ by Vám vypadol na chvíľu internet alebo server neodpovie nejakým HTTP statusom < 500 - tak jComponent bude tieto requesty opakovať. Táto funkčnosť sa odblokuje špeciálnym commandom REPEAT v URL addrese v AJAX() metóde.

Cacheovanie AJAX requestov

jComponent ponúka cacheovanie requestov priamo do localStorage alebo iba do danej session, nastavíte iba expiráciu a knižnica sa o všetko automaticky postará. S týmto idem ešte ďalej a knižnica podporuje metódu, ktorá pri requeste použije cache a následne urobí review response zo servera (je to kvôli tomu, aby Vám nepreblikával obsah, toto bolo implementované napr. do platobného systému k prehľadu posledných transakcií).

Pokročilá práca s requestami

Všetky AJAX requesty máte absolútne pod kontrolou, viete kontrolovať request ešte pred odoslaním a data viete modifikovať ešte pred vyvolaním callbacku. Zároveň knižnica podporuje aj CORS a ponúka prídavné AJAX commands CANCEL a SYNC:

• CANCEL v prípade, že voláš nejaký request viacej krát za sebou a predošlý request ešte nezbehol, tak tento command abortne predošlý request a ponechá nový. Príklad použitia: máš nejaký datagrid a užívateľ rýchlo kliká na riadky, pričom AJAXom doťahuje detailné data do nejakého detail panela
• SYNC command funguje tak, že keď voláš veľa requestov za sebou, tak vždy nový request čaká na ukončenie predchádzajúceho

CDN/Verziovanie/Extendovanie/Konfigurácia UI komponentov

CDN je jedna z TOP vecí, čo ponúka jComponent knižnica. Ihneď vieš použiť hociktorú komponentu z https://componentator.com bez toho, aby si si includol zdrojový kód (obsahuje JS + CSS). Keď jComponent nenájde komponentu v projekte, tak sa ju snaží importovať z CDN. Dokonca je možné prepísať hostname pre CDN na vlastnú doménu - slúži to ako napr. privátne CDN.

jComponent ponúka šikovné funkcie na verziovanie a extendovanie existujúcich komponentov. Napríklad vieš vyklonovať komponentu, dať jej inú verziu a explicitne nastaviť na celý projekt, že používaj iba túto verziu alebo priamo v HTML vieš definovať, akú verziu komponentu chceš použiť.

Rovnako extendovanie UI komponentov je veľmi jednoduché, vieš prepísať skoro akúkoľvek funkčnosť v existujúcej komponente bez toho, aby si modifikoval jej zdrojový kód. Jednoducho napíšeš EXTENSION a všetky inštancie komponenty to dedia.

Knižnica podporuje ešte globálne nastavenie UI komponentov. V prípade, že máš vytvorených 20 podstránok v nejakej SPA a každá z nich používa nejakú špecifickú komponentu a potrebuješ upraviť nastavenie nejakej špecifickej komponenty vo všetkých stránkach, tak jComponent ti ponúka možnosť zadať globálne nastavenie, ktoré bude aplikované na všetky inštancie danej komponenty na všetkých stránkach.

Parts

S jComponent si môžeš vytvoriť vlastné parts (rozumej: jednoduché-mini HTML stránky s viacerými komponentami), ktoré môžu obsahovať komponenty a nejakú logiku. Tieto parts si potom môžeš includovať do existujúcich formulárov. Pochopíš na na nižšie uvedenom príklade.

Príklad: Máš aplikáciu, ktorá má 20 formulárov, kde zadávajú ľudia adresu (ulica, PŠC, mesto, štát), avšak tebe stačí vytvoriť iba part s týmito prvkami a tento part iba includneš do každého formulára. Takže, každý formulár bude obsahovať tento part a zároveň, keď upravíš tento part, tak sa upraví vo všetkých formulároch automaticky.

Cacheovanie hodnôt

Toto je big vec, ktorú podporuje jComponent. Na určitý čas (minúty/hodiny/dni/mesiace/roky) si vieš zapamätať perzistentne hodnoty v premennách. Pri refreshi prehliadača sa tieto hodnoty vrátia späť do pôvodného stavu. Ukladané sú v localStorage.

Routing

Šikovný client-side routing je skoro základom každej našej webovej appky. Podporuje kopec funkcií a zároveň podporuje aj MIDDLEWARE pre routing:

ROUTE('/', function() {

    // HOMEPAGE

});

ROUTE('/products/', function() {

    // PRODUCTS

}, ['delay']);

ROUTE('/products/{id}/', function() {

    // PRODUCT DETAIL

}, ['delay']);

// Ukážka použitia jednoduché middleware
MIDDLEWARE('delay', function(next, options, roles) {
    setTimeout(next, 2000);
});

• Dokumentácia - jRoutingu

Tangular Template Engine

Tento template engine je podobný ako Mustache alebo Handlebars, avšak Tangular by mal byť rýchlejší a mal by podporovať viacej funkcií. Malá ukážka:

<script type="text/html" id="mytemplate">
    <h1>{{ title }}</h1>
    <p>{{ body }}</p>
</script>

<script>
    var template = Tangular.compile($('#mytemplate').html());
    console.log(template({ title: 'Hello world!', body: 'Are you happy?' });
</script>

• Dokumentácia - Tangular

BTW: Asi pred rokom a pol sa mi podarilo rýchlostne prekonať všetky existujúce template engines, totiž na GitHube som našiel repozitár, ktorý obsahoval všetky template engines a porovnával performance. Mne sa na mojom počítači podarilo vyhrať v rýchlosti renderovania.

Ako tvoríme SPA za pomoci jComponentu?

Za celé tie roky bolo mojou úlohou nájsť, ako vlastne tvoriť SPA - rýchlo, efektívne a kvalitne. Keďže technológia je jedna vec a design (fungovanie, nie vzhľad) applikácie je vec druhá. A práve na toto sa mi podarilo prísť až po 4 rokoch vývoja. Každú SPA aplikáciu vyrábame tak, že každá súčasť (rozumej podstránka alebo part s komponentami) je doťahovaná dynamicky a len vtedy, keď je potrebná. Ako náhle máte v SPA načítaných v pamäti viacej stránok, tak vďaka šikovným UI komponentom sa vedia nepotrebné / nepoužívané stránky z pamäti automaticky vymazať po tebou definovanom čase. Ak užívateľ navštívy opäť vymazanú stránku, tak stránka sa dynamicky stiahne, vyhodnotí a znova sa REFRESHNUTÁ zobrazí.

Takto sa nám podarilo urobiť to, že vytvárame kvalitné SPA aplikácie, v celku rýchlo a hlavne v dostatočnej kvalite. Všetky operácie máme pod svojou kontrolou a dodatočne vieme ovplyvňovať celkové fungovanie SPA. Naše aplikácie sú vždy plne lokalizovateľné do skoro všetkých svetových jazykov (rovnako aj formátovanie času, dátumu, čísiel a currencies) okrem arabského jazyka, nakoľko tento jazyk má zarovnanie písma: Right-To-Left (z prava do ľava).

Smerovanie

Smerovanie jComponent knižnice je hlavne udržať stabilnú knižnicu s veľmi dobrou spätnou kompatibilitou a komponentami. Tým, že prehliadače podporujú stále viac vecí a sú jednotnejšie, tak budeme aj my optimalizovať a zjednodušovať kód v knižnici. Osobne som veľmi spokojný s knižnicou, čo sa mne málo kedy stáva.

Kde začať?

• Dokumentácia
• Stiahnúť bezplatné UI komponenty
• Empty Total.js + jComponent project
• Empty Total.js + jComponent SPA
• jComponent tutoriál od Denis Granec

Learning curve je približne 3 mesiace.

Záver

Tento blog bol hlavne o tom čo jComponent knižnica podporuje. Predstavil som ti TOP funkčnosť a komponenty. Ak by si mal akékoľvek otázky, kľudne ma kontaktuj.