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
92
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
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
3
4.2k
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.1k
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
260
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5k
動作確認やテストで漏れがちな観点3選
starfish719
6
990
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
330
技術を根付かせる / How to make technology take root
kubode
1
230
自動で //nolint を挿入する取り組み / Gopher's Gathering
utgwkk
1
230
CNCF Project の作者が考えている OSS の運営
utam0k
5
670
Rubyでつくるパケットキャプチャツール
ydah
1
730
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
130
Featured
See All Featured
Designing Experiences People Love
moore
139
23k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Code Reviewing Like a Champion
maltzj
521
39k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
230
Code Review Best Practice
trishagee
66
17k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Being A Developer After 40
akosma
89
590k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Site-Speed That Sticks
csswizardry
3
360
How to Ace a Technical Interview
jacobian
276
23k
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!