Download to read offline
Plone FSR
- 1. PLONE FSR Anatomy ofa Full Stack Reactive Application Fulvio Casali - IRC/GitHub: fulv Seattle, USA Plone Conference 2015 - Bucharest, Romania
- 2. WEB DEVELOPMENT • Inthe 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 • Introductionto the application framework • What this all means for Plone • Q&A
- 5.
- 6. IT’S A APP (witha 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 isMeteor?
- 9. WIKIPEDIA • Meteor, orMeteorJS 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 incommon with Pyramid or Django than Angular or React • But actually, Single Page Apps • And a very polished development environment
- 11.
- 12. SOME NUMBERS • 7,874Packages (https://atmospherejs.com/) • 15,864 StackOverflow questions • 449K Unique Installs • 28,877 GitHub Stars • Hundreds of meetups
- 13. meteor js onGoogle Trends since 2012
- 14. meteor js vsangular js
- 15.
- 16.
- 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 - DATAON THE WIRE • Look at “Network” tab in browser development tools: • After initial load, only activity is on websockets connection
- 20. 2 - JSEVERYWHERE • 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 - FULLSTACK REACTIVITY • examples later
- 25. 6 - EMBRACETHE 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 - SIMPLICITYEQUALS 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 IsThe App Platform For The New World Of Cloud-Client
- 28. : Meteor IsThe 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 • Thebottom 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 Librarythat 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 clientsubscribes to whatever the server puts out
- 36. PUBLISH/SUBSCRIBE (4) client/templates/includes/actionsmenu.html <dd class="actionMenuContent"> <ul> <li> <ahref="{{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> <ahref="{{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 DataProtocol = 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 • MongoDBis 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.
- 47. • @philikon atploneconf 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 • IntegrateDDP 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 • Jurystill 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 • DiscoverMeteor - 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 demoapp: 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
- #3 All CMSes and frameworks developed in the 2000’s are in the same boat
- #6 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"}
- #11 Everything Plonistas love about Pyramid, but better
- #21 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
- #31 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
- #32 Old picture:
- #33 It’s a small library, can be used standalone
- #34 Null collections are for client-side-only
- #36 The client can further sort and filter a subscription
- #43 DB layer: not just Mongo Web, Mobile React, Angular can use Meteor as a service ($meteor) custom app components: light colored
- #49 Apply some of the ideas implemented by Meteor to bring Plone closer to full stack reactivity