Vzdělávání
30.07.2017
Lubo Herkoo
Front-End development technologie
Porovnání světů Front-End a Back-End vývoje jsme se věnovali před pár měsíci . Dnes se budeme hrabat v nástrojích Front-End programátorů – co všechno musíš zmáknout, pokud se jím chceš stát (kromě našich kurzů).
V tomto textu nebudeme polemizovat, zda je lepší React , Angular nebo Vue.js. Zda je třeba používat SASS nebo LESS , nebo.. .. zda je lepší Mac, nebo PC. Přečteš si o nejpoužívanějších front-end technologiích, zkusíme Tě nasměrovat jak s front-endem začít a také (pokud to myslíš opravdu vážně) jak se dále rozvíjet, aby ti nic z Front-Endu neušlo. Pome!
Přední konec webu - technologie
Stačí otevřít některou webovou (nebo dnes už i desktopovou, ajPadovou, iFonovou, i androidovou) appku a díváme se na práci Front-End vývojářů. To oni nakódili ty buttony a textová pole, s citem promysleli efektní animace, menu a rozhýbali statický design svého kamaráda – grafika.
V našem webovém světě pracují Front-End vývojáři primárně s HTML , CSS a JavaScriptem . Pro tyto technologie však existuje milion nástrojů a frameworků, které nám práci usnadňují, jsme díky nim produktivnější a dokážeme snáze tvořit složitější aplikace. K takovým - pokročilejším - nástrojům se však dostaneš později. Začít s React-em nebo AngularJS jako svou první zkušeností s front-endem by byl asi masochismus.
Level 1: Kde začít?
Někteří z nás statické HTML stránky s využitím CSS stylů zvládli už na střední (nebo i základní) škole. Neskutečná nuda a ani jsme netušili, že to může být pro nás později užitečné. Něco podobného, jako když vás rodiče nutí chodit do hudební školy a znalosti zužitkujete až o 10 let později, když s kámoši vymyslíte kapelu.
[Image]
Všechny weby, webové aplikace však využívají HTML a CSS naplno a proto je třeba je zvládnout úplně na začátku – poznat své možnosti. Abychom si mohli říci, že jsme zvládli základy HTML, CSS a JavaScriptu, měli bychom znát funkce elementů a atributů z prvního grafu. Také bychom měli bez problémů umět používat základní CSS pravidla a jednotky . No a měli bychom vědět, k čemu slouží jQuery a jak nám může pomoci. Všechny informace a mnohem více najdeš v Jablkovém kurzu: Webrebel 1: HTML, CSS & Javascript .
Level 2: Jak pokračovat?
Určitě postupem času přejdeš z jednoduchých webstránek na složitější weby. Tvůj CSS soubor bude mít 1000 řádků a každá další změna Ti zabere 3 minuty strachu, 1 minutu roboty a 25 minut testování a fixování, pokud se něco pokazilo. Je čas na lepší organizaci svých CSS stylů.
[Image]
CSS
Použij SASS - parádní preprocessor CSS stylů, který Ti umožní organizovat styly přehledně do složek/souborů. Také můžeš definovat proměnné, které obsahují definice barev, které často používáš, nebo okraje – aby vypadaly všude stejně. Pokud je potřebuješ změnit na více místech, přepíšeš hodnotu jedné proměnné a máš to vyřešeno. SASS umí pracovat is jednoduchými funkcemi. Např. lighten() a darken() , které dokáží danou barvu zesvětlit nebo ztmavit. SASS má těch funkcí a možností samozřejmě daleko víc.
Dalšími alternativami k SASS může být LESS, Stylus, PostCSS a další. My v Learn2Code jsme si oblíbili SASS.
Responzivní design
Responzivní design řeší problém se zobrazováním Tvého webu na různých zařízeních. Pro front-end programátora je neodmyslitelnou součástí jeho skills. Mobilních zařízení je více než obyvatel na světě - musíme optimalizovat také pro malé obrazovky.
Samotné HTML a CSS3 má v sobě nástroje, které nám při takové optimalizaci mohou pomoci. Například velmi důležitý HTML meta tag je viewport , který přizpůsobí velikost písma pro malé obrazovky tak, aby nebylo příliš malé:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Pomocí CSS také dokážeme ošetřit responzivitu tak, že na šířku elementů budeme používat procentuální hodnoty a pravidlo box-sizing: border-box; . Takto můžeme zadefinovat vlastní grid , kde tato pravidla použijeme.
CSS3 nám velmi pomáhá při responzivním designu s @media query. Pomocí @media dokážeme oddělit CSS, které bude platit například při rozlišeních menších než 1000px od pravidel, která budou platit pro rozlišení vyšší než 1000px. Výborná věc. Responzivnímu designu věnoval Yablko také spoustu videí v kurzu Webrebel 1 .
Front-end Framework
Šikovníky z Twitteru napadlo, že by bylo fajn mít po ruce sadu komponent , které velmi často používají ve svých projektech. Takovými komponenty jsou například tlačítka, různé typy menu, textová pole s validacemi nebo různé nadpisy. Důležitá byla také responzivita. Aby nemuseli začínat vždy od nuly, vytvořili Bootstrap – framework, který si okamžitě získal vývojáře po celém světě. Bootstrap je obrovský urychlovač času a čas jsou přece peníze.
Pokud si Bootstrap oblíbíš a poznáš ho pořádně, začneš experimentovat s upravováním jeho vzhledu a přidáváním nových funkcí například přes JavaScript. Na internetu najdeš spoustu pluginů, které rozšiřují jeho možnosti.
Alternativy k Bootstrapu mohou být: Foundation, Materialize CSS, Semantic UI a různé jiné.
Level 3: JavaScript
Dostáváme se do posledního levelu front-end programátora, tak vysoukejme rukávy a pojďme na to:) JavaScript je jedním z nejpopulárnějších jazyků.
[Image]
Příchodem Single Page Applications (SPA) se jeho popularita zmnohonásobila . SPA rapidně zlepšily rychlost webových aplikací. Podstatou SPA je, že celá stránka se načte jen jednou - na začátku. Každá další změna se děje na pozadí a změní se jen část stránky s novým obsahem.
Nejlepšími příklady single-page aplikací jsou Facebook, YouTube, Twitter a mnohé jiné populární weby. Ani si neumíme představit to množství JavaScriptu, které tyto aplikace obsahují, protože podstatná část celé aplikace je naprogramována právě v JavaScriptu.
Spousta .js souborů na jednom webu může způsobovat nemalé problémy. Zejména pokud jsou jednotlivé soubory na sobě závislé. Velmi jednoduchý příklad: napíšeme-li vlastní JS plugin k zobrazení foto galerie, který je závislý na jQuery. Když prohlížeč stáhne a spustí náš plugin, už musí mít k dispozici knihovnu jQuery. Je úkolem front-end programátora, aby takové problémy vyřešil.
JavaScript naštěstí obsahuje obrovské množství nástrojů, které nám pomáhají řešit podobné problémy. Zde jsou některé situace a jejich řešení:
• Správa závislostí – pokud je knihovna závislá na dalších knihovnách, pomohou nám npm nebo yarn
• Automatizace činností – velkou pomocí je například automatický refresh prohlížeče při každé změně kódu. Takové a podobné tasky můžeme řešit přes gulp , grunt nebo npm
• Správa modulů - nainstalované závislosti je třeba poskytnout prohlížeči ve formě výsledného .js souboru. Zde nám mohou pomoci webpack , rollup , RequireJS , browserify
• Automatizované testování - abychom při každé změně nemuseli celou aplikaci testovat ručně, pomohou nám jíst , mocha nebo jasmine
• Syntaxe - abychom neprodukovali JS špagety kód, vznikají nové standardy, které zpřehledňují syntaxi JavaScriptu - ES5 , ES6 nebo ES7 . Babel pomůže prohlížeči tuto novou syntaxi pochopit.
JavaScript frameworky a knihovny
Podobně jak nám Bootstrap pomohl s responzivitou a některými často používanými komponentami, existují i JavaScript frameworky, které doplňují svět front-end programátora a celý vývoj komplikované SPA urychlují. Popsat každý framework není úkolem tohoto článku, pokud však některý z nich preferuješ, napiš nám do komentářů který a proč. Zde jsou nejpoužívanější:
• React – Facebook vytvořil React jako řešení pro své komplikované uživatelské prostředí. Hlavní ideou je vytvoření komponent, které lze použít na více místech v aplikaci. Pokud uživatel provede nějakou akci a změní se obsah stránky - prohlížeč překreslí jen konkrétní komponentu.
• Vue.JS - Alternativní knihovnou k Reactu je Vue.js, která se těší stále větší popularitě. Výhodou je přehlednější a lehčí syntax, kde se nemíchá HTML kód s JavaScriptem – což některým vývojářům nevyhovovalo
• AngularJS - Vytvořený firmou Google je na rozdíl od React a VueJS plnohodnotným frameworkem - obsahuje také nástroje pro komunikaci s databází.
Další alternativy k nejpoužívanějším frameworkům/knihovnám: EmberJS, Preact, Inferno a mnohé jiné.
Level 4:
Ano, existuje i level 4. Jsou to přídavné znalosti naskillovaného front-end programátora. Například bezpečnost - prevence před CSRF, XSS, DNS pinning nebo clickjacking útoky. Také poznání psychologie uživatele je obrovskou výhodou – priorizovat použitelnost a přístupnost aplikace před odvážným designem. Marketing , SEO , ... a mohli bychom jít dál.
Důležité je nikdy se nepřestat vzdělávat , získat co největší rozhled v technologiích a v neposlední řadě nepodlehnout popularitě některého z nástrojů, ale zvolit nástroj tak, aby splnil svůj účel.
Martina Baumann
