React(JS) — это современная библиотека для разработки UI компонентов от Facebook, по праву считающаяся самой трендовой технологией среди JavaScript разработчиков на 2015/16 год. Но каким образом React стал настолько популярен в среде разработчиков, учитывая что библиотека покрывает только View из необходимого минимума MVC архитектуры? Ответ таится в экосистеме технологий, в рамках которой нам открываются совершенно новые способы разработки приложений, не только для веба, но и нативных платформ с родным UI (iOS, Android, Win 10, OSx). Роберт расскажет, почему огромная популярность React более чем заслужена, и почему это не "очередной фреймворк", а чуть ли не самое большое изменение в JavaScript разработке за последние годы.

1. Реакт: новая эра
фронтенд разработки
Роберт Харитонов
@operatino & rhr.me

2. Front-end Development Lead
Liberty Global / Ziggo
Роберт Харитонов @operatino

6. Vзначит View в традиционном MVC,
а так же Virtual DOM

7. Реакт — это декларативная
библиотека для синхронизации DOM
с вашими данными.

8. но...

9. @operatino
Экосистема во главе всего
• Реакт закладывает основы функционального
программирование в UI код
• Поддержка кроссплатформенного рендеринга
• Отличная поддержка композиции модулей
• Огромное сообщество и множество инструментов

10. @operatino
Новая эра

12. @operatino
Почему Фейсбук создал Реакт
• Предсказуемость исполнения UI кода
• Инкапсуляция состояния в компонентах
• Неизменные параметры компонентов и
однонаправленный поток данных
• Композиция, простота разработки и дебага
• Новые подходы разработки сложных интерфейсов

13. @operatino
React makes rendering of UI
as simple as defining a function.

16. @operatino

18. @operatino
Осваивайте программирование,
а не инструменты.

19. @operatino
Почему вам стоит
попробовать Реакт?

20. @operatino

21. @operatino
Преимущества Реакта
• Гибкость внедрения
• Простота поддержки кода
• Мощные библиотеки компонентов
• Кросс-платформенный рендеринг
• React Native

22. @operatino
Before we jump in...

23. @operatino

26. Stateless Component

29. @operatino
1816 компонентов 2288 компонентов
http://react-components.comhttp://ngmodules.org

30. @operatino

31. @operatino
Polymer от Google

32. @operatino
gl-react

33. @operatino
react-canvas

34. @operatino
Server
rendering
Single Page
JS App
Первый
запрос
Рендеринг на сервере

35. As Easy As Calling a Function

36. @operatino
Преимущество серверного рендеринга
• Производительность
• Единый UI код для клиента и сервера
• SEO оптимизация
• Прогрессивное улучшение

37. @operatino
Собирая все вместе
Flux/Redux ReactiveX Backbone и
другие

38. @operatino
Flux

43. @operatino
React Native

44. @operatino
“Learn once, write anywhere..”
Tom Occhino,
React Native: Bringing modern web techniques to mobile

46. @operatino
JavaScript везде!

47. @operatino

48. @operatino
React Native
• Оперирует нативным UI
• Выполняет JS код в отдельных потоках
• Позволяет переиспользовать бизнес логику с веба
• Мгновенные релизы в обход App Store
• Отличный Developer Experience

50. @operatino
Инструменты

51. Native Hot Reload

52. Native Playground

53. Redux Time Travel

54. Living Style Guide

55. @operatino
Домашнее задание
• Официальный туториал от разработчиков Реакта
• https://github.com/petehunt/react-howto
• https://camjackson.net/post/9-things-every-reactjs-
beginner-should-know

56. Роберт Харитонов
@operatino & rhr.me
Спасибо!