Современные Single Page Application

ОБО МНЕ

Работаю в Avito Делаю большое SPA

Преподаю JS в LoftSchool Учу создавать веб-приложения

Люблю жену и JS Но больше жену

Распространяю basis.js Верю, что basis.js захватит мир

Сергей Мелюков

1

@smelukov

SINGLE PAGE APPLICATION

СОВРЕМЕННЫЕ

2

ПЛАН

3

• история развития • проблемы разработки • решение проблем • демонстрация • Q&A

О ЧЕМ ПОГОВОРИМ

ХАОС И УНЫНИЕДО 2005 ГОДА

• Internet Explorer 6 • IFrame • ActiveX • Java Applet • Flash

4

РЫВОК В СТОРОНУ ИНТЕРАКТИВНОСТИ2005-2008 ГОДА

• AJAX • SSE • JSON-P • jQuery • Internet Explorer 6 всё еще жив

5

СТРЕМИТЕЛЬНОЕ РАЗВИТИЕ ТЕХГОЛОГИЙ2008-НАШИ ДНИ

• HTML 5 • Angular • Backbone • Knockout • React

6

ОДНОСТРАНИЧНОЕ ПРИЛОЖЕНИЕSPA

«Нет» - перезагрузкам страниц!

• уменьшение общего времени ожидания

• ощущение целостности

• стирание границ web - desktop

7

ДЕЛАТЬ КРУТЫЕ ВЕБ-ПРИЛОЖЕНИЯТЕПЕРЬ-ТО МЫ МОЖЕМ

Правда…?

8

АРХИТЕКТУРАПРОБЛЕМА #1

• расширяемость без костылей

• работоспособность с течением времени

• переиспользование

9

ИСПОЛНИТЕЛИПРИЛОЖЕНИЕ-КАТАЛОГ

• список исполнителей

• количество альбомов

• пагинация

10

ЖАНРЫПРИЛОЖЕНИЕ-КАТАЛОГ

• список жанров

• количество альбомов

• пагинация

11

ИСПОЛНИТЕЛЬПРИЛОЖЕНИЕ-КАТАЛОГ

• жанры

• альбомы

• треки

• длительность

• пагинация

12

АЛЬБОМПРИЛОЖЕНИЕ-КАТАЛОГ

• треки

• длительность

• пагинация

• реакция на изменения

13

ПЕРЕИСПОЛЬЗОВАНИЕ

14

ОДИН ИСТОЧНИК - МНОГО ОТОБРАЖЕНИЙ

СПИСОК ИСПОЛНИТЕЛЕЙ

ЖАНРЫ И АЛЬБОМЫ

ИСПОЛНИТЕЛЬ

АЛЬБОМ

ВИДЖЕТЫ

СТАТИСТИКА

ОБЛАКО ТЕГОВ

ГРАФИКИ

ИСПОЛНИТЕЛИ АЛЬБОМЫ ПЕСНИ ЖАНРЫ

ГЛАВНЫЙ ВОПРОСПЕРЕИСПОЛЬЗОВАНИЕ

- Надо ли постоянно запрашивать с сервера новые данные?

- Нет! Храните всё на клиенте.

15

КАКОЙ ОБЪЕМ ДАННЫХ МОЖНО ОБРАБОТАТЬ НА КЛИЕНТЕ?ПЕРЕИСПОЛЬЗОВАНИЕ

• 1 000 записей?

• 5 000 записей?

• 10 000 записей?

• 50 000 записей?

Всё упирается в ресурсы, алгоритмы и архитектуру!

16

МНОГО ДАННЫХПРОБЛЕМА #2

• как получать?

• как хранить?

• как обрабатывать?

• как отображать?

17

DATA FLOWЖИЗНЕННЫЙ ЦИКЛ НЕ SPA

БРАУЗЕРСЕРВЕР ПОЛЬЗОВАТЕЛЬ

HTML DOM

действияредирект

18

DATA FLOWЖИЗНЕННЫЙ ЦИКЛ SPA

SPA ПРИЛОЖЕНИЕСЕРВЕР

статика/JSON

get/post

ОТОБРАЖЕНИЕ

?ПОЛЬЗОВАТЕЛЬ

DOM

действия

19

ШАБЛОН

<DIV>{NAME}</DIV> <DIV>{LAST_NAME}</DIV>

ОТОБРАЖЕНИЕСТРОКОВЫЕ ШАБЛОНИЗАТОРЫ

ДАННЫЕСЕРВЕР БРАУЗЕР

полная перерисовка

узлов

20

ШАБЛОН

<DIV>{NAME}</DIV> <DIV>{LAST_NAME}</DIV>

ОТОБРАЖЕНИЕDOM-ШАБЛОНИЗАТОРЫ

ДАННЫЕ

СЕРВЕР БРАУЗЕР

перерисовка изменившихся

узлов

ИМЕЮЩИЕСЯ ДАННЫЕ

РАЗНИЦА

21

ИНСТРУМЕНТЫ РАЗРАБОТКИПРОБЛЕМА #3

Найти и исправить:

• компонент

• шаблон

• словарь

Data flow

22

КОДОВАЯ БАЗА

23

ПРОСТОЕ ПРИЛОЖЕНИЕ

КОДОВАЯ БАЗА

24

СЛОЖНОЕ ПРИЛОЖЕНИЕ

DATA FLOW

25

ОТКУДА БЕРУТСЯ ДАННЫЕ?

DATA FLOW

26

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

27

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

BASIS.JS РЕШАЕТ ПРОБЛЕМЫ

28

• модульность (js, tmpl, css) • компонентный подход • структуры данных • DOM-шаблонизация • поддержка FRP • инструменты разработки

BASIS.JSОСНОВНЫЕ ВЕХИ

• НАЧАЛО РАЗВИТИЯ • ПЕРВОЕ SPA

2006 - 2007

• V 1.0 • ИЗОЛЯЦИЯ СТИЛЕЙ • ЛОКАЛИЗАЦИЯ • LIVE UPDATE • INSPECTOR • ПЛАГИН ДЛЯ CHROME

2008 - 2011 2012 - 2014 2015 - …

• ИНСТРУМЕНТИРОВАНИЕ • REMOTE INSPECTOR • РАЗВИТИЕ FRP• МОДЕЛИ

• ИНДЕКСЫ • МОДУЛЬНОСТЬ • ШАБЛОНИЗАТОР • DEV TOOLS

29

DEMOSPA НА BASIS.JS

30

DEMOСТАТИСТИКА

31

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

»

«задавайте ваши вопросы

СПАСИБО ЗА ВНИМАНИЕ

32

http://basisjs.com - официальный сайт http://bit.ly/2blnRaj - цикл статей