Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Real-time, collaborative applications in Plone

4,514 views

Published on

My talk at the 2012 Plone conference on adding real-time collaborative web applications with XMPP and javascript.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Real-time, collaborative applications in Plone

  1. 1. Real-time, collaborativeapplicationsin PloneJ-C Brand
  2. 2. What are real-time web applications?● Instant Messaging● Voice and Video conferencing● File transfer● Feeds/Notifications● Collaborative editing
  3. 3. Building blocks● XMPP Server and connection manager – E.g ejabberd● Nginx/Apache – Reverse proxy for connection manager● Plone add-ons – collective.xmpp.core – collective.xmpp.collaboration – collective.xmpp.chat – collective.xmpp.pubsub – <your product here>
  4. 4. How does XMPP work?● eXtensible Messaging and Presence Protocol● Universal Unique Identifier (JID) – jcbrand@jabber.plone.org/sprint● Data exchanged as XML “stanzas” – Presence – Message – Info/Query (IQ)● Roster and social graph
  5. 5. XMPP Stanzas
  6. 6. XMPP Stanzas
  7. 7. XMPP Stanzas
  8. 8. XMPP Stanzas
  9. 9. Strophe.js● XMPP library for JavaScript● Connects via BOSH to XMPP server
  10. 10. Strophe.js● XMPP library for JavaScript● Connects via BOSH to XMPP server● Can add stanza handlers
  11. 11. Strophe.js● XMPP library for JavaScript● Connects via BOSH to XMPP server● Can add stanza handlers● Can build stanzas
  12. 12. Strophe.js● XMPP library for JavaScript● Connects via BOSH to XMPP server● Can add stanza handlers● Can build stanzas● Plugins – MUC, Roster, Pubsub, Data Forms etc.
  13. 13. Backbone.js● Enables structured javascript – Models ● Key/value binding ● Custom events – Collections – Views ● Declarative event handling ● Templates – RESTful JSON interface for connecting with API
  14. 14. Backbone.js Examples● Creating a model:● Instantiating a model:
  15. 15. Backbone.js Examples● Creating a view
  16. 16. Backbone.js Views
  17. 17. Real-time Plone● Messaging – Multi/Single user chat – File sharing● Collaboration – Documents, Whiteboard, UML, Mindmaps – Translations – Pair programming (Plone IDE, Theme Editor)● Continuous feedback – System status messages – User feeds● Audio/Video Conferencing
  18. 18. Thanks for attending J-C Brand web: http://opkode.com email: jc@opkode.com twitter: @jcopkode IRC: jcbrand
  19. 19. Image credits:● Legomen looking for guinnes http://estiletesemcabo.tumblr.com/post/2190751969● Stormtrooper on facebook http://www.flickr.com/photos/balakov/● Legoman with innards http://www.facebook.com/pages/Jason-Freeny/34170123768● Lego wizard http://en.bricker.ru/sets/5614/

×