Сравнение типов приложений. Классические, SPA, Изоморфные (универсальные). Основы принципов работы и сравнение преимуществ и недостатков https://www.youtube.com/watch?v=fe509svLRsY

1. Изоморфные приложения
на JavaScript
Ilya Ozerov, Inventos

2. Типы javascript-приложений
•Классические
•SPA
•Изоморфные (универсальные)

3. Классическое приложение

4. Классическое приложение
1. HTML генерируется сервером с предзагруженными данными
2. JS-код содержит в себе только функции для реализации
«интерактивности» на странице; область видимости ограничена
одним HTML-документом

5. SPA (Single page application)

6. SPA (Single page application)
1. Сервер отдает HTML-документ с корневым элементом и путями
до JS/CSS-bundles
2. Рендеринг HMTL-шаблонов на стороне клиента
3. Внутренний роутинг (History API)
4. Запрос данных от API в соответствии с роутингом
5. Рендеринг полученных данных

7. Изоморфное приложение

8. Изоморфное приложение
1. Роутинг на Front-сервере
2. Front-сервер отдает прекомпилированный HTML-документ и JS-
bundle приложения
3. Отображение HTML и доп. асинхронные запросы (при
необходимости)
4. Серверный рендеринг доп. элементов (при необходимости)
5. Отображение HTML
6. Клиентский роутинг (опционально)

9. Процесс загрузки SPA с точки зрения
клиентского устройства

10. Процесс загрузки изоморфного приложения с
точки зрения клиентского устройства

11. Общее сравнение SPA и isomorphic
SPA
+ более гибкая отладка
+ меньшие сроки разработки
- ад для SEO
- не работает в JS-off mode
- высокий TTFF
- сложность поддержки в устаревших
браузерах
isomorphic
+ SEO и статистика вынесена на front-
сервер
+ низкий TTFF
+ не зависит от JS-mode и версии
браузера
+ нет проблем с CORS при работе со
сторонним API
- отладка
- дублирование логики клиентского и
серверного кода (двойной роутинг)

12. Применение приложений
SPA
• Системы администрирования
• Личные кабинеты
• Дэшборды
Isomorphic
• Агрегаторы
• Сервисы
• Highload

13. Библиотеки для создания изоморфных
приложений
Полный список: http://isomorphic.net/libraries

14. Архитектура изоморфного приложения на
примере использования React.js

15. Взаимодействие компонентов изоморфного
приложения на примере использования
React.js

16. Вопросы?