Anatomy of a Full Stack Reactive Application

1. PLONE FSR
Anatomy of a Full Stack Reactive Application
Fulvio Casali - IRC/GitHub: fulv
Seattle, USA
Plone Conference 2015 - Bucharest, Romania

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. 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. OUTLINE
• Demo
• Introduction to the application framework
• What this all means for Plone
• Q&A

5. DEMO

6. IT’S A APP
(with a Sunburst skin)
No Plone at all

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. PART II
What is Meteor?

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. • More in common with Pyramid or Django
than Angular or React
• But actually, Single Page Apps
• And a very polished development
environment

11. THE MARKETING

12. SOME NUMBERS
• 7,874 Packages (https://atmospherejs.com/)
• 15,864 StackOverflow questions
• 449K Unique Installs
• 28,877 GitHub Stars
• Hundreds of meetups

13. meteor js on Google Trends since 2012

14. meteor js vs angular js

15. Lest we forget…

16. while we’re at it

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. 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. 1 - DATA ON THE WIRE
• Look at “Network” tab in browser
development tools:
• After initial load, only activity is on
websockets connection

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. 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"}

23. 4 - LATENCY
COMPENSATION
• AKA Optimistic UI
• But at the protocol layer

24. 5 - FULL STACK
REACTIVITY
• examples later

25. 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.

26. 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, …

27. : Meteor Is The App Platform For The New World Of Cloud-Client

28. : Meteor Is The App Platform For The New World Of Cloud-Client

29. 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

30. 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

32. 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

33. PUBLISH/SUBSCRIBE (1)
lib/collections/clipboards.js
Clipboards = new Mongo.Collection('clipboards');
Every publication rests on the shoulders of a collection

34. 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

35. PUBLISH/SUBSCRIBE (3)
client/subscriptions.js
Meteor.subscribe('clipboards');
The client subscribes to whatever the server puts out

36. 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

37. 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) {
. . .
}});});},
. . . .

38. 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

39. 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

40. 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

41. DDP
• Distributed Data Protocol = REST on
websockets, basically
• Python implementations exist

43. 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/

44. 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…

46. http://davisagli.com/blog/the-making-of-zodb.ws

47. • @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?

48. 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

49. 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

50. 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

51. 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