Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

112 views

Published on

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

Published in: Internet
  • Be the first to comment

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

  1. 1. ОБО МНЕ Работаю в Avito Делаю большое SPA Преподаю JS в LoftSchool Учу создавать веб-приложения Люблю жену и JS Но больше жену Распространяю basis.js Верю, что basis.js захватит мир Сергей Мелюков 1 @smelukov
  2. 2. SINGLE PAGE APPLICATION СОВРЕМЕННЫЕ 2
  3. 3. ПЛАН 3 • история развития • проблемы разработки • решение проблем • демонстрация • Q&A О ЧЕМ ПОГОВОРИМ
  4. 4. ХАОС И УНЫНИЕ ДО 2005 ГОДА • Internet Explorer 6 • IFrame • ActiveX • Java Applet • Flash 4
  5. 5. РЫВОК В СТОРОНУ ИНТЕРАКТИВНОСТИ 2005-2008 ГОДА • AJAX • SSE • JSON-P • jQuery • Internet Explorer 6 
 всё еще жив 5
  6. 6. СТРЕМИТЕЛЬНОЕ РАЗВИТИЕ ТЕХГОЛОГИЙ 2008-НАШИ ДНИ • HTML 5 • Angular • Backbone • Knockout • React 6
  7. 7. ОДНОСТРАНИЧНОЕ ПРИЛОЖЕНИЕ SPA «Нет» - перезагрузкам страниц! • уменьшение общего времени ожидания • ощущение целостности • стирание границ web - desktop 7
  8. 8. ДЕЛАТЬ КРУТЫЕ ВЕБ-ПРИЛОЖЕНИЯ ТЕПЕРЬ-ТО МЫ МОЖЕМ Правда…? 8
  9. 9. АРХИТЕКТУРА ПРОБЛЕМА #1 • расширяемость без костылей • работоспособность с течением времени • переиспользование 9
  10. 10. ИСПОЛНИТЕЛИ ПРИЛОЖЕНИЕ-КАТАЛОГ • список исполнителей • количество альбомов • пагинация 10
  11. 11. ЖАНРЫ ПРИЛОЖЕНИЕ-КАТАЛОГ • список жанров • количество альбомов • пагинация 11
  12. 12. ИСПОЛНИТЕЛЬ ПРИЛОЖЕНИЕ-КАТАЛОГ • жанры • альбомы • треки • длительность • пагинация 12
  13. 13. АЛЬБОМ ПРИЛОЖЕНИЕ-КАТАЛОГ • треки • длительность • пагинация • реакция на изменения 13
  14. 14. ПЕРЕИСПОЛЬЗОВАНИЕ 14 ОДИН ИСТОЧНИК - МНОГО ОТОБРАЖЕНИЙ СПИСОК ИСПОЛНИТЕЛЕЙ ЖАНРЫ И АЛЬБОМЫ ИСПОЛНИТЕЛЬ АЛЬБОМ ВИДЖЕТЫ СТАТИСТИКА ОБЛАКО ТЕГОВ ГРАФИКИ ИСПОЛНИТЕЛИ АЛЬБОМЫ ПЕСНИ ЖАНРЫ
  15. 15. ГЛАВНЫЙ ВОПРОС ПЕРЕИСПОЛЬЗОВАНИЕ - Надо ли постоянно запрашивать с сервера новые данные? - Нет! Храните всё на клиенте. 15
  16. 16. КАКОЙ ОБЪЕМ ДАННЫХ МОЖНО ОБРАБОТАТЬ НА КЛИЕНТЕ? ПЕРЕИСПОЛЬЗОВАНИЕ • 1 000 записей? • 5 000 записей? • 10 000 записей? • 50 000 записей? Всё упирается в ресурсы, алгоритмы и архитектуру! 16
  17. 17. МНОГО ДАННЫХ ПРОБЛЕМА #2 • как получать? • как хранить? • как обрабатывать? • как отображать? 17
  18. 18. DATA FLOW ЖИЗНЕННЫЙ ЦИКЛ НЕ SPA БРАУЗЕРСЕРВЕР ПОЛЬЗОВАТЕЛЬ HTML DOM действияредирект 18
  19. 19. DATA FLOW ЖИЗНЕННЫЙ ЦИКЛ SPA SPA ПРИЛОЖЕНИЕ СЕРВЕР статика/JSON get/post ОТОБРАЖЕНИЕ ? ПОЛЬЗОВАТЕЛЬ DOM действия 19
  20. 20. ШАБЛОН <DIV>{NAME}</DIV> <DIV>{LAST_NAME}</DIV> ОТОБРАЖЕНИЕ СТРОКОВЫЕ ШАБЛОНИЗАТОРЫ ДАННЫЕСЕРВЕР БРАУЗЕР полная перерисовка узлов 20
  21. 21. ШАБЛОН <DIV>{NAME}</DIV> <DIV>{LAST_NAME}</DIV> ОТОБРАЖЕНИЕ DOM-ШАБЛОНИЗАТОРЫ ДАННЫЕ СЕРВЕР БРАУЗЕР перерисовка изменившихся узлов ИМЕЮЩИЕСЯ ДАННЫЕ РАЗНИЦА 21
  22. 22. ИНСТРУМЕНТЫ РАЗРАБОТКИ ПРОБЛЕМА #3 Найти и исправить: • компонент • шаблон • словарь Data flow 22
  23. 23. КОДОВАЯ БАЗА 23 ПРОСТОЕ ПРИЛОЖЕНИЕ
  24. 24. КОДОВАЯ БАЗА 24 СЛОЖНОЕ ПРИЛОЖЕНИЕ
  25. 25. DATA FLOW 25 ОТКУДА БЕРУТСЯ ДАННЫЕ?
  26. 26. DATA FLOW 26 КАКОЙ ПУТЬ ПРОХОДЯТ ДАННЫЕ?
  27. 27. 27 BASIS.JS ПЛАТФОРМА ДЛЯ ПОСТРОЕНИЯ SPA
  28. 28. BASIS.JS РЕШАЕТ ПРОБЛЕМЫ 28 • модульность (js, tmpl, css) • компонентный подход • структуры данных • DOM-шаблонизация • поддержка FRP • инструменты разработки
  29. 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. 30. DEMO SPA НА BASIS.JS 30
  31. 31. DEMO СТАТИСТИКА 31 Исполнители: 300 (0.8 мб) Альбомы: 15 600 (13.6 мб) Композиции: 156 096 (62.5 мб) Индексы, DOM: 85.1 мб Занято памяти: 162 мб Самая долгая операция: запуск (2 сек)
  32. 32. » « задавайте ваши вопросы СПАСИБО ЗА ВНИМАНИЕ 32 http://basisjs.com - официальный сайт http://bit.ly/2blnRaj - цикл статей

×