Backbone.js + Django

Transcript

1. Backbone.js + Django
   Leah Culver
   PyCodeConf 2011
   

   View Slide

2. Convore
   topic-based chat on the web
   

   View Slide

3. View Slide

4. Leafy Chat
   web-based IRC client
   

   View Slide

5. View Slide

6. Grove
   IRC for your company
   

   View Slide

7. View Slide

8. chat UI
   

   View Slide

9. Leafy Chat - pure JavaScript
   

   View Slide

10. $('#message-form-sender').submit(Leafy.sendMessage)
    

    View Slide

11. sendMessage: function(e) {
    var msg = $('#message').val()
    var row = '' + currentUser + ': ' + msg
    row = row + '' + ts + ''
    $(Leafy.channelID(channel)).append(row)
    Kahlan.say(Leafy.currentChannel, msg)
    },
    

    View Slide

12. 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")
    },
    

    View Slide

13. 1. handle form submit
    2. create new message
    3. display message in list
    4. POST message via AJAX
    

    View Slide

14. Grove
    grove.io/app
    

    View Slide

15. View Slide

16. backbone.js
    

    View Slide

17. MVC
    

    View Slide

18. MVC
    MTV
    

    View Slide

19. Model
    

    View Slide

20. window.Message = Backbone.Model.extend ({
    });
    

    View Slide

21. Collection
    

    View Slide

22. window.MessageCollection = Backbone.Collection.extend ({
    model: Message,
    });
    

    View Slide

23. Views
    

    View Slide

24. View Slide

25. View Slide

26. View Slide

27. 1. handle form submit
    

    View Slide

28. window.MessageFormView = Backbone.View.extend ({
    events: {
    'submit form': 'submitForm',
    },
    });
    

    View Slide

29. 2. create new message
    

    View Slide

30. submitForm: function() {
    var msg = $('#message).val();
    var message = new Message ({
    'message': msg,
    });
    

    View Slide

31. 3. display message in list
    

    View Slide

32. currentChannel.messages.add(message);
    

    View Slide

33. 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);
    },
    

    View Slide

34. 4. POST message via AJAX
    

    View Slide

35. 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);
    }
    });
    

    View Slide

36. Templates
    

    View Slide

37. <br/><span>{{user.username}}</span>: {{message}}<br/><span class="ts">{{timestamp date_created}}</span><br/>
    

    View Slide

38. Handlebars.js
    

    View Slide

39. template: Handlebars.compile($('#msg-template').html())
    

    View Slide

40. {% include_raw "message.html" %}
    djangosnippets.org/snippets/1684
    

    View Slide

41. additional goodies
    

    View Slide

42. Sync
    

    View Slide

43. url: function() {
    return this.channel.url() + '/messages/';
    },
    

    View Slide

44. url(r'^app/channels/(?P\d+)/messages/$',
    'channel_messages'),
    

    View Slide

45. 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())
    

    View Slide

46. https://gist.github.com/1265346
    

    View Slide

47. Events
    

    View Slide

48. App.trigger('messageAdded', channel);
    

    View Slide

49. initialize: function() {
    App.bind('messageAdded', this.messageAdded);
    },
    messageAdded: function(channel) {
    // Do something...
    }
    

    View Slide

50. Router
    

    View Slide

51. var MainRouter = Backbone.Router.extend({
    routes: {
    'app/join': 'join',
    'app/:name': 'channel'
    },
    join: function() {
    var joinPageView = new JoinPageView();
    return joinPageView.loadPage();
    },
    });
    

    View Slide

52. Questions?
    

    View Slide

53. 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/
    

    View Slide