Backbone.js

View Github Repository Open presentation in a new window

msgre

See all presentation from msgre

Backbone.js

0 0

backbone-talk

Povidani o Javascriptovych knihovnach Backbone.js a Marionette.js na prosincovem tkalcovskem setkani.

On Github msgre / backbone-talk

Backbone.js

Povídání pro Tkalce na webu — Michal Valoušek — @msgrehttps://github.com/msgre/backbone-talk

Jeremy Ashkenas

Backbone.js – Underscore.js – CoffeeScript – Docco

Rdio, Quartz, Wordpress.com, Foursquare, Bitbucket, Disqus, Delicious, Khan Academy, Basecamp, Trello, Airbnb, SoundCloud, Stripe, USA Today, LinkedIn, Pinterest, BitTorrent, Digg

Backbone.js is a lightweight JavaScript librarythat adds structure to your client-side code.
— Addy Osmani
MVC - je softwarová architektura, která rozděluje datový model aplikace, uživatelské rozhraní a řídicí logiku do tří nezávislých komponent tak, že modifikace některé z nich má jen minimální vliv na ostatní.

MVC

MVC

Backbone.Model + Backbone.Collection

M

Backbone.Model

// definice modelu
var Book = Backbone.Model.extend();

// instance
var model = new Book({title: 'Honzíkova cesta', author: 'Bohumil Říha'});

Demo

M

Backbone.Model

var Book = Backbone.Model.extend({
  // defaultni hodnoty
  defaults: {
    publisher: "Albatros",
    tags: ["children"]
  },

  // metoda
  get_isbn: function(){
    // ...
  }
});

M

Backbone.Collection

// definice modelu
var Book = Backbone.Model.extend();

// definice kolekce nad modelem
var Library = Backbone.Collection.extend({
  model: Book
});

// instance
var model1 = new Book({title: 'Honzíkova cesta', author: 'Bohumil Říha'}),
    model2 = new Book({title: 'Čuk a Gek', author: 'Arkadij Gajdar'}),
    model3 = new Book({title: 'Malý Bobeš', author: 'Josef Věromír Pleva'});
var collection = new Library([model1, model2, model3]);

Demo

M

Bonus → RESTové rozhraní za hubičku!

// definice modelu
var Book = Backbone.Model.extend({
  //...
  url: '/api/books/'
});

// definice kolekce
var Library = Backbone.Collection.extend({
  // ...
  url: '/api/library/'
});

Demo

MVC

Backbone.View

V

Backbone.View

<body>
    <div id="library"></div>
</body>
                    
var LibraryView = Backbone.View.extend({
  el: '#library',
  render: function() {
    this.$el.html('<p>Knihovna u křupavého krabse</p>');
    return this;
  }
});

var view = new LibraryView();
view.render();

Demo

Model + View

V

Propojení modelu a view

var Book = Backbone.Model.extend();
var model = new Book({title: 'Honzíkova cesta', author: 'Bohumil Říha'});

var LibraryView = Backbone.View.extend({
  el: '#library',
  initialize: function(options) {
    this.model.on('change', function(){this.render()}, this);
  },
  render: function() {
    this.$el.html('<p>'+this.model.get('title')+' ('+this.model.get('author')+')</p>');
    return this;
  }
});
var view = new LibraryView({model: model});
view.render();

Demo

V

Nasazení šablon

var LibraryView = Backbone.View.extend({
  // ...
  template: _.template('<p><%= title %> (<%= author %>)</p>'),
  render: function() {
    this.$el.html(this.template(this.model.attributes));
    return this;
  }
});

V

View pro zobrazení kolekce

CollectionBookView = Backbone.View.extend({
    el: '#library',
    template: _.template('<% _.each(collection, function(m) { %> \
                          <li><strong><%= m.title %></strong> ( \
                          <%= m.author %>)</li><% }) %>'),

    initialize: function(options) {
        this.collection.on("add remove", function(){this.render()}, this);
    },
    render: function() {
        this.$el.html(this.template({collection: this.collection.attributes}));
        return this;
    },
});

Demo

MVC

Controller?

MVC

Controller?

MVC

Backbone.View + Backbone.Router

C

Backbone.Router

// nastaveni routovani
var Router = Backbone.Router.extend({
  routes: {
    "activate/:id":  "activate"
  },
  activate: function(id) {
    // do something...
  }
});
router = new Router();

// spusteni history API
Backbone.history.start();

Demo

Derick Bailey

It is a collection of common design and implementation patterns found in the applications that I have been building with Backbone, and includes various pieces inspired by composite application architectures, such as Microsoft's "Prism" framework.
— Derick Bailey
backbone je volny az moc; s marionettou alternativy chaplin, thorax, svoboda ale porad je, neni nutne pouzivat vse/nic

Views

Marionette.ItemView Marionette.CollectionView Marionette.CompositeView Marionette.Layout

V

Marionette.ItemView

var BookView = Backbone.Marionette.ItemView.extend({
  tagName: 'li',
  template: _.template('<strong><%= title %></strong> (<%= author %>)')
});

var view = new BookView({model: model});
view.render();

V

Marionette.CollectionView

<body>
  <ul id="library"></ul>
</body>
                    
var CollectionBookView = Backbone.Marionette.CollectionView.extend({
  el: '#library',
  itemView: BookView
});

var view = new CollectionBookView({collection: collection});
view.render();

Demo

V

Marionette.CompositeView

var CompositeBookView = Backbone.Marionette.CompositeView.extend({
  el: '#library',
  itemView: BookView,
  itemViewContainer: 'ul',
  template: _.template('<h3>V roce <%= today.getFullYear() %> děckám kupte:</h3> \
                        <ul></ul><p>Neprohloupíte, fakt!</p>')
});

var view = new CompositeBookView({
  collection: collection,
  model: new Backbone.Model({today: new Date()})
});
view.render();

Demo

V

Marionette.Layout

var Layout = Backbone.Marionette.Layout.extend({
  template: _.template('<div><p id="menu"></p><ul id="content"><p></p></ul></div>'),
  regions: {
    menu: "#menu",
    content: "#content"
  }
});

var layout = new Layout();
layout.render();

layout.menu.show(new MenuView());
layout.content.show(new ContentView());

Events

Marionette.Commands Marionette.RequestResponse Backbone.Wreqr.EventAggregator

E

Marionette.Commands

var App = new Marionette.Application();

App.commands.setHandler("prikaz", function(arg){
  console.log(arg);
});

App.execute("prikaz", "parametr");

E

Marionette.RequestResponse

var App = new Marionette.Application();

App.reqres.setHandler("request", function(arg){
  return arg + "-suffix";
});

App.request("request", "parametr");

E

Backbone.Wreqr.EventAggregator

var App = new Backbone.Marionette.Application();

App.vent.on("signal", function(){
  alert("Signal se stal...");
});

App.vent.trigger("signal");

A další...

Marionette.Controller Marionette.Module Marionette.Application Marionette.Region

Demo

Díky za pozornost