From 'Meteor' to 'Maker'

From ‘Meteor’ to ‘Maker’

Meteor NY Meetup | January 15, 2014 | Nitya Narasimhan!

ROCK

LEARN concepts

Think DATA

PAPER

DESIGN applications

Think

REACTIVITY

+

SCISSORS

CRAFT experiences

Think

PERFORMANCE

+

1/15/14 – METEOR NY MEETUP! 2!


.. everything should work identically on browser and server ..


Meteor Core Packages

Meteor Optional Packages

Meteor Optional Hosting

Atmosphere Smart Packages

Meteorite Command Line Tools

CODE IT

BUNDLE IT

DEPLOY IT Heroku Buildpack

Meteor Command Line Tools


SMART SERVER

View

User Interac

tions

3rd Party Interactions

Data Cache

DUMB CLIENT

Controller

Model Model

App Logic + All Controllers

Database + CONNECTIVITY

Synchronous Data Transfers


View

User Interac

tions


Data Cache

Controller

Model

App Logic + Model Controller

Model

Database

WEB APP SERVER

SMART CLIENT

+ PROCESSING

+ CONNECTIVITY

Asynchronous Data Transfers


View

User Interac

tions


Data Cache

Controller

Model + Sync

App Logic

Database

Model + Sync

Privileged or Protected operations

WEB APP SERVER

METEOR CLIENT

+ LOCAL STORAGE

DDP

+ PROCESSING

+ CONNECTIVITY

Reactive Data Transfers

SMART DB


Handlebars

Local Storage

JavaScript

Mini Mongo

JavaScript

Mongo DB

Mongo DDP

(Transparent Publications, Subscriptions, Observes)

HTTP (Explicit Method calls)

Some changes in METEOR 1.0

METEOR CLIENT

ATMOSPHERE

NPM NODE JS RUNTIME

METEOR SERVER

Mongo DB

¡  Data on the wire. Client handles views."¡  One language. JavaScript everywhere."¡  Database everywhere. Consistent usage."¡  Latency compensation. Zero latency.*"¡  Full Stack reactivity. Real-time as default."¡  Embrace the ecosystem. Interoperable."¡  Simplicity Equals Productivity. Clean APIs"


http://docs.meteor.com/#sevenprinciples

https://www.meteor.com/examples/wordplay

Creations



‘ACTIVE’ DOGFOODING http://atmosphere.meteor.com


MULTIPLAYER GAMES http://wordplay.meteor.com


REAL-‐TIME + CRITICAL http://www.sharewith911.com/


RICH MAP INTEGRATION http://leaflet.meteor.com/


MEDIA ANNOTATION http://subtitles.fiddleware.com/


EMOTIVE IMAGERY http://ilovesf.meteor.com


HACKER NEWS REDUX http://telescope.meteor.com/


CIVIC VISUALIZATION http://illustreets.co.uk/


REAL TIME TRANSIT http://livebus.meteor.com/


VIDEO SHARING http://streem.io


BULLETIN BOARDS http://madewithmeteor.com


RAPID PROTOTYPING* http://sevakalt.meteor.com

Concepts


¡  Structure (/client /server /lib depth-first)"¡  Templates (views, helpers, handlers)"¡  Reactivity (contexts & computations)"¡  Accounts (custom & social auth.)"¡  Packages (core + official + 3rd party)"¡  Security (data vs. code)"¡  Extensibility (community, smart packages)"¡  Deployment (run vs. bundle vs. deploy) "



Demo at break..

DESIGN YOUR DATA MODEL (Collections, Indexes)

DESIGN YOUR INTERFACES (Templates, Layouts)

DESIGN YOUR INTERACTIONS (Helpers, Handlers, Routes)

CRAFT YOUR DATA USAGE (Publish/Subscribe, Filter)

CRAFT YOUR TEMPLATE USAGE* (Breakup, Reuse, Isolate)

CRAFT YOUR REACTIVITY (Session, Computations, Observes)

WIRE THINGS TOGETHER (Packages, Directory Structure)

Demo at break..


Simplicity (Build & Deploy)

Reactivity (Event Driven)

Interoperability (via DDP)

Community (smart packages)

Maturity (changing, not yet v1.0.)

Scalability* (need for patterns)

Consistency* (legacy creep)

Testability (but wait for it..)

* “With great power comes great responsibility”


Trello (Jan 14, 2014)


¡  Walks through concepts in context of real application"

¡  Extensive ‘support’ material (ar4cles, screencasts)

¡ Meteor NY Promo4on Link (Code = ORIONIDS)


http://discovermeteror.com


http://eventedmind.com


http://meteorhacks.com


http://www.youtube.com/user/meteorvideos

Save the Date


http://yauh.de/articles/376/best-‐learning-‐resources-‐for-‐meteorjs

General Resources Code Tutorials Code Examples Testing

Ready For Production

From 'Meteor' to 'Maker'

Technology

Transcript of From 'Meteor' to 'Maker'