Letní akce PHP týden
Pouze tento týden sleva až 80 % na kurzy PHP. Lze kombinovat s akcí Letní slevy na prémiový obsah!
Brno? Vypsali jsme pro vás nové termíny školení Základů programování a OOP v Brně!

Lekce 1 - Úvod do frameworku Simplex.js

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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).

Simplex.js

Framework 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:

Adresář frameworku Simplex

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:

Ukázka komponent Carousel a TabControl z frameworku Simplex.js

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.


 

 

Aktivity (7)

 

 

Komentáře

Avatar
Dana
Člen
Avatar
Dana :28. března 8:29

Tohle opravdu existuje? Že se to nedá vygooglit, ani logo při hledání podle obrázku .... že by příprava na 1.4.?

 
Odpovědět  +1 28. března 8:29
Avatar
Odpovídá na Dana
Ondřej Štorc:29. března 18:51

Z článku:

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:

Odpovědět  +3 29. března 18:51
Život je příliš krátký na to, abychom bezpečně odebírali USB z počítače..
Avatar
Dana
Člen
Avatar
Odpovídá na Ondřej Štorc
Dana :30. března 7:45

Děkuji za odpověď, to jsem si přečetla. Zarazil mě fakt, že když googlím dle názvu frameworku nebo dám vyhledat obrázek s jeho logem, nikde nic nenacházím. Na rozdíl např. od Angularu nebo Reactu nebo jakéhokoliv jiného používaného frameworku. Také v ostatních seriálech bývá postup opačný, tedy stahuje se hned v prvním díle a rovnou se vše zkouší a procvičuje.

 
Odpovědět 30. března 7:45
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Dana
David Čápka:30. března 11:52

Framework byl navržen a je vyvíjen ITnetwork.cz, kde obstarává veškerou front-end funkcionalitu. Tuto informaci jsem do článku doplnil, díky za upozornění.

Odpovědět  +1 30. března 11:52
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Dana
Člen
Avatar
Dana :30. března 11:58

Díky, teď už mi to dává smysl :-)

 
Odpovědět  +3 30. března 11:58
Avatar
Petr
Člen
Avatar
Odpovídá na Ondřej Štorc
Petr:5. dubna 8:02

Slibují, slibují, ale framework nikde není k mání. Ani poslední (5?) díl.

 
Odpovědět 5. dubna 8:02
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Petr
David Čápka:20. května 17:16

Přirozeně trvá nějakou dobu, než se článek napíše. Pátý díl je již nějakou dobu přítomný a stejně tak i kompletní framework.

Odpovědět 20. května 17:16
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 7 zpráv z 7.