SlideShare a Scribd company logo
@maxmaxmaxmaxМАКСИМ КЛИМИШИН
CTO GVMachines Inc.
React.js:
ускоряем UX / UI
Обомне
‣ 12+ летопытавебразработки,6летJavaScript,
7летPython,годсClojure
‣ Работалв oDesk(Upwork),Helios,
42CoffeeCups.
‣ Со-организаторконференцийPyConUkraine,
KyivJS,KyivPy,Hotcode
‣ с2012годаработаюCTOв GVMachinesInc.
GVMachinesInc.
‣ Стартап по доставкепродуктовпитанияиз
супермаркетов
‣ РаботаемвУкраинекакZAKAZ.UA (Киев,
Днепропетровск,Харьков,скороввашем
городе)ив СШАкакCartFresh(Бостон)
‣ Pythonнабекенде
Нашпуть
Сегодняпоговоримо
Тема
‣ Чтоу насбыло
‣ Почему мыосталисьсReact.js
‣ Каксделать быстрее
‣ Планы
Архитектура
Как это было
АрхитектураПО– этофундаментальные
структурныерешения,которыебудет
несоизмеримодорого изменитьпосле
реализации
Чтоунасбыло
Тема
‣ Python+ Django
‣ Solr+специфичные индексы
‣ Redis
‣ jQuery +jQuery UI +bootstrap2
Как это было
Решили ехатьсjQueryиBootstrap,
неособозаморачиваясьнадкодом
Maintainability
Как это было
Поддерживаемостьсистемы– этокогда
стоимостьпервоначальнойреализации
существеннобольшевсравнениисо
стоимостьюизменений
Как это было
‣ Кодаставалобольше,менятьбылосложнее.
‣ Корзинагенериласьвiframeогромным
кускомDjango-шаблона.Работатьбыло
крайнесложно.
‣ Страницапродукта– сложныймикс
контекстадляшаблона,шаблонаи
несколькихjsфайлов
‣ JSкод вперемешкусDjangoTemplates
‣ Фиксоднойошибкипорождалдвеновые
Решение
Стратегия
Разработка
‣ Опробоватьновыетехнологии:Angular,
Backbone,React.js
‣ Внедрять постепенно,неломаяподорогеине
переписываявесьпроект
‣ Интеграционныетесты
Результат
Разработка
‣ Angularотпалсразукакслишкомсложный
‣ Backbone.jsбыл,нонатотмоментунегобыли
проблемысутечкойпамятииникакого
преимуществапосравнению сjQuery кодомне
было
Разработка
React.jsприжился,посколькоощутимо
выигрывалвпроизводительностиперед
фреймворками,приэтом нетребовалслишком
глубокознанияинструмента
Разработка
Ключевыепреимущества
‣ Еслипрегенерироватькоднасервере– реакт
небудетэтогоделатьна клиенте
‣ Длягенерациидостаточноподатьодинаковое
состояние
‣ Еслисостояние междугенерациейи
отображениемизменится – реактпроизведет
минимальноеколичествоизменений DOM
Результат
Разработка
Короче,мыкупилисьнато,каккомандаReact.js
превратилиO(n3)проблемув O(n)спомощью
двухпростыхдопущений
Процесс
Планируем
Процесс
‣ Переходплавный, дляначала
переписываемсамую ключевую часть–
 корзину
‣ Решили обойтись безcommon.jsи т.п.–
невсечленыкомандыпонимали как
этоработает
Планируем
Процесс
‣ Серверный рендеринг – второй этап
‣ Переводкаталога– третий этап
‣ Переводвзаимодействия с
пользователем– четвертый этап
Всекакобычно
Процесс
‣ Послекорзины2года мышли к
каталогу
‣ Серверный рендеринг реализован
несколько месяцевпосле
полноценной работыкаталога
Разницав перспективе
Процесс
‣ Походузнакомствосновыми
концепциями:CSP,ImmutableDS,
Clojure,CRDT,Haskell
‣ Теория очередей,практическая
работапо моделированию
Процесс
‣ Втораяитерация затянуласьс
аутсорсом
‣ Привычка генерироватьсостояние
server-sideдобавилагеморроя
‣ Изменениявынудили написатьновый
бекенддляAPI
JS Lab`16. Максим Климишин: "Smarter React.js: UI faster, UX better"
Плохиерешения
Процесс
‣ Строитьновуюсистемумаксимально
используястарыйбекендпривелок
нереальному усложнениюкодабекенда
‣ Использовать подходс$.ajaxвнутри
React.jsкомпонентпривелок
усложнениюи copy-paste-styleкодуна
клиенте
Плохиерешения
Процесс
‣ Продолжитьиспользованиеглобальных
переменных
‣ Продолжитьиспользоватьглобальные
события
Детали
JS Lab`16. Максим Климишин: "Smarter React.js: UI faster, UX better"
УнифицированныйAPI
Детали
‣ Решениевынестисложностьпо
генерациисостояниявAPIс
возможностью композициииаггрегации
‣ Один APIдля всех– Mobileapp,website
front-end
УнифицированныйAPI
Детали
‣ Решениевынестисложностьпо
генерациисостояниявAPIс
возможностью композициииаггрегации
‣ APIиспользуеткак бекендтакиклиент
‣ Избавилоотнеобходимостиотдавать
сайтчерез node.js сервер
Side-effects
Детали
‣ Параллельные запросыводномAPI
вызове
‣ Простыеипонятныеошибкивалидации
аргументов
‣ Генерация документациинабазе
простойинтроспекцииAPIвызовов
Примерзапроса
Детали
{
"meta": {"session_id": “%SESSION_ID”},
"request": [
{
"type": "timewindows.list",
"args": {
"store_ids": ["00002111"],
"zone_id": "02111"
},
"v": "0.1"
}
]
}
Примердоки
Детали
MODULE: timewindows
-------------------------------------------
RESOURCE: timewindows.list
{'count': <Or(<Int(gt=0)>, <Null>)>,
'index': <class 'trafaret.Int'>,
'only_available': <class 'trafaret.Bool'>,
'store_ids': <List(<String>)>,
'zone_id': <String>}
Архитектура
APISERVERS
request
state
generated
stateresponse
RENDERING
WORKER
REACT.JSDOM
RENDERER
put htmlinto
cache
CACHESERVERS
time
JS Lab`16. Максим Климишин: "Smarter React.js: UI faster, UX better"
Чтодальше?
Планы
‣ детерминированнаямодельдля
инвалидациисгенерированногодома
дерева
‣ Уменьшениеколичестваасинхронного
кодав JS(CSP)
‣ Неизменяемые структуры(Redux,
Immutable)
‣ Работас корзинойчерезCRDT-базу
Планы
static state (state, channel, n=0) {
// we could use CSP channels here
return go(function * () {
yield put(channel, title(“About"));
var talks = yield take(json({url: “/api/talks.json”}));
yield put(channel, [“talks", talks]);
channel.close()
})
}
Communicatingsequentialprocesses
Планы
CRDT(Swarm.js)
Спасибо.
Thanks!
@maxmaxmaxmax

More Related Content

PDF
Инновации и JavaScript
PDF
DevOPS meetup
PDF
Continuous Integration(как мы подружили frontend и backend)
PPTX
Continuous integration, или как мы подружили front end и back-end
PDF
"Изоморфный D3 + MALEVICH", Алексей Охрименко, MoscowJS 25
PDF
Tizen Mobile Application Lifecycle by Kirill Danilov
PDF
TК°Conf. Хайп против реальности: год жизни с изомофорным React-приложением. И...
PDF
Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Гал...
Инновации и JavaScript
DevOPS meetup
Continuous Integration(как мы подружили frontend и backend)
Continuous integration, или как мы подружили front end и back-end
"Изоморфный D3 + MALEVICH", Алексей Охрименко, MoscowJS 25
Tizen Mobile Application Lifecycle by Kirill Danilov
TК°Conf. Хайп против реальности: год жизни с изомофорным React-приложением. И...
Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Гал...

Viewers also liked (7)

PDF
JS Lab`16. Андрей Колодницкий: "Разработка REST сервисов на SailsJS"
PDF
JS Lab`16. Виктор Турский: "Современные тенденции в разработке frontend"
PDF
JS Lab`16. Андрей Копенкин: "RethinkDB + Socket.io. Real-time web 2.0"
PDF
JS Lab`16. Сергей Селецкий: "Ретроспектива тестирования JavaScript"
PDF
JS Lab`16. Виктор Клочихин: "Redux в реальной жизни"
PDF
JS Lab`16. Роман Лютиков: "ClojureScript, что ты такое?"
PDF
AI&BigData Lab 2016. Сергей Шельпук: Методология Data Science проектов
JS Lab`16. Андрей Колодницкий: "Разработка REST сервисов на SailsJS"
JS Lab`16. Виктор Турский: "Современные тенденции в разработке frontend"
JS Lab`16. Андрей Копенкин: "RethinkDB + Socket.io. Real-time web 2.0"
JS Lab`16. Сергей Селецкий: "Ретроспектива тестирования JavaScript"
JS Lab`16. Виктор Клочихин: "Redux в реальной жизни"
JS Lab`16. Роман Лютиков: "ClojureScript, что ты такое?"
AI&BigData Lab 2016. Сергей Шельпук: Методология Data Science проектов
Ad

More from GeeksLab Odessa (20)

PDF
DataScience Lab2017_Коррекция геометрических искажений оптических спутниковых...
PDF
DataScience Lab 2017_Kappa Architecture: How to implement a real-time streami...
PDF
DataScience Lab 2017_Блиц-доклад_Турский Виктор
PDF
DataScience Lab 2017_Обзор методов детекции лиц на изображение
PDF
DataScienceLab2017_Сходство пациентов: вычистка дубликатов и предсказание про...
PDF
DataScienceLab2017_Блиц-доклад
PDF
DataScienceLab2017_Блиц-доклад
PDF
DataScienceLab2017_Блиц-доклад
PDF
DataScienceLab2017_Cервинг моделей, построенных на больших данных с помощью A...
PDF
DataScienceLab2017_BioVec: Word2Vec в задачах анализа геномных данных и биоин...
PDF
DataScienceLab2017_Data Sciences и Big Data в Телекоме_Александр Саенко
PDF
DataScienceLab2017_Высокопроизводительные вычислительные возможности для сист...
PDF
DataScience Lab 2017_Мониторинг модных трендов с помощью глубокого обучения и...
PDF
DataScience Lab 2017_Кто здесь? Автоматическая разметка спикеров на телефонны...
PDF
DataScience Lab 2017_From bag of texts to bag of clusters_Терпиль Евгений / П...
PDF
DataScience Lab 2017_Графические вероятностные модели для принятия решений в ...
PDF
DataScienceLab2017_Оптимизация гиперпараметров машинного обучения при помощи ...
PDF
DataScienceLab2017_Как знать всё о покупателях (или почти всё)?_Дарина Перемот
PDF
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир ...
PPTX
JS Lab2017_Под микроскопом: блеск и нищета микросервисов на node.js
DataScience Lab2017_Коррекция геометрических искажений оптических спутниковых...
DataScience Lab 2017_Kappa Architecture: How to implement a real-time streami...
DataScience Lab 2017_Блиц-доклад_Турский Виктор
DataScience Lab 2017_Обзор методов детекции лиц на изображение
DataScienceLab2017_Сходство пациентов: вычистка дубликатов и предсказание про...
DataScienceLab2017_Блиц-доклад
DataScienceLab2017_Блиц-доклад
DataScienceLab2017_Блиц-доклад
DataScienceLab2017_Cервинг моделей, построенных на больших данных с помощью A...
DataScienceLab2017_BioVec: Word2Vec в задачах анализа геномных данных и биоин...
DataScienceLab2017_Data Sciences и Big Data в Телекоме_Александр Саенко
DataScienceLab2017_Высокопроизводительные вычислительные возможности для сист...
DataScience Lab 2017_Мониторинг модных трендов с помощью глубокого обучения и...
DataScience Lab 2017_Кто здесь? Автоматическая разметка спикеров на телефонны...
DataScience Lab 2017_From bag of texts to bag of clusters_Терпиль Евгений / П...
DataScience Lab 2017_Графические вероятностные модели для принятия решений в ...
DataScienceLab2017_Оптимизация гиперпараметров машинного обучения при помощи ...
DataScienceLab2017_Как знать всё о покупателях (или почти всё)?_Дарина Перемот
JS Lab 2017_Mapbox GL: как работают современные интерактивные карты_Владимир ...
JS Lab2017_Под микроскопом: блеск и нищета микросервисов на node.js
Ad

JS Lab`16. Максим Климишин: "Smarter React.js: UI faster, UX better"