Autor článku pořádá školení, která si můžete objednat na Javascript-skoleni.cz.

Na todomvc.com naleznete desítky různých frameworků, ale nenechte se zmást, skoro všechny jsou v principu velmi podobné. Inovativní je však pouze jeden – React.js. Proto není divu, že Ember i Angular od Reactu opisují. Ember více, Angular méně, což je dané tím, že Angular trpí krizí identity.

Angular 1 je mrtev, zabil ho sám tým Angularu ohlášením Angularu 2, o kterém se ví, že bude hodně moc jiný, nicméně ještě ani neexistuje. Takže zatímco tým Reactu inovuje a inovuje, tým Angularu marní čas vymýšlením nových bizarních syntaxí a dalších abstraktních vrstev, které ve skutečnosti programátor nepotřebuje a budou ho jen brzdit. Týmu Angularu jejich úděl opravdu nezávidím. Ale dost o Angularu a pojďme se podívat, jaké úžasnosti nám přináší inženýři největší open source firmy na světě.

React.js

O Reactu se na React.js Conf 2015 hovořilo jen málo. Proč? Protože je hotov a vyvíjí se už jen evolučně, pomocí drobných změn směřujících k lepší podpoře ECMAScript 6. React má minimální API, a kde všude to je možné, využívá JavaScript. Takže zatímco Ember i Angular nutí programátory učit se novou syntax a nová klíčová slova a nové nástroje (linter, formátování, debugging), React spoléhá všude jen a pouze na JavaScript. Proč vymýšlet nový a omezenější jazyk, když jeden už máte? (Pozor, React JSX není jazyk, ale pouze syntax, aby HTML v kódu vypadalo jako HTML, i když jsou to jen klasické JavaScriptové funkce.)

Přichází React Native

React Native vám umoží psát nativní mobilní aplikace pro iOS a Android v JavaScriptu a subsetu CSS. Ve skutečnosti React nikdy nebyl omezen pouze na DOM prohlížeče. Pomocí Reactu můžete renderovat nejen HMTL, SVG, a Canvas, ale nově také nativní mobilní UI. React Native není žádný vaporware, Facebook Groups aplikace, která byla napsána pomocí React Native, je už k dispozici v Apple store. Návštěvníci konference dostali přístup, plné zveřejnění se očekává v řádu týdnů. Za pozornost stojí workflow, které se snaží kopírovat workflow webových aplikací. Ano, reload na uložení souboru, není třeba nic kompilovat. Pro stylování se zase používá subset CSS a Flexboxu.

Srovnání s Apache Cordova/PhoneGap a Titanium

Apache Cordova stejně jako PhoneGap k renderování používá webview, tedy osekaný prohlížeč. React Native DOM nepoužívá, pouze JavaScript.

Titanium také nepoužívá DOM, nicméně kompiluje JavaScript do nativního kódu. React Native nic nekompiluje, proto je možné vyvíjet bez čekání. Výsledkem je tedy skutečná nativní aplikace, bez kompromisů. Že to klukům ve Facebooku pálí, dokazuje i toto krásné nové paradigma: „Learn once, write everywhere„, která má k realitě podstatně blíže, než marketingové „Write once, run everywhere„.

Jeden z vývojářů React Native možná trochu překvapivě sdílel tento článek, ve kterém se píše, že mít společný framework pro iOS i Android je pošetilé, a že rozdílů především na UI je mnoho. Sdílel ho s tím, že se všemy body souhlasí, a ať se necháme překvapit. Vzhledem k tomu, že Facebook React Native již pro interní aplikace používá, jak píše jeden můj kamarád ještě z dob Mootools, můžeme jim snad věřit.

The best thing about React Native is non obvious. Four words: No compilation, instant refresh.
What to do with all that free time?

— Shane O'Sullivan (@chofter) January 28, 2015

I say with confidence as a former UIKit author: React's model for the UI layer is vastly better than UIKit's. React Native is a *huge* deal.

— Andy Matuschak (@andy_matuschak) January 28, 2015

Native components. pic.twitter.com/X8BtTEuWk6

— ReactJS News (@ReactJSNews) January 29, 2015

Ale to není všechno. Ta největší změna oproti existujícím frameworkům, jedno, jestli Titanium nebo Cordova, je funkcionální přístup k psaní UI – více v článku Why React Native Matters. Nicméně, React Native Cordovu a její princip nezabíjí, jen doplňuje.

Relay

Nejen Reactem (čili view) živa je webová aplikace. Facebook Flux jasně a zcela zřetelně řekl, že kaskádové změny, tedy implementace data flow pomocí eventů nebo observerů/watcherů (ahoj Angulare), jsou špatné. Flux je velmi jednoduchý, přesto mocný pattern. Implementace má pár stovek řádků a funguje parádně. Dirty watching je proti tomu skutečně špína – pomalý a zrádný. Object.observe není řešení a časem se z něj stane nový JavaScript with – podivná konstrukce jazyka, která vlastně k ničemu užitečnému není, a je dobré se jí vyhnout.

Facebook neusnul na vavřínech, stvořil novou kulervoucí technologii – Relay. Jestli je React Native naprostá bomba, Relay je kobercový nálet. Nevím jak vás, ale mne REST vždy dost… nepěkná věc. Principy RESTu jsou správné, ale v praxi narážíte na celou řadu problémů.

Relay je nový efektivní způsob načítání dat ze serveru, který řeší mnohé.

Základní problém je ten, že nikdy přesně nevíte, jaká data bude aktuální stránka potřebovat. Představte si Facebook feed. Ten obsahuje desítky modelů, ale vy nechcete načíst všechny, od uživatele vám stačí jméno, fotka, id. Od jeho statusu jen pár prvních komentářů, pak link na lajky, možná sem tam reklama, a tak dále a tak dále. Nativní způsob povede k tomu, že budete načítat mnohá data zbytečně, nebo ve špatném pořadí, nebo budete generovat množství opakovaných dotazů na stejný endpoint, dost možná uděláte překlep, potrápí vás hierarchická data, a tak dále a tak dále. To je past vedle pasti, pičo!

O Facebook Relay se toho ještě tolik neví, opět jen to, že Facebook už jej používá v produkci (Angular 2 ehm ehm), a soustředí se především zveřejnění open source knihoven. Více o Facebook Relay zde: https://gist.github.com/wincent/598fa75e22bdfa44cf47

Facebook Relay mi připomíná Firebase api, které zdaleka není tak mocné, ale snaží se řešit podobný problém. Rozhodně nejde o náhradu REST, ten zůstane vždy základním stavebním kamenem interoperability.

Immutable.js

 

Facebook vyvíjí knihovnu Immutable.js, a její autor měl na konferenci také přednášku. O immutable-js napíšu na zdroják později více v samostatném článku.

Závěr

Takhle nadupanou konferenci jsem dlouho nezažil, a to jsem nezmínil zdaleka vše. Za pozornost stojí i Flow, statický type checking pro JavaScript, nebo react-router, a další.

React prochází mohutnou adobcí mnoha firem. Za pozornost stojí, že React se nepoužívá jen v prohlížeči, ale i v Atom editoru, v Netflix TV setech, na serveru se s ním renderuje statické HTML, díky React Native i v nativních mobilních aplikacích, konce to nemá.

Videa všech přednášek najdete na: https://www.youtube.com/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr

Pozvánka

26. února připravujeme s Láďou Prskavcem poslední čtvrtek věnovaný Reactu a s ním souvisejících technologií – Praguejs.cz Přijďe se podívat, popít, pobavit.

Představím také nové Este.js – es6te zero bus factor edition. Ano, nebude tam ani řádek mého kódu – dev stack a framework poskládaný pouze z komponent třetích stran :-) Prozatím jen klíčová slova: ES6, WebPack, React, Flux, Flow, immutable.js, gulp, TDD ready…