Downloaded 22 times
![27
import { ACCOUNT_LIST } from '../actions';
import { CLIENT } from '../roles';
accountList.isServer = true;
accountList.requiredRoles = [CLIENT];
function accountList(context) {
return context.service('account/list')
.then(payload => context.dispatch(ACCOUNT_LIST, payload));
}
export default accountList;
Action creator](https://image.slidesharecdn.com/tinkoff-160607124805/85/Tinkoff-ru-27-320.jpg)
![30
import { LogoPure } from './LogoPure.jsx';
const UILogo = connect(
['config', 'brands'],
({
brands,
config: { brandsBasePath }
}) => ({
brands,
brandsBasePath
})
)(LogoPure);
export default UILogo;
Компонент коннектор](https://image.slidesharecdn.com/tinkoff-160607124805/85/Tinkoff-ru-30-320.jpg)
Uploaded byOntico
Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)
Документ описывает процесс разработки нового фронтенда для сайта tinkoff.ru, включая обзор технологий и оптимизацию кода. Основное внимание уделяется переиспользованию компонентов, улучшению производительности и упрощению архитектуры приложения. Также рассматриваются стратегии сборки и деплоя, а также использование различных библиотек и инструментов для достижения эффективности.
More Related Content
Similar to Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)
Как мы разрабатываем новый фронтенд / Филипп Нехаев (Tinkoff.ru)
- 1. Как мы разрабатываем новыйфронтенд Tinkoff.ru Филипп Нехаев Архитектор веб-интерфейсов Тинькофф банк
- 2. 2 1. О нашихзадачах 2. Обзор стэков 3. Переиспользование 4. Оптимизация 5. Сборка и деплой
- 3.
- 4. Сервер Клиент 2011 сайт иИнтернет-Банк Java/Spring, JSP, Maven JS, jQuery, Handlebars, Backbone, Maven/Grunt Что было раньше 4
- 5.
- 6. 6 • Два UI-слоя •Дублирование логики Сервер Java JSP Клиент JS Handlebars Что было раньше
- 7. 7 • Два UI-слоя •Дублирование логики • Две группы разработчиков Сервер Java JSP Клиент JS Handlebars Что было раньше
- 8. 8 • Два UI-слоя •Дублирование логики • Две группы разработчиков • Дорогая поддержка Сервер Java JSP Клиент JS Handlebars Что было раньше
- 9. Сервер Клиент 2011 сайт иИнтернет-Банк Java/Spring, JSP, Maven JS, jQuery, Handlebars, Backbone, Maven/Grunt 2014 Кошелек JS, Backbone, Handlebars, Bower/Grunt Что было раньше 9
- 10. Сервер Клиент 2011 сайт иИнтернет-Банк Java/Spring, JSP, Maven JS, jQuery, Handlebars, Backbone, Maven/Grunt 2014 Кошелек JS, Backbone, Handlebars, Bower/Grunt 2015 Интернет-Банк v5 JS, Angular, Bower/Gulp Что было раньше 10
- 11. 11 Клиент JS • Сложно решатьзадачи SEO и SMM Что было раньше
- 12.
- 13. Сервер Клиент 2016 Сайт,Интернет-Банк, Кошелек, Брокеры, 🔜 JS, React, Flux, NPM/Webpack 🏎 Что есть сейчас 13
- 14. 14 • SEO иSMM Сервер JS Клиент 🏎 Что есть сейчас
- 15. 15 • SEO иSMM • Переиспользование 99% кода Сервер JS Клиент 🏎 Что есть сейчас
- 16. 16 • SEO иSMM • Переиспользование 99% кода • Одна группа разработчиков Сервер JS Клиент 🏎 Что есть сейчас
- 17. 17 • SEO иSMM • Переиспользование 99% кода • Одна группа разработчиков • Скорость разработки Сервер JS Клиент 🏎 Что есть сейчас
- 18. 18 • SEO иSMM • Переиспользование 99% кода • Одна группа разработчиков • Скорость разработки • Нет монолитности Сервер JS Клиент 🏎 Что есть сейчас
- 19.
- 20. 20 • Реализация Flux •Используем только Routr и Dispatchr Fluxible
- 21. 21 Сервисы Действия СторыКомпоненты Доступ к API UI логика Рендер Бизнес логика Распределение по слоям
- 22. 22 🌠 Жизнь приложения Node.jsБраузер Интеракция • Роутинг на подприложения • Поиск редиректов • Независимый контекст • Сериализация состояния • Создание контекста • Десериализация состояния • Циклы взаимодействия
- 23.
- 24.
- 25.
- 26.
- 27. 27 import { ACCOUNT_LIST} from '../actions'; import { CLIENT } from '../roles'; accountList.isServer = true; accountList.requiredRoles = [CLIENT]; function accountList(context) { return context.service('account/list') .then(payload => context.dispatch(ACCOUNT_LIST, payload)); } export default accountList; Action creator
- 28.
- 29. 29 Коннектор Чистый компонент Получаютданные из сторов Получают данные из props Передают данные в чистый компонент через props Рендерит данные в HTML Обрабатывают callbacks, вызывают действия Обрабатывают DOM-события, вызывают callbacks Переиспользуемые компоненты
- 30. 30 import { LogoPure} from './LogoPure.jsx'; const UILogo = connect( ['config', 'brands'], ({ brands, config: { brandsBasePath } }) => ({ brands, brandsBasePath }) )(LogoPure); export default UILogo; Компонент коннектор
- 31.
- 32.
- 33. 33 ⏱ Оптимизация наклиенте pure-render
- 34. 34 ⏱ Оптимизация наклиенте react-perf
- 35. 35 ⏱ Оптимизация наклиенте render-logger
- 36. 36 • jsx-no-bind ⏱ Оптимизацияна клиенте
- 37. 37 • jsx-no-bind • batchedupdates ⏱ Оптимизация на клиенте
- 38. 38 ⏱ Оптимизация наклиенте Визуальное ускорение
- 39. 39 ⏱ Оптимизация наклиенте Визуальное ускорение
- 40. 40 ⏱ Оптимизация насервере • ES6 Class, NODE_ENV=production – 4x ускорение
- 41. 41 ⏱ Оптимизация насервере • ES6 Class, NODE_ENV=production – 4x ускорение • Minified React – +2%
- 42. 42 ⏱ Оптимизация насервере • ES6 Class, NODE_ENV=production – 4x ускорение • Minified React – +2% • Babel transforms (constant & inline elements) – +10%
- 43. 43 ⏱ Оптимизация насервере • ES6 Class, NODE_ENV=production – 4x ускорение • Minified React – +2% • Babel transforms (constant & inline elements) – +10% • stateless functions – +45%
- 44. 44 ⏱ Оптимизация насервере • ES6 Class, NODE_ENV=production – 4x ускорение • Minified React – +2% • Babel transforms (constant & inline elements) – +10% • stateless functions – +45% • react-dom-stream – +55%
- 45. 45 • Кэширование науровне страницы ⏱ Оптимизация на сервере
- 46. 46 • Кэширование науровне страницы • Без sensitive данных ⏱ Оптимизация на сервере
- 47.
- 48.
- 49. 49 • nginx • express-cache-on-demand •lru-cache Кэш
- 50.
- 51. 51 • Для сервераи клиента 🏢 Сборка
- 52. 52 • Для сервераи клиента • Без переменных окружения 🏢 Сборка
- 53. 53 • PM2 > pm2startOrGracefulReload processes.json 🌋 Деплой
- 54. 54 • PM2 > pm2startOrGracefulReload processes.json • Каждый экземпляр на отдельном порту PORT: process.env.PORT + process.env.NODE_APP_INSTANCE 🌋 Деплой
- 55.
- 56.
- 57. 57 • Автогенерация демодля компонентов 🌪 Что осталось?
- 58. 58 • Автогенерация демодля компонентов • Разделение на бандлы 🌪 Что осталось?
- 59. 59 • Автогенерация демодля компонентов • Разделение на бандлы • Ускорение сборки стилей 🌪 Что осталось?
- 60.
- 61. 61 👏 Спасибо завнимание! f.nehaev@tinkoff.ru linkedin.com/in/nehaev fb.com/philnehaev Дополнительные материалы: goo.gl/ZEpnTU