12.3.16 JS Lab.

1. @maxmaxmaxmaxМАКСИМ КЛИМИШИН
CTO GVMachines Inc.
React.js:
ускоряем UX / UI

2. Обомне
‣ 12+ летопытавебразработки,6летJavaScript,
7летPython,годсClojure
‣ Работалв oDesk(Upwork),Helios,
42CoffeeCups.
‣ Со-организаторконференцийPyConUkraine,
KyivJS,KyivPy,Hotcode
‣ с2012годаработаюCTOв GVMachinesInc.

3. GVMachinesInc.
‣ Стартап по доставкепродуктовпитанияиз
супермаркетов
‣ РаботаемвУкраинекакZAKAZ.UA (Киев,
Днепропетровск,Харьков,скороввашем
городе)ив СШАкакCartFresh(Бостон)
‣ Pythonнабекенде

4. Нашпуть

5. Сегодняпоговоримо
Тема
‣ Чтоу насбыло
‣ Почему мыосталисьсReact.js
‣ Каксделать быстрее
‣ Планы

6. Архитектура
Как это было
АрхитектураПО– этофундаментальные
структурныерешения,которыебудет
несоизмеримодорого изменитьпосле
реализации

7. Чтоунасбыло
Тема
‣ Python+ Django
‣ Solr+специфичные индексы
‣ Redis
‣ jQuery +jQuery UI +bootstrap2

8. Как это было
Решили ехатьсjQueryиBootstrap,
неособозаморачиваясьнадкодом

9. Maintainability
Как это было
Поддерживаемостьсистемы– этокогда
стоимостьпервоначальнойреализации
существеннобольшевсравнениисо
стоимостьюизменений

10. Как это было
‣ Кодаставалобольше,менятьбылосложнее.
‣ Корзинагенериласьвiframeогромным
кускомDjango-шаблона.Работатьбыло
крайнесложно.
‣ Страницапродукта– сложныймикс
контекстадляшаблона,шаблонаи
несколькихjsфайлов
‣ JSкод вперемешкусDjangoTemplates
‣ Фиксоднойошибкипорождалдвеновые

11. Решение

12. Стратегия
Разработка
‣ Опробоватьновыетехнологии:Angular,
Backbone,React.js
‣ Внедрять постепенно,неломаяподорогеине
переписываявесьпроект
‣ Интеграционныетесты

13. Результат
Разработка
‣ Angularотпалсразукакслишкомсложный
‣ Backbone.jsбыл,нонатотмоментунегобыли
проблемысутечкойпамятииникакого
преимуществапосравнению сjQuery кодомне
было

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

15. Разработка
Ключевыепреимущества
‣ Еслипрегенерироватькоднасервере– реакт
небудетэтогоделатьна клиенте
‣ Длягенерациидостаточноподатьодинаковое
состояние
‣ Еслисостояние междугенерациейи
отображениемизменится – реактпроизведет
минимальноеколичествоизменений DOM

16. Результат
Разработка
Короче,мыкупилисьнато,каккомандаReact.js
превратилиO(n3)проблемув O(n)спомощью
двухпростыхдопущений

17. Процесс

18. Планируем
Процесс
‣ Переходплавный, дляначала
переписываемсамую ключевую часть–
корзину
‣ Решили обойтись безcommon.jsи т.п.–
невсечленыкомандыпонимали как
этоработает

19. Планируем
Процесс
‣ Серверный рендеринг – второй этап
‣ Переводкаталога– третий этап
‣ Переводвзаимодействия с
пользователем– четвертый этап

20. Всекакобычно
Процесс
‣ Послекорзины2года мышли к
каталогу
‣ Серверный рендеринг реализован
несколько месяцевпосле
полноценной работыкаталога

21. Разницав перспективе
Процесс
‣ Походузнакомствосновыми
концепциями:CSP,ImmutableDS,
Clojure,CRDT,Haskell
‣ Теория очередей,практическая
работапо моделированию

22. Процесс
‣ Втораяитерация затянуласьс
аутсорсом
‣ Привычка генерироватьсостояние
server-sideдобавилагеморроя
‣ Изменениявынудили написатьновый
бекенддляAPI

24. Плохиерешения
Процесс
‣ Строитьновуюсистемумаксимально
используястарыйбекендпривелок
нереальному усложнениюкодабекенда
‣ Использовать подходс$.ajaxвнутри
React.jsкомпонентпривелок
усложнениюи copy-paste-styleкодуна
клиенте

25. Плохиерешения
Процесс
‣ Продолжитьиспользованиеглобальных
переменных
‣ Продолжитьиспользоватьглобальные
события

26. Детали

28. УнифицированныйAPI
Детали
‣ Решениевынестисложностьпо
генерациисостояниявAPIс
возможностью композициииаггрегации
‣ Один APIдля всех– Mobileapp,website
front-end

29. УнифицированныйAPI
Детали
‣ Решениевынестисложностьпо
генерациисостояниявAPIс
возможностью композициииаггрегации
‣ APIиспользуеткак бекендтакиклиент
‣ Избавилоотнеобходимостиотдавать
сайтчерез node.js сервер

30. Side-effects
Детали
‣ Параллельные запросыводномAPI
вызове
‣ Простыеипонятныеошибкивалидации
аргументов
‣ Генерация документациинабазе
простойинтроспекцииAPIвызовов

31. Примерзапроса
Детали
{
"meta": {"session_id": “%SESSION_ID”},
"request": [
{
"type": "timewindows.list",
"args": {
"store_ids": ["00002111"],
"zone_id": "02111"
},
"v": "0.1"
}
]
}

32. Примердоки
Детали
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>}

33. Архитектура
APISERVERS
request
state
generated
stateresponse
RENDERING
WORKER
REACT.JSDOM
RENDERER
put htmlinto
cache
CACHESERVERS
time

35. Чтодальше?

36. Планы
‣ детерминированнаямодельдля
инвалидациисгенерированногодома
дерева
‣ Уменьшениеколичестваасинхронного
кодав JS(CSP)
‣ Неизменяемые структуры(Redux,
Immutable)
‣ Работас корзинойчерезCRDT-базу

37. Планы
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

38. Планы
CRDT(Swarm.js)

39. Спасибо.
Thanks!
@maxmaxmaxmax