React a Front-end
§Ondřej Ševčík


§
§
§
•
•
•

-Za ty roky co je javascript na vzestupu vzniklo obrovske mnozstvi knihoven (npmjs – 340000)
-99% odpad
-1% to co je dobre
-3.5 tisice moznosti jak delat frontend
   -> neni to tak jednoduche
Spousta z toho je toolingu
Velka vstupni bariera
-Navzdory tomu je vyvoj Front-end aplikaci (SPA) na vzestupu
-Duvod -Hlavne Nej UX pro uzivatele
-Priklad – Produkty google – Gmail, Photos, Kalendar
-Stejne nebo lepsi ux nez desktopove appky

§
https://blog.zingchart.com/content/images/2016/06/react-1.png
http://voidcanvas.com/wp-content/uploads/2016/07/flux.png
https://qph.ec.quoracdn.net/main-qimg-437e91ee2b145b6ae72be5ef9d041303?convert_to_webp=true
https://www.clever-cloud.com/blog/img/medias/npm.png
https://avatars1.githubusercontent.com/u/2105791?v=3&s=400
https://raw.githubusercontent.com/babel/logo/master/babel.png

§React

-Pouziva se jako knihovna pro staveni uzivatelskeho rozhrani
-Vznikla ve Facebooku
-Hodne popularni
-Pouziva Facebook, Kentico Draft, Kiwi, Twitter, Uber, …
-Zajistuje cross-browser kompatibilitu
-Skvely vykon
-Pouzitelna i pro vyvoj mobilniho UI

§React
https://cdn-images-1.medium.com/max/760/1*G6rj2IevhkL3hxDWdFX9cg.png

-Jde ruku k ruce s Reactem
-Pouziva se vyhradne s reactem
-Vtipna syntaxe – neni to HTML ani JavaScript
-Je to rozsireni javascriptu
-Dava to celkem smysl
-Lepe se pise markup
-Lepe se v tom orientuje
http://codepen.io/ondrejsevcik/pen/NRJjwZ?editors=0010
http://codepen.io/ondrejsevcik/pen/pEYwJj?editors=0010 – element
http://codepen.io/ondrejsevcik/pen/VKRWPG?editors=0010 – componenty

§Flux
http://voidcanvas.com/wp-content/uploads/2016/07/flux.png

-Pattern jak handlovat data v aplikaci
-Flux i React vznikli v FB
-Vetsina lidi je pouziva dohromady
-Muzou byt pouzity i oddelene
-Mel konecne vyresit nektere problemy kterym facebook celil

§Flux
https://cdn-images-1.medium.com/max/400/1*EfeNEshl8-uwZSuUw275Ag.png
https://cdn-images-1.medium.com/max/400/1*4xc1FzIHWiyAvb1iAQKSqQ.png

-Notification bug
-Klik a zadna nova zprava
-Nekolikrat vyresen a nekolikrat se znovu objevil v produkci

§Flux

-Problem byl v tom jak data tekly aplikaci
-Z modelu do view (user input)
-Kaskada akci vedla k dalsim zmenam v modelu
-+ obcas asynchronne (url request)
-Hodne tezke sledovat/debugovat kudy data tecou (data flow)

§Flux
https://cdn-images-1.medium.com/max/800/1*lZM0yU9ExEMd7DggVxXkxA.png

-Prisli s jinou architekturou
-Data tecou pouze v jednom smeru -> Flux
-Zpracovany jedna po druhe tak jak prisly

§Flux
https://cdn-images-1.medium.com/max/800/1*lZM0yU9ExEMd7DggVxXkxA.png
https://code-cartoons.com/a-cartoon-guide-to-flux-6157355ab207#.77i9gvbo8

-Action creator (telegraph operator)
-- vytvari akce ktere umi system zpracovat
-- posila tyhle akci dispatcheru
-Dispatcher (telephone operator)
-- kontaktuje vsechny (story) o zmene (synchronne) -> predvidatelne flow
-Store (byrokrat)
-- drzi stav aplikace a business logiku
-- ma pouze gettery, setovat se da pouze pres akci
-View
-- vezme stav ze storu z vyrendruje HTML
-- reaguje na akce a vola ActionCreatory

§Flux - Setup
https://cdn-images-1.medium.com/max/800/1*GHrusKRFhQ0Y6rrwjqI6QQ.png

Prvne setup
-Deje se pouze na zacatku aplikace
-Store se prihlasi k odberu akci z dispatcheru

§Flux - Setup
https://cdn-images-1.medium.com/max/800/1*66hoDpUhczSXrgH2cUUasw.png

View si vezme aktualni stav,
vyrendruje HTML

§Flux - Setup
https://cdn-images-1.medium.com/max/800/1*tV7VN0RjpFfwaf1PK3chIA.png

A prihlasi se k zmenam ve storu

§Flux – Data flow
https://cdn-images-1.medium.com/max/800/1*SusQ7Aip2fSWg6raQtPSnA.png

Tady uz je data flow aplikace
Uzivatel zmenil cislo ve formulary na 10

§Flux – Data flow
https://cdn-images-1.medium.com/max/800/1*dkm9qsWuD9DtXzH-u-DjJQ.png

View preda informaci Action Creatoru (telegraph operator)

§Flux – Data flow
https://cdn-images-1.medium.com/max/800/1*fJwvtpq0XQhB4mUZwh7YOQ.png

Ten vytvori message kterou system rozumi a posle ji dispecerovi (telephone operator)

§Flux – Data flow
https://cdn-images-1.medium.com/max/800/1*RLrImTDeArSMoA4kZsajLQ.png

Dispecer posle zpravu vsem storum (byrokratum)
Ti zpracuji nebo ji ignoruji

§Flux – Data flow
https://cdn-images-1.medium.com/max/800/1*5SXO2eftdQveFqImGDVB9A.png

Store (byrokrat) notifikuje view o zmene
View si ziska stav storu

§Flux – Data flow
https://cdn-images-1.medium.com/max/800/1*fWBaUg9-_1-V5M2YQBWhWg.png

A vygeneruje nove HTML
- Showtime

Mame appku! Jak to dostat do browseru?
§Babeljs.io
https://raw.githubusercontent.com/babel/logo/master/babel.png

-Pouzivame syntax z ECMAScript 2015 ktera neni podporovana v browseru
-Babel je JavaScript compiler
-Podporuje posledni verzi standard
-Kompiluje do ES 5 -> vsechny browser ok
-Podporuje pluginy
-Napriklad JSX
-Ukaz priklad z babeljs.io
-Jak pustit babel?

§Webpack
modules with dependencies ---webpack---> static assets

-takes modules with dependencies and generates static assets representing those modules.
-Pouziva loader
-Jednim z nich je babel
-Dalsi muze byt less loader
-Typescript loader
-…
-Silny plugin system
-Minifikace
-Proc pouzit webpack misto toho abych primo pouzil babel?
-Babel kompiluje soubor po souboru
-Webpack usnadnuje development - watch
-Jenze jak pustit webpack?

§Node.js & npm
http://abdelraoof.com/img/nodejs/node-repl2.png
https://qph.ec.quoracdn.net/main-qimg-437e91ee2b145b6ae72be5ef9d041303?convert_to_webp=true
•npm init
•npm install
•npm run …
https://www.clever-cloud.com/blog/img/medias/npm.png

-Node is a program for running JavaScript
-Used by everyone who writes some javascript
-Server, tooling
-Tri zakladni prikazy
-Init – inicialuzjete GameStore appku
-Install – nainstalujete react zavislost, webpack, babel
-Run – pustite webpack
-Npm is package manager …

§Moduly
CommonJS (Node.js)
AMD (Browser)
UMD

-CommonJs
-Every module has it’s own namespace
-Avoids global space pollution
-Compact syntax
-Synchonne nacita moduly
-Nepouzitelny v browseru
-AMD
-Asynchronne nacita moduly – ma to v nazvu
-Prvni parameter – zavislosti
-Druhy parameter – fukce ktera se zavola jakmile jsou vsechny zavislosti nacteny
-Universal Moduler Definition
-V realu
-CommonJS + Module bundler (webpack)

Resources
§https://github.com/facebookincubator/create-react-app
§
§http://webpack.github.io/docs/tutorials/getting-started/
§
§Flux
§https://code-cartoons.com/a-cartoon-guide-to-flux-6157355ab207#.77i9gvbo8
§
§Redux, alternativa k fluxu (vice popularni)
§https://egghead.io/courses/getting-started-with-redux
§
§
§
§