Одна из ярких тенденций современного веба — бурное развитие так называемой архитектуры одностраничного приложения. Поговорим о том, что вообще такое SPA, чем отличается от привычного стэка технологий, рассмотрим один из вариантов организации SPA при помощи модных инструментов и библиотек, обсудим опыт миграции и границы применимости.

2. Особенности архитектуры
Single Page Application
Антон Киршанов, разработчик интерфейсов
Frontend party, Нижний Новгород, 22 ноября 2014

3. Куда лошадь запрягать?
3

4. 4

5. Архитектура
5
Client HTTP Server

6. Архитектура
6
Client HTTP Server
Принимает запрос
Читает или пишет данные в базу или файл
Обрабатывает данные
Шаблонизирует
Отправляет результат клиенту
Отдает статику
Рендерит готовый HTML

7. Архитектура
7
Client HTTP Server
Каждый запрос с клиента приводит к перезагрузке страницы

8. 8
Все в одном

9. Трехзвенная архитектура
9

10. Трехзвенная архитектура
10
Client Frontend Backend

11. Трехзвенная архитектура
11
Client Frontend Backend
Обрабатывает и сохраняет данные

12. Трехзвенная архитектура
12
Client Frontend Backend
Ходит в бекенд за данными
Шаблонизирует
Отдает готовый результат на клиент
Отдает статику

13. Трехзвенная архитектура
13
Client Frontend Backend
Рендерит готовый HTML

14. Трехзвенная архитектура
14
Client Frontend Backend
Каждый запрос с клиента приводит к перезагрузке страницы

15. Трехзвенная архитектура
15
Внезапно!
Дали объявление
В Я.Директ
Frontend Backend

16. Трехзвенная архитектура
16
Client Frontend
Balancer
Backend
Backend
Backend

17. Трехзвенная архитектура
17
Client
Balancer Balancer
Frontend
Frontend
Frontend
Backend
Backend
Backend

18. Трехзвенная архитектура
18
Client Frontend Backend
Масштабируемость
Производительность
Отказоустойчивость

19. 19

20. 20

21. Необычный порошок
21

22. Архитектура SPA
22
Client Server

23. Архитектура SPA
23
Client Server
Отдает статику

24. Архитектура SPA
24
Client Server
Отдает статику
Отдает данные (XML, JSON, etc…)
REST

25. Архитектура SPA
25
Client Server
Аггрегирует данные
Строит объекты
Шаблонизирует
Создает DOM
Контролирует View
REST

26. Архитектура SPA
26
Cloud

27. Архитектура SPA
27
Client Server Cloud
Проксирует запросы

28. Архитектура SPA
28
Client Server Cloud
Прокси
Статика
Хранение
Обработка
Вычисления
Рендеринг
Шаблонизация
Взаимодействие

29. 29

30. 30

31. 31

32. SPA изнутри
32

33. SPA изнутри
33
Index.html

34. SPA изнутри
34
Index.html
CSS
JS

35. JavaScript
35

36. JavaScript
36
VanillaJS

37. JavaScript
37
VanillaJS

38. JavaScript
38
VanillaJS

39. JavaScript
39
VanillaJS
Jquery

40. JavaScript
40
VanillaJS
Jquery
MV*

41. JavaScript
41
VanillaJS
Jquery
MV* (Backbone, Angular, Ember …)

42. JavaScript
42
VanillaJS
Jquery
MV* (Backbone, Angular, Ember …)
React.js

43. JavaScript
43
VanillaJS
Jquery
MV* (Backbone, Angular, Ember …)
React.js
Велосипед

44. Backbone
44

45. Backbone
45
• Простой
• Гибкий
• Ненавязчивый
• Хорошо документирован
• Куча рецептов, плагинов и готовых модулей

46. Шаблонизация
46

47. Шаблонизация
47
• Mustache
• Underscore
• Handlebars
• Jade
• Hogan
• Microtemplating
• domjs
• …

48. Шаблонизация
48
Вложенность отступами
Шаблонная логика
DOM-constructor
Поддержка JS
Пространства имен
Декларация зависимостей

49. Шаблонизация
49
https://github.com/hoho/concat.js
DOM Builder
https://github.com/hoho/conkitty
Compiler

50. Блоки
50
• Модульность
• Переиспользование
• Тестирование
• Версионирование

51. Блоки
51

52. Блок кнопка
52

53. Блок кнопка
53

54. 54
Блок кнопка

55. 55
SPA
- Масштабируемость
- Тестируемость
- Управление зависимостями
- Современные технологии
- Удобство разработки

56. 56
SPA - это удобно
- Локальный вебсервер
- Разработка через API
- Единый стек
- Быстрая сборка
- Интеграция и развёртывание

57. Контакты
Антон Киршанов
Разработчик интерфейсов
maetchkin@ya.ru @maetchkin

58. 58
Вопросы?