SlideShare a Scribd company logo
Single-Page
   Apps
 Вся соль
    Арсений Заречнев
Front-End Developer
Extranet
Backbone
            Knockout
             Ember
             Batman
rJS, Dojo, Closure, YUI, Javascr
Backbone
            Knockout
             Ember
             Batman
rJS, Dojo, Closure, YUI, Javascr
Backbone

Хорошее знакомство с MVC на клиенте
           Малый размер
         Легкость освоения
Backbone

       REST
Модели с событиями
      Роутинг
    Underscore.js
Большое коммьюнити
Backbone
            Knockout
             Ember
             Batman
rJS, Dojo, Closure, YUI, Javascr
MV*
 Model
Collection
  View
 Router
Backbone.Model
Backbone.Collection
 Получение данных с сервера
     Сохранение данных
 Работа с данными на клиенте
Backbone.Model
Backbone.Collection
Backbone.View
        Обработка событий
Подписки на изменения данных модели
             Рендеринг
Backbone.Router
Отслеживание изменения URL
Инициализация View и Model
Backbone

 Есть всё необходимое для
построения одностраничного
       приложения.

   И написания тестов!
Тестирование JS

Помогает сохранять слабую связанность
     и хорошую структуру кода
Тестирование JS

     Jasmine
      Qunit
      Mocha
Тестирование JS

     Jasmine
      Qunit
      Mocha
Jasmine

        Запускается в браузере
Возможно автоматизировать запуск во всех
              браузерах
Mocha


Запускается через node.js или в
          браузере
   Возможно включить в CI
Batman
Batman

 Каноничный MVC
 Роутинг Rails-style
Model-View Bindings
    CoffeeScript
Batman.App
Batman.Model
Batman.Controller
Batman.View
Batman


Все хорошо, но:
- В активной разработке
- Неизвестна производительность
Extranet
Самое соленое
      Федор Шумов
 Front-End Developer
Router. URL-object. URL-event

    Навигация через адресную строку
    #/hotels/567/rooms/23/facilities/?hints=true

    Парсим строку по маске
    {pathname: {Array, String}, mask: {Array, String}}

    Слабое связывание
    $xo.trigger('url', urlObject)

    Организация структуры приложения
    xo.pages['hotels.id.rooms.id.facilities']
    xo.app.pages['hotels/567/rooms/23/facilities']
DOM-Data через Expando

    Связывание любых данных с DOM

    Bспользованиt библиотек и плагинов,
    использующих $.data() или подобную
    организацию данных через Expando

    Не засорять неймспейс временными или
    чужими данными.
Parent.removeChild(Child)

    Самые затратные операции с DOM.

    Строим только один раз.

    Выдернутая построеная вьюха невидима но
    живая.

    Сохраняются DOM-данные через Expando,
    а значит сохраняются преимущества
    предыдущего слайда :)
Отказ от Delegate

    Backbone слушает дерево view.el

    Минимум детей у нодов — быстрее отклик

    Так как вьюха собирается 1 раз, то можно
    потратить время на сборе побольше

    Прямые связки Knockout-bindings
Knockout

    Ясная логика темплейта

    Автоматическое изменение UI

    Дисперсионные изменения в DOM —
    скорость

    Безопасная MVVM по keyUp/keyDown

    Многопользовательский режим
Backbone + Knockout

    Router + CRUD + MVVM

    Two-way: model.set() триггерит изменения в
    observables; и наоборот attributes подписаны на
    оbservables.

    Постепенный перевод вьюх из Backbone в
    Knockout.
Отказ от Extend в «бешеных» вьюхах

    Backbone при предподготовке модели как
    минимум 3 раза бегает for-in по объекту
      this.attributes = _.extend({}, defaults, attributes)
           this._previousAttributes = _.clone(this.attributes)

    Либо заменить объекты на парные массивы
    и бегать do {--n} while (n)
      this.defaultsKeys = [ “id”, “name” ]
           this.defaultsVals = [ “456”, “Ivan Zolotov” ];

    Либо отказаться от Backbone + Knockout

More Related Content

What's hot

Безопасность Node.js / Илья Вербицкий (Независимый консультант)
Безопасность Node.js / Илья Вербицкий (Независимый консультант)Безопасность Node.js / Илья Вербицкий (Независимый консультант)
Безопасность Node.js / Илья Вербицкий (Независимый консультант)
Ontico
 
Произвольная смена дизайна системного скроллбара
Произвольная смена дизайна системного скроллбараПроизвольная смена дизайна системного скроллбара
Произвольная смена дизайна системного скроллбара
DevDay
 
Архитектура растущего проекта, на примере ВКонтакте
Архитектура растущего проекта, на примере ВКонтактеАрхитектура растущего проекта, на примере ВКонтакте
Архитектура растущего проекта, на примере ВКонтакте
TKConf
 
«Организация Frontend-разработки на крупном проекте» — Дмитрий Кузнецов
«Организация Frontend-разработки на крупном проекте» — Дмитрий Кузнецов«Организация Frontend-разработки на крупном проекте» — Дмитрий Кузнецов
«Организация Frontend-разработки на крупном проекте» — Дмитрий Кузнецов
2ГИС Технологии
 

What's hot (20)

Безопасность Node.js / Илья Вербицкий (Независимый консультант)
Безопасность Node.js / Илья Вербицкий (Независимый консультант)Безопасность Node.js / Илья Вербицкий (Независимый консультант)
Безопасность Node.js / Илья Вербицкий (Независимый консультант)
 
Настройка kubernetes: tips and tricks / Михаил Прокопчук (Avito)
Настройка kubernetes: tips and tricks / Михаил Прокопчук (Avito)Настройка kubernetes: tips and tricks / Михаил Прокопчук (Avito)
Настройка kubernetes: tips and tricks / Михаил Прокопчук (Avito)
 
DPDK в виртуальном коммутаторе Open vSwitch / Александр Джуринский (Selectel)
DPDK в виртуальном коммутаторе Open vSwitch / Александр Джуринский (Selectel)DPDK в виртуальном коммутаторе Open vSwitch / Александр Джуринский (Selectel)
DPDK в виртуальном коммутаторе Open vSwitch / Александр Джуринский (Selectel)
 
VVV. Сервер для WordPress-разработчика
 VVV. Сервер для WordPress-разработчика VVV. Сервер для WordPress-разработчика
VVV. Сервер для WordPress-разработчика
 
#11 "Отзывчивый UI без блокировки Event Loop" Денис Речкунов
#11 "Отзывчивый UI без блокировки Event Loop" Денис Речкунов#11 "Отзывчивый UI без блокировки Event Loop" Денис Речкунов
#11 "Отзывчивый UI без блокировки Event Loop" Денис Речкунов
 
HTML 5: будущее уже сегодня, Сергей Байдачный, Microsoft Ukraine
HTML 5: будущее уже сегодня, Сергей Байдачный, Microsoft UkraineHTML 5: будущее уже сегодня, Сергей Байдачный, Microsoft Ukraine
HTML 5: будущее уже сегодня, Сергей Байдачный, Microsoft Ukraine
 
Михаил Давыдов "Масштабируемые JavaScript-приложения"
Михаил Давыдов "Масштабируемые JavaScript-приложения"Михаил Давыдов "Масштабируемые JavaScript-приложения"
Михаил Давыдов "Масштабируемые JavaScript-приложения"
 
Произвольная смена дизайна системного скроллбара
Произвольная смена дизайна системного скроллбараПроизвольная смена дизайна системного скроллбара
Произвольная смена дизайна системного скроллбара
 
JavaScript Unit Testing Using Jasmine And Tools
JavaScript Unit Testing Using Jasmine And ToolsJavaScript Unit Testing Using Jasmine And Tools
JavaScript Unit Testing Using Jasmine And Tools
 
Архитектура растущего проекта, на примере ВКонтакте
Архитектура растущего проекта, на примере ВКонтактеАрхитектура растущего проекта, на примере ВКонтакте
Архитектура растущего проекта, на примере ВКонтакте
 
#6 "Изоморфный фреймворк Catberry.js" Денис Речкунов
#6 "Изоморфный фреймворк Catberry.js" Денис Речкунов#6 "Изоморфный фреймворк Catberry.js" Денис Речкунов
#6 "Изоморфный фреймворк Catberry.js" Денис Речкунов
 
Speed Up Your Website
Speed Up Your WebsiteSpeed Up Your Website
Speed Up Your Website
 
«Организация Frontend-разработки на крупном проекте» — Дмитрий Кузнецов
«Организация Frontend-разработки на крупном проекте» — Дмитрий Кузнецов«Организация Frontend-разработки на крупном проекте» — Дмитрий Кузнецов
«Организация Frontend-разработки на крупном проекте» — Дмитрий Кузнецов
 
Bootstrap3 basics
Bootstrap3 basicsBootstrap3 basics
Bootstrap3 basics
 
Настройка Kubernetes: tips ans tricks
Настройка Kubernetes: tips ans tricksНастройка Kubernetes: tips ans tricks
Настройка Kubernetes: tips ans tricks
 
Как и зачем создавать NginX-модуль — теория, практика, профит. Часть 2 / Васи...
Как и зачем создавать NginX-модуль — теория, практика, профит. Часть 2 / Васи...Как и зачем создавать NginX-модуль — теория, практика, профит. Часть 2 / Васи...
Как и зачем создавать NginX-модуль — теория, практика, профит. Часть 2 / Васи...
 
Двойная (каскадная) шаблонизация в Django
Двойная (каскадная) шаблонизация в DjangoДвойная (каскадная) шаблонизация в Django
Двойная (каскадная) шаблонизация в Django
 
Установка и начало работы с VMware vSphere за 60 минут
Установка и начало работы с VMware vSphere за 60 минутУстановка и начало работы с VMware vSphere за 60 минут
Установка и начало работы с VMware vSphere за 60 минут
 
Тюним память и сетевой стек в Linux: история перевода высоконагруженных серве...
Тюним память и сетевой стек в Linux: история перевода высоконагруженных серве...Тюним память и сетевой стек в Linux: история перевода высоконагруженных серве...
Тюним память и сетевой стек в Linux: история перевода высоконагруженных серве...
 
Asus wl 500g premium
Asus wl 500g premiumAsus wl 500g premium
Asus wl 500g premium
 

Viewers also liked

обзор средств для тестирования Java script
обзор средств для тестирования Java scriptобзор средств для тестирования Java script
обзор средств для тестирования Java script
Alexey Chumagin
 
Java script. code quality. (2)
Java script. code quality. (2)Java script. code quality. (2)
Java script. code quality. (2)
Andrey Kucherenko
 

Viewers also liked (7)

обзор средств для тестирования Java script
обзор средств для тестирования Java scriptобзор средств для тестирования Java script
обзор средств для тестирования Java script
 
2014-10-04 02 Владислав Безверхий. Mocha - покрой frontend по полной
2014-10-04 02 Владислав Безверхий. Mocha - покрой frontend по полной2014-10-04 02 Владислав Безверхий. Mocha - покрой frontend по полной
2014-10-04 02 Владислав Безверхий. Mocha - покрой frontend по полной
 
FrontEnd Unit testing
FrontEnd Unit testingFrontEnd Unit testing
FrontEnd Unit testing
 
Доклад Виталия Котова на конференции LoveQA. "Selenium тесты. От RC и одного ...
Доклад Виталия Котова на конференции LoveQA. "Selenium тесты. От RC и одного ...Доклад Виталия Котова на конференции LoveQA. "Selenium тесты. От RC и одного ...
Доклад Виталия Котова на конференции LoveQA. "Selenium тесты. От RC и одного ...
 
Java script. code quality. (2)
Java script. code quality. (2)Java script. code quality. (2)
Java script. code quality. (2)
 
JavaScript. Code Quality.
JavaScript. Code Quality.JavaScript. Code Quality.
JavaScript. Code Quality.
 
JavaScript + Webdriver = ♥
JavaScript + Webdriver = ♥ JavaScript + Webdriver = ♥
JavaScript + Webdriver = ♥
 

Similar to Арсений Заречнев и Федор Шумов - Одностраничные приложения

Ember.js ответ на почти все вопросы - java script frameworks day 2014
Ember.js   ответ на почти все вопросы - java script frameworks day 2014Ember.js   ответ на почти все вопросы - java script frameworks day 2014
Ember.js ответ на почти все вопросы - java script frameworks day 2014
Andrey Listochkin
 
Проектирование высоконагруженного масштабируемого веб-сервиса в облаке на при...
Проектирование высоконагруженного масштабируемого веб-сервиса в облаке на при...Проектирование высоконагруженного масштабируемого веб-сервиса в облаке на при...
Проектирование высоконагруженного масштабируемого веб-сервиса в облаке на при...
Ontico
 
JavaScript & modern scala backend
JavaScript & modern scala backendJavaScript & modern scala backend
JavaScript & modern scala backend
GeeksLab Odessa
 
Стажировка-2014, занятие 8. Обзор Sails framework (Node.js)
Стажировка-2014, занятие 8. Обзор Sails framework (Node.js)Стажировка-2014, занятие 8. Обзор Sails framework (Node.js)
Стажировка-2014, занятие 8. Обзор Sails framework (Node.js)
7bits
 
Javascript in modern scala backend. [russian]
Javascript in modern scala backend.  [russian]  Javascript in modern scala backend.  [russian]
Javascript in modern scala backend. [russian]
Ruslan Shevchenko
 
Test Driven Development in ASP.NET MVC 3
Test Driven Development in ASP.NET MVC 3Test Driven Development in ASP.NET MVC 3
Test Driven Development in ASP.NET MVC 3
Anton Vidishchev
 
View как чистая функция от состояния базы данных - Илья Беда, bro.agency
View как чистая функция от состояния базы данных  - Илья Беда, bro.agencyView как чистая функция от состояния базы данных  - Илья Беда, bro.agency
View как чистая функция от состояния базы данных - Илья Беда, bro.agency
it-people
 

Similar to Арсений Заречнев и Федор Шумов - Одностраничные приложения (20)

Опыт разработки эффективного SPA
Опыт разработки эффективного SPAОпыт разработки эффективного SPA
Опыт разработки эффективного SPA
 
Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)
Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)
Vue.js и его брат-близнец Vue-server.js / Андрей Солодовников (НГС)
 
Ember.js ответ на почти все вопросы - java script frameworks day 2014
Ember.js   ответ на почти все вопросы - java script frameworks day 2014Ember.js   ответ на почти все вопросы - java script frameworks day 2014
Ember.js ответ на почти все вопросы - java script frameworks day 2014
 
Сложные социальные приложения с помощью JS MVC фреймворков
Сложные социальные приложения с помощью JS MVC фреймворковСложные социальные приложения с помощью JS MVC фреймворков
Сложные социальные приложения с помощью JS MVC фреймворков
 
Jsfwdays 2013-2
Jsfwdays 2013-2Jsfwdays 2013-2
Jsfwdays 2013-2
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 
Проектирование высоконагруженного масштабируемого веб-сервиса в облаке на при...
Проектирование высоконагруженного масштабируемого веб-сервиса в облаке на при...Проектирование высоконагруженного масштабируемого веб-сервиса в облаке на при...
Проектирование высоконагруженного масштабируемого веб-сервиса в облаке на при...
 
JavaScript & modern scala backend
JavaScript & modern scala backendJavaScript & modern scala backend
JavaScript & modern scala backend
 
Стажировка-2014, занятие 8. Обзор Sails framework (Node.js)
Стажировка-2014, занятие 8. Обзор Sails framework (Node.js)Стажировка-2014, занятие 8. Обзор Sails framework (Node.js)
Стажировка-2014, занятие 8. Обзор Sails framework (Node.js)
 
Automating Canvas: difficult but possible
Automating Canvas: difficult but possibleAutomating Canvas: difficult but possible
Automating Canvas: difficult but possible
 
Js optimization
Js optimizationJs optimization
Js optimization
 
Backbone Javascript Application
Backbone Javascript ApplicationBackbone Javascript Application
Backbone Javascript Application
 
Javascript in modern scala backend. [russian]
Javascript in modern scala backend.  [russian]  Javascript in modern scala backend.  [russian]
Javascript in modern scala backend. [russian]
 
Алексей Авдеев — Применение Backbone.js для рефакторинга фронтенда веб-прилож...
Алексей Авдеев — Применение Backbone.js для рефакторинга фронтенда веб-прилож...Алексей Авдеев — Применение Backbone.js для рефакторинга фронтенда веб-прилож...
Алексей Авдеев — Применение Backbone.js для рефакторинга фронтенда веб-прилож...
 
Test Driven Development in ASP.NET MVC 3
Test Driven Development in ASP.NET MVC 3Test Driven Development in ASP.NET MVC 3
Test Driven Development in ASP.NET MVC 3
 
Фреймворк автотестирования веб-сервисов своими силами
Фреймворк автотестирования веб-сервисов своими силамиФреймворк автотестирования веб-сервисов своими силами
Фреймворк автотестирования веб-сервисов своими силами
 
Семь тысяч Rps, один go
Семь тысяч Rps, один goСемь тысяч Rps, один go
Семь тысяч Rps, один go
 
View как чистая функция от состояния базы данных - Илья Беда, bro.agency
View как чистая функция от состояния базы данных  - Илья Беда, bro.agencyView как чистая функция от состояния базы данных  - Илья Беда, bro.agency
View как чистая функция от состояния базы данных - Илья Беда, bro.agency
 
Vladimir Trandafilov - When you need your system of cross browser testing
Vladimir Trandafilov - When you need your system of cross browser testingVladimir Trandafilov - When you need your system of cross browser testing
Vladimir Trandafilov - When you need your system of cross browser testing
 
Сергей Константинов — Что интересного готовит нам W3C
Сергей Константинов — Что интересного готовит нам W3CСергей Константинов — Что интересного готовит нам W3C
Сергей Константинов — Что интересного готовит нам W3C
 

Арсений Заречнев и Федор Шумов - Одностраничные приложения

  • 1. Single-Page Apps Вся соль Арсений Заречнев Front-End Developer
  • 3.
  • 4. Backbone Knockout Ember Batman rJS, Dojo, Closure, YUI, Javascr
  • 5. Backbone Knockout Ember Batman rJS, Dojo, Closure, YUI, Javascr
  • 6. Backbone Хорошее знакомство с MVC на клиенте Малый размер Легкость освоения
  • 7. Backbone REST Модели с событиями Роутинг Underscore.js Большое коммьюнити
  • 8. Backbone Knockout Ember Batman rJS, Dojo, Closure, YUI, Javascr
  • 9. MV* Model Collection View Router
  • 10. Backbone.Model Backbone.Collection Получение данных с сервера Сохранение данных Работа с данными на клиенте
  • 12. Backbone.View Обработка событий Подписки на изменения данных модели Рендеринг
  • 14. Backbone Есть всё необходимое для построения одностраничного приложения. И написания тестов!
  • 15. Тестирование JS Помогает сохранять слабую связанность и хорошую структуру кода
  • 16. Тестирование JS Jasmine Qunit Mocha
  • 17. Тестирование JS Jasmine Qunit Mocha
  • 18. Jasmine Запускается в браузере Возможно автоматизировать запуск во всех браузерах
  • 19. Mocha Запускается через node.js или в браузере Возможно включить в CI
  • 20.
  • 22. Batman Каноничный MVC Роутинг Rails-style Model-View Bindings CoffeeScript
  • 27. Batman Все хорошо, но: - В активной разработке - Неизвестна производительность
  • 28. Extranet Самое соленое Федор Шумов Front-End Developer
  • 29. Router. URL-object. URL-event  Навигация через адресную строку #/hotels/567/rooms/23/facilities/?hints=true  Парсим строку по маске {pathname: {Array, String}, mask: {Array, String}}  Слабое связывание $xo.trigger('url', urlObject)  Организация структуры приложения xo.pages['hotels.id.rooms.id.facilities'] xo.app.pages['hotels/567/rooms/23/facilities']
  • 30. DOM-Data через Expando  Связывание любых данных с DOM  Bспользованиt библиотек и плагинов, использующих $.data() или подобную организацию данных через Expando  Не засорять неймспейс временными или чужими данными.
  • 31. Parent.removeChild(Child)  Самые затратные операции с DOM.  Строим только один раз.  Выдернутая построеная вьюха невидима но живая.  Сохраняются DOM-данные через Expando, а значит сохраняются преимущества предыдущего слайда :)
  • 32. Отказ от Delegate  Backbone слушает дерево view.el  Минимум детей у нодов — быстрее отклик  Так как вьюха собирается 1 раз, то можно потратить время на сборе побольше  Прямые связки Knockout-bindings
  • 33. Knockout  Ясная логика темплейта  Автоматическое изменение UI  Дисперсионные изменения в DOM — скорость  Безопасная MVVM по keyUp/keyDown  Многопользовательский режим
  • 34. Backbone + Knockout  Router + CRUD + MVVM  Two-way: model.set() триггерит изменения в observables; и наоборот attributes подписаны на оbservables.  Постепенный перевод вьюх из Backbone в Knockout.
  • 35. Отказ от Extend в «бешеных» вьюхах  Backbone при предподготовке модели как минимум 3 раза бегает for-in по объекту this.attributes = _.extend({}, defaults, attributes) this._previousAttributes = _.clone(this.attributes)  Либо заменить объекты на парные массивы и бегать do {--n} while (n) this.defaultsKeys = [ “id”, “name” ] this.defaultsVals = [ “456”, “Ivan Zolotov” ];  Либо отказаться от Backbone + Knockout