backbone js
TRANSCRIPT
http://documentcloud.github.com/backbone/
вторник, 15 ноября 11 г.
Типичный application.js:1. Код не имеет структуры - набор обработчиков событий
2. Код растет - тяжело ориентироваться
3. Совсем не просто проследить логику взаимодействия объектов на странице
вторник, 15 ноября 11 г.
Рефакторинг - использование волшебных (function(){})()
var MyCoolModule = (function(opts){
//public variable this.settings = opts;
//private var var bla = 0;
//public method this.reset = function (){}
//private method function init(){};
//initializer self.init();})();
Используем:var myCoolObject = new MyCoolModule({params});//call of public functionsmyCoolObject.reset();
1. Код чуть более структурирован - функционал организован в модули
2. Код отдельного модуля продолжает оставаться довольно тяжелым и неструктурированным - генерация html, обмен данными смешано
3. Если страница довольна интерактивна и объемна - для оптимизации скорости и потребления памяти сырые данные хранятся в данных js - скорее всего в объекте(ах) глобального пространства имен.
4. Скорее всего в этот момент мы уже воспринимаем нашу страницу как набор объектов(визуальных,объектов по типу данных) - но js код остается в виде методов класса, т.е. соответствующих объектов(инкапсулирующих данные, представляющие АПИ) - нет. Как следствие - дополнительные расходы на работу с html кодом, идентификацию классов источника события и пр.
вторник, 15 ноября 11 г.
Рефакторинг - MVC1. Bacbone.js - легковесен, дает только шаблон, обеспечивая свободу, не требует специального html кода2. Knockout.js - Model-View-ViewModel (MVVM), работает с помощью data аттрибутов, что означает специальный html код 3. Sproutcore - мощный и тяжеловесный, включает MVC фреймворк и визуальные компоненты4. Require JS - по сути больше п.6, но использует AMD (Asynchronous Module Definition) - загрузку js по требованию и ассинхронно5. etc6. Custom implementations - можно написать и самому :)
вторник, 15 ноября 11 г.
Backbone.js - структура
https://github.com/codebrew/backbone-rails
rails g backbone:scaffold Post title:string content:string
1. Models - компонент, позволяющий организовать обмен данными, предоставляет события(изменение, добавление...), на которые могут подписываться Views
2. Routers - Его назначение обработка хеш навигации в приложении. В современных браузерах это прямое управление адресной строкой, в остальных - эмуляция через якорные ссылки(#..., настраиваемо)
3. Templates - в общем-то любой шаблонизатор(встроенный в Underscore, EJS, JQTemplates, Mustache, Handlabars)
4. Views - ООП подход, те каждая вью отвечает за определенный блок на странице. Если блоков несколько - то будет несколько экземпляров вью, каждый из который хранит в себе конкретную информацию(настройку) на логический блок. Ограничений нет - блоки логические.
вторник, 15 ноября 11 г.
1. Router
class Apihelp.Routers.PostsRouter extends Backbone.Router initialize: (options) -> @posts = new Apihelp.Collections.PostsCollection() @posts.reset options.posts
routes: "/new" : "newPost" "/index" : "index" "/:id/edit" : "edit" "/:id" : "show" ".*" : "index"
newPost: -> @view = new Apihelp.Views.Posts.NewView(collection: @posts) $("#posts").html(@view.render().el)
index: -> @view = new Apihelp.Views.Posts.IndexView(posts: @posts) $("#posts").html(@view.render().el)
show: (id) -> post = @posts.get(id) @view = new Apihelp.Views.Posts.ShowView(model: post) $("#posts").html(@view.render().el) edit: (id) -> post = @posts.get(id)
@view = new Apihelp.Views.Posts.EditView(model: post) $("#posts").html(@view.render().el)
Структура роутера:1. Хеш(функция, возращающая хеш) - определяет урл и соответствующее ему действие обработчик2. Набор функций обработчиков - на вход получают параметры, указанные в определении URL.
вторник, 15 ноября 11 г.
2. View
Apihelp.Views.Posts ||= {}
class Apihelp.Views.Posts.EditView extends Backbone.View template : JST["backbone/templates/posts/edit"] events : "submit #edit-post" : "update" update : (e) -> e.preventDefault() e.stopPropagation() @model.save(null, success : (post) => @model = post window.location.hash = "/#{@model.id}" ) render : -> $(this.el).html(this.template(@model.toJSON() )) this.$("form").backboneLink(@model) return this
Структура View:
1. View наследуется от базового класса Baclbone.View, но может насловедоваться и от другой вью
2. Шаблонизатор можно использовать любой, рекомендую Mustache(Hadlebars). Определять явно не обязательно, но удобно поскольку сразу видно какие шаблоны используются в данной вью.
3. Хеш реакций на события - позволяет определять любые события внутри html блока вью(нет просмотра всего DOM страницы, только относительно текущей view - для работы с DOM вью также есть сокращение this.$()) и функций обработчиков. В каждый обработчик передает конктекс текущей View(this) и пераметр, имеющий всю нужную информацию об источнике события.
4. Набор обработчков событий и просто служебных функций
вторник, 15 ноября 11 г.
3. Model && Collection
class Apihelp.Models.Post extends Backbone.Model paramRoot: 'post'
defaults: title: null content: null class Apihelp.Collections.PostsCollection extends Backbone.Collection model: Apihelp.Models.Post url: '/posts'
Модель - предназначена для хранения логики, относящейся к конкретному объекту - преобразования, валидации, кастомная логика, свойства и собственно структура объектов
Коллекция - упорядоченный найбор объекто моделей. Предоставляет события об изменения в моделях, появлении новых и пр. Предоставляет методы для обновления, сохранения, сравнения данных, включая взимодействие с сервером
Существуют множество реализаций моделей и их способом взиамодействия с сервером - rest api(rails), websocket и другие
Интегрированы методы Underscore.js, для обработки наборов моделей
вторник, 15 ноября 11 г.
4. Templates
<h1>Edit post</h1>
<form id="edit-post" name="post"> <div class="field"> <label for="title"> title:</label> <input type="text" name="title" id="title" value={{ title }} > </div>
<div class="field"> <label for="content"> content:</label> <input type="text" name="content" id="content" value={{ content }} > </div>
<div class="actions"> <input type="submit" value="Update Post" /> </div>
</form>
<a href="#/index">Back</a>
Backbone дает свободу выбора шаблонизатора(Jquery Templates, Underscore, EJS,Mustache, и еще тонна существующих)
НО! Самый удобный способ - когда шаблоны на стороне сервера компилируются в один файл, содержащий JS функций, собранный в массив(JST):- не загрязняется html- систематизация позволяет динамически конструировать вызовы шаблонов
Rails.version <3.1 => JammitRails.version >=3.1 => AssetPipeline(HadleBars + HadleBars Assets) || Jammit
вторник, 15 ноября 11 г.
To sum up:
THE END
1MVC(Backbone) - не панацея. Это удобный инстурмент, когда JS кода много.2. Backbone - позволяет структурировать JS код по типу Rails приложения, что облегчает его поддержку и развитие3. События позволяют сделать код слабо связанным - облегчает структура приложения4. Production ready
вторник, 15 ноября 11 г.