From Java Legacy to React.js Migration

Oleg Korovin, Odnoklassniki @ React Moscow Meetup 5
Dec 11, 2019, Gazprombank

Доклад про то, как Одноклассники решили начать миграцию со старого стека на Реакт, и какие при этом были трудности, с которыми пришлось справляться. Невероятная история запуска Реакта в мире Java.

Transcript

1. !1
2. О себе • 15 лет во фронтенде • «Вроде знаю JS» • Сайт аэропорта Пулково • Студия Лебедева, Яндекс, Одноклассники • Не делаю opensouce !2
4. !4 1
5. !5
6. На клиенте •GWT •jQuery •DotJs •RequireJs •… !6
7. !7
8. Проблемы • Старые библиотеки • Нет единого фреймворка • Нет изоморфности • Нет единого структурированного приложения на клиенте • Плохая отзывчивость • Недостаточный инструментарий • Большой порог входа • … !8
9. Требования к решению •Изоморфный код для UI •Плавный переход (миграция) •Серверный рендеринг •У нас не должно быть усложнения эксплуатации !9
10. Почему серверный рендеринг? !10
11. !11 Наш любимый пользователь
12. !12 В деревне Кужепятовка 100500км от МКАД 4G
13. !13 Если будет серверный рендеринг
14. !14 Если не будет серверного рендеринга
15. !15 Если не будет серверного рендеринга
16. !16 Пользователи в печали
17. Часть 2
 Поиск решения !17
18. Концепция решения - виджеты !18
19. !19
20. Как работает сервер сейчас !20
21. Как работает сервер сейчас !21 < 200ms one-nio - бинарный протокол 
 https://github.com/odnoklassniki/one-nio HTTP one-nio < 1ms HTML WEB API
22. Что делать? !22
23. !23
24. !24
25. NodeJS !25 !25 API WEB WEB one-nio http http
26. Почему не NodeJS !26 •HTTP транспорт - медленно •Cериализация/десериализация - доп нагрузка, задержка, сложность •Еще один компонент - риски эксплуатации
27. WEB А можно ли запустить JS в JVM? !27 • Простая инфраструктура • Нет накладных расходов
28. Почему не V8 !28 • Сложность эксплуатации WEB
29. Nashorn Rhino GraalVM JS рантаймы в JVM !29 • Всё на JVM • Java-JS взаимодействие • Безопасный рантайм • Компилятор на Java
30. Nashorn, Rhino, GraalVM !30
31. https://www.graalvm.org !31
32. !32
33. https://reactjs.org/ !33
34. GraalVM + React • Нет поддержки типов в JS • Риски эксплуатации GraalVM - !34 • Java + JS • Сообщество • Низкий порог входа • Эксплуатация не усложнилась • Найм сотрудников +
35. Часть 3
 Запуск React в GraalVM !35
36. Как GraalVM работает с JS !36
37. JS Context !37 JS Context JAVA global Context context = Context.create("js"); //получаем global данного контекста Value js = context.getBindings("js"); Context context = Context.create("js"); //получаем global данного контекста Value js = context.getBindings("js");
38. Context context = Context.create("js"); //получаем global данного контекста Value js = context.getBindings("js"); //можем читать из global Value load = js.getMember("load"); //можем вызвать функцию из контекста load.execute(pathToModule); //можем выполнить код в данном контексте context.eval("js", someCode); //можем читать из global Value load = js.getMember("load"); //можем вызвать функцию из контекста load.execute(pathToModule); //можем выполнить код в данном контексте context.eval("js", someCode); JS Context !38 JAVA JS Context global load() app.js eval()
39. JS Context !39 Context context = Context.create("js"); //получаем global данного контекста Value js = context.getBindings("js"); //можем читать из global Value load = js.getMember("load"); //вызываем функцию из контекста load.execute(pathToModule); //можем выполнить код в данном контексте context.eval("js", someCode); //можем записать в global js.putMember("serverProxy", serverProxy); //можем записать в global js.putMember("serverProxy", serverProxy); //можем читать из global Value app = js.getMember("app"); JAVA JS Context global load() app.js eval() js data java data
40. Серверный рендеринг JS - концепт !40
41. WEB !41 Серверный рендеринг JS - концепт Java Functions render() hello-world.js Context
42. WEB !42 Серверный рендеринг JS - концепт HTTP HTML API data data HTML Шаблонизатор render(data)
43. Серверный рендеринг JS - реализация !43
44. WEB !44 Серверный рендеринг JS - реализация HTTP HTML API data Шаблонизатор Очередь <custom-tag /> Java Thread Pool HTML
45. CPU CPU CPU CPU Почему пул контекстов - это хорошо? !45 Java Thread Pool Java data Thread Thread Thread Thread
46. Конфигурация UI фреймворка !46
48. Архитектура приложений !48
49. Архитектура приложений !49 Store (MobX) Controller Component MVC Приложение в DOM узле Attributes API Events
50. React Engine !50 сервер клиент java runner js runner app engine приложение
51. Движок приложения !51 •Инициализирует приложение •Связывает приложение с дом узлом •Предоставляет •единое апи для рендеринга и уничтожения приложения •сервисы локализации, настроек, пр..
52. Код приложения !52 export class EventsCalendarBlock extends ReactAppBlock<...> { // Создаём реализацию API блока getAppAPI() { return { setDate: (date) => this.ctrl.store.setDate(date), ... }; } // Возвращаем правила парсинга атрибутов getAttrsTypes() { return { date: AttrsType.STRING, ... }; } getAppEntities() { return { Store: EventsCalendarStore, Controller: EventsCalendarController, Component: EventsCalendar }; } }
53. Код приложения !53 export class EventsCalendarBlock extends ReactAppBlock<...> { // Создаём реализацию API блока. getAppAPI() { return { setDate: (date) => this.ctrl.store.setDate(date), ... }; } // Возвращаем правила парсинга атрибутов getAttrsTypes() { return { date: AttrsType.STRING, ... }; } getAppEntities() { return { Store: EventsCalendarStore, Controller: EventsCalendarController, Component: EventsCalendar }; } } getAppEntities() { return { Store: EventsCalendarStore, Controller: EventsCalendarController, Component: EventsCalendar }; } // Возвращаем правила парсинга атрибутов getAttrsTypes() { return { date: AttrsType.STRING, ... }; } // Создаём реализацию API блока getAppAPI() { return { setDate: (date) => this.ctrl.store.setDate(date), ... }; }
54. Информация о приложении { "events-calendar": { "bundleName": "events-calendar", "js": "events-calendar_h4h5m.js", "css": "events-calendar_h4h5m.css" } } !54
55. Запуск приложения на клиенте <events-calendar data-module="react-loader" data-bundle="events-calendar.js" date=".." marks="[{..}]" ... /> !55
56. Атрибуты и регидрация !56
57. Атрибуты и регидрация !57 сервер api data attrs = props startApp(attrs) initial state
58. Передача параметров приложения <events-calendar data-module="react-loader" data-bundle="events-calendar.js" date=".." marks="[{..}]" ... /> !58 date=".." marks="[{..}]"
59. Атрибуты и регидрация !59 клиент <html-tag/> attrs = props startApp(attrs) initial state
60. Как запускать код? !60
61. Как запускать реальный код? !61 js сервер клиент ? webpack
62. Как запускать код в GraalVM? !62 •Транспайлить TS в JS, как для NodeJs •Собирать вебпаком, как для клиента
63. Методы с разной имплементацией на сервере и клиенте !63
64. Методы с разной имплементацией !64 function приложение сервер клиент
65. Alias resolve: { alias: { "./CfgImpl": folders.projects("core", "cfg", "CfgImplServer.ts") } } !65
66. 2 конфига - 2 сборки? !66
67. Конфигурация Webpack для запуска js на сервере и клиенте !67
68. Что есть в исходниках? !68 apps сервер клиент vendors mobx react core
 core-server
 core-client

69. Как надо собирать !69 • Возможность сконфигурировать отдельно сборку каждой из частей • Проставить зависимости между ними • Собирать все за 1 раз
70. app
 core
 vendor
 Сборка по частям - мультиконфигурации !70 vendor.js core.js app.js app.js core.js vendor.js core.js vendor.js vendor.js
71. DllPlugin и DllReferencePlugin !71 https://webpack.js.org/plugins/dll-plugin/ app
 core
 vendor
 vendor.js core.js app.js app.js core vendor core.js vendor vendor.js
72. Стадии сборки Webpack Активно применяются 1. HashedModuleIdsPlugin: При сборке бандла в качестве идентификатора модуля используется хэш, вместо инкрементирующегося счётчика. 
 2. DllPlugin: В процессе сборки генерируется файл-манифест, содержащий список экспортируемых классов данной стадии
 3. DllReferencePlugin: Используя файл-манифест предыдущей стадии(-й) позволяет импортировать общий класс
 4. webpack-merge: Позволяет склеивать конфигурацию из множества различных кусочков 0я стадия сборки. Сторонние библиотеки. • 0/dll.js — Параметры DllPlugin, используемые на этой стадии • 0/stage.js — Базовая конфигурация • 0/vendors.js — Список сторонних библиотек, включаемых в бандл • 0/entries.js — Комбинирует кусочки для webpack-merge 1я стадия сборки. Базовые классы (зависимые от среды выполнения). • 1/dll.js — Параметры DllPlugin, используемые на этой стадии • 1/stage.js — Расширение конфигурации • 1/core.js — Список базовых классов • 1/core-server.js — Бандл классов для работы на сервере (GraalJS) • 1/core-client.js — Бандл классов для работы на клиенте (Браузер) • 1/entries.js — Комбинирует кусочки для webpack-merge 2я стадия сборки. Проектные классы. • 2/stage.js — Расширение конфигурации • 2/projects.js — Список генерируемых бандлов • 2/plugins.js — Список используемых плагинов • 2/loaders.js — Список используемых загрузчиков • 2/entries.js — Комбинирует кусочки для webpack-merge !72
73. Доставка ресурсов !73
74. Использование в коде const pkg = l10n('smiles'); <div> Текст: { pkg.getText('title') } </div> !74
75. Сервер !75 запрос админка функция
76. Методы Java для JS public class ServerMethods { ... /** * Получаем текст в виде строки */ public String getText(String pkg, String key) { ... } ... } !76
77. Методы Java для JS !77 //добавляем объект с методами Java в поле контекст js.putMember("serverMethods", serverMethods);
78. Методы Java в JS function getText(key: string): string { return global.serverMethods.getText(pkg, key); } !78
79. Клиент !79 запрос админка функция
80. Клиент !80 запрос админка кэш кэш функция 11Mb
81. Клиент !81 пакеты запрос бандл
82. Поиск текстов и настроек в коде const pkg = l10n('smiles'); <div> { pkg.getLMsg('title') } </div> !82
83. Результат работы webpack плагина { "some-tag": { "pkg": [ "smiles", "sadness" ], "cfg": [ "config1", "config2" ], "bundleName": "some-tag", "js": "some-tag.js", "css": "some-tag.css" } } !83 •Watcher
84. Старый код в новом !84
85. Старый код в новом !85 старый движок новое приложение
86. Старый код в новом !86
87. Старый код в новом !87 • Нет активации, деактивации • Разные жизненные циклы • Одновременное взаимодействие • Прокидывание на сервере Какие есть проблемы старый движок новое приложение старый код
88. export class OldCodeBase<T> extends React.Component<T> { el: HTMLElement | null = null; ref = (el: HTMLElement | null) => (this.el = el); componentDidMount() { this.props.ctrl.activate(this.el); // ЗАПУСК активации } componentWillUnmount() { this.props.ctrl.deactivate(this.el); // ЗАПУСК деактивации } shouldComponentUpdate() { // Запрещаем обновление компонента, //чтобы не было проблемы повторной активации модуля return false; } render() { return ( <div ref={this.ref}></div> ) } } Запуск старого кода в новом !88
89. export class OldCodeBase<T> extends React.Component<T> { el: HTMLElement | null = null; ref = (el: HTMLElement | null) => (this.el = el); componentDidMount() { this.props.ctrl.activate(this.el); // ЗАПУСК активации } componentWillUnmount() { this.props.ctrl.deactivate(this.el); // ЗАПУСК деактивации } shouldComponentUpdate() { // Запрещаем обновление компонента, //чтобы не было проблемы повторной активации модуля return false; } render() { return ( <div ref={this.ref}></div> ) } } Запуск старого кода в новом !89 render() { return ( <div ref={this.ref}></div> ) } shouldComponentUpdate() { // Запрещаем обновление компонента, //чтобы не было проблемы повторной активации модуля return false; } componentDidMount() { this.props.ctrl.activate(this.el); // ЗАПУСК активации } componentWillUnmount() { this.props.ctrl.deactivate(this.el); // ЗАПУСК деактивации } el: HTMLElement | null = null; ref = (el: HTMLElement | null) => (this.el = el);
90. <cool-app users="[1,2,3]"/> !90 Вставка старого кода на сервере
91. <cool-app> <ui:part id="old-code"> old code </ui:part> </cool-app> Вставка старого кода на сервере !91
92. render() { return ( <div> <UiPart id="old-code" /> </div> ); } Вставка старого кода на сервере !92
93. <coll-app> <div> <ui-part data-part-id="old-code"> old code </ui-part> </div> </coll-app> Результат рендеринга с ui-parts !93
94. <coll-app> <template> <ui-part data-part-id="old-code"> old code </ui-part> </template> </coll-app> ui-parts без серверного рендеринга !94
95. export class UiPart extends OldCodeBase<IUiBodyProps> { render() { const id = this.props.id; const parts = this.props.parts; if (!parts.hasOwnProperty(id)) { return null; } return React.createElement('ui-part', { 'data-part-id': id, ref: this.ref, dangerouslySetInnerHTML: { __html: parts[id] } }); } } Код компонента !95 return React.createElement('ui-part', { 'data-part-id': id, ref: this.ref, dangerouslySetInnerHTML: { __html: parts[id] } }); export class UiPart extends OldCodeBase<IUiBodyProps> { render() { const id = this.props.id; const parts = this.props.parts; if (!parts.hasOwnProperty(id)) { return null; } return React.createElement('ui-part', { 'data-part-id': id, ref: this.ref, dangerouslySetInnerHTML: { __html: parts[id] } }); } }
96. !96
97. Итоги !97
98. Время рендеринга реакт-приложений !98 •Простая функция ~ 1 мкс •Компоненты ~ 0.5-6 мс
99. Что удалось сделать !99 • Запустить JS на сервере, там где это казалось невозможным ) • Можем писать изоморфный код для UI • Начали использовать современный стек для фронтенда, со всеми его плюсами • Появилась единая современная платформа для создания UI • Начали плавный переход (миграцию)
100. При этом !100 • Не произошло усложнения эксплуатации • Не ухудшили серверный рендеринг
101. !101
102. PHP в GraalVM !102 https://github.com/oracle/graal/issues/361
103. !103
104. Спасибо за внимание! !104
105. Море проблем: 
 миграция на Реакт Олег Коровин ok.ru/madcow vk.com/madcow !105 Новый фронтенд в Одноклассниках