Reagent: ClojureScript <3 React

[Czech] Slidy k talku o Reagentu, ClojureScript knihovně pro tvorbu webových rozhraní postavené nad knihovnou React od Facebooku. Slidy představují základy filosofie Reactu.

Transcript

1. Reagent ClojureScript <3 React @dkvasnickajr
 http://danielkvasnicka.net
2. ! /** @jsx React.DOM */ var TodoList = React.createClass({ render: function() { var createItem = function(itemText) { return <li>{itemText}</li>; }; return <ul>{this.props.items.map(createItem)}</ul>; } });
3. ! /** @jsx React.DOM */ var render: var createItem = }; } }); Markup? A logika? Něco jako PHP?! Back to 1990s?! WTF!
4. Ciwe, templaty neasi!
5. A teď vážně… • Separation of Concerns / Separace zájmů • Volná vazba mezi silně kohezivními komponentami
6. A teď vážně… • Separation of Concerns / Separace zájmů • Volná vazba mezi silně kohezivními komponentami • Přináší šablony separací zájmů? Je mezi šablonou a zobrazovací logikou volná vazba?
7. A teď vážně… • Separation of Concerns / Separace zájmů • Volná vazba mezi silně kohezivními komponentami • Přináší šablony separací zájmů? Je mezi šablonou a zobrazovací logikou volná vazba? • Implicitní těsná vazba. V principu podobná situace jako u takzvaně “bezschémových” DB
8. A teď vážně… • Separation of Concerns / Separace zájmů • Volná vazba mezi silně kohezivními komponentami • Přináší šablony separací zájmů? Je mezi šablonou a zobrazovací logikou volná vazba? • Implicitní těsná vazba. V principu podobná situace jako u takzvaně “bezschémových” DB • Separace TECHNOLOGIÍ, ne zájmů
9. Co na to React? • Jednoduše testovatelné autonomní komponenty • Neměnná data a jednosměrný data binding • Jednodušší dosáhnout referenční transparentnosti • Virtuální DOM: renderování celé aplikace při změně dat, určení minimálního souboru nutných manipulací s DOMem - heuristika, O(n) • Manipulace s DOMem jsou nejdražší! • Spolupráce s kodérem? JSX
10. • React: Rethinking best practices • React’s diff algorithm • Reagent Odkazy
11. ! MY CHCEME KÓD! MY CHCEME KÓD! MY CHCEME KÓD!