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

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/JSPoolJSPool
https://github.com/Taritsyn/JavaScriptEngineSwitcherJavaScriptEngineSwitcher

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. Спасибо!