Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React - новая эра фронтенд разработки (RU)

Rob
May 31, 2016

React - новая эра фронтенд разработки (RU)

Видео: https://youtu.be/BNmKJ1ioEpU

React(JS) — это современная библиотека для разработки UI компонентов от Facebook, по праву считающаяся самой трендовой технологией среди JavaScript разработчиков на 2015/16 год.

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

Роберт расскажет, почему огромная популярность React более чем заслужена, и почему это не "очередной фреймворк", а чуть ли не самое большое изменение в JavaScript разработке за последние годы.

Rob

May 31, 2016
Tweet

More Decks by Rob

Other Decks in Technology

Transcript

  1. Реакт: новая эра 

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

    View Slide

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

    View Slide

  3. View Slide

  4. View Slide

  5. View Slide

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

    View Slide

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

    View Slide

  8. но...

    View Slide

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

    View Slide

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

    View Slide

  11. View Slide

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

    View Slide

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

    View Slide

  14. View Slide

  15. View Slide

  16. @operatino

    View Slide

  17. View Slide

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

    View Slide

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

    View Slide

  20. @operatino

    View Slide

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

    View Slide

  22. @operatino
    Before we jump in...

    View Slide

  23. @operatino

    View Slide

  24. View Slide

  25. View Slide

  26. Stateless Component

    View Slide

  27. View Slide

  28. View Slide

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

    View Slide

  30. @operatino

    View Slide

  31. @operatino
    Polymer от Google

    View Slide

  32. @operatino
    gl-react

    View Slide

  33. @operatino
    react-canvas

    View Slide

  34. @operatino
    Server
    rendering
    Single Page 

    JS App
    Первый
    запрос
    Рендеринг на сервере

    View Slide

  35. As Easy As Calling a Function

    View Slide

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

    View Slide

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

    View Slide

  38. @operatino
    Flux

    View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. @operatino
    React Native

    View Slide

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

    View Slide

  45. View Slide

  46. @operatino
    JavaScript везде!

    View Slide

  47. @operatino

    View Slide

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

    View Slide

  49. View Slide

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

    View Slide

  51. Native Hot Reload

    View Slide

  52. Native Playground

    View Slide

  53. Redux Time Travel

    View Slide

  54. Living Style Guide

    View Slide

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

    View Slide

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

    View Slide