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
7.9k
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
180
Idea to launch - the start of a startup
leah
1
59
Say “yes” to user feedback
leah
0
48
Intro to Dropbox APIs
leah
0
240
Working with web APIs in Swift
leah
0
68
Dropbox APIs for JavaScript developers
leah
3
1.2k
Cloud sync APIs for mobile developers
leah
1
120
Cloud sync APIs for mobile developers
leah
0
160
App Data, Everywhere: Cross-Device Content Sharing
leah
2
710
Other Decks in Programming
See All in Programming
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
370
Designing for tomorrow's programming workflows
honnibal
PRO
2
120
Snowflakeで眠ったデータを起こそう!
estie
0
110
Git Rebase
bkuhlmann
11
1.6k
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
230
Node.js v22 で変わること
yosuke_furukawa
PRO
4
1.3k
Ruby Function Composition
bkuhlmann
1
330
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
280
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
使ってみよう Azure AI Document Intelligence
kosmosebi
2
290
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
250
SIMD Parallel Programming with the Vector API
josepaumard
0
110
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
10
990
Side Projects
sachag
451
41k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
Statistics for Hackers
jakevdp
789
220k
The Invisible Side of Design
smashingmag
294
49k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Building a Scalable Design System with Sketch
lauravandoore
456
32k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
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/