Your SlideShare is downloading. ×
0
Real-time, collaborative applications in Plone
Real-time, collaborative applications in Plone
Real-time, collaborative applications in Plone
Real-time, collaborative applications in Plone
Real-time, collaborative applications in Plone
Real-time, collaborative applications in Plone
Real-time, collaborative applications in Plone
Real-time, collaborative applications in Plone
Real-time, collaborative applications in Plone
Real-time, collaborative applications in Plone
Real-time, collaborative applications in Plone
Real-time, collaborative applications in Plone
Real-time, collaborative applications in Plone
Real-time, collaborative applications in Plone
Real-time, collaborative applications in Plone
Real-time, collaborative applications in Plone
Real-time, collaborative applications in Plone
Real-time, collaborative applications in Plone
Real-time, collaborative applications in Plone
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Real-time, collaborative applications in Plone

3,344

Published on

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.

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,344
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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.
  • Transcript

    • 1. Real-time, collaborativeapplicationsin PloneJ-C Brand
    • 2. What are real-time web applications?● Instant Messaging● Voice and Video conferencing● File transfer● Feeds/Notifications● Collaborative editing
    • 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. 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. XMPP Stanzas
    • 6. XMPP Stanzas
    • 7. XMPP Stanzas
    • 8. XMPP Stanzas
    • 9. Strophe.js● XMPP library for JavaScript● Connects via BOSH to XMPP server
    • 10. Strophe.js● XMPP library for JavaScript● Connects via BOSH to XMPP server● Can add stanza handlers
    • 11. Strophe.js● XMPP library for JavaScript● Connects via BOSH to XMPP server● Can add stanza handlers● Can build stanzas
    • 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. 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. Backbone.js Examples● Creating a model:● Instantiating a model:
    • 15. Backbone.js Examples● Creating a view
    • 16. Backbone.js Views
    • 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. Thanks for attending J-C Brand web: http://opkode.com email: jc@opkode.com twitter: @jcopkode IRC: jcbrand
    • 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/

    ×