Intro to

Meteor



Session with Labs


Hugo Josefson / Jayway 2014

Overview


  • What is Meteor?

  • Most interesting advantages
  • Disadvantages

  • DEMO
  • LABS

What is Meteor?


  1. JS libs / framework on Node
    • webapp
    • templates
    • accounts-password, -github...

  2. CLI tool meteor
    • build, combine, (precompile e.g. coffeescript, less)
    • run
    • deploy

7 Principles of Meteor


  • Data on the Wire
  • One Language
  • Database Everywhere ♥
  • Latency Compensation ♥
  • Full Stack Reactivity ♥
  • Embrace the Ecosystem
  • Simplicity Equals Productivity

Disadvantages


    • not yet v1.0
    • Packages not part of npm
    • Requires JS on client

    DEMO 

    curl https://install.meteor.com | /bin/sh

meteor create khelg-with-meteor

cd khelg-with-meteor
meteor
=> Meteor server running on: http://localhost:3000/

    meteor add accounts-base
meteor add accounts-password
meteor add accounts-ui


    {{ loginButtons }}

    Resources


    LABS


    Tutorial by Sebastian Dahlgren:
    Writing your first
    Meteor Application

    tinyurl.com/first-meteor

    LABS

    Suggestions:


    Add Gravatar image for users
    (TIPS: configure accounts-ui,
    request relevant oauth scope from github,
    use meteor-gravatar...)

    Add server-side security for DB manipulation
    (see docs.meteor.com#dataandsecurity)

    Thank you!





    Questions?





    hugo.josefson@jayway.com
    www.hugojosefson.com

    BONUS ROUND


    What about

    serving HTML?

    Search Engine Optimization


     meteor add spiderable

    Done.
    - Next!

    Fast Render


    Advantage:

    Speeds up initial page render

    Disadvantage:

    Requires JS on client

    Meteor vs Progr. Enhancement


    Progressive Enhancement:

    Render functional page on server,
    let client JS enhance

    Advantage
    • Works without JS on client

    Disadvantage
    • Cumbersome to consume DOM as data
    • <opinion>Boring</opinion>

    Meteor vs Progr. Enhancement


    Suggestion for any Single Page App

    Middleware/reverse proxy:
    renders initial HTML on server
    with working links and forms,
    let client JS take over

    Advantage
    • Works without JS on client
    • Works awesomely with JS on client
    • Fun to code!
    Made with Slides.com