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.
PLONE FSR
Anatomy of a Full Stack Reactive Application
Fulvio Casali - IRC/GitHub: fulv
Seattle, USA
Plone Conference 2015...
WEB DEVELOPMENT
• In the late 1990’s the job title “web
developer” did not yet exist
• Innovations like PHP, Zope (and man...
WHAT IS
FULL-STACK REACTIVITY?
• My definition:
A web application architecture allowing
every level of its application sta...
OUTLINE
• Demo
• Introduction to the application framework
• What this all means for Plone
• Q&A
DEMO
IT’S A APP
(with a Sunburst skin)
No Plone at all
CAVEATS
• Why Sunburst? (Plone 4)
• To avoid diluting the Plone 5 message
• You all know Sunburst
• It’s just a demo, not ...
PART II
What is Meteor?
WIKIPEDIA
• Meteor, or MeteorJS is an open-source JavaScript web application
framework written using Node.js. Meteor allow...
• More in common with Pyramid or Django
than Angular or React
• But actually, Single Page Apps
• And a very polished devel...
THE MARKETING
SOME NUMBERS
• 7,874 Packages (https://atmospherejs.com/)
• 15,864 StackOverflow questions
• 449K Unique Installs
• 28,877...
meteor js on Google Trends since 2012
meteor js vs angular js
Lest we forget…
while we’re at it
THE 7 PRINCIPLES
1. Data on the wire - Meteor doesn't send HTML over the
network. The server sends data and lets the clien...
THE 7 PRINCIPLES - CONT’D
4. Latency compensation - On the client, Meteor prefetches data and
simulates models to make it ...
1 - DATA ON THE WIRE
• Look at “Network” tab in browser
development tools:
• After initial load, only activity is on
webso...
2 - JS EVERYWHERE
• Isomorphic
• Your code runs both on clients and
server(s)
• “Special” folders to restrict where code r...
3 - DATABASE
EVERYWHERE
> ContentItems.findOne() // in the browser console
Object {_id: "DiwSnt37DQHh6RPaz", typename: "fo...
4 - LATENCY
COMPENSATION
• AKA Optimistic UI
• But at the protocol layer
5 - FULL STACK
REACTIVITY
• examples later
6 - EMBRACE THE
ECOSYSTEM
• Built on Node.js
• Compatible with Node.js
• But: reactivity and isomorphism means NPM
package...
7 - SIMPLICITY EQUALS
PRODUCTIVITY
• The most fun I’ve had playing with code
since my Apple ][+ days
• One command:
meteor...
: Meteor Is The App Platform For The New World Of Cloud-Client
: Meteor Is The App Platform For The New World Of Cloud-Client
BUILT WITH METEOR
• Lots of startups are using Meteor for their
apps
• http://weKan.io (used to be LibreBoard)
Trello clon...
REACTIVITY
• http://meteorpad.com
• The bottom div changes when a name is
clicked
• click event handler modifies reactive ...
TRACKER
• js Library that provides reactivity
• Tracks dependencies to automatically rerun
templates and computations when...
PUBLISH/SUBSCRIBE (1)
lib/collections/clipboards.js
Clipboards = new Mongo.Collection('clipboards');
Every publication res...
PUBLISH/SUBSCRIBE (2)
server/publications.js:
Meteor.publish(('clipboards'), function() {
var user = Meteor.users.findOne(...
PUBLISH/SUBSCRIBE (3)
client/subscriptions.js
Meteor.subscribe('clipboards');
The client subscribes to whatever the server...
PUBLISH/SUBSCRIBE (4)
client/templates/includes/actionsmenu.html
<dd class="actionMenuContent">
<ul>
<li>
<a href="{{pathF...
PUBLISH/SUBSCRIBE (5)
client/templates/includes/actionsmenu.js
Template.PloneContentmenuActions.events({
'click a#plone-co...
PUBLISH/SUBSCRIBE (6)
lib/collections/clipboards.js
Meteor.methods({
clip: function(items, del) {
// check arguments; chec...
PUBLISH/SUBSCRIBE (8)
client/templates/includes/actionsmenu.js
Template.PloneContentmenuActions.helpers({
pasteActive: fun...
PUBLISH/SUBSCRIBE (7)
client/templates/includes/actionsmenu.html
{{#if pasteActive}}
<li>
<a href="{{pathFor route='conten...
DDP
• Distributed Data Protocol = REST on
websockets, basically
• Python implementations exist
GRAB BAG
• Android, iOS clients automatically available with SDKs
• Hot Code Reload / Hot Deploys / Hot version updates
• ...
DATA BACKEND
• MongoDB is the default
• Very pluggable architecture, RethinkDB,
PostgreSQL, Neo4j, implementations in
prog...
http://davisagli.com/blog/the-making-of-zodb.ws
• @philikon at ploneconf 2011
• 3D movie rendering in the browser
• zope.ws is 2.8 MB
• Plone 5 sends more than that acros...
MY GOALS
• Integrate DDP in the Plone stack using a
Websockets endpoint (RabbitMQ or Celery)
• Use ZODB events (ZPublisher...
LAST WORD
• Jury still out: SPA / FSR / ??? / …
• A new web application development model is
knocking on our doors
• More ...
IMAGE CREDITS
• Discover Meteor - Tom Coleman, Sacha Greif
https://www.discovermeteor.com/
• meteor.com
• http://davisagli...
MULȚUMESC
• The demo app: http://plone.meteor.com
• Github repo:
https://github.com/fulv/meteor.plone4toy
• Download this ...
Plone FSR
Plone FSR
Plone FSR
Plone FSR
Upcoming SlideShare
Loading in …5
×

Plone FSR

423 views

Published on

Anatomy of a Full Stack Reactive Application

Published in: Software
  • Login to see the comments

  • Be the first to like this

Plone FSR

  1. 1. PLONE FSR Anatomy of a Full Stack Reactive Application Fulvio Casali - IRC/GitHub: fulv Seattle, USA Plone Conference 2015 - Bucharest, Romania
  2. 2. WEB DEVELOPMENT • In the late 1990’s the job title “web developer” did not yet exist • Innovations like PHP, Zope (and many others) set a very large snowball in motion • We stand at the cusp of a transformation in how web development is done
  3. 3. WHAT IS FULL-STACK REACTIVITY? • My definition: A web application architecture allowing every level of its application stack to respond in real-time to changes in any other of its components.
  4. 4. OUTLINE • Demo • Introduction to the application framework • What this all means for Plone • Q&A
  5. 5. DEMO
  6. 6. IT’S A APP (with a Sunburst skin) No Plone at all
  7. 7. CAVEATS • Why Sunburst? (Plone 4) • To avoid diluting the Plone 5 message • You all know Sunburst • It’s just a demo, not a UX proposal
  8. 8. PART II What is Meteor?
  9. 9. WIKIPEDIA • Meteor, or MeteorJS is an open-source JavaScript web application framework written using Node.js. Meteor allows for rapid prototyping and produces cross-platform (web, Android, iOS) code. It integrates with MongoDB and uses the Distributed Data Protocol and a publish– subscribe pattern to automatically propagate data changes to clients without requiring the developer to write any synchronization code. On the client, Meteor depends on jQuery and can be used with any JavaScript UI widget library. • Meteor is developed by the Meteor Development Group. The startup was incubated by Y Combinator[3] and received $11.2MM in funding from Andreessen Horowitz in July 2012.[4]
  10. 10. • More in common with Pyramid or Django than Angular or React • But actually, Single Page Apps • And a very polished development environment
  11. 11. THE MARKETING
  12. 12. SOME NUMBERS • 7,874 Packages (https://atmospherejs.com/) • 15,864 StackOverflow questions • 449K Unique Installs • 28,877 GitHub Stars • Hundreds of meetups
  13. 13. meteor js on Google Trends since 2012
  14. 14. meteor js vs angular js
  15. 15. Lest we forget…
  16. 16. while we’re at it
  17. 17. THE 7 PRINCIPLES 1. Data on the wire - Meteor doesn't send HTML over the network. The server sends data and lets the client render it. 2. One language - "JavaScript everywhere" (isomorphic JavaScript) makes it easier to acquire talent and learn Meteor 3. Database everywhere - The same API can be used on both the server and the client to query the database. In the browser, an in-memory MongoDB implementation called Minimongo allows querying a cache of documents that have been sent to the client.
  18. 18. THE 7 PRINCIPLES - CONT’D 4. Latency compensation - On the client, Meteor prefetches data and simulates models to make it look like server method calls return instantly. 5. Full stack reactivity - In Meteor, realtime is the default. All layers, from database to template, update themselves automatically when necessary. 6. Embrace the ecosystem - Atmosphere, Meteor's package repository, holds over 7,800 packages. Meteor can also use any of the more than 115,000 packaged modules in the Node.js ecosystem. 7. Simplicity equals productivity - Meteor was designed to be easy to learn, including by beginners. The best way to make something seem simple is to have it actually be simple. Meteor's main functionality has clean, classically beautiful APIs.
  19. 19. 1 - DATA ON THE WIRE • Look at “Network” tab in browser development tools: • After initial load, only activity is on websockets connection
  20. 20. 2 - JS EVERYWHERE • Isomorphic • Your code runs both on clients and server(s) • “Special” folders to restrict where code runs • Default load order determined by rules for names and paths
  21. 21. 3 - DATABASE EVERYWHERE > ContentItems.findOne() // in the browser console Object {_id: "DiwSnt37DQHh6RPaz", typename: "folder", title: "News", name: "news", description: " Site News", size: "1 KB", modified: "Sat Sep 26 2015 04:36:06 GMT+0300 (EEST)”, objPositionInParent: 1, defaultview: false, author: “admin”, workflow_state: "Published"} > db.contentitems.findOne() // in the mongo shell {"_id" : "DiwSnt37DQHh6RPaz”, "title" : "News”, "name" : "news”, "description" : "Site News”, "typen ame" : "folder”, "size" : "1 KB”, "modified" : ISODate("2015-06- 28T15:49:17.545Z”), "objPositionInParent" : 1, "defaultview" : false, "author" : "admin", "workflow_state" : "Published"}
  22. 22. 4 - LATENCY COMPENSATION • AKA Optimistic UI • But at the protocol layer
  23. 23. 5 - FULL STACK REACTIVITY • examples later
  24. 24. 6 - EMBRACE THE ECOSYSTEM • Built on Node.js • Compatible with Node.js • But: reactivity and isomorphism means NPM packages do not work out of the box in Meteor. They can, however, be used by Meteor packages.
  25. 25. 7 - SIMPLICITY EQUALS PRODUCTIVITY • The most fun I’ve had playing with code since my Apple ][+ days • One command: meteor • Forget about bower, grunt, gulp, require, jekyll, …
  26. 26. : Meteor Is The App Platform For The New World Of Cloud-Client
  27. 27. : Meteor Is The App Platform For The New World Of Cloud-Client
  28. 28. BUILT WITH METEOR • Lots of startups are using Meteor for their apps • http://weKan.io (used to be LibreBoard) Trello clone, took only 2 months for first implementation
  29. 29. REACTIVITY • http://meteorpad.com • The bottom div changes when a name is clicked • click event handler modifies reactive object Session • value returned by selectedName helper changes in real-time when Session changes
  30. 30. TRACKER • js Library that provides reactivity • Tracks dependencies to automatically rerun templates and computations when reactive data sources change • You don’t declare dependencies manually • Many objects in the Meteor API are reactive • You can easily define your own reactive data sources
  31. 31. PUBLISH/SUBSCRIBE (1) lib/collections/clipboards.js Clipboards = new Mongo.Collection('clipboards'); Every publication rests on the shoulders of a collection
  32. 32. PUBLISH/SUBSCRIBE (2) server/publications.js: Meteor.publish(('clipboards'), function() { var user = Meteor.users.findOne(this.userId); if (user) { return Clipboards.find({username: user.username}); } else { return []; } }); Publications are published by the server
  33. 33. PUBLISH/SUBSCRIBE (3) client/subscriptions.js Meteor.subscribe('clipboards'); The client subscribes to whatever the server puts out
  34. 34. PUBLISH/SUBSCRIBE (4) client/templates/includes/actionsmenu.html <dd class="actionMenuContent"> <ul> <li> <a href="{{pathFor route='contentItem' data=getData}}/object_cut" class="actionicon-object_buttons-cut" id="plone-contentmenu-actions-cut" title=""> <span class="subMenuTitle">Cut</span> </a> . . . . . </li> Now let’s see how a client interaction affects the subscription
  35. 35. PUBLISH/SUBSCRIBE (5) client/templates/includes/actionsmenu.js Template.PloneContentmenuActions.events({ 'click a#plone-contentmenu-actions-cut': function(event, template) { event.preventDefault(); Session.set('PloneContentmenuActions.active', 'deactivated'); var item = itemData(Router.current()); Meteor.call('clip', [item.doc], true, function(error, result) { if (error) { throwError(error.reason); return; } Meteor.call('itemDelete', [item.doc], function(error, result) { . . . }});});}, . . . .
  36. 36. PUBLISH/SUBSCRIBE (6) lib/collections/clipboards.js Meteor.methods({ clip: function(items, del) { // check arguments; check permissions; does this user already have a clipboard?; does this user own the item(s)? var itemId = Clipboards.insert( {username: username, items: items}); return itemId; }, And in response, the server modifies the underlying collection
  37. 37. PUBLISH/SUBSCRIBE (8) client/templates/includes/actionsmenu.js Template.PloneContentmenuActions.helpers({ pasteActive: function() { if (Meteor.userId()) { var username = Meteor.user().username; if (Clipboards.findOne({username: username})) { return true; } } return false; }}) }); e client subscription listens to any changes in the underlying collect
  38. 38. PUBLISH/SUBSCRIBE (7) client/templates/includes/actionsmenu.html {{#if pasteActive}} <li> <a href="{{pathFor route='contentItem' data=getData}}/object_paste" class="actionicon-object_buttons-paste" id="plone-contentmenu-actions-paste" title=""> <span class="subMenuTitle">Paste</span> </a> </li> {{/if}} The template reacts to changes in the underlying data
  39. 39. DDP • Distributed Data Protocol = REST on websockets, basically • Python implementations exist
  40. 40. GRAB BAG • Android, iOS clients automatically available with SDKs • Hot Code Reload / Hot Deploys / Hot version updates • Simplicity: development environment • create, update, deploy, add, remove, add-platform, install-sdk, configure-android, mongo, reset, build, and many more • Galaxy: dedicated commercial hosting platform • atmospherejs.com: Meteor’s pypi • http://www.meteorpedia.com/
  41. 41. DATA BACKEND • MongoDB is the default • Very pluggable architecture, RethinkDB, PostgreSQL, Neo4j, implementations in progress • ZODB is Python-centric — strength/weakness • Non-reactive queries to any database already possible, but…
  42. 42. http://davisagli.com/blog/the-making-of-zodb.ws
  43. 43. • @philikon at ploneconf 2011 • 3D movie rendering in the browser • zope.ws is 2.8 MB • Plone 5 sends more than that across the wire • ZODB everywhere - still a pipe dream?
  44. 44. MY GOALS • Integrate DDP in the Plone stack using a Websockets endpoint (RabbitMQ or Celery) • Use ZODB events (ZPublisher.pubevents) and implement beforeCompletion and afterCompletion methods to register a Synchronizer with ZODB’s transaction manager
  45. 45. LAST WORD • Jury still out: SPA / FSR / ??? / … • A new web application development model is knocking on our doors • More fun, more productive, more enticing, more cost-effective • I believe in YOU to transform Plone
  46. 46. IMAGE CREDITS • Discover Meteor - Tom Coleman, Sacha Greif https://www.discovermeteor.com/ • meteor.com • http://davisagli.com/blog/the-making-of-zodb.ws • http://www.forbes.com/sites/anthonykosner/2015/06/30/me teor-is-the-app-platform-for-the-new-world-of-cloud-client- computing/ • Google Trends
  47. 47. MULȚUMESC • The demo app: http://plone.meteor.com • Github repo: https://github.com/fulv/meteor.plone4toy • Download this deck: http://fulv.github.io/meteor.plone4toy/ • Contact me: fulviocasali@gmail.com, IRC: fulv

×