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
210
Idea to launch - the start of a startup
leah
1
79
Say “yes” to user feedback
leah
0
57
Intro to Dropbox APIs
leah
0
310
Working with web APIs in Swift
leah
0
99
Dropbox APIs for JavaScript developers
leah
3
1.3k
Cloud sync APIs for mobile developers
leah
1
140
Cloud sync APIs for mobile developers
leah
0
200
App Data, Everywhere: Cross-Device Content Sharing
leah
2
740
Other Decks in Programming
See All in Programming
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
430
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
720
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
26
8k
構文解析器入門
ydah
7
1.8k
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
2
430
TypeScriptでDXを上げろ! Hono編
yusukebe
3
850
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
150
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.2k
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
1.2k
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
16
5.9k
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
660
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
220
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The World Runs on Bad Software
bkeepers
PRO
70
11k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Making Projects Easy
brettharned
116
6.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Faster Mobile Websites
deanohume
308
31k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
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/