Backbone Revolution - Speaker Deck

Slide 1

Slide 1 text

Backbone Revolution D r’ P f V w

Slide 2

Slide 2 text

Who Am I ★ Web Designer, Waveface Inc ★ @minipai on Twitter ★ http://minipai.tw

Slide 3

Slide 3 text

S r S r ...

Slide 4

Slide 4 text

My homepage need Redesign

Slide 5

Slide 5 text

Problem ★Blog is not updated for 7 month ★

Slide 6

Slide 6 text

Solution ★ Show clips, not blog on homepage

Slide 7

Slide 7 text

Built with? ★ Wordpress ★ Codeigniter ★ Ruby on Rails ✕ ✕ ✕

Slide 8

Slide 8 text

B ✕

Slide 9

Slide 9 text

use tumblr

Slide 10

Slide 10 text

and

Slide 11

Slide 11 text

Problem Solved ★ Showcase clips on homepage ★

Slide 12

Slide 12 text

Problem Solved ★ Display my tumblr updates ★

Slide 13

Slide 13 text

Update everything on social networks

Slide 14

Slide 14 text

★ Fast update powered by tumblr ★ Fast Coding powered by middleman ★ Fast loading powered by backbone Benefits

Slide 15

Slide 15 text

W ’ b b ?

Slide 16

Slide 16 text

★ Javascript MVC Framework ★ Model - View - Collection ★ Data Events ★ Routes & History

Slide 17

Slide 17 text

JavaScript MVC ★ Model - View - Whatever MVC / MVP / MVVM ... ★ Model - manage data for an application ★ View - observes model’s changes ★ View - user interacts with it ★ Frontend MVC ≠ Backend MVC http://emberjs.com/guides/ember_mvc/ http://addyosmani.com/blog/understanding-mvc-and-mvp-for-javascript-and-backbone-developers/

Slide 18

Slide 18 text

Model - View ! var Todo = Backbone.Model.extend({ ! ! // Default attributes for the todo. ! ! defaults: { ! ! ! title: "empty todo...", ! ! ! done: false ! ! }, ! ! toggle: function() { ! ! ! this.save({done: !this.get("done")}); ! ! } ! }); ! var TodoView = Backbone.View.extend({ ! ! events: { ! ! ! "click .toggle" : "toggleDone" ! ! }, ! ! toggleDone: function() { ! ! ! this.model.toggle(); ! ! } ! }); !

Slide 19

Slide 19 text

Data Events ! var TodoView = Backbone.View.extend({ ! ! template: _.template($('#item-template').html()), ! ! initialize: function() { ! ! ! this.model.on('change', this.render, this); ! ! }, ! ! // Re-render the titles of the todo item. ! ! render: function() { ! ! ! this.$el.html(this.template(this.model.toJSON())); ! ! ! this.$el.toggleClass('done', this.model.get('done')); ! ! ! return this; ! ! } ! }); !

Slide 20

Slide 20 text

Routes & History var TodoApp = Backbone.Router.extend({ routes: { ! // / '': 'home', ! // /hidden or #hidden 'hidden': 'hidden' }, initialize: function() { this.todos = new Todos; }, start: function() { Backbone.history.start(); }, home: function() { this.view = new TodoListView({collection: this.todos}); }, hidden: function() { this.view = new HiddenListView({collection: this.todos}); } })

Slide 21

Slide 21 text

W B b ? ( nettus+: 20 JavaScript Frameworks Worth Checking Out )

Slide 22

Slide 22 text

It’s popular ★ PeepCode https://peepcode.com/products/backbone-js ★ CodeSchool http://www.codeschool.com/courses/anatomy-of-backbonejs ★ nettus+ tutorial http://net.tutsplus.com/tag/backbone/ ★ O’REILLY book http://shop.oreilly.com/product/0636920025344.do ★ 3042 questions http://stackoverflow.com/questions/tagged/backbone.js

Slide 23

Slide 23 text

It’s simple ★ Backcone.Events ★ Backcone.Model ★ Backcone.Collection ★ Backcone.View ★ Backcone.Router ★ Backcone.History ★ Backcone.Sync Ember.Application Ember.Array Ember.ArrayController Ember.ArrayProxy Ember.Binding Ember.Checkbox Ember.CollectionView Ember.Comparable Ember.ComputedProperty Ember.ContainerView Ember.Copyable Ember.CoreObject Ember.Enumerable Ember.Error Ember.Freezable Ember.Handlebars Ember.Logger Ember.Mixin Ember.MutableArray Ember.MutableEnumerable Ember.NativeArray Ember.Object Ember.Observable Ember.platform Ember.RenderBuffer Ember.run Ember.Select Ember.Set Ember.StateManager Ember.String Ember.TextArea Ember.TextField Ember.TextSupport Ember.View

Slide 24

Slide 24 text

It’s flexible There's More Than One Way To Do It

Slide 25

Slide 25 text

B b w Q r popular, simple and ﬂexible

Slide 26

Slide 26 text

JavaScript build interaction build application jQuery Backbone build interface CSS

Slide 27

Slide 27 text

Dark Age Renaissance Revolution JavaScript jQuery Backbone

Slide 28

Slide 28 text

Backbone Revolution

Slide 29

Slide 29 text

W b

Slide 30

Slide 30 text

https://speakerdeck.com/u/hjortureh/p/javascript-mvc-backbonejs-tips-tricks L & R r S r + 2006 L & R r S r 2000 backend L + L + R r +... NOW frontend

Slide 31

Slide 31 text

Instead of using Rails to generate dynamic HTML that will communicate with the server through forms and links, many developers are treating their web application as just another client, consuming a simple JSON API. Rails::API readme https://github.com/spastorino/rails-api