Доклад посвящен основным проблемам создания полноценных Single Page Application, а также будут продемонстрированы пути их решения на основе фреймворка basis.js.

1. ОБО МНЕ
Работаю в Avito
Делаю большое SPA
Преподаю JS в LoftSchool
Учу создавать веб-приложения
Люблю жену и JS
Но больше жену
Распространяю basis.js
Верю, что basis.js захватит мир
Сергей Мелюков
1
@smelukov

2. SINGLE
PAGE
APPLICATION
СОВРЕМЕННЫЕ
2

3. ПЛАН
3
• история развития
• проблемы разработки
• решение проблем
• демонстрация
• Q&A
О ЧЕМ ПОГОВОРИМ

4. ХАОС И УНЫНИЕ
ДО 2005 ГОДА
• Internet Explorer 6
• IFrame
• ActiveX
• Java Applet
• Flash
4

5. РЫВОК В СТОРОНУ ИНТЕРАКТИВНОСТИ
2005-2008 ГОДА
• AJAX
• SSE
• JSON-P
• jQuery
• Internet Explorer 6
всё еще жив
5

6. СТРЕМИТЕЛЬНОЕ РАЗВИТИЕ ТЕХГОЛОГИЙ
2008-НАШИ ДНИ
• HTML 5
• Angular
• Backbone
• Knockout
• React
6

7. ОДНОСТРАНИЧНОЕ ПРИЛОЖЕНИЕ
SPA
«Нет» - перезагрузкам
страниц!
• уменьшение общего
времени ожидания
• ощущение целостности
• стирание границ web -
desktop
7

8. ДЕЛАТЬ КРУТЫЕ ВЕБ-ПРИЛОЖЕНИЯ
ТЕПЕРЬ-ТО МЫ МОЖЕМ
Правда…?
8

9. АРХИТЕКТУРА
ПРОБЛЕМА #1
• расширяемость без
костылей
• работоспособность
с течением времени
• переиспользование
9

10. ИСПОЛНИТЕЛИ
ПРИЛОЖЕНИЕ-КАТАЛОГ
• список
исполнителей
• количество
альбомов
• пагинация
10

11. ЖАНРЫ
ПРИЛОЖЕНИЕ-КАТАЛОГ
• список жанров
• количество
альбомов
• пагинация
11

12. ИСПОЛНИТЕЛЬ
ПРИЛОЖЕНИЕ-КАТАЛОГ
• жанры
• альбомы
• треки
• длительность
• пагинация
12

13. АЛЬБОМ
ПРИЛОЖЕНИЕ-КАТАЛОГ
• треки
• длительность
• пагинация
• реакция на
изменения
13

14. ПЕРЕИСПОЛЬЗОВАНИЕ
14
ОДИН ИСТОЧНИК - МНОГО ОТОБРАЖЕНИЙ
СПИСОК
ИСПОЛНИТЕЛЕЙ
ЖАНРЫ И
АЛЬБОМЫ
ИСПОЛНИТЕЛЬ
АЛЬБОМ
ВИДЖЕТЫ
СТАТИСТИКА
ОБЛАКО ТЕГОВ
ГРАФИКИ
ИСПОЛНИТЕЛИ
АЛЬБОМЫ
ПЕСНИ
ЖАНРЫ

15. ГЛАВНЫЙ ВОПРОС
ПЕРЕИСПОЛЬЗОВАНИЕ
- Надо ли постоянно
запрашивать с
сервера новые
данные?
- Нет! Храните всё
на клиенте.
15

16. КАКОЙ ОБЪЕМ ДАННЫХ МОЖНО ОБРАБОТАТЬ НА КЛИЕНТЕ?
ПЕРЕИСПОЛЬЗОВАНИЕ
• 1 000 записей?
• 5 000 записей?
• 10 000 записей?
• 50 000 записей?
Всё упирается в ресурсы,
алгоритмы и архитектуру!
16

17. МНОГО ДАННЫХ
ПРОБЛЕМА #2
• как получать?
• как хранить?
• как обрабатывать?
• как отображать?
17

18. DATA FLOW
ЖИЗНЕННЫЙ ЦИКЛ НЕ SPA
БРАУЗЕРСЕРВЕР ПОЛЬЗОВАТЕЛЬ
HTML DOM
действияредирект
18

19. DATA FLOW
ЖИЗНЕННЫЙ ЦИКЛ SPA
SPA
ПРИЛОЖЕНИЕ
СЕРВЕР
статика/JSON
get/post
ОТОБРАЖЕНИЕ
?
ПОЛЬЗОВАТЕЛЬ
DOM
действия
19

20. ШАБЛОН
<DIV>{NAME}</DIV>
<DIV>{LAST_NAME}</DIV>
ОТОБРАЖЕНИЕ
СТРОКОВЫЕ ШАБЛОНИЗАТОРЫ
ДАННЫЕСЕРВЕР БРАУЗЕР
полная
перерисовка
узлов
20

21. ШАБЛОН
<DIV>{NAME}</DIV>
<DIV>{LAST_NAME}</DIV>
ОТОБРАЖЕНИЕ
DOM-ШАБЛОНИЗАТОРЫ
ДАННЫЕ
СЕРВЕР БРАУЗЕР
перерисовка
изменившихся
узлов
ИМЕЮЩИЕСЯ
ДАННЫЕ
РАЗНИЦА
21

22. ИНСТРУМЕНТЫ РАЗРАБОТКИ
ПРОБЛЕМА #3
Найти и исправить:
• компонент
• шаблон
• словарь
Data flow
22

23. КОДОВАЯ БАЗА
23
ПРОСТОЕ ПРИЛОЖЕНИЕ

24. КОДОВАЯ БАЗА
24
СЛОЖНОЕ ПРИЛОЖЕНИЕ

25. DATA FLOW
25
ОТКУДА БЕРУТСЯ ДАННЫЕ?

26. DATA FLOW
26
КАКОЙ ПУТЬ ПРОХОДЯТ ДАННЫЕ?

27. 27
BASIS.JS
ПЛАТФОРМА ДЛЯ ПОСТРОЕНИЯ SPA

28. BASIS.JS РЕШАЕТ ПРОБЛЕМЫ
28
• модульность (js, tmpl, css)
• компонентный подход
• структуры данных
• DOM-шаблонизация
• поддержка FRP
• инструменты разработки

29. BASIS.JS
ОСНОВНЫЕ ВЕХИ
• НАЧАЛО РАЗВИТИЯ
• ПЕРВОЕ SPA
2006 - 2007
• V 1.0
• ИЗОЛЯЦИЯ СТИЛЕЙ
• ЛОКАЛИЗАЦИЯ
• LIVE UPDATE
• INSPECTOR
• ПЛАГИН ДЛЯ CHROME
2008 - 2011 2012 - 2014 2015 - …
• ИНСТРУМЕНТИРОВАНИЕ
• REMOTE INSPECTOR
• РАЗВИТИЕ FRP• МОДЕЛИ
• ИНДЕКСЫ
• МОДУЛЬНОСТЬ
• ШАБЛОНИЗАТОР
• DEV TOOLS
29

30. DEMO
SPA НА BASIS.JS
30

31. DEMO
СТАТИСТИКА
31
Исполнители: 300 (0.8 мб)
Альбомы: 15 600 (13.6 мб)
Композиции: 156 096 (62.5 мб)
Индексы, DOM: 85.1 мб
Занято памяти: 162 мб
Самая долгая операция: запуск (2 сек)

32. »
«
задавайте ваши вопросы
СПАСИБО ЗА ВНИМАНИЕ
32
http://basisjs.com - официальный сайт
http://bit.ly/2blnRaj - цикл статей