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
Backbone.js + Django
Search
Leah Culver
October 06, 2011
Programming
25
8.1k
Backbone.js + Django
Leah Culver
October 06, 2011
Tweet
Share
More Decks by Leah Culver
See All by Leah Culver
Writing stable iOS applications
leah
2
220
Idea to launch - the start of a startup
leah
1
83
Say “yes” to user feedback
leah
0
59
Intro to Dropbox APIs
leah
0
310
Working with web APIs in Swift
leah
0
100
Dropbox APIs for JavaScript developers
leah
3
1.3k
Cloud sync APIs for mobile developers
leah
1
150
Cloud sync APIs for mobile developers
leah
0
210
App Data, Everywhere: Cross-Device Content Sharing
leah
2
740
Other Decks in Programming
See All in Programming
私の後悔をAWS DMSで解決した話
hiramax
4
190
CSC305 Summer Lecture 12
javiergs
PRO
0
130
Claude Codeで挑むOSSコントリビュート
eycjur
0
200
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.3k
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
4
1.9k
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
140
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.5k
Improving my own Ruby thereafter
sisshiki1969
1
160
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
490
TanStack DB ~状態管理の新しい考え方~
bmthd
2
480
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
440
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.2k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
YesSQL, Process and Tooling at Scale
rocio
173
14k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
A designer walks into a library…
pauljervisheath
207
24k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Navigating Team Friction
lara
189
15k
Statistics for Hackers
jakevdp
799
220k
Transcript
Backbone.js + Django Leah Culver PyCodeConf 2011
Convore topic-based chat on the web
None
Leafy Chat web-based IRC client
None
Grove IRC for your company
None
chat UI
Leafy Chat - pure JavaScript
$('#message-form-sender').submit(Leafy.sendMessage)
sendMessage: function(e) { var msg = $('#message').val() var row =
'<span>' + currentUser + ':</span> ' + msg row = row + '<span class="ts">' + ts + '</span>' $(Leafy.channelID(channel)).append(row) Kahlan.say(Leafy.currentChannel, msg) },
this.socket = new Orbited.TCPSocket say: function(channel, msg) { var data
= {to: channel, type: 'privmsg', body: msg} this.socket.send(JSON.stringify(data) + "\r\n") },
1. handle form submit 2. create new message 3. display
message in list 4. POST message via AJAX
Grove grove.io/app
None
backbone.js
MVC
MVC MTV
Model
window.Message = Backbone.Model.extend ({ });
Collection
window.MessageCollection = Backbone.Collection.extend ({ model: Message, });
Views
None
None
None
1. handle form submit
window.MessageFormView = Backbone.View.extend ({ events: { 'submit form': 'submitForm', },
});
2. create new message
submitForm: function() { var msg = $('#message).val(); var message =
new Message ({ 'message': msg, });
3. display message in list
currentChannel.messages.add(message);
window.MessageListView = Backbone.View.extend({ model: MessageCollection, initialize: function() { this.model.bind('add', this.addMessage);
this.model.bind('change', this.render); this.model.bind('remove', this.removeMessage); },
4. POST message via AJAX
currentChannel.messages.create({'message': msg}, { success: function(model, response) { message.set(model.attributes, { silent:
true }); }, error: function(model, error) { currentChannel.messages.remove(message); $('#message').val(msg); } });
Templates
<script id="msg-template" type="text/x-handlebars-template"> <span>{{user.username}}</span>: {{message}} <span class="ts">{{timestamp date_created}}</span> </script>
Handlebars.js
template: Handlebars.compile($('#msg-template').html())
{% include_raw "message.html" %} djangosnippets.org/snippets/1684
additional goodies
Sync
url: function() { return this.channel.url() + '/messages/'; },
url(r'^app/channels/(?P<channel_id>\d+)/messages/$', 'channel_messages'),
if request.method == 'POST': json_data = simplejson.loads(request.raw_post_data) message = Message.objects.create(
message=json_data.get('message'), ... ) return JSONResponse(request, message.data())
https://gist.github.com/1265346
Events
App.trigger('messageAdded', channel);
initialize: function() { App.bind('messageAdded', this.messageAdded); }, messageAdded: function(channel) { //
Do something... }
Router
var MainRouter = Backbone.Router.extend({ routes: { 'app/join': 'join', 'app/:name': 'channel'
}, join: function() { var joinPageView = new JoinPageView(); return joinPageView.loadPage(); }, });
Questions?
Photos http://www.flickr.com/photos/coldtaxi/426162862/ http://www.flickr.com/photos/aliaholle/5888906660/ http://www.flickr.com/photos/joshmaz/5248178452/ http://www.flickr.com/photos/1stpix_diecast_dioramas/5934583890/ http://www.flickr.com/photos/hamed/429069420/ http://www.flickr.com/photos/ittybittiesforyou/4942706804/ http://www.flickr.com/photos/krhamm/171302278/ http://www.flickr.com/photos/vinothchandar/5148046888/ http://www.flickr.com/photos/jliba/4437937329/
http://www.flickr.com/photos/seier/2034873075/ http://www.flickr.com/photos/31246066@N04/5115966185/sizes http://thefilmstage.com/news/zoolander-2-in-limbo-at-paramount/ http://www.flickr.com/photos/byebyeempire/323372590/ http://www.flickr.com/photos/shakethesky/4104894504/ http://www.flickr.com/photos/litlnemo/3296421032/ http://www.flickr.com/photos/qusic/3370510628/