Why Meteor

An introduction to MeteorJS and its benefits for realtime web applications (SPA) , nodejs javascript mongodb

Transcript

1. WHY METEORJS
2. INTRODUCTION TO METERJS + DEMO APP
3. LUIGI MASELLI FullStack Developer freelance + hackerpreneur remote worker blogger http: twitter: grigio.org @grigi0
5. CONTEXT
6. client ⇽ (html ) server (x 100 req) ✔ Simple ✔ Google Search Indexable ☹ Bandwidth ☹ Interaction Email notification OL' WEB client ⇾ server
7. WEB2.0 BUZZ Evolution..
8. app ⇽ (json) server (app store download x 100 req) ☹ Simple ☹ Google Search Indexable ✔ Bandwidth ✔ Interaction Push notification + Email APP MANIA app ⇾ server
9. AGE ͠ ͡ I want everything and simple!
10. ✔ Simple ✔ Google Search Indexable ✔ Bandwidth ✔ Interaction ✔ Offline limited usage Push notification + Email FUTURE (MAYBE) frontend app ↔ backend
11. 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?
12. ANOTHER BOILERPLATE? NAH..
13. Random quote time "Simplicity is the ultimate sophistication" Leonardo Da Vinci
14. JACKPOT: BROWSER + SERVER + DB
15. 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..)
16. METEOR APP ARCHITECTURE
17. 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)
18. THE MINIMAL CHAT
19. < ! - - 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 >
20. / / 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 ( ' ' ) ; } } ) ;
21. HACKERCHAT (a more real world Meteor example) github.com/grigio/meteor-hackerchat
22. 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)
23. FINE Meteor Italia Meeting Torino, 7/11/2014 http://meteor-italia.github.io