React.js: Ускоряем UX/UI
•
1 like•568 views
история внедрения React.js в проект, миграции и развития
![Примерзапроса
Детали
{
"meta": {"session_id": “%SESSION_ID”},
"request": [
{
"type": "timewindows.list",
"args": {
"store_ids": ["00002111"],
"zone_id": "02111"
},
"v": "0.1"
}
]
}](https://image.slidesharecdn.com/jslab2016-160314090421/85/React-js-UX-UI-31-320.jpg)
![Планы
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](https://image.slidesharecdn.com/jslab2016-160314090421/85/React-js-UX-UI-37-320.jpg)
React.js: Ускоряем UX/UI
- 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, неособозаморачиваясьнадкодом
- 10. Как это было ‣ Кодаставалобольше,менятьбылосложнее. ‣ Корзинагенериласьвiframeогромным кускомDjango-шаблона.Работатьбыло крайнесложно. ‣ Страницапродукта– сложныймикс контекстадляшаблона,шаблонаи несколькихjsфайлов ‣ JSкод вперемешкусDjangoTemplates ‣ Фиксоднойошибкипорождалдвеновые
- 11. Решение
- 12. Стратегия Разработка ‣ Опробоватьновыетехнологии:Angular, Backbone,React.js ‣ Внедрять постепенно,неломаяподорогеине переписываявесьпроект ‣ Интеграционныетесты
- 13. Результат Разработка ‣ Angularотпалсразукакслишкомсложный ‣ Backbone.jsбыл,нонатотмоментунегобыли проблемысутечкойпамятииникакого преимуществапосравнению сjQuery кодомне было
- 15. Разработка Ключевыепреимущества ‣ Еслипрегенерироватькоднасервере– реакт небудетэтогоделатьна клиенте ‣ Длягенерациидостаточноподатьодинаковое состояние ‣ Еслисостояние междугенерациейи отображениемизменится – реактпроизведет минимальноеколичествоизменений DOM
- 17. Процесс
- 18. Планируем Процесс ‣ Переходплавный, дляначала переписываемсамую ключевую часть– корзину ‣ Решили обойтись безcommon.jsи т.п.– невсечленыкомандыпонимали как этоработает
- 19. Планируем Процесс ‣ Серверный рендеринг – второй этап ‣ Переводкаталога– третий этап ‣ Переводвзаимодействия с пользователем– четвертый этап
- 20. Всекакобычно Процесс ‣ Послекорзины2года мышли к каталогу ‣ Серверный рендеринг реализован несколько месяцевпосле полноценной работыкаталога
- 21. Разницав перспективе Процесс ‣ Походузнакомствосновыми концепциями:CSP,ImmutableDS, Clojure,CRDT,Haskell ‣ Теория очередей,практическая работапо моделированию
- 22. Процесс ‣ Втораяитерация затянуласьс аутсорсом ‣ Привычка генерироватьсостояние server-sideдобавилагеморроя ‣ Изменениявынудили написатьновый бекенддляAPI
- 24. Плохиерешения Процесс ‣ Строитьновуюсистемумаксимально используястарыйбекендпривелок нереальному усложнениюкодабекенда ‣ Использовать подходс$.ajaxвнутри React.jsкомпонентпривелок усложнениюи copy-paste-styleкодуна клиенте
- 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>}
- 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