Lekce 1 - Úvod do frameworku Simplex.js

Vítejte v rychlokurzu javascriptového frameworku Simplex.js, učení tohoto frameworku totiž ani jinak než rychle nejde A přeci využívá těch nejmodernějších jazykových konstrukcí, které přinesl standard ECMAScript 6, je plně objektově orientovaný a sníží náklady na vývoj vašeho webového projektu na minimum. Framework byl navržen a je vyvíjen ITnetwork.cz, kde obstarává veškerou front-end funkcionalitu. Myslíte, že se jedná o "další nejlepší JS framework"? V dnešní lekci si vysvětlíme v čem je jiný a proč vašemu projektu ušetří spoustu peněz, bez ohledu na to jak je velký.

Tento kurz předpokládá znalost alespoň základů JavaScriptu a základů objektově orientovaného programování v JS.

Proč framework?

V HTML a CSS chybí spousta důležitých komponent, které na webech denně potřebujeme. Jsou to různé slidery, našeptávače, grafy, záložky - již jen slavná hláška o cookies Evropské Unie, která musí být prakticky na každé webové stránce, vyžaduje JavaScript.

JavaScript jako takový ale tyto sic naprosto základní komponenty neobsahuje, pouze je umožňuje vytvořit. Dává tedy smysl využít nějaký framework, který komponenty rovnou přinese hotové nebo výrazně usnadní jejich tvorbu. Nikdo nechceme vynalézat znovu kolo.

Proč ne jQuery, Angular, React...?

V minulosti se hojně používala knihovna jQuery, která se proslavila implementací CSS selektorů do JavaScriptu (od toho query). Ovšem po příchodu metody querySelector() přímo do JS standardu v roce 2013 a s příchodem nové syntaxe a možností objektově orientovaného programování do JS v roce 2015 začala být velmi zastaralá.

Robustnější řešení jako jsou populární frameworky Angular nebo React ovšem také nemusí být pro běžné webové stránky ideální. Když opomineme jejich komplexnost (Angular) nebo naopak nutnost kombinovat je pomalu s deseti dalšími neustále se měnícími technologiemi (React), je největší problém, že vyžadují specializované programátory. A již jen programátorů, kteří umí alespoň čistý JS, je zoufale málo a velké společnosti vám je ještě přeplácejí. Pokud máte malý projekt (start up) v robustním frameworku, může vám brzy začít téci do bot, až váš programátor přestane stíhat.

Naopak Simplex.js je tak jednoduchý, že se jej i průměrný programátor naučí používat za jedno odpoledne. A velké projekty? I pro ty je Simplex.js ideální řešení, kódu mají totiž hodně a určitě nechceme, aby závisel na zběsile vyvíjených velkých JS frameworcích (např. přechod z Angular 1 na Angular 2 tenkrát oslabil mnoho projektů, protože se framework úplně změnil a bylo je nutné kompletně přepsat).

Situaci, kdy firma závisí na neustále se měnících javascriptových frameworcích, krásně znázornil komik na následujícím videu (zapněte si Titulky):

... ano, můžete použít Redux, je to úplně v pořádku. Ale pokud se pro něj rozhodnete, doporučil bych vám použít Redux Toolkit. Ale ve skutečnosti je lepší použít Flux nebo Flummox nebo Fluxible. Vlastně je lepší použít Recoil, teda ne, že bychom to dělali. Ale teď React přišel s hooky a kontextovým API, které je zřejmě lepší než Redux, zřejmě, takže vše zas přepíšeme znovu...

Simplex.js

Simplex.js je tzv. microframework. To znamená, že využívá minimalistická řešení, zakládá si na krátkém zdrojovém kódu a využívání nejmodernějších vychytávek, které byly do webových standardů přidány za poslední roky. Simplex.js se nesnaží přinést "nejvíce cool trendy řešení", ale maximálně stavět na funkcionalitě moderních webových standardů, které jsou trvanlivé, neměnné, a poskytují stále více a více funkcí. Díky tomu může i s minimem kódu soupeřit s robustními korporátními frameworky, které byly vytvořené v době, kdy spousta funkcionality ve standardech ještě neexistovala, nebo byla raději implementována znovu, aby např. získala elegantnější syntaxi.

Komponentová architektura

Veškerá funkcionalitu je v Simplexu obsažená v komponentách a rovnou se počítá s tím, že jedna komponenta může být na jedné stránce několikrát (např. dva slidery na titulní stránce). Komponenty se automaticky vygenerují na základě připravené HTML šablony a jsou od sebe navzájem odstíněné. Simplex některé věci záměrně neumožňuje, např. přistupovat k HTML kódu stránky mimo danou komponentu, čímž zabraňuje špatnému návrhu typickému pro globální jQuery selektory, kdy ve složitější aplikaci již programátor ani nevěděl, která část stránky je čím upravována.

Moderní návrh

Velkým neduhem jQuery byly např. funkce ve funkcích, které byly zas ve funkcích. V Simplex.js máme lambda funkce v metodách tříd. Struktura kódu je tak samopopisující. Další výhodou je dodržování kontextu klíčového slova this v obsluze událostí a zároveň možnost vytáhnout si snadno zdrojový nebo cílový element události přes parametr. Jednotlivé komponenty, reprezentované třídami, od sebe mohou dědit (např. Carousel dědí z TabControl).

Šablony a bindingy

Po vzoru třívrstvých frameworků (jako je např. Angular), Simplex umožňuje jednoduše bindovat proměnné objektů přímo na elementy nebo formulářová pole. To šetří čas a snižuje riziko zanesení chyby do kódu. Tato funkčnost je zatím experimentální.

Začínáme

Abychom mohli používat náš framework, musíme si jej nejdříve stáhnout. Soubor s kompletním frameworkem bude dostupný v posledním dílu tohoto rychlokurzu. Obsah archivu rozbalíme do složky, ve které jej chceme začít používat, např na plochu:

Vysvětlení obsahu podsložek:

• Controls/ - složka obsahuje jednotlivé komponenty,
• Framework/ - složka obsahuje samotný framework,
• photos/ - složka s obrázky pro ukázku použití (index.html),
• Styles/ - složka obsahuje CSS soubory.

Ukázka použití

V kořenové složce najdeme jednoduchou html stránku s názvem index.html. Je zde ukázáno použití komponent Carousel a TabControl:

Pojďme se podívat jak vše funguje. Otevřete si zdrojový kód stránky. Na konci stránky před ukončujícím elementem </html> najdeme mimo jiné následující kód:

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

Vysvětlení kódu:

• Framework/Sjs.js - třída starající se o automatické načítání a registraci komponent,
• Framework/SimplexControl.js - rodičovská třída pro všechny komponenty,
• Framework/SimplexSelection.js - třída pro výběr elementů.

Dále zde vidíme registrování jednotlivých komponent, čímž se na stránce zpracují, pokud zde jsou vložené:

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

O inicializaci třídy objektu Sjs se stará volání metody initialize(). Následně se provede registrace komponenty, kterou chceme na stránce využívat, konkrétně zavoláním metody register(). Komponentami rozumíme takové "prvky", které nám poskytuje obsah složky Controls, tedy např. TabControl, Carousel apod.

V tuto chvíli jsme si vysvětlili klíčové kroky pro použití frameworku, vysvětlili jsme si obsah složek a připojení JS souborů včetně inicializace a registrace komponent.

Příště, v lekci Popis vestavěných komponent Simplex.js, si ukážeme jak pracujeme s komponentami na příkladu hojně využívané komponenty Carousel. Následně si popíšeme i další vestavěné komponenty frameworku.