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.
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
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
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
31.
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
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
41. DDP
• Distributed Data Protocol = REST on
websockets, basically
• Python implementations exist
42.
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…
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
All CMSes and frameworks developed in the 2000’s are in the same boat
In mongo shell:
db.contentitems.find()
db.contentitems.remove({_id: "xyz"})
db.contentitems.find({_id: ObjectId('561a545f5d60bdbcc886998c')})
db.contentitems.insert({title: "PloneConf.01", name: 'ploneconf-01', description: 'inserted from db shell', typename: 'event', size: 'XYZ', modified: ISODate('2015-10-12T10:10:10.101Z'), objPositionInParent: 4, defaultview: false, author: 'fulv', workflow_state: 'Published' })
In js console:
ContentItems.insert({title: "PloneConf.01", name: 'ploneconf-01', description: 'inserted from db shell', typename: 'event', size: 'XYZ', modified: Date('2015-10-12T10:10:10.101Z'), objPositionInParent: 4, defaultview: false, author: 'fulv', workflow_state: 'Published' })
fails because the client is never allowed to write to the db.
meteor add insecure
ContentItems.insert({title: "PloneConf.01", name: 'ploneconf-01', description: 'inserted from db shell', typename: 'event', size: 'XYZ', modified: Date('2015-10-12T10:10:10.101Z'), objPositionInParent: 4, defaultview: false, author: 'fulv', workflow_state: 'Published' })
ContentItems.remove({_id: 'gvKQ4Xv5MAsJtjQFT'})
meteor remove insecure
ContentItems.find().fetch()
[>Object, >Object, >Object, >Object, >Object]
ContentItems.findOne()
Object {_id: "vmEiodGygtszzuKYm", typename: "slow-success", title: "Accusamus suscipit repellendus (Server)", name: "accusamus-suscipit-repellendus", description: "Accusamus suscipit repellendus facere voluptatibus…olore incidunt culpa eum reprehenderit doloribus."…}
> db.contentitems.findOne()
{"_id" : "DiwSnt37DQHh6RPaz”, "title" : "News”, "name" : "news”, "description" : "Site News”, "typename" : "folder”, "size" : "1 KB”, "modified" : ISODate("2015-06-28T15:49:17.545Z”), "objPositionInParent" : 1, "defaultview" : false, "author" : "admin", "workflow_state" : "Published"}
Everything Plonistas love about Pyramid, but better
If it’s in “client” it only runs on the client, if it’s in “server”, it only runs on the server, otherwise it runs everywhere. (There are other ways to limit.)
Server code has no access to e.g. client Session object
Also, security
Client contains all UI
“lib” runs on both
5 files, more than 50% is CSS
1 html file with two templates
3 js files
1 collection “Players”
Initialized on the server
Note autopublish, insecure
Old picture:
It’s a small library, can be used standalone
Null collections are for client-side-only
The client can further sort and filter a subscription
DB layer: not just Mongo
Web, Mobile
React, Angular can use Meteor as a service ($meteor)
custom app components: light colored
Apply some of the ideas implemented by Meteor to bring Plone closer to full stack reactivity