KillIng Dinosaurs with meteor.JS

Steffo Weber, ForgeRock

ACM/GI Meeting Feb 2015

*Title courtesy of @guyroyse

meteor = {

    is: FULLSTACK – not JUST a framework,
    ISomorphic: same API on client and Server,

    database: everywhere (Client & Server),

    REACTIVITY: Immediate DATASYNC
}

WHAT are cool webapps

• Really fast data sync between all clients
• Latency compensation
• Rich user experience
• Security

Outline

• Zeitgeist WebApps – Traditional vs Meteor
• Live coding. A Meteor app with online DB updates (Demo 1)
• Security
• Demo (2). A real world Meteor app.
• Cloud
• Summary

Traditional webapps

Meteor webapp

Traditional Data Update

meteor Data Update

That's great, BUT

• I can do this with Ajax
• I can do this with Angular.JS
• I know some PHP plugins
• I heard React.JS is great for this
• We use Apex for the server side
• Can I have JQuery please?
• We're building UIs with bootstrap

What Meteor does

• Select a robust set of basic technologies (full stack)
  • node.js
  • mongo
  • DDP
  • Rendering and Templating: Blaze & Spacebars
• Allow other frameworks (bootstrap, jQ) to be integrated
• Check http://atmospherejs.com

Demo (1)

Live Coding. 

• Your first meteor project
• Creating data collections
• Sending data to the client
• Using HTML templating & {{ >spacebars}}
• Sending updates to the server
• Deploy to the cloud with one command

outline

• Zeitgeist WebApps – Traditional vs Meteor
• Live coding. A Meteor app with online DB updates (Demo 1)
• Security
• Demo (2). A real world Meteor app.
• Cloud
• Summary

security

• Data. Restrict access to DBops (READ, UPDATE etc)
• Code. Prevent browser issues (XSS, XSRF etc)
• Transport. Protect data on the wire.

Security

database

​Meteor.publish('users', function() {

        var userId = this.userId,
            user = Meteor.users.findOne({
                _id: userId
            }),
            email = user.emails[0].address;
            return UsersCollection.find({
                'userid': email
            }

})

Security

database

​Meteor.users.allow({

        'update': function (userId, doc, fieldNames, modifier)) {
            if (Roles.userIsInRole(userId, 'admin')) {
                return true;
            } else {
                //console.log("Restricting access to own docs.");
                return doc.owner === userId;
            }
        }

})

Publish/Subscribe Security

• Server code is trusted / client code is not trusted
• Server decides _what_ to publish
• Server controls via requesting userId() or DB query
  • READ access
  • INSERT & DEDELTE access
  • UPDATE access (incl update attribute and op)
• Update ops can be issued
  • directly from the client (incl latency compensation)
  • via a Meteor.methods() or REST call to the server

Web Security – XSS, XSRF

• Directives for client code (short selection); http://goo.gl/rmNHCz
  • BrowserPolicy.framing.disallow()
  • BrowserPolicy.framing.restrictToOrigin(origin)
  • BrowserPolicy.content.allowInlineScripts()
  • BrowserPolicy.content.allowSameOriginForAll()
• Most security attacks: Data is interpreted as Code
  • Buffer Overflow/Undersruns (hello 90s)
  • HTTP Response often includes data & code
  • Meteor. DDP is data channel, HTTP is JS-code channel 

AuthN – Traditional

AuthN – Meteor

DEMO (2)

Goals

• E-Mail Self Service / Social SSO
• Checkin / Checkout (Fire Incidents)
• Employee Timecard
• Affordable OPS costs (10-15 EUR / month)
• Scales to 1000 small customers

OAuth. out of the box 

Roles. alanning:roles 

Data. Selecting addresses

DATA SYNC. Checkin

DATA SYNC. Checkin

Effort

• Base System (OAuth, Email Adresses)
  • a long weekend (3 days)
• REST API for Employee Timecard
  • 2 days
• Pre 1.0 Update Cycles
  • 2 days (max)

Outline

• Zeitgeist WebApps – Traditional vs Meteor
• Live coding. A Meteor app with online DB updates (Demo 1)
• Security
• Demo (2). A real world Meteor app.
• Cloud
• Summary

factory

factory. Choose a name

factory. Enter groups

factory. Upload background

factory. WAIT 2 minutes

factory. Done

Enjoy

costs

• 2 Droplets (machines) on Digital Ocean (15 €)
• 1 CoreOS (1G RAM + SSD Swap) machine can run min 6 Docker images/simsalabim applications – 10 $
• Fireup instances when needed

Got it – what's that in money (Dev Wise)

PLUS

• Shorter dev times (factor 2 compared to Rails {source: differential.io} ; factor 4 compared to PHP – personal guess)
• Resource friendly ( > cheap on DigitalOcean etc)
• Scalability (kadira.io processes 200 Mio API req/month)
• Micro Services with meteorhacks:cluster
• It's JavaScript

CAUTION

• It's JavaScript
• Unit Tests? Any testing framework?
• Isomorphism & waiting for ES 6
• Only frontend layer?
• Is mongo DB reliable? What about Meteor & Oracle DB?
• Who's backing this project?

Meteor development group

• $11.2 Million in 2 Rounds from 6 Investors incl Andreessen Horowitz
• Member of Heavybit Industries
• Business Model. PaaS – Galaxy
• Version 1.0 appeared in Oct 2014
• 11th most starred project on Github https://github.com/search?p=2&q=stars%3A%3E1&s=stars&type=Repositories

Discussion

And Oracle?

• Cloud. nodejs service (cloud.oracle.com/nodejs)
• Node apps. nodejs DB driver (github.com/oracle/node-oracledb)
• SQL DB. Run JavaScript in Oracle DB 12c (http://goo.gl/10yygz)

notable things (I did not discuss)

• Data Sync. Mongo OPLOG tailing
• Taming the callback soup. Meteor & Fibres
• NPM. How to use arbitrary npm modules
• Operations. MUP, PM2 & kadira.io
• Mobile. Building iOS and Android apps with Meteor
• Deploying on NodeJS cloud plattforms
• Clustering: meteorhacks:cluster, Passenger (nginx)