reactjs: Свет в конце тоннеля

30
ReactJS Свет в конце тоннеля

Upload: rinat-abdullin

Post on 14-Jul-2015

384 views

Category:

Software


0 download

TRANSCRIPT

Page 1: ReactJS: Свет в конце тоннеля

ReactJSСвет в конце тоннеля

Page 2: ReactJS: Свет в конце тоннеля

Web UI РазработкаMVC Приложения

Page 3: ReactJS: Свет в конце тоннеля

Web UI Frameworks

Page 4: ReactJS: Свет в конце тоннеля
Page 5: ReactJS: Свет в конце тоннеля
Page 6: ReactJS: Свет в конце тоннеля
Page 7: ReactJS: Свет в конце тоннеля
Page 8: ReactJS: Свет в конце тоннеля

Проблемы Масштаба

• Чем больше фич, тем сложнее работать

• Чем больше людей, тем сложнее работать

• Код становится непредсказуем, а разработка - дорогой

Page 9: ReactJS: Свет в конце тоннеля

FacebookAds Org

Page 10: ReactJS: Свет в конце тоннеля
Page 11: ReactJS: Свет в конце тоннеля

(data) => ViewBuddy List

Page 12: ReactJS: Свет в конце тоннеля
Page 13: ReactJS: Свет в конце тоннеля

ReactJS

Page 14: ReactJS: Свет в конце тоннеля

ReactJSCompose UI from components written in declarative

imperative code

Page 15: ReactJS: Свет в конце тоннеля

(data) => ViewDeclarative imperative code

Page 16: ReactJS: Свет в конце тоннеля

Простой Компонентvar TodoList = React.createClass({ render: function() { var createItem = function(itemText) { return <li>{itemText}</li>; }; return <ul>{this.props.items.map(createItem)}</ul>; }});

// ul + li - components, too

Page 17: ReactJS: Свет в конце тоннеля

–ReactJS

“Рендерить все, и никаких гвоздей”

Page 18: ReactJS: Свет в конце тоннеля
Page 19: ReactJS: Свет в конце тоннеля

ReactJS• Собираем UI из компонентов, которые рендерятся в виртуальный DOM.

• ReactJS синхронизирует VDOM с DOM в браузере.

• JSX - опциональный, но очень удобный формат.

• ReactJS компоненты содержат код и шаблон в одном файле.

• Может рендериться на клиенте и сервере.

• Работает ОЧЕНЬ быстро.

Page 20: ReactJS: Свет в конце тоннеля

Statevar TodoApp = React.createClass({ getInitialState: function() { return {items: [], text: ''}; }, onChange: function(e) { this.setState({text: e.target.value}); }, handleSubmit: function(e) { e.preventDefault(); var nextItems = this.state.items.concat([this.state.text]); var nextText = ''; this.setState({items: nextItems, text: nextText}); }, render: function() { return ( <div> <h3>TODO</h3> <TodoList items={this.state.items} /> <form onSubmit={this.handleSubmit}> <input onChange={this.onChange} value={this.state.text} /> <button>{'Add #' + (this.state.items.length + 1)}</button> </form> </div> ); }});

Page 21: ReactJS: Свет в конце тоннеля
Page 22: ReactJS: Свет в конце тоннеля

Вопросы?Re: ReactJS and UI composition

Page 23: ReactJS: Свет в конце тоннеля

Смотрим демку и код

Page 24: ReactJS: Свет в конце тоннеля

Чисто ReactJS// abdullin.com

Page 25: ReactJS: Свет в конце тоннеля

https://github.com/abdullin/gtd

Page 26: ReactJS: Свет в конце тоннеля

А что, если?

Page 27: ReactJS: Свет в конце тоннеля
Page 28: ReactJS: Свет в конце тоннеля
Page 29: ReactJS: Свет в конце тоннеля
Page 30: ReactJS: Свет в конце тоннеля

Вопросы?@abdullin / http://abdullin.com