25
Разработка SPA Backbone JS. Marionette JS. Андрей Калашников

Разработка Single Page App. Backbone JS. Marionette JS

Embed Size (px)

DESCRIPTION

Презентация на тему использования Marionette JS в своих Backbone приложениях, а также информация о том, как грамотно построить архитектуру своего Backbone.Marrionette приложения. Код приложения: https://github.com/an2323/listcontacts/ Полезные ссылки: Плагины: https://github.com/thedersen/backbone.validation https://github.com/marionettejs/backbone.syphon https://github.com/theironcook/Backbone.ModelBinder https://github.com/jeromegn/Backbone.localStorage https://github.com/marionettejs/backbone.wreqr https://github.com/marionettejs/backbone.babysitter Статьи: http://largescalejs.ru/ http://shichuan.github.io/javascript-patterns/ http://lostechies.com/derickbailey/2013/03/18/event-a.. Платные и бесплатные книги: http://addyosmani.com/resources/essentialjsdesignpatt.. http://addyosmani.github.io/backbone-fundamentals/ https://leanpub.com/u/derickbailey https://leanpub.com/u/davidsulc

Citation preview

Page 1: Разработка Single Page App. Backbone JS. Marionette JS

Разработка SPABackbone JS. Marionette JS.

Андрей Калашников

Page 2: Разработка Single Page App. Backbone JS. Marionette JS

Что же такое SPA?

Page 3: Разработка Single Page App. Backbone JS. Marionette JS

SPA (Single Page Application) - это веб-приложение, которое выполняется непосредственно на стороне клиента в Web-браузере.

Цель: обеспечть большую интерактивность приложения, такую как в desktop app.

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

Page 4: Разработка Single Page App. Backbone JS. Marionette JS

“Спагетти код” на JQuery или...

Page 5: Разработка Single Page App. Backbone JS. Marionette JS

MVC

Page 6: Разработка Single Page App. Backbone JS. Marionette JS

1) Малый размер.2) Низкий порог вхождения3) Большое сообщество4) Куча туториалов, в том числе видео.5) Гибкость. Наиболее гибкий из фреймфорков; за

счет того, что не навязывает свою архитектуру и многие решения остаются за разработчиком.

Преимущества Backbone

Page 7: Разработка Single Page App. Backbone JS. Marionette JS

Из чего состоит Backbone?Model - объект, содержащий данные о какой-либо конкретной сущности.

Page 8: Разработка Single Page App. Backbone JS. Marionette JS

Из чего состоит Backbone?Collection - это упорядоченный наборы моделей.

Page 9: Разработка Single Page App. Backbone JS. Marionette JS

Из чего состоит Backbone?View - отвечает за организацию интерфейса.

Page 10: Разработка Single Page App. Backbone JS. Marionette JS

Из чего состоит Backbone?Template - HTML код с данными модели.

Page 11: Разработка Single Page App. Backbone JS. Marionette JS

Из чего состоит Backbone?Router - отвечает за сохранение состояний.

Page 12: Разработка Single Page App. Backbone JS. Marionette JS

Backbone как MVC фреймворк

View - контроллер. Отвечает за обработку событий. Обменивается данными между View и Model.Model - модельTemplate - представление.

На самом деле Backbone сокрее MV* фреймворк.

Page 13: Разработка Single Page App. Backbone JS. Marionette JS
Page 15: Разработка Single Page App. Backbone JS. Marionette JS

НО ЭТО ВСЕ ОБМАН!

Page 16: Разработка Single Page App. Backbone JS. Marionette JS

Недостатки Backbone JS

1) Утечки памяти2) Не самодостаточен. Мало чего можно

сделать “из коробки”.3) Гибкость. Нет определенной структуры

приложения.4) Написание большого кол-ва шаблонного

кода

Page 17: Разработка Single Page App. Backbone JS. Marionette JS

Marionette JS.

1) Решает проблему с памятью2) Реализует расширенную коллекцию

представлений, значительно упрощающих написание кода.

3) Включает в себя реализации некоторых шаблонов проектирования.

4) Позволяет более качественно структурировать код.

Page 18: Разработка Single Page App. Backbone JS. Marionette JS

Marionette представления- Marionette.View — базовый класс для всех представлений

Marionette.js.- Marionette.ItemView — представление для отрисовки данных на

одном шаблоне.- Marionette.CollectionView — представление, для отрисовки

коллекции. Обычно используется совместно с ItemView.- Marionette.CompositeView — аналогично CollectionView, но

добавляет свой шаблон для отрисовки контейнера.- Marionette.Layout — отображает шаблон + содержит менеджер

регионов.

Крутая статься на хабре с описанием представлений и картинками

Код приложения, переписанный с использованием Marionette представлений

Page 19: Разработка Single Page App. Backbone JS. Marionette JS

Паттерн “модуль” в JS

Page 20: Разработка Single Page App. Backbone JS. Marionette JS

Модули в Marionette JS

Page 21: Разработка Single Page App. Backbone JS. Marionette JS

Уменьшаем связанность. Добавляем “посредника”

Код приложения на Marionette с новой архитектурой.

Page 22: Разработка Single Page App. Backbone JS. Marionette JS

AMD

Асинхронное объявление модулей. - разделение файлов для более простого

их обслуживания- удовлетворение зависимостей- экспорт переменных в глобальную

область видимости

Page 23: Разработка Single Page App. Backbone JS. Marionette JS

Require JS

Require JS - одна из реализаций AMD.define('myModule', ['dep1', 'dep2'], function (dep1, dep2) { //Какой-то код модуля... return function () {};}); - объявление модуля

require(["helper/util"], function(util) { //Эта Callback функция вызовется, //когда helper/util.js будет загружен}); - подключение модулей

Для подключения шаблонов используем plugin “text” напрямую или надстройку “underscore-tpl”.

Код переписанный с использованием AMD

Page 24: Разработка Single Page App. Backbone JS. Marionette JS

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

Page 25: Разработка Single Page App. Backbone JS. Marionette JS

Калашников Андрейemail: [email protected]: andreyak23