1. diel - Úvod do frameworku Simplex.js

Vitajte v rýchlokurzu javascriptového frameworku Simplex.js, učenie tohto frameworku totiž ani inak ako rýchlo nejde A predsa využíva tých najmodernejších jazykových konštrukcií, ktoré priniesol štandard ECMAScript 6, je plne objektovo orientovaný a zníži náklady na vývoj vášho webového projektu na minimum. Framework bol navrhnutý a je vyvíjaný ITnetwork.cz, kde obstaráva všetku front-end funkcionalitu. Myslíte, že sa jedná o "ďalšie najlepší JS framework"? V dnešnej lekcii si vysvetlíme v čom je iný a prečo vášmu projektu ušetrí veľa peňazí, bez ohľadu na to ako je veľký.

Tento kurz predpokladá znalosť aspoň základov JavaScriptu a základov objektovo orientovaného programovania v JS.

Prečo framework?

V HTML a CSS chýba veľa dôležitých komponentov, ktoré na weboch denne potrebujeme. Sú to rôzne slidery, našeptávača, grafy, záložky - už len slávna hláška o cookies Európskej únie, ktorá musí byť prakticky na každej webovej stránke, vyžaduje JavaScript.

JavaScript ako taký ale tieto sic úplne základné komponenty neobsahuje, iba je umožňuje vytvoriť. Dáva teda zmysel využiť nejaký framework, ktorý komponenty rovno prinesie hotové alebo výrazne uľahčí ich tvorbu. Nikto nechceme vynájsť znovu koleso.

Prečo nie jQuery, Angular, React ...?

V minulosti sa hojne používala knižnica jQuery, ktorá sa preslávila implementáciou CSS selektorov do JavaScriptu (od toho query). Avšak po príchode metódy querySelector() priamo do JS štandardu v roku 2013 as príchodom novej syntaxe a možností objektovo orientovaného programovania do JS v roku 2015 začala byť veľmi zastaraná.

Robustnejšie riešenie ako sú populárne frameworky Angular alebo React však tiež nemusí byť pre bežné webové stránky ideálne. Keď vynecháme ich komplexnosť (Angular) alebo naopak nutnosť kombinovať ich pomaly s desiatimi ďalšími neustále sa meniacimi technológiami (React), je najväčší problém, že vyžadujú špecializované programátorov. A už len programátorov, ktorí vedia aspoň čistý JS, je zúfalo málo a veľké spoločnosti vám je ešte přeplácejí. Ak máte malý projekt (start up) v robustnom frameworku, môže vám čoskoro začať tiecť do topánok, až váš programátor prestane stíhať.

Naopak Simplex.js je tak jednoduchý, že sa ho aj priemerný programátor naučia používať za jedno popoludnie. A veľké projekty? Aj pre tých je Simplex.js ideálne riešenie, kódu majú totiž veľa a určite nechceme, aby závisel na zbesilo vyvíjaných veľkých JS frameworkoch (napr. Prechod z Angular 1 na Angular 2 vtedy oslabil veľa projektov, pretože sa framework úplne zmenil a bolo treba kompletne prepísať).

Simplex.js

Simplex.js je tzv. Microframework. To znamená, že využíva minimalistická riešenie, zakladá si na krátkom zdrojovom kóde a využívanie najmodernejších vychytávok, ktoré boli do webových štandardov pridané za posledné roky. Simplex.js sa nesnaží priniesť "najviac cool trendy riešenie", ale maximálne stavať na funkcionalite moderných webových štandardov, ktoré sú trvanlivé, nemenné, a poskytujú stále viac a viac funkcií. Vďaka tomu môže aj s minimom kódu súperiť s robustnými korporátnymi frameworky, ktoré boli vytvorené v čase, keď veľa funkcionality v štandardoch ešte neexistovala, alebo bola radšej implementovaná znova, aby napr. Získala elegantnejší syntax.

Komponentová architektúra

Všetka funkcionalitu je v simplex obsiahnutá v komponentoch a rovno sa počíta s tým, že jedna komponenta môže byť na jednej stránke niekoľkokrát (napr. Dva slidery na titulnej stránke). Komponenty sa automaticky vygenerujú na základe pripravenej HTML šablóny a sú od seba navzájom odtienené. Simplex niektoré veci zámerne neumožňuje, napr. Pristupovať k HTML kódu stránky mimo danú komponent, čím zabraňuje zlému návrhu typickému pre globálne jQuery selektory, kedy vo zložitejšie aplikácii už programátor ani nevedel, ktorá časť stránky je čím upravovaná.

Moderný návrh

Veľkým neduhom jQuery boli napr. Funkcie vo funkciách, ktoré boli zas vo funkciách. V Simplex.js máme lambda funkcie v metódach tried. Štruktúra kódu je tak samopopisující. Ďalšou výhodou je dodržiavanie kontexte kľúčového slova this v obsluhe udalostí a zároveň možnosť vytiahnuť si ľahko zdrojový alebo cieľový element udalosti cez parameter. Jednotlivé komponenty, reprezentovanej triedami, od seba môžu dediť (napr. Carousel dedí z TabControl).

Šablóny a binding

Po vzore trojvrstvových frameworkov (ako je napr. Angular), Simplex umožňuje jednoducho bindovat premenné objektov priamo na elementy alebo formulárové polia. To šetrí čas a znižuje riziko zanesenia chyby do kódu. Táto funkčnosť je zatiaľ experimentálne.

Začíname

Aby sme mohli používať náš framework, musíme si ho najskôr stiahnuť. Súbor s kompletným frameworkom bude dostupný v poslednom dieli tohto rýchlokurzu. Obsah archívu rozbalíme do zložky, v ktorej ho chceme začať používať, napr na plochu:

Vysvetlenie obsahu podpriečinkov:

• Controls/ - zložka obsahuje jednotlivé komponenty,
• Framework/ - zložka obsahuje samotný framework,
• photos/ - zložka s obrázkami pre ukážku použitie (index.html),
• Styles/ - zložka obsahuje CSS súbory.

Ukážka použitia

V koreňovom priečinku nájdeme jednoduchú html stránku s názvom index.html. Je tu ukázané použitie komponentov Carousel a TabControl:

Poďme sa pozrieť ako všetko funguje. Otvorte si zdrojový kód stránky. Na konci stránky pred ukončujúcom elementom </html> nájdeme okrem iného nasledujúci kód:

<script src="Framework/Sjs.js"></script>
<script src="Framework/SimplexSelection.js"></script>
<script src="Framework/SimplexControl.js"></script>

Vysvetlenie kódu:

• Framework/Sjs.js - trieda starajúci sa o automatické načítanie a registráciu komponentov,
• Framework/SimplexControl.js - rodičovská trieda pre všetky komponenty,
• Framework/SimplexSelection.js - trieda pre výber elementov.

Ďalej tu vidíme registrovanie jednotlivých komponentov, čím sa na stránke spracujú, ak tu sú vložené:

<script>
    Sjs.initialize();
    Sjs.register('TabControl');
    Sjs.register('Carousel');
</script>

O inicializácii triedy objektu Sjs sa stará volanie metódy initialize(). Následne sa vykoná registrácia komponenty, ktorú chceme na stránke využívať, konkrétne zavolaním metódy register(). Komponentmi rozumieme také "prvky", ktoré nám poskytuje obsah priečinka Controls, teda napr. TabControl, Carousel pod.

V túto chvíľu sme si vysvetlili kľúčové kroky pre použitie frameworku, vysvetlili sme si obsah zložiek a pripojenie JS súborov vrátane inicializácia a registrácia komponentov.

Nabudúce, v lekcii Opis vstavaných komponentov Simplex.js , si ukážeme ako pracujeme s komponentmi na príklade hojne využívané komponenty Carousel. Následne si popíšeme aj ďalšie vstavané komponenty frameworku.