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
8k
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
200
Idea to launch - the start of a startup
leah
1
69
Say “yes” to user feedback
leah
0
55
Intro to Dropbox APIs
leah
0
290
Working with web APIs in Swift
leah
0
90
Dropbox APIs for JavaScript developers
leah
3
1.3k
Cloud sync APIs for mobile developers
leah
1
130
Cloud sync APIs for mobile developers
leah
0
190
App Data, Everywhere: Cross-Device Content Sharing
leah
2
730
Other Decks in Programming
See All in Programming
‘무차별 LGTM~👍’만 외치던 우리가 ‘고봉밥 코드 리뷰’를?
hannah0731
0
530
PHPでお金を扱う時、終わりのない 謎の1円調査の旅にでなくて済む方法
nakka
3
1.2k
新卒から4年間、20年もののWebサービスと 向き合って学んだソフトウェア考古学
oguri
8
6.7k
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
700
いまさら聞けない生成AI入門: 「生成AIを高速キャッチアップ」
soh9834
12
3.7k
自分のために作ったアプリが、グローバルに使われるまで / Indie App Development Lunch LT
pixyzehn
1
120
フロントエンドテストの育て方
quramy
9
2.5k
AI時代のプログラミング教育 / programming education in ai era
kishida
23
20k
OpenTelemetryを活用したObservability入門 / Introduction to Observability with OpenTelemetry
seike460
PRO
0
330
Develop Faster With FrankenPHP
dunglas
2
2.5k
PHPのガベージコレクションを深掘りしよう
rinchoku
0
240
SideKiqでジョブが二重起動した事象を深堀りしました
t_hatachi
0
230
Featured
See All Featured
A Philosophy of Restraint
colly
203
16k
How STYLIGHT went responsive
nonsquared
99
5.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Six Lessons from altMBA
skipperchong
27
3.7k
Become a Pro
speakerdeck
PRO
27
5.2k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Agile that works and the tools we love
rasmusluckow
328
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Site-Speed That Sticks
csswizardry
4
450
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
22
2.6k
The Cult of Friendly URLs
andyhume
78
6.3k
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/