Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Construindo aplicações web com Backbone e Node.js
Search
Ricardo Tomasi
March 26, 2013
Programming
3
94
Construindo aplicações web com Backbone e Node.js
Palestra apresentada no RSJS 2013 (
http://rsjs.org
)
Ricardo Tomasi
March 26, 2013
Tweet
Share
More Decks by Ricardo Tomasi
See All by Ricardo Tomasi
Introdução a CoffeeScript
ricardobeat
1
180
Impressoras 3D
ricardobeat
0
130
Other Decks in Programming
See All in Programming
機械学習って何? 5分で解説頑張ってみる
kuroneko2828
0
180
CSC307 Lecture 17
javiergs
PRO
0
110
推論された型の移植性エラーTS2742に挑む
teamlab
PRO
0
170
〜可視化からアクセス制御まで〜 BigQuery×Looker Studioで コスト管理とデータソース認証制御する方法
cuebic9bic
3
310
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
170
Zennの運営完全に理解した #完全に理解したTalk
wadayusuke
1
170
「兵法」から見る質とスピード
ickx
0
240
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
mackey0225
2
430
単体テストの始め方/作り方
toms74209200
0
350
無関心の谷
kanayannet
0
120
Prism.parseで 300本以上あるエンドポイントに 接続できる権限の一覧表を作ってみた
hatsu38
1
100
Step up the performance game with Spring Boot and Project Leyden
mhalbritter
0
170
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Code Reviewing Like a Champion
maltzj
524
40k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.6k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Code Review Best Practice
trishagee
68
18k
Six Lessons from altMBA
skipperchong
28
3.8k
How to train your dragon (web standard)
notwaldorf
92
6.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Designing for Performance
lara
608
69k
Music & Morning Musume
bryan
47
6.6k
Transcript
@ricardobeat github.com/ricardobeat
NODE.JS BACKBONE + + event emitters + mvc + HTML5
+ LESS + COFFEESCRIPT + EXPRESS + CHAOS THEORY + IMPOSTO DE RENDA + CERVEJA ARTESANAL
EVENT EMITTERS (OBSERVER PATTERN)
None
EVENT BUS
EVENT BUS bus.on('hello', function(obj){ say('hello ' + obj.name) }) {
"hello": [Function] }
EVENT BUS { "hello": [Function] } bus.emit('hello', { name: 'robot'
}) hello robot
EVENT EMITTERS LOOSE COUPLING Fácil de testar escalável MODERNO E
BONITO
EVENT BUS
PUB-SUB
var robot = _.extend({}, Backbone.Events) robot.on('hello', ...) this.emit('hello', ...) hello
robot
BACKBONE
VIEW MODEL COLLECTION ROUTER
VIEW MODEL COLLECTION ROUTER EVENTOS REST JSON
None
INICIANDO UM APP COM BACKBONE
MODEL
var Conference = Backbone.Model.extend({ initialize: function(){ console.log('New conference!') }, defaults:
{ name: 'Default title', year: 2013 } }) MODEL
var Conference = _.extend({ initialize: function(){ console.log('New conference!') }, defaults:
{ name: 'Default title', year: 2013, city: 'São Paulo' } }, Backbone.Model) MODEL
// Criando uma nova conferência var RSJS = new Conference({
name: 'RSJS', year: 2013, city: 'Porto Alegre' }) // year === 2013 var year = RSJS.get('year') MODEL
// Alterando atributos RSJS.set({ name: "SurvivorConf" , year: 2022 })
RSJS.save() MODEL
var Conference = Backbone.Model.extend({ ... urlRoot: '/conferences' }) RSJS.save() ->
$.post('/conferences', { name: 'RSJS'... }) RSJS.id // => 1 MODEL
-> $.ajax({ url: '/conferences/1' , method: 'PUT' , data: {
year: 3000, ... } ... }) RSJS.set({ year: 3000 }) RSJS.save() MODEL
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' ...
VIEW
var ConferenceView = Backbone.View.extend({ tagName: 'div', className: 'conference', render: function
() { // código para renderizar o html } }) VIEW
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
var ConferenceView = Backbone.View.extend({ tagName: 'div', className: 'conference', template: _.template(conferenceTemplate),
render: function () { this.el.html(this.template(this.model.toJSON())) } }) VIEW
// Nova view usando o model RSJS var view =
new ConferenceView({ model: RSJS }) VIEW
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 })
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) } })
COLLECTION
COLLECTION var Calendar = Backbone.Collection.extend({ model: Conference, url: '/conferences' })
COLLECTION // instancia o Model automaticamente Calendar.add({ name: 'RSJS', year:
2012 }) Calendar.add(RSJS) Calendar.add(new Conference({ name: 'RSJS', year: 2013 }))
COLLECTION var events = new Calendar events.url = '/events' events.fetch()
ROUTER
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 } })
ROUTER Backbone.history.start({ pushState: true })
None
NODE + BACKBONE MESMA LINGUAGEM EVENT LOOP UNDERSCORE BACKBONE! JSON
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') })
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()
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()
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()
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()
BACKBONE.SYNC
IMPOSTO DE RENDA Já declarou?
None
Obrigado!