Священный грааль react в java · Зачем этот доклад? •...
TRANSCRIPT
![Page 1: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/1.jpg)
Священный грааль:React в Java
Олег Коровинok.ru/madcowvk.com/madcow
1
Новый фронтенд в Одноклассниках
![Page 2: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/2.jpg)
2
![Page 3: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/3.jpg)
Зачем этот доклад?
• Показать переход от старого стека к новому с GraalVM
• Продемонстрировать путь миграции
• Мотивировать разработчиков
3
![Page 4: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/4.jpg)
Часть 1 Предыстория
4
![Page 5: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/5.jpg)
5
![Page 6: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/6.jpg)
6
2006
![Page 7: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/7.jpg)
7
![Page 8: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/8.jpg)
1 000 000Пользователей
8
![Page 9: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/9.jpg)
9
![Page 10: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/10.jpg)
10
![Page 11: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/11.jpg)
11
Время шло
![Page 12: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/12.jpg)
12
![Page 13: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/13.jpg)
13
![Page 14: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/14.jpg)
14
2018
![Page 15: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/15.jpg)
15
1
![Page 16: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/16.jpg)
16
![Page 17: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/17.jpg)
На клиенте
• GWT
• jQuery
• DotJs
• RequireJs
• …
17
![Page 18: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/18.jpg)
18
![Page 19: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/19.jpg)
Проблемы
• Старые библиотеки
• Нет единого фреймворка
• Нет изоморфности
• Нет единого структурированного приложения на клиенте
• Плохая отзывчивость
• Недостаточный инструментарий
• Большой порог входа
• …
19
![Page 20: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/20.jpg)
Требования к решению
• Изоморфный код для UI
• Плавный переход (миграция)
• Серверный рендеринг
• У нас не должно быть усложнения эксплуатации
20
![Page 21: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/21.jpg)
Почему серверный рендеринг?
21
![Page 22: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/22.jpg)
22
Наш любимый пользователь
![Page 23: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/23.jpg)
23
В деревне Кужепятовка
100500км от МКАД
4G
![Page 24: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/24.jpg)
24
Если будет серверный рендеринг
![Page 25: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/25.jpg)
25
Если не будет серверного рендеринга
![Page 26: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/26.jpg)
26
Если не будет серверного рендеринга
![Page 27: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/27.jpg)
27
Пользователи в печали
![Page 28: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/28.jpg)
Часть 2 Поиск решения
28
![Page 29: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/29.jpg)
Концепция решения - виджеты
29
![Page 30: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/30.jpg)
30
![Page 31: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/31.jpg)
Как работает сервер сейчас
31
![Page 32: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/32.jpg)
Как работает сервер сейчас
32
< 200ms
one-nio - бинарный протокол https://github.com/odnoklassniki/one-nio
HTTP
one-nio
< 1msHTML
WEB API
![Page 33: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/33.jpg)
Что делать?
33
![Page 34: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/34.jpg)
34
![Page 35: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/35.jpg)
35
![Page 36: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/36.jpg)
36
Kotlin - концепт
клиент сервер
код на js код на java
компонент
Логика компонента на Котлине
шаблонизатор на js
шаблонизатор на java
XML шаблон
![Page 37: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/37.jpg)
Почему не Kotlin
• еще 1 язык в системе
• примитивный компилятор в JS
• поддержка 2х рантаймов
• высокий порог входа
• возможные сложности с наймом людей
37
![Page 38: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/38.jpg)
38
![Page 39: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/39.jpg)
39
![Page 40: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/40.jpg)
NodeJS
4040
API
WEBWEB
one-nio http
http
![Page 41: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/41.jpg)
Почему не NodeJS
41
• HTTP транспорт - медленно
• Cериализация/десериализация - доп нагрузка, задержка, сложность
• Еще один компонент - риски эксплуатации
![Page 42: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/42.jpg)
WEB
А можно ли запустить JS в JVM?
42
• Простая инфраструктура
• Нет накладных расходов
![Page 43: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/43.jpg)
Почему не V8
43
• Сложность эксплуатацииWEB
![Page 44: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/44.jpg)
Nashorn
Rhino
GraalVM
JS рантаймы в JVM
44
• Всё на JVM
• Java-JS взаимодействие
• Безопасный рантайм
• Компилятор на Java
![Page 45: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/45.jpg)
Nashorn, Rhino, GraalVM
45
![Page 47: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/47.jpg)
47
![Page 49: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/49.jpg)
GraalVM + React
• Нет поддержки типов в JS
• Риски эксплуатации GraalVM
-
49
• Java + JS
• Сообщество
• Низкий порог входа
• Эксплуатация не усложнилась
• Найм сотрудников
+
![Page 50: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/50.jpg)
Часть 3 Запуск React в GraalVM
50
![Page 51: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/51.jpg)
Как GraalVM работает с JS
51
![Page 52: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/52.jpg)
JS Context
52
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");
![Page 53: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/53.jpg)
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
53
JAVA
JS Context
global
load() app.jseval()
![Page 54: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/54.jpg)
JS Context
54
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.jseval()
js datajava data
![Page 55: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/55.jpg)
Серверный рендеринг JS - концепт
55
![Page 56: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/56.jpg)
WEB
56
Серверный рендеринг JS - концепт
Java Functions render()
hello-world.js
Context
![Page 57: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/57.jpg)
WEB
57
Серверный рендеринг JS - концепт
HTTP
HTMLAPI
data
dataHTML
Шаблонизатор
render(data)
![Page 58: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/58.jpg)
Серверный рендеринг JS - реализация
58
![Page 59: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/59.jpg)
WEB
59
Серверный рендеринг JS - реализация
HTTP
HTML
API
dataШаблонизатор
Очередь
<custom-tag />
Java Thread Pool
HTM
L
![Page 60: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/60.jpg)
CPU
CPU
CPU
CPU
Почему пул контекстов - это хорошо?
60
Java Thread Pool
Java data
Thread
Thread
Thread
Thread
![Page 61: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/61.jpg)
Конфигурация UI фреймворка
61
![Page 62: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/62.jpg)
![Page 63: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/63.jpg)
Архитектура приложений
63
![Page 64: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/64.jpg)
Архитектура приложений
64
Store (MobX)
Controller
Component
MVC
Приложение в DOM узле
Attributes
API
Events
![Page 65: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/65.jpg)
React Engine
65
сервер клиент
java runner js runner
app engine
приложение
![Page 66: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/66.jpg)
Движок приложения
66
• Инициализирует приложение• Связывает приложение с дом узлом• Предоставляет
• единое апи для рендеринга и уничтожения приложения
• сервисы локализации, настроек, пр..
![Page 67: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/67.jpg)
Информация о приложении
{ "events-calendar": { "bundleName": "events-calendar", "js": "events-calendar_h4h5m.js", "css": "events-calendar_h4h5m.css" } }
67
![Page 68: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/68.jpg)
Запуск приложения на клиенте
<events-calendar data-module="react-loader"
data-bundle="events-calendar.js"
date=".." marks="[{..}]"
... />
68
![Page 69: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/69.jpg)
Как запускать код?
69
![Page 70: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/70.jpg)
Как запускать реальный код?
70
js
сервер клиент
? webpack
![Page 71: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/71.jpg)
Как запускать код в GraalVM?
71
• Транспайлить TS в JS, как для NodeJs• Собирать вебпаком, как для клиента
![Page 72: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/72.jpg)
Методы с разной имплементацией на сервере и клиенте
72
![Page 73: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/73.jpg)
Методы с разной имплементацией
73
function
приложение
сервер клиент
![Page 74: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/74.jpg)
Alias
resolve: { alias: { "./CfgImpl": folders.projects("core", "cfg", "CfgImplServer.ts") } }
74
![Page 75: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/75.jpg)
2 конфига - 2 сборки?
75
![Page 76: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/76.jpg)
Конфигурация Webpack для запуска jsна сервере и клиенте
76
![Page 77: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/77.jpg)
Что есть в исходниках?
77
apps
сервер клиент vendors mobxreact
core core-server core-client
![Page 78: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/78.jpg)
Как надо собирать
78
• Возможность сконфигурировать отдельно сборку каждой из частей
• Проставить зависимости между ними
• Собирать все за 1 раз
![Page 79: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/79.jpg)
app
core
vendor
Сборка по частям - мультиконфигурации
79
vendor.js
core.js
app.jsapp.jscore.jsvendor.js
core.jsvendor.js
vendor.js
![Page 80: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/80.jpg)
DllPlugin и DllReferencePlugin
80
https://webpack.js.org/plugins/dll-plugin/
app
core
vendor vendor.js
core.js
app.jsapp.jscorevendor
core.jsvendor
vendor.js
![Page 81: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/81.jpg)
Стадии сборки 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
81
![Page 82: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/82.jpg)
Доставка ресурсов
82
![Page 83: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/83.jpg)
Использование в коде
const pkg = l10n('smiles');
<div> Текст: { pkg.getText('title') } </div>
83
![Page 84: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/84.jpg)
Сервер
84
запрос админка функция
![Page 85: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/85.jpg)
Методы Java для JS
public class ServerMethods { ...
/** * Получаем текст в виде строки */ public String getText(String pkg, String key) { ... }
... }
85
![Page 86: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/86.jpg)
Методы Java для JS
86
//добавляем объект с методами Java в поле контекст js.putMember("serverMethods", serverMethods);
![Page 87: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/87.jpg)
Методы Java в JS
function getText(key: string): string { return global.serverMethods.getText(pkg, key); }
87
![Page 88: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/88.jpg)
Клиент
88
запрос админка функция
![Page 89: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/89.jpg)
Клиент
89
запрос админка кэш
кэш функция
11Mb
![Page 90: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/90.jpg)
Клиент
90
пакеты запрос бандл
![Page 91: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/91.jpg)
Поиск текстов и настроек в коде
const pkg = l10n('smiles');
<div> { pkg.getLMsg('title') } </div>
91
![Page 92: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/92.jpg)
Результат работы webpack плагина{ "some-tag": { "pkg": [ "smiles", "sadness" ], "cfg": [ "config1", "config2" ], "bundleName": "some-tag", "js": "some-tag.js", "css": "some-tag.css" } }
92
• Watcher
![Page 93: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/93.jpg)
Итоги
93
![Page 94: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/94.jpg)
Время рендеринга реакт-приложений
94
•Простая функция ~ 1 мкс
•Компоненты ~ 0.5-6 мс
![Page 95: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/95.jpg)
Что удалось сделать
95
• Запустить JS на сервере, там где это казалось невозможным )
• Можем писать изоморфный код для UI
• Начали использовать современный стек для фронтенда, со всеми его плюсами
• Появилась единая современня платформа для создания UI
• Начали плавный переход (миграцию)
![Page 96: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/96.jpg)
При этом
96
• Не произошло усложнения эксплуатации
• Не ухудшили серверный рендеринг
![Page 97: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/97.jpg)
97
![Page 98: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/98.jpg)
GraalVM — это веб стандарт?
98
![Page 99: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/99.jpg)
PHP в GraalVM
99
https://github.com/oracle/graal/issues/361
![Page 100: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/100.jpg)
100
Да! GraalVM — будущий веб
стандарт!
![Page 101: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/101.jpg)
101
![Page 102: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/102.jpg)
Спасибо за внимание!
102
![Page 103: Священный грааль React в Java · Зачем этот доклад? • Показать переход от старого стека к новому с GraalVM](https://reader034.vdocuments.us/reader034/viewer/2022042104/5e82a38fea44135a635528ef/html5/thumbnails/103.jpg)
Священный грааль:React в Java
Олег Коровинok.ru/madcowvk.com/madcow
103
Новый фронтенд в Одноклассниках