Construindo aplicações web com Backbone e Node.js

Palestra apresentada no RSJS 2013 (http://rsjs.org)

Transcript

1. @ricardobeat github.com/ricardobeat
2. NODE.JS BACKBONE + + event emitters + mvc + HTML5 + LESS + COFFEESCRIPT + EXPRESS + CHAOS THEORY + IMPOSTO DE RENDA + CERVEJA ARTESANAL
3. EVENT EMITTERS (OBSERVER PATTERN)
5. EVENT BUS
6. EVENT BUS bus.on('hello', function(obj){ say('hello ' + obj.name) }) { "hello": [Function] }
7. EVENT BUS { "hello": [Function] } bus.emit('hello', { name: 'robot' }) hello robot
8. EVENT EMITTERS LOOSE COUPLING Fácil de testar escalável MODERNO E BONITO
9. EVENT BUS
10. PUB-SUB
11. var robot = _.extend({}, Backbone.Events) robot.on('hello', ...) this.emit('hello', ...) hello robot
12. BACKBONE
13. VIEW MODEL COLLECTION ROUTER
14. VIEW MODEL COLLECTION ROUTER EVENTOS REST JSON
16. INICIANDO UM APP COM BACKBONE
17. MODEL
18. var Conference = Backbone.Model.extend({ initialize: function(){ console.log('New conference!') }, defaults: { name: 'Default title', year: 2013 } }) MODEL
19. var Conference = _.extend({ initialize: function(){ console.log('New conference!') }, defaults: { name: 'Default title', year: 2013, city: 'São Paulo' } }, Backbone.Model) MODEL
20. // Criando uma nova conferência var RSJS = new Conference({ name: 'RSJS', year: 2013, city: 'Porto Alegre' }) // year === 2013 var year = RSJS.get('year') MODEL
21. // Alterando atributos RSJS.set({ name: "SurvivorConf" , year: 2022 }) RSJS.save() MODEL
22. var Conference = Backbone.Model.extend({ ... urlRoot: '/conferences' }) RSJS.save() -> $.post('/conferences', { name: 'RSJS'... }) RSJS.id // => 1 MODEL
23. -> $.ajax({ url: '/conferences/1' , method: 'PUT' , data: { year: 3000, ... } ... }) RSJS.set({ year: 3000 }) RSJS.save() MODEL
24. MODEL // carregar dados do server RSJS.fetch() // sends an HTTP delete to / conferences/1 RSJS.destroy() // retorna todos os atributos RSJS.toJSON() eventos: 'change', 'change:attr', 'sync', 'error', 'destroy' ...
25. VIEW
26. var ConferenceView = Backbone.View.extend({ tagName: 'div', className: 'conference', render: function () { // código para renderizar o html } }) VIEW
27. var ConferenceView = Backbone.View.extend({ tagName: 'div', className: 'conference', render: function () { var name = this.model.get('name'), description = this.model.get('description') this.el.append( $('<h2>').addClass('title').text(name), $('<p>').text(description) ) } }) VIEW
28. var ConferenceView = Backbone.View.extend({ tagName: 'div', className: 'conference', template: _.template(conferenceTemplate), render: function () { this.el.html(this.template(this.model.toJSON())) } }) VIEW
29. // Nova view usando o model RSJS var view = new ConferenceView({ model: RSJS }) VIEW
30. VIEW var ConferenceView = Backbone.View.extend({ ... initialize: function (options){ this.model = new Conference({ id: options.id }) this.model.fetch() this.model.on('sync', this.render) } render: function () { // render template } }) var view = new ConferenceView({ id: 123 })
31. VIEW var ConferenceView = Backbone.View.extend({ initialize: function (options) { this.model.on('change', this.render) }, events: { 'click .subscribe': 'subscribe' }, subscribe: function(){ this.model.set('subscribed', true) } })
32. COLLECTION
33. COLLECTION var Calendar = Backbone.Collection.extend({ model: Conference, url: '/conferences' })
34. COLLECTION // instancia o Model automaticamente Calendar.add({ name: 'RSJS', year: 2012 }) Calendar.add(RSJS) Calendar.add(new Conference({ name: 'RSJS', year: 2013 }))
35. COLLECTION var events = new Calendar events.url = '/events' events.fetch()
36. ROUTER
37. ROUTER var CalendarRouter = Backbone.Router.extend({ routes: { "event/:id": "event", // #event/123 "*path": "eventList" // catch-all }, event: function() { // render event view }, eventList: function(query, page) { // render event list } })
38. ROUTER Backbone.history.start({ pushState: true })
40. NODE + BACKBONE MESMA LINGUAGEM EVENT LOOP UNDERSCORE BACKBONE! JSON
41. NODE + BACKBONE var express = require('express') , app = express() , db = new ImaginaryDB('127.0.0.1', 'root', '123456') app.configure -> ... app.use express.bodyParser() app.use app.router app.get('/', function (req, res) { res.render('index') })
42. NODE + BACKBONE app.get('/events', function(req, res) { db.getAll(function(err, events){ res.json(events) }) }) var events = new CalendarCollection() events.url = '/events' events.fetch()
43. NODE + BACKBONE app.get('/event/:id', function(req, res) { db.getById(req.params.id, function(err, event){ res.json(event) }) }) var RSJS = new Conference({ id: 123 }) RSJS.fetch()
44. NODE + BACKBONE app.post('/event', function(req, res){ var event = new db.Event(req.body) db.put(event, function(err, res){ res.json(res) }) }) var RSJS = new Conference({ name: 'RSJS', year: 2013 }) RSJS.save()
45. NODE + BACKBONE app.put('/event/:id', function(req, res) { db.update(req.params.id, req.body, function(err, eve res.json(event) }) }) RSJS.set('year', 3000) RSJS.save()
46. BACKBONE.SYNC
47. IMPOSTO DE RENDA Já declarou?
49. Obrigado!