Download to read offline
Uploaded bySECON
SECON'2016. Сергей Аверин. Javascript-фреймворки: должен остаться только один
Доклад Сергея Аверина посвящен выбору нового веб-фреймворка для компании с 5 миллионами пользователей и 700 сотрудниками. Основные проблемы включают устаревшие технологии, разнообразие стилей разработки и сложность кода, что приводит к необходимости создания более понятной архитектуры и единой технологии для веб-разработки. В результате работы была выбрана комбинация Flux и React на TypeScript, что позволяет упростить структуру приложения и улучшить производительность.
More Related Content
Similar to SECON'2016. Сергей Аверин. Javascript-фреймворки: должен остаться только один
SECON'2016. Сергей Аверин. Javascript-фреймворки: должен остаться только один
- 1.
- 2. ПРО ЧТО ДОКЛАД •Как выбирали новый веб-фреймворк – Немного о компании – Бекграунд – Задача – Исследование существующего кода – Выбор на что смотреть – Техническая оценка вариантов – Переделка одного из вариантов «под себя» – Сравнение пилотных проектов – Оценка затрат на внедрение 2
- 3.
- 4.
- 5. МАСШТАБ • 5 000000 пользователей • 500 000 из них — корпоративные • 700 сотрудников в 17 разных офисах • Выпускаем много разного софта: – коробочный под Windows, – корпоративный с веб-интерфейсами, – cloud-продукты с веб-интерфейсом. 5
- 6. ВЕБ Все отделы делаютвеб-часть по-разному 6
- 7.
- 8. ПРОБЛЕМА • Много разныхтехнологий для веб-части • Фронтенд пишут не только JS-разработчики • Нет возможности подключить к работе верстальщика • Качество кода сильно отличается • Текущие технологии устарели 8
- 9.
- 10. КУРС • Толстый клиентна JS/HTML/CSS • Единая технология во всей компании • Библиотека UI-компонентов • Возможность работать разработчикам разных уровней • Код должен быть понятен backend-разработчикам 10
- 11.
- 12. ЧТО ИМЕЕМ? • Dojo •Сайт acronis.com — rich-client там не нужен • Angular 1.x • RoR+jQuery • ExtJS 4 12
- 13. ЧТО НЕ ТАКС EXTJS? • Индексная страница документации содержит: 13 395 классов
- 14.
- 15. класс с 201методами 15
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22. deep in layoutingcode… 22
- 23. 23 deep in layoutingcode…
- 24. Рафик, где мойтрафик? 24
- 25. Ладно с фреймворкомпонятно, а само приложение? 25
- 26. ПОЛЕЗЛИ В КОДПРИЛОЖЕНИЯ • Мало комментариев • Жесткая связность • Нет границы между Controller и View 26
- 27. State, BizLogicState, BizLogicState, BizLogic, Ui logic Model View Child View SubController SubController2 Child View Controller Server API М С V M+CV 27
- 28. ПОЛЕЗЛИ В КОДПРИЛОЖЕНИЯ • Мало комментариев • Жесткая связность • Нет границы между Controller и View • Publish/Subscribe — вроде как правильный паттерн, но не работает. 28
- 29. 29 8 событий, ~18вызовов
- 30.
- 31. ВОПРОС НА ЗАСЫПКУ Чегообычно нет в коде приложений с жесткой связностью и плохим разграничением зон отвественности? 31
- 32.
- 33. 33 Полезли в кодприложения Выводы…
- 34. 34 Полезли в кодприложения Выводы…
- 35. НАСТОЯЩИЕ ВЫВОДЫ • Оченьсложный фреймворк • Запутаный получившийся код • Мегабайты кода • Нельзя подключить обычных верстальщиков • Виноват ли фреймворк? — частично 35
- 36. КУДА НАПРАВИТЬ УСИЛИЯ? •нужен проще UI слой • менее связная архитектура • четкое разделение зон отвественности (языков, технологий) • больше границ и правил для программистов • и код, в котором просто разобраться среднестатистическому разработчику. 36
- 37.
- 38. …ЧТО НАМ ПОДСКАЖЕТИНТЕРНЕТ? «Хорошие художники копируют, великие художники воруют.» Пабло Пикассо 38
- 39. ЧТО НАМ ПОДСКАЖЕТИНТЕРНЕТ? Angular, backbone, meteor, Ember, polymer, Aurelia, React, Vue, Mercury, Dojo, Knockback.js, CanJS, Mithril, Ampersand, Knockout, Flight, TroopJS, Batman, Spine, YUI, ExtJS, Google Web Toolkit, Kendo UI, OpenUI5, Webix, Echo3, Enyo 39
- 40. GITHUB 40 Кол-во строк кода Angular Backbone Dojo React ExtJS YahooUI Ember Meteor Kendo Polymer Knockout 0 700 000 1 400 000
- 41. КОНФЕРЕНЦИИ 2015 41 0 7,5 15 22,5 30 Кол-во докладовпо фреймворкам Angular React Ember Backbone Polymer Aurelia Meteor Connect JS, US Frontporch.io, US Midwest JS, US FullStack, UK WebTech Conference, DE
- 42.
- 43.
- 44.
- 45. РЫНОК ВАКАНСИЙ 45 0 125 250 375 500 Angular ReactEmber Backbone ExtJS Knockout Meteor Кол-во резюме Кол-во вакансий
- 46. ЧТО СМОТРИМ: • AngularJS •Ember • Knockout • Backbone.js + проекты-расширения • React + Flux • Dojo • ExtJS 6 =) 46
- 47. <CUT />: ЧТОНЕ ПОДОШЛО • Backbone • Ember • Knockout • Dojo • ExtJS 6 47
- 48. • Версия 1.* •Хорошая модульность • Нет единого стиля разработки • Трудно дебажить • Многовато «магии» • Сложно интегрировать с новыми технологиями • Код будет несовместим с версией 2.* 48
- 49. Посмотрели 2.* • Ажтри языка — TypeScript, Javascript и Dart. • Вот это выглядит как то, что надо. • Сильно лучше версии 1.* • Окей, надо разбираться… 49
- 50. + Понятный dataflow + Структурность, понятный data flow, изолированность компонент + Когда-то в будущем будет популярным мейн- стримом - Собственные шаблоны с кодом - Все приложение работает как дерево компонентов, как таковых Controller’ов нет - Непонятно, когда же оно зарелизится 50
- 51. + Не фреймворк,а UI-библиотека + структурность + понятный data flow, изолированность компонент + нет какого-то магического синтаксиса (кастомных атрибутов, фильтров) + понятная и простая возможность тюнинга производительности ? и даже серверный рендеринг 51
- 52. + Архитектура, ноне фреймворк + one-way data flow, синхронная обработка + Как приложение делится на независимые блоки с помощью денормализации — понятно + Единый Event Bus (Dispatcher) и уникальные события — круто. - Как обеспечивается динамика — непонятно - Смешение концепций — Store’ы и хранят данные и реализуют бизнес-логику… 52
- 53. • Кода отсамого Facebook считай, почти нет. • Посмотрели реальные фреймворки — fluxxor, DeLorean, ReFlux.js, Este.js: – уже лучше, но все еще нет динамики – видно общий прогресс стандартизации в виде ES6, npm- модулей, изоморфности и т. д. – с разработкой веб-приложений беда… невозможно, например, создать два instance’а одного Store’а, чтобы они не воевали друг с другом. – нет интернационализации – нет примеров тестов 53
- 54.
- 55. TYPESCRIPT Шанс уменьшить «креативность»разработчиков разных отделов 55
- 56.
- 57. ИНТЕРФЕЙСЫ Стандартизирует код +клей между разными частями приложения 57
- 58. А ТАКЖЕ • Дженерики •Декораторы • Составные типы 58
- 59. В ИТОГЕ? • Вопросовстало только больше =) • «Серебряной пули» нет. В этом плане ExtJS «держит удар». • Хотим фреймворк с Typescript! 59
- 60.
- 61. ВЕРНЕМСЯ К ЗАДАЧЕ •JS-кодеры должны писать код, верстальщики — делать шаблоны • Нужен проще UI слой, понятнее архитектура, четкое разделение (языков, технологий), больше границ, правил и стандартов. • На Typescript • Не являющийся монолитным монстром все-в-одном 61
- 62. ПОРТИРУЕМ FLUX • Взялиза основу Flux+React фреймворк Este.js, как наиболее инновационный. • Плавно переписывали, пока за три захода от него не осталось ничего, кроме конфига сборщика. 62
- 63.
- 64. 1. STORE’Ы • Разныезоны ответственности • Store -> область хранения данных (Store) и отдельно логика (Controller) (сообразно тому, куда идет развитие Flux) 64
- 65. State, BizLogicState, BizLogicState, BizLogic, Ui logic Model View Child View SubController SubController2 Child View Controller Server API М С V Примерно как было 65
- 66. 66 Ui logicData BizLogic Isolatedblock Isolated block Isolated block Child View Child View View Server API Store Store Store М С V ViewView Child View Child View Dispatcher Controller SubController2 SubController Action Примерно как станет
- 67. 2. JSX • JSX— это опять мешанина кода и HTML. • Обратили внимание на wix-react-templates • Написали свой похожий 67
- 68.
- 69.
- 70.
- 71. 2. JSX • ПоявилсяTSX • Второй вариант — ограничить применение кода в шаблонах, создав свои теги в TSX (это JSX в Typesript) 71
- 72. 3. ДИНАМИКА • Нетдинамического создания Store’ов и View-компонент. • Как организовать независимую работу двух одинаковых блоков на одной странице? 72
- 73.
- 74. ПОЛУЧИЛОСЬ: • Хороший ООПс интерфейсами и дженериками • С dependency injection • Только две внешние библиотеки — React и lodash • Можно поменять что угодно • С нормальной сборкой 74
- 75.
- 76. БИТВА «ПИЛОТОВ» • Обрезаннаякопия существующей админки «с нуля»: – ExtJS 6 + TypeScript – Flux + React + Typescript • Сложности: – анимации – кастомный скроллбар – интерфейс меняется для узких экранов – мобильная версия – JSON-REST API с авторизацией 76
- 77. ЦИФРЫ* ExtJS6 demo Flux+Reactdemo PRODUCTION BUILD JS CODE SIZE 1,45 MB 336 KB PRODUCTION BUILD CSS CODE SIZE 345 KB 19.9 kB # OF HTML DOM NODES 841 301 LOAD TIME (PRODUCTION, NO CACHE) 1.54 s 0,59 s LOAD TIME (PRODUCTION, CACHE) 1.42 s 0,58 s TIME UNTIL FIRST API REQUEST 0,405 s 0,168 s JS INIT TIME (GOOGLE CHROME) 0,345 s 0,158 s PRODUCTION BUILD MEMORY USAGE (GOOGLE CHROME) 24.2 Mb 11.8 Mb * В реальном проекте разница в объемах кода и скорости инициализации будет меньше 77
- 78. ПЛАНЫ • Изучаем 2.0beta • Запиливаем первый боевой мини-проект, выбираем, что лучше 78
- 79.
- 80. ТЕХНОЛОГИЯ МИГРАЦИИ • Варианты: –Новые проекты пишем на новом стеке. – Старый код не трогаем, новый встраиваем целыми страницами, как iframe. – При модификации старого кода — или правь, как есть, или портируй. 80
- 81.
- 82.