Kam došel svět frontendu do ledna 2016

Takle dobře to umim s fotošopem…

Neskutečně daleko…

Budu psát o tom, jaké neskutečné kousky se dneska dají udělat s SPA aplikacemi.


Automatický reload všeho

Myslíte, že mám na mysli, že se vám refreshne stránka, když změníte soubor s CSS?
Pfff…
Pokud se vám refreshne stránka při změně CSS tak jste už sakra dávno out. Dneska frčí Hot Module Replacement pro všechno — Obrázky, HTML, Javascript, CSS, kód na serveru.
Zkrátka se vám za běhu stránku vyměňují změněné soubory a nedochází k otravnému a zdlouhavému refreshi. Dokonce i Javascript prostě běží dál.


Soumrak RESTu

REST sux. Pokud píšete SPA aplikaci proti RESTu tak z toho šedivíte. Na vyrenderování jedné stránky potřebujete kolikrát i desítky endpointů k tomu všemu ještě jich je spousta potřeba dopsat na backendu, protože vaše aplikace potřebuje ještě vědět, jakou měnu má uživatel nastavenou a v jakém je časovém pásmu a buhví co ještě.
Bekenďáci mě nechápali, když jsem jim vysvětloval, že REST se hodí na dlouhodobou neměnící se komunikaci mezi “stroji”, ale rozhodně se nehodí na rychle iterující SPA aplikace, které se mění každý a jsou náchylné na velikost přenášených dat.
Říkali mi že si mám teda udělat proxy na agregaci dotazů před tim RESTovym API.
Já nechci žádnou posranou proxy, nechci šahat na server. Nechci se řídit podle toho, co má server (hostitel) doma a jak to servíruje. Když už jsem já jeho klient, tak si chci sakra poroučet já a nenechat si vnucovat koprovku s houbama, když se ta mrdka nedá žrát.
Jak by vám bylo, kdyby vám v hospodě přinesli na jedno požádání jen pití nebo jenom jídlo? A když by vám přinesly to jídlo, tak by vám k tomu dali ještě dvacet chodů, pár tun ubrousků, osum příborů a chtěli za to zaplatit? Nehledě na to, že pokud byste poslali na číšníka stejný požadavek za měsíc, tak by vám vrátil něco jinýho, nejspíš by vám donesl sámošku, kde si prej máte teda vybrat, co chcete, když se vám to vařený nelíbilo. V horším případě by předal papírek s nápisem “404”.

Chci si hezky vybrat jaká data a v jakém tvaru chci a chci to rychle a chci to v chytré struktuře, která se dokáže cachovat a chci, aby si o to frontendové komponenty dokázali sami říkat!

No a tomu se říká GraphQL nebo Falcor (který má ještě ke všemu vlastní formát JSONu, velice zajímavý s odkazy na objekty).
Tyhle legrácky dokáží agregovat a když si zakombují s Relay, tak si vaše komponenty, které jsou zrovna na stránce vyrenderované sami řeknout, jaká data potřebují. Všechny dotazy komponent se hezky shluknou do jednoho optimalizované requestu na server a je to. Všechno se vrám vrátí ve tvaru, jaký si přejete. Sen…


“Bezstavové” aplikace

Pokud jste psali něco v Angularu, tak jste si mohli všimnou, že jeho architektura je příšerně komplikovaná. Všude nějaké objekty, injekce dependence apod. Tohle všechno jsou validní techniky, ale jejich komplikovanost naznačuje, že je něco špatně.
A tu je těhle sedmdesát řádků kódu nahrazujíc tisíce Angularovských. Jednoduchý, pochopitelný kód, který má stav jen ve dvou komponentách — v closurách dispatch a store.
Konečně chápu nějaký “framework”.
To vše bez použití jediné třídy.


Předvídatelné aplikace

Díky Fluxu máme všechny možné akce v aplikaci definované staticky. K tomu ještě víme, kde měnit stav a navíc ještě používáme immutabilní struktury, které snižují možnost chyby.
To všechno si dokážeme přehrát jako film snímek po snímku (akci po akci).


Fungující tlačítka zpět / vpřed

To je sakra inovace!
Pravda ale je, že Angular má problémy s tlačítky vpřed a zpět a to samé Ember. Snad už to teda kluci vyřešili, nicméně knihovny nad Reactem tohle mají vyřešené naprosto s přehledem.


Code splitting / code chunks bez require.js

Co že tohle znamená?
No, pokud máte nějakou velikou frontendovou aplikačku, která má po GZIPu stejně hodně přes 100KB tak prostě není dobrej nápad jí servírovat tak jak je. Chtělo by to celý ten ohromný soubor rozdělit.
Jak na to?
Máme sice HTTP/2, ale otázka je podle jakého klíče soubor rozdělíme, aby se dokázal nahrávat co možná nejjefektivněji. Sic máme multiplexované spojení se serverem, ale stejně se těch sto kilo musí stáhnout.
Existuje standard pro asynchroní načítání Javasriptu AMD, který implementuje knihovna require.js (neplést s require v CommonJS), ale s tím je bolest pracovat.
ALE!
Je to Webpack, který nejenže umožňuje Hot Module Replacement, ale k tomu ještě má code splitting by default, stačí jen naimplementovat polyfil pro require.ensure!
A můžete vesele splitovat kód třeba na úrovni Routeru. A všechno prostě funguje.
Takže získáváte maličký Javascriptový soubor určené přesně pro stránku, na kterou přicházíte, není to kůl?


Javascript everywhere

Pokud umíte Javascript můžete psát aplikace pro:


Javascript nowhere

Můžete psát Javascript aniž byste napsali řádku Javascriptu.
Javascript je extrémně složitý jazyk, který je nepředvídatelný, nemá statické typování je náchylný k chybám, vyznačuje se častými runtime errory (Undefined is not a function), běhové prostředí zdaleka není jednotné (Edge, Webkit, Blink, Gecko, Node.js, io.js), dějou se zde šílenosti při přetypovávání, nikdo mu pořádně nerozumí, dějou se šílenosti s ASI atd…
To jsou všechno validní argumenty proč v tomhle jazyku nepsat.
Jasně, všichni známe Coffeečko nebo Babel, ale to je pořád jenom Javascript.
Než začnete prskat, že potřebujete levné programátory a že je těžký je něco nového učit, tak se zamyslete nad tím, kolikrát vám do bug reportů přistálo undefined is not a function. Kdybyste používali třeba Elm, Clojure Script nebo PureScript, tak je nedostáváte (nebo teda za ideálních podmínek, určitě jich ale bude násobně méně než s JS, protože jich většinu odhalíte při kompilaci) tak si představte kolik času byste ušetřili, kdybyste je nemuseli fixovat.
BTW. Pokud chcete staticky typovat Javascript je tu TypeScript, nebo Closure compiler.


Everything in Javascript

Uf, to byly bouře, když React představil “HTML v Javascriptu”, prý logiku v kódu.
Ani jedno z těhle tvrzení není pravda.
JSX je volání JS funkcí, componenty nemají díky Fluxu v sobě praktickou žádnou logiku (neměly by mít, já prasím, ty prasíš, my prasíme).
Dokonce i CSS máte v Javascriptu (by default podporováno ve Webpacku css-loaderem) a to má nelidsky krutý implikace:

  • Media queries na serveru
  • Eliminace mrtvých CSS
  • Extrémní optimalizace CSS
  • Odstranění globální scope pro selectory
  • Code splitting pro CSS (přesně tak jako pro Javascript)
  • Komprese selektorů

Za zmínku stojí, že jedna z nejpoužívanějších desktopových aplikací na světě — Slack. Ta je napsaná celá v CSS + HTML + JS, stejně tak jako třeba české Avocode.


Funkcionální prvky

Používat globální proměnné je prasárna, na tom se všichni shodnem. A co teda “this”?
Klíčové slovo this odkazující na současný objekt. I to je svým globální proměnná, je to sdílený stav. Bez kterého se jedna celá sféra programování dokáže obejít a díky tomu je předvídatelnější testovatelnější a prej i easy to reason about :-D.
Já tomu sám moc nerozumim. Ale určitě je jednoduší testovat čistou funkci než třídu s dvaceti závilostma, osmi předkama k jejímuž vytvoření potřebuju dependency container, pře nikdo nedokáže dát dohromady všechny ty závilosti ve správném pořadí.
Protínání světů FP a OOP v Javascriptu všem rozšiřuje obzory, nenechá vás to žít ve vakuu vašeho světa a to je sakra dobře.


Reaktivní programování

Co kdybych vám řekl, že se dá psát kód, kde není ani jeden “IF”? Není to možné? No, asi ne, ale skoro… Dá se tomu přiblížit, když používáte streamy na totálně všechno.
Pokud jste někdy pracovali v JS s metodami pole jako reduce, filter, nebo map, tak by vám mohl dávat smysl Rx.js a Cycle.js.


Otáčky

S příchodem Reactu se frontend rozletěl o světelné roky dopředu. V posledních 2 letech je tady tolik inovací, že se to nedá stíhat. Knihovny, jejichž aktuální verze jsem instaloval před třemi měsíci už majít tři nové major verze. Všechno neskutečně rychle zastarává. Na jednu stranu to je špatně, na druhou je to naprosto skvělé.
Je to něco, co může světu JS závidět prakticky každý programovací Jazyk.

Vývoj letí neskutečně dopředu. Zkuste se zeptat Javisty, co je u nich nového za posledních deset let. Asi nic moc…


Příležitosti

Míst pro vývojáře Javascriptu je obrovské množství a roste. Jazyk se dá rychle naučit a je extrémně jednoduché začít — stačí otevřít prohlížeč.
Ale nejlepší jsou stejně nějaké kurzy. Zkuste třeba tyhle, jsou zcela zdarma.

Krom toho je na Githubu quadzilion knihoven, kde jsou stabiliardy issues, které čekají až je někdo uzavře. To je šance pro kohokoli, kdo si myslí, že jeho práce v agentuře nemá smysl. Každý může přispět.


Uf, je toho ještě mnohem víc, ale samozřejmě mě teď nic dalšího nenapadá.

Z tohodle všeho plyne jedna blbá zpráva — všichni musíme umět Javasript, jeden z nejhorších programovacích jazyků.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.