Plone FSR
- 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.
- 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
- 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
- 12. SOME NUMBERS
• 7,874 Packages (https://atmospherejs.com/)
• 15,864 StackOverflow questions
• 449K Unique Installs
• 28,877 GitHub Stars
• Hundreds of meetups
- 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"}
- 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
- 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) {
. . .
}});});},
. . . .
- 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
- 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
Editor's Notes
- 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