Backbone js
Upcoming SlideShare
Loading in...5
×
 

Backbone js

on

  • 1,982 views

 

Statistics

Views

Total Views
1,982
Views on SlideShare
1,980
Embed Views
2

Actions

Likes
1
Downloads
6
Comments
2

1 Embed 2

http://localhost 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • да это так .. поделка :). на внутренней конфе показывал. Создай тему в группе - я понакидаю может материалов, которые по бекбону собрались
    Are you sure you want to
    Your message goes here
    Processing…
  • Женя, а где ты презентовал это?
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Backbone js Backbone js Presentation Transcript

  • http://documentcloud.github.com/backbone/вторник, 15 ноября 11 г.
  • Типичный application.js: 1. Код не имеет структуры - набор обработчиков событий 2. Код растет - тяжело ориентироваться 3. Совсем не просто проследить логику взаимодействия объектов на страницевторник, 15 ноября 11 г.
  • Рефакторинг - использование волшебных (function(){})() var MyCoolModule = (function(opts){ 1. Код чуть более структурирован - функционал //public variable организован в модули this.settings = opts; //private var var bla = 0; //public method 2. Код отдельного модуля продолжает оставаться this.reset = function (){} довольно тяжелым и неструктурированным - генерация html, обмен данными смешано //private method function init(){}; //initializer self.init(); 3. Если страница довольна интерактивна и объемна - })(); для оптимизации скорости и потребления памяти сырые данные хранятся в данных js - скорее всего в объекте(ах) Используем: глобального пространства имен. var myCoolObject = new MyCoolModule({params}); //call of public functions myCoolObject.reset(); 4. Скорее всего в этот момент мы уже воспринимаем нашу страницу как набор объектов(визуальных,объектов по типу данных) - но js код остается в виде методов класса, т.е. соответствующих объектов(инкапсулирующих данные, представляющие АПИ) - нет. Как следствие - дополнительные расходы на работу с html кодом, идентификацию классов источника события и пр.вторник, 15 ноября 11 г.
  • Рефакторинг - MVC 1. 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. etc 6. 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) -> 1. Хеш(функция, возращающая хеш) - определяет урл и соответствующее @posts = new Apihelp.Collections.PostsCollection() ему действие обработчик @posts.reset options.posts 2. Набор функций обработчиков - на вход получают параметры, указанные в определении URL. 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)вторник, 15 ноября 11 г.
  • 2. View Структура View: Apihelp.Views.Posts ||= {} 1. View наследуется от базового класса Baclbone.View, но может class Apihelp.Views.Posts.EditView extends Backbone.View template : JST["backbone/templates/posts/edit"] насловедоваться и от другой вью events : "submit #edit-post" : "update" update : (e) -> e.preventDefault() 2. Шаблонизатор можно использовать любой, рекомендую e.stopPropagation() Mustache(Hadlebars). Определять явно не обязательно, но удобно поскольку сразу видно какие шаблоны используются в данной вью. @model.save(null, success : (post) => @model = post window.location.hash = "/#{@model.id}" ) 3. Хеш реакций на события - позволяет определять любые события внутри html блока вью(нет просмотра всего DOM страницы, только относительно render : -> текущей view - для работы с DOM вью также есть сокращение this.$()) и $(this.el).html(this.template(@model.toJSON() )) функций обработчиков. В каждый обработчик передает конктекс текущей View(this) и пераметр, имеющий всю нужную информацию об источнике this.$("form").backboneLink(@model) события. return 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 с сервером - rest api(rails), websocket и другие Backbone.Collection model: Apihelp.Models.Post url: /posts Интегрированы методы Underscore.js, для обработки наборов моделейвторник, 15 ноября 11 г.
  • 4. Templates Backbone дает свободу выбора шаблонизатора(Jquery Templates, Underscore, EJS,Mustache, и еще тонна существующих) <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"> компилируются в один файл, содержащий JS функций, собранный в <label for="content"> content:</label> массив(JST): <input type="text" name="content" id="content" - не загрязняется html value={{ content }} > - систематизация позволяет динамически конструировать вызовы шаблонов </div> <div class="actions"> <input type="submit" value="Update Post" /> </div> </form> <a href="#/index">Back</a> Rails.version <3.1 => Jammit Rails.version >=3.1 => AssetPipeline(HadleBars + HadleBars Assets) || Jammitвторник, 15 ноября 11 г.
  • To sum up: 1MVC(Backbone) - не панацея. Это удобный инстурмент, когда JS кода много. 2. Backbone - позволяет структурировать JS код по типу Rails приложения, что облегчает его поддержку и развитие 3. События позволяют сделать код слабо связанным - облегчает структура приложения 4. Production ready THE ENDвторник, 15 ноября 11 г.