Real-time, collaborativeapplicationsin PloneJ-C Brand
What are real-time web        applications?●  Instant Messaging●  Voice and Video conferencing●  File transfer●  Feeds/Not...
Building blocks●    XMPP Server and connection manager    –   E.g ejabberd●    Nginx/Apache    –   Reverse proxy for conne...
How does XMPP work?●    eXtensible Messaging and Presence Protocol●    Universal Unique Identifier (JID)    –   jcbrand@ja...
XMPP Stanzas
XMPP Stanzas
XMPP Stanzas
XMPP Stanzas
Strophe.js●    XMPP library for JavaScript●    Connects via BOSH to XMPP server
Strophe.js●    XMPP library for JavaScript●    Connects via BOSH to XMPP server●    Can add stanza handlers
Strophe.js●    XMPP library for JavaScript●    Connects via BOSH to XMPP server●    Can add stanza handlers●    Can build ...
Strophe.js●    XMPP library for JavaScript●    Connects via BOSH to XMPP server●    Can add stanza handlers●    Can build ...
Backbone.js●    Enables structured javascript    –   Models        ●            Key/value binding        ●            Cust...
Backbone.js Examples●    Creating a model:●    Instantiating a model:
Backbone.js Examples●    Creating a view
Backbone.js Views
Real-time Plone●    Messaging    –   Multi/Single user chat    –   File sharing●    Collaboration    –   Documents, Whiteb...
Thanks for attending                          J-C Brand              web: http://opkode.com                email: jc@opkod...
Image credits:●    Legomen looking for guinnes    http://estiletesemcabo.tumblr.com/post/2190751969●    Stormtrooper on fa...
Upcoming SlideShare
Loading in …5
×

Real-time, collaborative applications in Plone

3,642 views
3,553 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,642
On SlideShare
0
From Embeds
0
Number of Embeds
595
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Outline of talk: - Define real-time web apps and relevancy to Plone - Look at collective.xmpp.chat and it's building blocks - Detailed look at XMPP - Strophe.js - Backbone.js - Vision for a real-time Plone Outcome for this talk: - Good overview of tech involved - Inspired by possibilities Theme of talk is collaboration People collaborate to create Plone, and Plone is then used to enable other people to collaborate on getting other tasks done. What makes me excited about real-time applications on Plone, is their potential for creating even more natural and fluid means for user-collaboration.
  • * Instant Messaging In the late 90s we have multiple closed proprietary messaging protocols. Common for users to run more than one chat application because no single vendor had 100% market share. Developers started writing multi-protocol clients to, Protocols often undocumented and the IM networks aggressively changed the protocols Jeremie Miller announced the Jabber project in January 1999. It's first production release was in 2000. * Voice and Video conferencing XMPP can be extended, and Jingle is such an extension that makes VoIP and video conf possible. The media sessions are P2P or mediated through relay server and XMPP is used to initiate and manage (route) these sessions. So session negotiation happens over the XMPP channel and media is exchanged over a separate data channel. * File transfer The data transfer that Jingle facilitates doesn't have to be multimedia, can be any file.
  • Outro I've started this talk, by mentioning collaboration, how Plone is the product of collaboration and how Plone enables other people, outside of our community of developers, resellers and integrators, to collaborate. I hope this talk made you more excited as to the possibilities for real-time applications in Plone and that you would like to collaborate with me on realising the potential these technologies hold for the future of Plone.
  • * eXtensible Messaging and Presence Protocol - Protocol for moving small, structured pieces of data between two places. * Data exchanged as XML in "stanzas" * XML data organised as pair of streams, one per direction of communication * Each stream has opening element, stanzas, closing element. * Each stanza is a 1st level element. * At the end of the closing element, two streams form pair of valid XML docs * Designed for small bits of info. Large blobs can be sent in an out-of-band transport layer with XMPP acting as signaling layer. * Extensible: * XML is very extensible * Extremely easy to add new features (both forward and backward compatible) * More than 200 registered extensions * Social media constructs and featues baked in. * Contract rosters create social graph * Presence notifications sent automatically when user logs in * Makes it a good choice as underlying tech, devs can focus on unique app
  • * Message Stanza Stanzas are the direct child elements of the root <stream/> element. *id* optional attr denoting the conversation *type* optional subtype (chat, groupchat) *xml:lang* for human readable content * Presence Stanza Optional "type" attribute to signal whether a user is available for comm. It can also request or respond to contact subscriptions. o probe -- Request for an entity's current presence; SHOULD be generated only by a server on behalf of a user. o error -- Error occurred regarding processing or delivery of a previously-sent presence The presence stanza can have the following child elements: * <show/>: "away", "chat", "dnd" and "xa". * <status/>: text meant for human consumption. * <priority/>: non-human-readable XML char data (priority level of the resource) * IQ Stanza Provides a structured request-response mechanism. For example: Roster management, querying the latest published elements of a node and data forms. Extended elements: Either declare new namespace by including "xmlns" attribute on element, or use namespace prefixes.
  • * Message Stanza Stanzas are the direct child elements of the root <stream/> element. *id* optional attr denoting the conversation *type* optional subtype (chat, groupchat) *xml:lang* for human readable content * Presence Stanza Optional "type" attribute to signal whether a user is available for comm. It can also request or respond to contact subscriptions. o probe -- Request for an entity's current presence; SHOULD be generated only by a server on behalf of a user. o error -- Error occurred regarding processing or delivery of a previously-sent presence The presence stanza can have the following child elements: * <show/>: "away", "chat", "dnd" and "xa". * <status/>: text meant for human consumption. * <priority/>: non-human-readable XML char data (priority level of the resource) * IQ Stanza Provides a structured request-response mechanism. For example: Roster management, querying the latest published elements of a node and data forms. Extended elements: Either declare new namespace by including "xmlns" attribute on element, or use namespace prefixes.
  • * Message Stanza Stanzas are the direct child elements of the root <stream/> element. *id* optional attr denoting the conversation *type* optional subtype (chat, groupchat) *xml:lang* for human readable content * Presence Stanza Optional "type" attribute to signal whether a user is available for comm. It can also request or respond to contact subscriptions. o probe -- Request for an entity's current presence; SHOULD be generated only by a server on behalf of a user. o error -- Error occurred regarding processing or delivery of a previously-sent presence The presence stanza can have the following child elements: * <show/>: "away", "chat", "dnd" and "xa". * <status/>: text meant for human consumption. * <priority/>: non-human-readable XML char data (priority level of the resource) * IQ Stanza Provides a structured request-response mechanism. For example: Roster management, querying the latest published elements of a node and data forms. Extended elements: Either declare new namespace by including "xmlns" attribute on element, or use namespace prefixes.
  • * Message Stanza Stanzas are the direct child elements of the root <stream/> element. *id* optional attr denoting the conversation *type* optional subtype (chat, groupchat) *xml:lang* for human readable content * Presence Stanza Optional "type" attribute to signal whether a user is available for comm. It can also request or respond to contact subscriptions. o probe -- Request for an entity's current presence; SHOULD be generated only by a server on behalf of a user. o error -- Error occurred regarding processing or delivery of a previously-sent presence The presence stanza can have the following child elements: * <show/>: "away", "chat", "dnd" and "xa". * <status/>: text meant for human consumption. * <priority/>: non-human-readable XML char data (priority level of the resource) * IQ Stanza Provides a structured request-response mechanism. For example: Roster management, querying the latest published elements of a node and data forms. Extended elements: Either declare new namespace by including "xmlns" attribute on element, or use namespace prefixes.
  • 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/

    ×