SlideShare a Scribd company logo
PLONE FSR
Anatomy of a Full Stack Reactive Application
Fulvio Casali - IRC/GitHub: fulv
Seattle, USA
Plone Conference 2015 - Bucharest, Romania
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
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.
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 a UX proposal
PART II
What is Meteor?
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]
• More in common with Pyramid or Django
than Angular or React
• But actually, Single Page Apps
• And a very polished development
environment
THE MARKETING
SOME NUMBERS
• 7,874 Packages (https://atmospherejs.com/)
• 15,864 StackOverflow questions
• 449K Unique Installs
• 28,877 GitHub Stars
• Hundreds of meetups
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 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.
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.
1 - DATA ON THE WIRE
• Look at “Network” tab in browser
development tools:
• After initial load, only activity is on
websockets connection
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
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"}
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
packages do not work out of the box in
Meteor. They can, however, be used by
Meteor packages.
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, …
: 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 clone, took only 2 months for first
implementation
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
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
PUBLISH/SUBSCRIBE (1)
lib/collections/clipboards.js
Clipboards = new Mongo.Collection('clipboards');
Every publication rests on the shoulders of a collection
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
PUBLISH/SUBSCRIBE (3)
client/subscriptions.js
Meteor.subscribe('clipboards');
The client subscribes to whatever the server puts out
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
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) {
. . .
}});});},
. . . .
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
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
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
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
• 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/
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…
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 across the
wire
• ZODB everywhere - still a pipe dream?
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
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
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
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

More Related Content

What's hot

Spring Live Sample Chapter
Spring Live Sample ChapterSpring Live Sample Chapter
Spring Live Sample Chapter
Syed Shahul
 
Micronaut: Changing the Micro Future
Micronaut: Changing the Micro FutureMicronaut: Changing the Micro Future
Micronaut: Changing the Micro Future
Zachary Klein
 
Maven: Managing Software Projects for Repeatable Results
Maven: Managing Software Projects for Repeatable ResultsMaven: Managing Software Projects for Repeatable Results
Maven: Managing Software Projects for Repeatable Results
Steve Keener
 
Grails Plugin Best Practices
Grails Plugin Best PracticesGrails Plugin Best Practices
Grails Plugin Best Practices
Burt Beckwith
 
Top 10 Technology Trends Changing Developer's Landscape
Top 10 Technology Trends Changing Developer's LandscapeTop 10 Technology Trends Changing Developer's Landscape
Top 10 Technology Trends Changing Developer's Landscape
Arun Gupta
 
OpenNTF Domino API (ODA): Super-Charging Domino Development
OpenNTF Domino API (ODA): Super-Charging Domino DevelopmentOpenNTF Domino API (ODA): Super-Charging Domino Development
OpenNTF Domino API (ODA): Super-Charging Domino Development
Paul Withers
 
Getting Groovy with JHipster and Micronaut
Getting Groovy with JHipster and MicronautGetting Groovy with JHipster and Micronaut
Getting Groovy with JHipster and Micronaut
Zachary Klein
 
Automatic deployment on .NET web stack (Minsk .NET meetup 12.02.14)
Automatic deployment on .NET web stack (Minsk .NET meetup 12.02.14)Automatic deployment on .NET web stack (Minsk .NET meetup 12.02.14)
Automatic deployment on .NET web stack (Minsk .NET meetup 12.02.14)
Is Antipov
 
Pantheon basics
Pantheon basicsPantheon basics
Pantheon basics
Plasterdog Web Design
 
Mongo db
Mongo dbMongo db
Mongo db
Gyanendra Yadav
 
Building Grails Plugins - Tips And Tricks
Building Grails Plugins - Tips And TricksBuilding Grails Plugins - Tips And Tricks
Building Grails Plugins - Tips And Tricks
Mike Hugo
 
Introduction to Apache Roller
Introduction to Apache RollerIntroduction to Apache Roller
Introduction to Apache Roller
Matt Raible
 
Offline first, the painless way
Offline first, the painless wayOffline first, the painless way
Offline first, the painless way
Marcel Kalveram
 
Containers, Docker, and Microservices: the Terrific Trio
Containers, Docker, and Microservices: the Terrific TrioContainers, Docker, and Microservices: the Terrific Trio
Containers, Docker, and Microservices: the Terrific Trio
Jérôme Petazzoni
 
AspNetWhitePaper
AspNetWhitePaperAspNetWhitePaper
AspNetWhitePaper
tutorialsruby
 
Lessons Learned from Real-World Deployments of Java EE 7 at JavaOne 2014
Lessons Learned from Real-World Deployments of Java EE 7 at JavaOne 2014Lessons Learned from Real-World Deployments of Java EE 7 at JavaOne 2014
Lessons Learned from Real-World Deployments of Java EE 7 at JavaOne 2014
Arun Gupta
 
Spring boot
Spring bootSpring boot
Spring boot
Bhagwat Kumar
 
Developing Mobile HTML5 Apps with Grails
Developing Mobile HTML5 Apps with GrailsDeveloping Mobile HTML5 Apps with Grails
Developing Mobile HTML5 Apps with Grails
GR8Conf
 
Mohamed Abouelhoda: Next Generation Workflow Systems on the Cloud: The Tavaxy...
Mohamed Abouelhoda: Next Generation Workflow Systems on the Cloud: The Tavaxy...Mohamed Abouelhoda: Next Generation Workflow Systems on the Cloud: The Tavaxy...
Mohamed Abouelhoda: Next Generation Workflow Systems on the Cloud: The Tavaxy...
GigaScience, BGI Hong Kong
 
Utiliser Webpack dans une application Symfony
Utiliser Webpack dans une application SymfonyUtiliser Webpack dans une application Symfony
Utiliser Webpack dans une application Symfony
Alain Hippolyte
 

What's hot (20)

Spring Live Sample Chapter
Spring Live Sample ChapterSpring Live Sample Chapter
Spring Live Sample Chapter
 
Micronaut: Changing the Micro Future
Micronaut: Changing the Micro FutureMicronaut: Changing the Micro Future
Micronaut: Changing the Micro Future
 
Maven: Managing Software Projects for Repeatable Results
Maven: Managing Software Projects for Repeatable ResultsMaven: Managing Software Projects for Repeatable Results
Maven: Managing Software Projects for Repeatable Results
 
Grails Plugin Best Practices
Grails Plugin Best PracticesGrails Plugin Best Practices
Grails Plugin Best Practices
 
Top 10 Technology Trends Changing Developer's Landscape
Top 10 Technology Trends Changing Developer's LandscapeTop 10 Technology Trends Changing Developer's Landscape
Top 10 Technology Trends Changing Developer's Landscape
 
OpenNTF Domino API (ODA): Super-Charging Domino Development
OpenNTF Domino API (ODA): Super-Charging Domino DevelopmentOpenNTF Domino API (ODA): Super-Charging Domino Development
OpenNTF Domino API (ODA): Super-Charging Domino Development
 
Getting Groovy with JHipster and Micronaut
Getting Groovy with JHipster and MicronautGetting Groovy with JHipster and Micronaut
Getting Groovy with JHipster and Micronaut
 
Automatic deployment on .NET web stack (Minsk .NET meetup 12.02.14)
Automatic deployment on .NET web stack (Minsk .NET meetup 12.02.14)Automatic deployment on .NET web stack (Minsk .NET meetup 12.02.14)
Automatic deployment on .NET web stack (Minsk .NET meetup 12.02.14)
 
Pantheon basics
Pantheon basicsPantheon basics
Pantheon basics
 
Mongo db
Mongo dbMongo db
Mongo db
 
Building Grails Plugins - Tips And Tricks
Building Grails Plugins - Tips And TricksBuilding Grails Plugins - Tips And Tricks
Building Grails Plugins - Tips And Tricks
 
Introduction to Apache Roller
Introduction to Apache RollerIntroduction to Apache Roller
Introduction to Apache Roller
 
Offline first, the painless way
Offline first, the painless wayOffline first, the painless way
Offline first, the painless way
 
Containers, Docker, and Microservices: the Terrific Trio
Containers, Docker, and Microservices: the Terrific TrioContainers, Docker, and Microservices: the Terrific Trio
Containers, Docker, and Microservices: the Terrific Trio
 
AspNetWhitePaper
AspNetWhitePaperAspNetWhitePaper
AspNetWhitePaper
 
Lessons Learned from Real-World Deployments of Java EE 7 at JavaOne 2014
Lessons Learned from Real-World Deployments of Java EE 7 at JavaOne 2014Lessons Learned from Real-World Deployments of Java EE 7 at JavaOne 2014
Lessons Learned from Real-World Deployments of Java EE 7 at JavaOne 2014
 
Spring boot
Spring bootSpring boot
Spring boot
 
Developing Mobile HTML5 Apps with Grails
Developing Mobile HTML5 Apps with GrailsDeveloping Mobile HTML5 Apps with Grails
Developing Mobile HTML5 Apps with Grails
 
Mohamed Abouelhoda: Next Generation Workflow Systems on the Cloud: The Tavaxy...
Mohamed Abouelhoda: Next Generation Workflow Systems on the Cloud: The Tavaxy...Mohamed Abouelhoda: Next Generation Workflow Systems on the Cloud: The Tavaxy...
Mohamed Abouelhoda: Next Generation Workflow Systems on the Cloud: The Tavaxy...
 
Utiliser Webpack dans une application Symfony
Utiliser Webpack dans une application SymfonyUtiliser Webpack dans une application Symfony
Utiliser Webpack dans une application Symfony
 

Similar to Plone FSR

Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS
Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJSMeteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS
Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS
Julio Antonio Mendonça de Marins
 
Custom Runtimes for the Cloud
Custom Runtimes for the CloudCustom Runtimes for the Cloud
Custom Runtimes for the Cloud
CloudBees
 
The Meteor Framework
The Meteor FrameworkThe Meteor Framework
The Meteor Framework
Damien Magoni
 
IBM Think Session 8598 Domino and JavaScript Development MasterClass
IBM Think Session 8598 Domino and JavaScript Development MasterClassIBM Think Session 8598 Domino and JavaScript Development MasterClass
IBM Think Session 8598 Domino and JavaScript Development MasterClass
Paul Withers
 
An introduction to Node.js
An introduction to Node.jsAn introduction to Node.js
An introduction to Node.js
Kasey McCurdy
 
Microservices in Java
Microservices in JavaMicroservices in Java
Microservices in Java
Anatole Tresch
 
Cannibalising The Google App Engine
Cannibalising The  Google  App  EngineCannibalising The  Google  App  Engine
Cannibalising The Google App Engine
catherinewall
 
Beginning MEAN Stack
Beginning MEAN StackBeginning MEAN Stack
Beginning MEAN Stack
Rob Davarnia
 
Meteor Angular
Meteor AngularMeteor Angular
Meteor Angular
Pavel Kurnosov
 
BUILDING WEB APPS WITH ASP.NET MVC AND NOSQL
BUILDING WEB APPS WITH ASP.NET MVC AND NOSQLBUILDING WEB APPS WITH ASP.NET MVC AND NOSQL
BUILDING WEB APPS WITH ASP.NET MVC AND NOSQL
Michael Kennedy
 
Meteor - Codemotion Rome 2015
Meteor - Codemotion Rome 2015Meteor - Codemotion Rome 2015
Meteor - Codemotion Rome 2015
Codemotion
 
Meteor + Polymer
Meteor + PolymerMeteor + Polymer
Meteor + Polymer
wolf4ood
 
OpenStack + Cloud Foundry for the OpenStack Boston Meetup
OpenStack + Cloud Foundry for the OpenStack Boston MeetupOpenStack + Cloud Foundry for the OpenStack Boston Meetup
OpenStack + Cloud Foundry for the OpenStack Boston Meetup
ragss
 
Going Serverless with OpenWhisk
Going Serverless with OpenWhiskGoing Serverless with OpenWhisk
Going Serverless with OpenWhisk
Alex Glikson
 
Mobile and IBM Worklight Best Practices
Mobile and IBM Worklight Best PracticesMobile and IBM Worklight Best Practices
Mobile and IBM Worklight Best Practices
Andrew Ferrier
 
ZZ BC#7.5 asp.net mvc practice and guideline refresh!
ZZ BC#7.5 asp.net mvc practice  and guideline refresh! ZZ BC#7.5 asp.net mvc practice  and guideline refresh!
ZZ BC#7.5 asp.net mvc practice and guideline refresh!
Chalermpon Areepong
 
Meteor meetup
Meteor meetupMeteor meetup
Meteor meetup
David Brear
 
All about that reactive ui
All about that reactive uiAll about that reactive ui
All about that reactive ui
Paul van Zyl
 
Cloud Platforms for Java
Cloud Platforms for JavaCloud Platforms for Java
Cloud Platforms for Java
3Pillar Global
 
From CoreOS to Kubernetes and Concourse CI
From CoreOS to Kubernetes and Concourse CIFrom CoreOS to Kubernetes and Concourse CI
From CoreOS to Kubernetes and Concourse CI
Denis Izmaylov
 

Similar to Plone FSR (20)

Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS
Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJSMeteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS
Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS
 
Custom Runtimes for the Cloud
Custom Runtimes for the CloudCustom Runtimes for the Cloud
Custom Runtimes for the Cloud
 
The Meteor Framework
The Meteor FrameworkThe Meteor Framework
The Meteor Framework
 
IBM Think Session 8598 Domino and JavaScript Development MasterClass
IBM Think Session 8598 Domino and JavaScript Development MasterClassIBM Think Session 8598 Domino and JavaScript Development MasterClass
IBM Think Session 8598 Domino and JavaScript Development MasterClass
 
An introduction to Node.js
An introduction to Node.jsAn introduction to Node.js
An introduction to Node.js
 
Microservices in Java
Microservices in JavaMicroservices in Java
Microservices in Java
 
Cannibalising The Google App Engine
Cannibalising The  Google  App  EngineCannibalising The  Google  App  Engine
Cannibalising The Google App Engine
 
Beginning MEAN Stack
Beginning MEAN StackBeginning MEAN Stack
Beginning MEAN Stack
 
Meteor Angular
Meteor AngularMeteor Angular
Meteor Angular
 
BUILDING WEB APPS WITH ASP.NET MVC AND NOSQL
BUILDING WEB APPS WITH ASP.NET MVC AND NOSQLBUILDING WEB APPS WITH ASP.NET MVC AND NOSQL
BUILDING WEB APPS WITH ASP.NET MVC AND NOSQL
 
Meteor - Codemotion Rome 2015
Meteor - Codemotion Rome 2015Meteor - Codemotion Rome 2015
Meteor - Codemotion Rome 2015
 
Meteor + Polymer
Meteor + PolymerMeteor + Polymer
Meteor + Polymer
 
OpenStack + Cloud Foundry for the OpenStack Boston Meetup
OpenStack + Cloud Foundry for the OpenStack Boston MeetupOpenStack + Cloud Foundry for the OpenStack Boston Meetup
OpenStack + Cloud Foundry for the OpenStack Boston Meetup
 
Going Serverless with OpenWhisk
Going Serverless with OpenWhiskGoing Serverless with OpenWhisk
Going Serverless with OpenWhisk
 
Mobile and IBM Worklight Best Practices
Mobile and IBM Worklight Best PracticesMobile and IBM Worklight Best Practices
Mobile and IBM Worklight Best Practices
 
ZZ BC#7.5 asp.net mvc practice and guideline refresh!
ZZ BC#7.5 asp.net mvc practice  and guideline refresh! ZZ BC#7.5 asp.net mvc practice  and guideline refresh!
ZZ BC#7.5 asp.net mvc practice and guideline refresh!
 
Meteor meetup
Meteor meetupMeteor meetup
Meteor meetup
 
All about that reactive ui
All about that reactive uiAll about that reactive ui
All about that reactive ui
 
Cloud Platforms for Java
Cloud Platforms for JavaCloud Platforms for Java
Cloud Platforms for Java
 
From CoreOS to Kubernetes and Concourse CI
From CoreOS to Kubernetes and Concourse CIFrom CoreOS to Kubernetes and Concourse CI
From CoreOS to Kubernetes and Concourse CI
 

Recently uploaded

The Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdfThe Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
kalichargn70th171
 
A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...
A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...
A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...
kalichargn70th171
 
What’s New in VictoriaLogs - Q2 2024 Update
What’s New in VictoriaLogs - Q2 2024 UpdateWhat’s New in VictoriaLogs - Q2 2024 Update
What’s New in VictoriaLogs - Q2 2024 Update
VictoriaMetrics
 
Optimizing Your E-commerce with WooCommerce.pptx
Optimizing Your E-commerce with WooCommerce.pptxOptimizing Your E-commerce with WooCommerce.pptx
Optimizing Your E-commerce with WooCommerce.pptx
WebConnect Pvt Ltd
 
What is Continuous Testing in DevOps - A Definitive Guide.pdf
What is Continuous Testing in DevOps - A Definitive Guide.pdfWhat is Continuous Testing in DevOps - A Definitive Guide.pdf
What is Continuous Testing in DevOps - A Definitive Guide.pdf
kalichargn70th171
 
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
safelyiotech
 
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptxMigration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
ervikas4
 
Software Test Automation - A Comprehensive Guide on Automated Testing.pdf
Software Test Automation - A Comprehensive Guide on Automated Testing.pdfSoftware Test Automation - A Comprehensive Guide on Automated Testing.pdf
Software Test Automation - A Comprehensive Guide on Automated Testing.pdf
kalichargn70th171
 
Photoshop Tutorial for Beginners (2024 Edition)
Photoshop Tutorial for Beginners (2024 Edition)Photoshop Tutorial for Beginners (2024 Edition)
Photoshop Tutorial for Beginners (2024 Edition)
alowpalsadig
 
Alluxio Webinar | 10x Faster Trino Queries on Your Data Platform
Alluxio Webinar | 10x Faster Trino Queries on Your Data PlatformAlluxio Webinar | 10x Faster Trino Queries on Your Data Platform
Alluxio Webinar | 10x Faster Trino Queries on Your Data Platform
Alluxio, Inc.
 
The Rising Future of CPaaS in the Middle East 2024
The Rising Future of CPaaS in the Middle East 2024The Rising Future of CPaaS in the Middle East 2024
The Rising Future of CPaaS in the Middle East 2024
Yara Milbes
 
🏎️Tech Transformation: DevOps Insights from the Experts 👩‍💻
🏎️Tech Transformation: DevOps Insights from the Experts 👩‍💻🏎️Tech Transformation: DevOps Insights from the Experts 👩‍💻
🏎️Tech Transformation: DevOps Insights from the Experts 👩‍💻
campbellclarkson
 
Building API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructureBuilding API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructure
confluent
 
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
kalichargn70th171
 
Streamlining End-to-End Testing Automation
Streamlining End-to-End Testing AutomationStreamlining End-to-End Testing Automation
Streamlining End-to-End Testing Automation
Anand Bagmar
 
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
widenerjobeyrl638
 
Enhanced Screen Flows UI/UX using SLDS with Tom Kitt
Enhanced Screen Flows UI/UX using SLDS with Tom KittEnhanced Screen Flows UI/UX using SLDS with Tom Kitt
Enhanced Screen Flows UI/UX using SLDS with Tom Kitt
Peter Caitens
 
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptxOperational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
sandeepmenon62
 
42 Ways to Generate Real Estate Leads - Sellxpert
42 Ways to Generate Real Estate Leads - Sellxpert42 Ways to Generate Real Estate Leads - Sellxpert
42 Ways to Generate Real Estate Leads - Sellxpert
vaishalijagtap12
 
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
kgyxske
 

Recently uploaded (20)

The Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdfThe Comprehensive Guide to Validating Audio-Visual Performances.pdf
The Comprehensive Guide to Validating Audio-Visual Performances.pdf
 
A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...
A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...
A Comprehensive Guide on Implementing Real-World Mobile Testing Strategies fo...
 
What’s New in VictoriaLogs - Q2 2024 Update
What’s New in VictoriaLogs - Q2 2024 UpdateWhat’s New in VictoriaLogs - Q2 2024 Update
What’s New in VictoriaLogs - Q2 2024 Update
 
Optimizing Your E-commerce with WooCommerce.pptx
Optimizing Your E-commerce with WooCommerce.pptxOptimizing Your E-commerce with WooCommerce.pptx
Optimizing Your E-commerce with WooCommerce.pptx
 
What is Continuous Testing in DevOps - A Definitive Guide.pdf
What is Continuous Testing in DevOps - A Definitive Guide.pdfWhat is Continuous Testing in DevOps - A Definitive Guide.pdf
What is Continuous Testing in DevOps - A Definitive Guide.pdf
 
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
 
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptxMigration From CH 1.0 to CH 2.0 and  Mule 4.6 & Java 17 Upgrade.pptx
Migration From CH 1.0 to CH 2.0 and Mule 4.6 & Java 17 Upgrade.pptx
 
Software Test Automation - A Comprehensive Guide on Automated Testing.pdf
Software Test Automation - A Comprehensive Guide on Automated Testing.pdfSoftware Test Automation - A Comprehensive Guide on Automated Testing.pdf
Software Test Automation - A Comprehensive Guide on Automated Testing.pdf
 
Photoshop Tutorial for Beginners (2024 Edition)
Photoshop Tutorial for Beginners (2024 Edition)Photoshop Tutorial for Beginners (2024 Edition)
Photoshop Tutorial for Beginners (2024 Edition)
 
Alluxio Webinar | 10x Faster Trino Queries on Your Data Platform
Alluxio Webinar | 10x Faster Trino Queries on Your Data PlatformAlluxio Webinar | 10x Faster Trino Queries on Your Data Platform
Alluxio Webinar | 10x Faster Trino Queries on Your Data Platform
 
The Rising Future of CPaaS in the Middle East 2024
The Rising Future of CPaaS in the Middle East 2024The Rising Future of CPaaS in the Middle East 2024
The Rising Future of CPaaS in the Middle East 2024
 
🏎️Tech Transformation: DevOps Insights from the Experts 👩‍💻
🏎️Tech Transformation: DevOps Insights from the Experts 👩‍💻🏎️Tech Transformation: DevOps Insights from the Experts 👩‍💻
🏎️Tech Transformation: DevOps Insights from the Experts 👩‍💻
 
Building API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructureBuilding API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructure
 
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
 
Streamlining End-to-End Testing Automation
Streamlining End-to-End Testing AutomationStreamlining End-to-End Testing Automation
Streamlining End-to-End Testing Automation
 
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
 
Enhanced Screen Flows UI/UX using SLDS with Tom Kitt
Enhanced Screen Flows UI/UX using SLDS with Tom KittEnhanced Screen Flows UI/UX using SLDS with Tom Kitt
Enhanced Screen Flows UI/UX using SLDS with Tom Kitt
 
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptxOperational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
Operational ease MuleSoft and Salesforce Service Cloud Solution v1.0.pptx
 
42 Ways to Generate Real Estate Leads - Sellxpert
42 Ways to Generate Real Estate Leads - Sellxpert42 Ways to Generate Real Estate Leads - Sellxpert
42 Ways to Generate Real Estate Leads - Sellxpert
 
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
一比一原版(sdsu毕业证书)圣地亚哥州立大学毕业证如何办理
 

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

  1. All CMSes and frameworks developed in the 2000’s are in the same boat
  2. 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"}
  3. Everything Plonistas love about Pyramid, but better
  4. 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. 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
  6. Old picture:
  7. It’s a small library, can be used standalone
  8. Null collections are for client-side-only
  9. The client can further sort and filter a subscription
  10. DB layer: not just Mongo Web, Mobile React, Angular can use Meteor as a service ($meteor) custom app components: light colored
  11. Apply some of the ideas implemented by Meteor to bring Plone closer to full stack reactivity