React.js

Transcript

2. #КОЙ създаде React?
6. React не е нещо младо и неузряло
17. Лето Божие 2015
18. #КОЙ използва React?
20. Малко теория
21. Mutable (stateful) UI
22. Първоначални данни функция 1 Първоначален интерфейс
23. Променени данни функция 3..+inf Промяна на интерфейса Нови данни (сървър) функция 4
24. Declarative UI
25. Данни Интерфейс функция 2 UI декларация Нови данни (сървър)
26. <ul> <li ng-repeat="beer in beers"> {beer.brand} - {beer.likes} </li> </ul>
27. Immutable UI
28. Данни функция 1 Интерфейс функция 2 Нови данни (сървър)
29. function render(beers) { return '<ul>' + beers.map(render_beer) + '</ul>'; } function render_beer(beer) { return '<li>' + beer.brand + ' ' + beer.likes + '</li>; }
30. Immutable != Declarative
31. React
33. React
34. A JavaScript library for building user interfaces
35. Getting started <script src="http://fb.me/react-0.13.1.js"></script> <script src="http://fb.me/JSXTransformer-0.13.1.js"></script>
36. Hello World
37. JSX • Синтактичен трансформатор • Вграден ECMAScript 6 transpiler (с опция --harmony) • Client-side & Server-side поддръжка
38. JSX <Component a1={code}, a2="str">children</Component>  React.createElement(Component, { a1: code, a2: "str" }, children);
39. JSX var Component = React.createClass({ … });  var Component = React.createClass({ displayName: "Component", … });
40. Virtual DOM
41. Virtual DOM • Структура от данни, скриваща мутациите върху DOM елементите • Представлява йерархия от обекти • Симулира immutable UI • Бърз алгоритъм за намиране на разлики
42. Алгоритъм
43. Алгоритъм var oldDOM = rootComponent.getCurrentVirtualDOMObject(), newDOM = rootComponent.render(); React.applyDifferences(oldDOM, newDOM);
44. body { header(className="menu") { ul { li(href=…) { начало }, li(href=…) { вход }, li(href=…) { регистрация } }, }, div(className="users") { h1 { Пешо } h1 { Гошо } }, footer { Copyright 2015 ® } } IndexPage { NavigationMenu, IndexPageContent { UserList }, Footer } render Йерархия от React компоненти VirtualDOM
45. div(className="test") { h1 { Здравей! } h2 { Тук си от 1234 милисекунди! } } HelloWorld { state: { initialTime: [Date Object], time: [Date Object] }, render() { ... } } render React компонент VirtualDOM елемент
46. div(className="test") { h1 { Здравей! } h2 { Тук си от 1234 милисекунди! } } render VirtualDOM елемент Browser DOM <div class="test"> <h1>Здравей!</h1> <h2>Тук си от 1234 милисекунди!</h2> </div>
47. div(className="test") { h1 { Здравей! } h2 { Тук си от 1234 милисекунди! } } diff Стар виртуален DOM Нов виртуален DOM div(className="test") { h1 { Здравей! } h2 { Тук си от 1222 милисекунди! } }
48. div(className="test") { h1 { Здравей! } h2 { Тук си от 1234 милисекунди! } } Разлики Променен HTML <div class="test"> <h1>Здравей!</h1> <h2>Тук си от 1234 милисекунди!</h2> </div> apply diff <div class="test"> <h1>Здравей!</h1> <h2>Тук си от 1222 милисекунди!</h2> </div>
49. Заради Virtual DOM... Може да се рендерира не само HTML: • React Native • React Canvas • React QT* • React GTK* • React WPF*
50. React Native sneak peek var App = React.createClass({ render: function() { return ( <TabBarIOS> <TabBarIOS.Item title="React Native" selected={true}> <NavigatorIOS initialRoute={{ title: 'React Native' }} /> </TabBarIOS.Item> </TabBarIOS> ); } });
51. Server-side rendering DEAL WITH IT
52. Data flow
53. Компонент props state Родител state Компонент state Компонент state
54. Props render() { return <User name="Кучо Кучев" online={true} position={ <span><i>Senior</i> dog specialist</span> } onSelect={function() { ... }} /> }
55. Props render() { return ( <div onClick={this.props.onSelect}> <h1> {this.props.name} {this.props.online && <i>online</i>} </h1> <h2>{this.props.position}</h2> </div> ); }
56. Prop Validation User.propTypes = { name: React.PropTypes.string.isRequired, online: React.PropTypes.bool, position: React.PropTypes.element, onSelect: React.PropTypes.func.isRequired };
57. Prop Defaults User.defaultProps = { online: false, position: <i>unknown</i> };
58. Properties • Immutable • Може да се подменят само от родител • При подмяна се пререндерира • componentWillReceiveProps, … • Може да са всякакви JS обекти • Може да се валидират
59. State • Вътрешно състояние за компонент • Може да се променя и чете само отвътре • При промяна се пререндерира • componentWillUpdate, componentDidUpdate • Отново, може да съдържа всичко • Променя се само чрез `setState`
60. Events • Custom event система – "оправя" разлики в браузърите • Clipboard, Keyboard, Mouse, Touch, Focus, Form, Scroll & Wheel • Закачат се като property-та на елементите
61. Events render() { return ( <form onSubmit={function() {...}}> <textarea placeholder={ Why do you want to destroy the world? } /> <button className="big red btn"> Launch nukes </button> </form> ); }
62. Data loading • componentDidMount • componentWillReceiveProps
63. Data loading componentDidMount() { ajax('user/all', function(users) { this.setState({users: users}); }.bind(this)); }
64. Events componentDidMount() { ajax('user/all', (users) => { this.setState({users: users}); }); }
65. References class SearchForm extends React.Component { clear() { this.setState({text: ''}); } ... }
66. References render() { <SearchForm ref="searchForm" onSearch={...} /> <ClearButton onClear={this.clear.bind(this)} /> } clear() { this.refs.searchForm.clear(); }
67. Демота
68. Обобщение
69. JSX – синтаксис за вграждане на HTML-о-подобни тагове в JS
70. Virtual DOM – структурата, която моделира HTML елементите
71. Data flow – events, props, states
72. Възможност за други имплементации (React Native) и Server-side rendering
73. Добра енкапсулация
74. Бърза разработка
75. Лесно unit тестване (без браузър)