Реакт: новая эра фронтенд разработки

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

Front-end Development Lead Liberty Global / Ziggo

Роберт Харитонов @operatino

Vзначит View в традиционном MVC,

а так же Virtual DOM

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

но...

@operatino

Экосистема во главе всего

• Реакт закладывает основы функционального программирование в UI код

• Поддержка кроссплатформенного рендеринга

• Отличная поддержка композиции модулей

• Огромное сообщество и множество инструментов

@operatino

Новая эра

@operatino

Почему Фейсбук создал Реакт

• Предсказуемость исполнения UI кода

• Инкапсуляция состояния в компонентах

• Неизменные параметры компонентов и однонаправленный поток данных

• Композиция, простота разработки и дебага

• Новые подходы разработки сложных интерфейсов

@operatino

React makes rendering of UI as simple as defining a function.

@operatino

@operatino

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

@operatino

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

@operatino

@operatino

Преимущества Реакта

• Гибкость внедрения

• Простота поддержки кода

• Мощные библиотеки компонентов

• Кросс-платформенный рендеринг

• React Native

@operatino

Before we jump in...

@operatino

Stateless Component

@operatino

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

@operatino

@operatino

Polymer от Google

@operatino

gl-react

@operatino

react-canvas

@operatino

Server rendering

Single Page JS App

Первый запрос

Рендеринг на сервере

As Easy As Calling a Function

@operatino

Преимущество серверного рендеринга

• Производительность

• Единый UI код для клиента и сервера

• SEO оптимизация

• Прогрессивное улучшение

@operatino

Собирая все вместе

Flux/Redux ReactiveX Backbone и другие

@operatino

Flux

@operatino

React Native

@operatino

“Learn once, write anywhere..”

Tom Occhino, React Native: Bringing modern web techniques to mobile

@operatino

JavaScript везде!

@operatino

@operatino

React Native

• Оперирует нативным UI

• Выполняет JS код в отдельных потоках

• Позволяет переиспользовать бизнес логику с веба

• Мгновенные релизы в обход App Store

• Отличный Developer Experience

@operatino

Инструменты

Native Hot Reload

Native Playground

Redux Time Travel

Living Style Guide

@operatino

Домашнее задание

• Официальный туториал от разработчиков Реакта

• https://github.com/petehunt/react-howto

• https://camjackson.net/post/9-things-every-reactjs-

beginner-should-know

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

Спасибо!