Download to read offline
![Примерзапроса
Детали
{
"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/75/React-js-UX-UI-31-2048.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/75/React-js-UX-UI-37-2048.jpg)
Uploaded byMax Klymyshyn
React.js: Ускоряем UX/UI
Документ описывает опыт Максима Климашина в разработке веб-приложений с использованием React.js в качестве CTO компании GVMachines Inc. Он делится процессом перехода от использования Django и jQuery к React.js, а также планами по улучшению архитектуры и интеграции API. В тексте также рассматриваются проблемы и решения, связанные с поддерживаемостью и производительностью кода.
React.js: Ускоряем UX/UI
- 1. @maxmaxmaxmaxМАКСИМ КЛИМИШИН CTO GVMachinesInc. 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.
- 10. Как это было ‣Кодаставалобольше,менятьбылосложнее. ‣ Корзинагенериласьвiframeогромным кускомDjango-шаблона.Работатьбыло крайнесложно. ‣ Страницапродукта– сложныймикс контекстадляшаблона,шаблонаи несколькихjsфайлов ‣ JSкод вперемешкусDjangoTemplates ‣ Фиксоднойошибкипорождалдвеновые
- 11.
- 12. Стратегия Разработка ‣ Опробоватьновыетехнологии:Angular, Backbone,React.js ‣ Внедрятьпостепенно,неломаяподорогеине переписываявесьпроект ‣ Интеграционныетесты
- 13.
- 14.
- 15. Разработка Ключевыепреимущества ‣ Еслипрегенерироватькоднасервере– реакт небудетэтогоделатьна клиенте ‣Длягенерациидостаточноподатьодинаковое состояние ‣ Еслисостояние междугенерациейи отображениемизменится – реактпроизведет минимальноеколичествоизменений DOM
- 16.
- 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.
- 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.
- 39.