Даниил Соколюк «ReactJS.NET — опыт рендеринга на сервере »

Поговорим что такое React и зачем он нужен разработчикам, разберемся что такое ReactJS.NET и JavaScriptServices. Обсудим как интегрировать React компоненты в существующую Razor разметку или даже в WebForms. Расскажем о том какие проблемы с производительностью существуют при серверном рендеринге компонентов и как их решать.

Transcript

1. ReactJS.NET - опыт рендеринга на сервере Соколюк Даниил
2. Дублирование представлений 1 Проблемы Высокий порог вхождения 2 Разделение ответственности 3
3. Требования Разработчики Быструю загрузку страницы Богатую функциональность SEO 1 2 3 Низкий порог вхождения Тестируемый код 2 Переиспользование компонентов 3 1 Свобода действий 4 Пользователи и бизнес Быстрое внедрение новых фич 4
5. Made by Facebook Большое комьюнити Скорость работы (Virtual DOM) Поддержка TypeScript Debug & React Developer Tools React
6. Комьюнити
7. Virtual DOM
8. Компонент (.JSX)
9. Поддержка TypeScript (.TSX)
10. Debug & React Developer Tools
11. ReactJS.NET In Process rendering (V8, ChakraCore...) ASP MVC (3, 4, 5), ASP.NET Web Forms, Nancy, ASP .NET Core Постепенный переход на SPA Out of Process rendering (Node.JS) ASP .NET Core SPA ориентированный подход JavaScriptServices ✓ ✓ ✓ ✓ ✓ ✓
12. Поддержка серверного рендеринга Простая интеграция On-the-fly JSX to JavaScript компиляция ReactJS.NET
13. Устройство библиотеки ReactJs.Net https://github.com/reactjs/React.NET https://github.com/Daniel15/JSPool JSPool https://github.com/Taritsyn/JavaScriptEngineSwitcher JavaScriptEngineSwitcher
14. JavaScriptEngineSwitcher Google V8 Windows Microsoft (ClearScript) / Google Немного быстрей Widnows, Linux, OS X Microsoft Microsoft ChakraCore ✓ ✓ ✓ ✓ ✓
15. Подключение
16. Интеграция в Razor
17. SEO и Server Side Rendering
18. Профайлинг MiniProfiler https://github.com/MiniProfiler/dotnet
19. Профайлинг
20. Производительность
21. Медленный компонент
22. Под нагрузкой появляются проблемы
23. Pipeline отрисовки компонентов Отрендерить компонент Уничтожить инстанс движка при необходимости Вызвать Garbage Collection при необходимости Ввернуть движок в пул Взять инстанс движка из пула, если нет свободных то создать его 1 2 3 4 5 Шаг 1 Шаг 2 Шаг 3 Шаг 4 Шаг 5
24. Новый Pipeline отрисовки компонентов Отрендерить компонент Запланировать вызов GC при необходимости или возвращаем в пул Вызвать Garbage Collection Ввернуть движок в пул Взять инстанс движка из пула 1 2 3 1 2 Шаг 1 Шаг 2 Шаг 3 В отдельном потоке
25. Too Many Components
26. Demo https://github.com/DaniilSokolyuk/ReactJsDotNetMeetup
27. Спасибо!