Meteor.js

My talk given at Codeaholics.hk on Wednesday 8th August 2012.

Transcript

1. METEOR.JS 8th August 2012 - Codeaholics.hk @MatthewRudy
2. SOLR TAKEDA HOLMES
3. METEOR a javascript full stack framework compiles, combines, and distributes your JS, CSS, and HTML deploys on the fly to users without interrupting their session
4. LEARN ABOUT IT http://docs.meteor.com https://github.com/siuying/todomvc-meteor `meteor create --example leaderboard`
5. 7 PRINCIPLES marketing-style
6. #1 DATA ON THE WIRE no HTML rendered on the server JSON sent to the browser the browser renders templates
7. #2 ONE LANGUAGE All code is Javascript (or maybe coffeescript)
8. #3 DATABASE EVERYWHERE Client Data API mirrors the Server Database API the local data API looks just like Mongo
9. #4 LATENCY COMPENSATION All data operations take place in memory first The callback to the server is asynchronous What happens if it fails?
10. #5 FULL STACK REACTIVITY Every thing has a callback Templates re-render themselves automatically
11. #6 EMBRACE THE ECOSYSTEM Plug and Play Use Backbone or whatever
12. #7 SIMPLICITY = PRODUCTIVITY Clean and Simple APIs
13. WHAT’S THE REAL DEAL?
14. COLLECTIONS # define Items = new Meteor.Collection “items” # insert Items.insert {name: “giraffe”} # find Items.find {}, {sort: {name: 1}}
15. SESSIONS # get Session.get(“selected”) #set Session.set(“selected”, item._id) # check Session.equals(“selected”, this._id)
16. HANDLEBARS <template name=”list”> <h1>Items</h1> <ul> {{#each items}} <li>{{> item }}</li> {{/each}} </ul> </template>
17. TEMPLATES They automatically re-render when data changes!
18. TEMPLATES # {{> item }} <template name=”item”> <article class=”item”> {{name}} </article> </template>
19. HELPERS {{#if selected}}selected{{/if}} Template.item.selected = -> Session.equals(“selected”, this._id)
20. {{pluralize itemCount “item” “items”}} Template.list.itemCount = -> Items.find({}).count() Template.list.pluralize = (n, s, p) -> “#{n} #{if n == 1 then s else p}” HELPERS WITH ARGUMENTS
21. EVENTS Template.item.events = “click article”: -> Session.set(“selected”, this._id)
22. Item = new Meteor.collection “items” if Meteor.is_client Session.set(“selected”, null) if Meteor.is_server Secret = 123 CLIENT + SERVER IN THE SAME FILE
23. CLIENT + SERVER IN FOLDERS client/some.js server/some.js shared.js
24. PACKAGES Backbone - Backbone on Client + Server Bootstrap - Adds the Bootstrap CSS Coffeescript - Compiles .coffee files Handlebars - the default templating system
25. PACKAGES (AUTH) accounts - central API for accounts accounts-ui - log in and sign up accounts-facebook - plug into facebook accounts-weibo - plug into weibo insecure - remove!
26. HTML CONCATENATION <body> <h1>The header</h1> </body> <body> <nav class=”navbar navbar-fixed-top” /> </body>
27. TIME FOR A PLAY Live demo!
28. meteor create --example leaderboard
29. PROBLEMS there are quite a few
30. COMPLEXITY going beyond the basics things quickly get complex
31. NO NAMESPACE FOR TEMPLATES item_form item_list item_show content sidebar nav
32. AUTHENTICATION there is an “auth” branch but its hard to use
33. BETTER TOOLS MRT is a good idea but frequently breaks for me
34. BETTER DEBUG Coffee -> JS many JS files -> one JS file => Big confusion
35. ROUTING Just use Backbone.Router?
36. TESTING? An afterthought
37. BUT...
38. ITS COOL Stuff magically works
39. THE FUTURE It’s awesome as a deployment tool Better integration with Backbone and Angular
40. THANKS Any Questions?