WHY METEORJS 

INTRODUCTION TO METERJS + DEMO APP 

LUIGI MASELLI FullStack Developer freelance + hackerpreneur remote worker blogger http: twitter: grigio.org @grigi0 

No content

CONTEXT 

client ⇽ (html ) server (x 100 req) ✔ Simple ✔ Google Search Indexable ☹ Bandwidth ☹ Interaction Email notification OL' WEB client ⇾ server 

WEB2.0 BUZZ Evolution.. 

app ⇽ (json) server (app store download x 100 req) ☹ Simple ☹ Google Search Indexable ✔ Bandwidth ✔ Interaction Push notification + Email APP MANIA app ⇾ server 

AGE ͠ ͡ I want everything and simple! 

✔ Simple ✔ Google Search Indexable ✔ Bandwidth ✔ Interaction ✔ Offline limited usage Push notification + Email FUTURE (MAYBE) frontend app ↔ backend 

CONTEMPORARY TECH COMPONENTS NodeJS noSQL, cloud, PaaS client side routing, virtual dom data binding, cordova, localstorage minification, requirejs, grunt gulp, react.js, es6 MongoDB But how to wire them? 

ANOTHER BOILERPLATE? NAH.. 

Random quote time "Simplicity is the ultimate sophistication" Leonardo Da Vinci 

JACKPOT: BROWSER + SERVER + DB 

METEORJS INGREDIENTS Isomorphic javascript (based on NodeJS) JS on the client, on the server, on db (MiniMongo,MongoDB) Shared code: data validations, routing, functions Views: handlebars like (json + HTML holes) Start simple refine later (Convention over configuration) Packages “plug and play”. Integration with NPM or Bower Builtin: Virtual DOM, minification,.. Pluggable: less, coffeescript, ES6 Harmony, classic & social authentication support,.. Meteor can serve: static files, DDP messages(ws,HTTP), HTTP Requests (the trinity..) 

METEOR APP ARCHITECTURE 

METEOR KEY CONCEPTS Reactivity (redraw on data changes an not events) Virtual DOM Database everywhere (but not the same data) Latency compensation Remote Methods Platform (Web , Phonegap / Cordova Android, iOS) 

THE MINIMAL CHAT 

< ! - - c l i e n t / c h a t . h t m l - - > < h e a d > < t i t l e > M e t e o r M i n i m a l C h a t < / t i t l e > < / h e a d > < b o d y > { { > c h a t L i s t } } { { > c h a t E n t r y } } < / b o d y > < t e m p l a t e n a m e = " c h a t L i s t " > < h 1 > M e s s a g e s < / h 1 > < u l > { { # e a c h m e s s a g e s } } < l i > < s t r o n g > { { u s e r } } < / s t r o n g > { { t e x t } } < / l i > { { / e a c h } } < / u l > < / t e m p l a t e > < t e m p l a t e n a m e = " c h a t E n t r y " > < i n p u t i d = " u s e r " / > < i n p u t i d = " t e x t " / > < b u t t o n i d = " s e n d " > s e n d < / b u t t o n > < / t e m p l a t e > 

/ / c o l l e c t i o n s . j s M e s s a g e s = n e w M e t e o r . C o l l e c t i o n ( ' m e s s a g e s ' ) ; / / c l i e n t / c h a t . j s T e m p l a t e . c h a t L i s t . h e l p e r s ( { ' m e s s a g e s ' : f u n c t i o n ( ) { r e t u r n M e s s a g e s . f i n d ( { } ) ; } } ) ; T e m p l a t e . c h a t E n t r y . e v e n t s ( { ' c l i c k # s e n d ' : f u n c t i o n ( ) { M e s s a g e s . i n s e r t ( { u s e r : $ ( ' # u s e r ' ) . v a l ( ) , t e x t : $ ( ' # t e x t ' ) . v a l ( ) } ) ; $ ( ' # t e x t ' ) . v a l ( ' ' ) ; } } ) ; 

HACKERCHAT (a more real world Meteor example) github.com/grigio/meteor-hackerchat 

RESOURCES http://meteor.com (official site and docs) https://www.discovermeteor.com (book, free in non-english) http://atmospherejs.com (meteor packages) http://www.eventedmind.com (screencasts) http://meteorhacks.com (blog) http://weuse.meteor.com (MeteorJS users on a map) http://madewith.meteor.com (apps open or not showcase) http://telesc.pe / microscope (Real world open source HN/Reddit) 

FINE Meteor Italia Meeting Torino, 7/11/2014 http://meteor-italia.github.io