• Save
Real-time, collaborative applications in Plone
Upcoming SlideShare
Loading in...5
×
 

Real-time, collaborative applications in Plone

on

  • 3,224 views

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

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

Statistics

Views

Total Views
3,224
Views on SlideShare
2,708
Embed Views
516

Actions

Likes
0
Downloads
0
Comments
0

9 Embeds 516

http://opkode.com 205
http://blog.redturtle.it 151
http://devbox 84
http://opkode.net 44
https://opkode.com 22
http://edit.opkode.com 5
https://translate.googleusercontent.com 2
http://webcache.googleusercontent.com 2
http://translate.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 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: * : "away", "chat", "dnd" and "xa". * : text meant for human consumption. * : 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 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: * : "away", "chat", "dnd" and "xa". * : text meant for human consumption. * : 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 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: * : "away", "chat", "dnd" and "xa". * : text meant for human consumption. * : 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 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: * : "away", "chat", "dnd" and "xa". * : text meant for human consumption. * : 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 Real-time, collaborative applications in Plone Presentation Transcript

  • Real-time, collaborativeapplicationsin PloneJ-C Brand
  • What are real-time web applications?● Instant Messaging● Voice and Video conferencing● File transfer● Feeds/Notifications● Collaborative editing
  • 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>
  • 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
  • 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 stanzas
  • 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.
  • Backbone.js● Enables structured javascript – Models ● Key/value binding ● Custom events – Collections – Views ● Declarative event handling ● Templates – RESTful JSON interface for connecting with API
  • 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, Whiteboard, UML, Mindmaps – Translations – Pair programming (Plone IDE, Theme Editor)● Continuous feedback – System status messages – User feeds● Audio/Video Conferencing
  • Thanks for attending J-C Brand web: http://opkode.com email: jc@opkode.com twitter: @jcopkode IRC: jcbrand
  • 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/