Embed Size (px)
Citation preview
Введение в react и react-native
Web 1.0 (HTTP)Backend
PHP, Java, .NET …
Frontend HTML, CSS
GET, POST
Backend PHP, Java, .NET …
Frontend HTML, CSS
GET, POST
WEB 2.0 (AJAX)Backend
PHP, Java, .NET …
Frontend HTML, CSS, Javascript
(jQuery, Zepto, Prototype…)
Frontend HTML, CSS, Javascript
(jQuery, Zepto, Prototype…)
XHRXHR JSON, XML
Single Page Apps
Frontend
XHRBrowser Events
Web Sockets …
SPA Frameworks• Ember
• Backbone
• Knockout
• Angular
• Batman
• CanJS
• …
Преимущества Angular• Двусторонний биндинг (two-way binding)
• Простой механизм внедрения зависимостей (DI)
• Директивы
• Большой выбор сервисов “из коробки”
• Быстрое прототипирование
• Огромный выбор open source плагинов
Двусторонний биндинг
Внедрение зависимостей (Dependency injection)
Директивы
Недостатки Angular• Двусторонний биндинг (two-way binding)
• Внедрение зависимостей (DI)
• Директивы
• Дебаггинг
• Отсутствие server-side rendering
• Ограниченность фреймворком
Двусторонний биндинг
Внедрение зависимостей
Директивы
Дебаггинг
Отсутствие server-side rendering
Ограниченность фреймворком
Кривая изучения Angular
Web 1.0 (HTTP)Backend
PHP, Java, .NET …
Frontend HTML, CSS
GET, POST
Backend PHP, Java, .NET …
Frontend HTML, CSS
GET, POST
React.js
• DOM-манипуляции очень дорого обходятся
• Javascript очень быстрый
• Virtual DOM
• Очень быстрый diff-алгоритм (O(n3) -> O(n))
React не MVC фреймворк
React - это библиотека для построения UI, которая автоматически управляет всеми обновлениями интерфейса при
изменении данных приложения
React не использует шаблонов
• Javascript очень мощный и гибкий язык программирования и это очень важно для построения больших приложений
• React объединяет логику представления с разметкой, что позволяет гораздо проще поддерживать и расширять приложение
• Разметка и содержание находятся в Javascript. Нет конкатенации строк, что создает меньше пространства для XSS-атак
React-компоненты
JSX - Javascript syntax extension
JSX - то не шаблонизатор
React-компонентprops state
Rendered view
Жизненный цикл компонента
Stateful-компонент
Приложение
Управление данными в react-приложении - Flux
Однонаправленный поток данных
Redux
Reduce
ReduxInitial app state
Reduce(appState, action)
New app state
Пример
React + Redux
Actions
Reducer
Component
React-native
“Learn once, write everywhere”, вместо
“Write once, run everywhere”
Пример кода
Что почитать• React (https://facebook.github.io/react/)
• React-native (https://facebook.github.io/react-native/)
• Flux (https://facebook.github.io/flux/)
• Redux (http://redux.js.org)
• React tutorials (https://medium.com/react-tutorials)
Кого почитать• Dan Abramov (https://github.com/gaearon, https://
twitter.com/dan_abramov, https://medium.com/@dan_abramov)
• Michael Jackson (https://github.com/mjackson, https://twitter.com/mjackson)
• https://twitter.com/Vjeux
• Cheng Lou (https://github.com/chenglou, https://twitter.com/_chenglou)
Я
• Facebook - https://www.facebook.com/meafmira
• Github - https://github.com/miafmira
• Twitter - https://twitter.com/meafmira
