React facts
- Facebook, Instagram
- Opensource
- Initial public release May 29, 2013
- current release 0.8
Základní pilíře
- React je knihovna pro UI
- Komponenty místo šablon
- Re-rendering + reakce na události
- Virtuální DOM
React nepoužívá šablony?!
( like {{> }} and {{# each}})
Šablony často vytvářejí vlastní "jazyk"
React používá javascript
React komponenty
Zobrazovací logika a markup patří k sobě
- Znovupoužitelné
- Dají se skládat do větších celků (Composable)
- Testovatelné
Re-render při změně dat
- Změny v datech přinášejí hodně problémů
- Vzpomeňte na web bez JS - "Just refresh the page"
- Překreslení při jakékoliv změně tvorbu UI dramaticky zjednoduší
- Žádná magie (databinding, dirtychecking, práce s DOM)
Browser DOM vs Virtual DOM
- Není možné při každé změně zahodit a znovu vytvořit DOM
- Bylo by to pomalé a přijdete o stav formulářů a pozici ve stránce
- Virtual DOM umožňuje rychlé překreslení při každé změně
Při každé změně dat
- React vytvoří nový virtuální DOM
- ... porovná jej s předchozím
- ... najde rozdíly s předchozí iterací
- ... přidá je do fronty změn
- ... a v dávce provede změny
Velmi podobný koncept využívá engine z Doom III
Poznámky
- JSX preprocessor
- SVG, VML support
- React vs Angular
- Server side rendering
- Server side changes
- Funkcionální koncept - existuje klon pro Clojure script
Shrnutí
- Komponenty místo šablon
- Znovu vykreslení místo změny
- Virtual DOM je jednoduchý, rychlý, testovatelný
Děkuji za pozornost
Otázky?
Petr Šnobelt
petr.snobelt@gmail.com
@petrsnobelt