Meteor intro talk

Code not included - will post the GitHub repo later.

Transcript

1. Meteor Like Django, had it been written today Udi h Bauman @dibau_naum_h
2. Orientation Meteor is a full-stack Web framework, written in JavaScript Like Django, it lets you focus on your app, by providing the stuff in the checklist you need in any web app Unlike Django, its checklist is appropriate for 2013
3. Meteor's mission Web development sucks. Let's fix this.
4. Let's see some code
5. What did we see here?
6. Meteor server & commands • create • add • <run> • deploy
7. Meteor server & commands • create • add • <run> • deploy • reset • remove • mongo • bundle • list Some more:
8. What's running underneath?
9. What's running underneath? Result of ps: • Node.js running Meteor • Node.js running our app • MongoDB running our database
10. Templated HTML templates have model, injected in JS helpers
11. JS event handlers
12. Database • On the server (MongoDB) • On the client (MiniMongo)
13. Everything is
14. Reactive • change source & everything updates • change data & everything updates • changes are broadcasted to all clients
15. Concepts 1. Local synchronized cache 2. As a result: Real-time collaboration 3. Reactive 4. MVVM (more about it later)
16. Let's see some more code
17. What did we see here?
18. MVVM Clean & effective separation of concerns: • Model • View • View-State • View-Model • Events
19. View-State Stored in the Session Modifies templates "behavior"
20. View-Model The client model is a View-Model contains a subset of the data, according the View-State Updating the View-Model also updates the database
21. Event handlers Change the View-State & View-Model
23. No line of backend code
24. How did this work? By default, meteor uses a package called autopublishing, which ensures full data synchronization This meant that any model change in the client is broadcasted to the server & from it to all other clients
25. Manual publish Meteor.publish("Companies", function() { return companies.find({}, {fields: {name: 1}}); }); Meteor.publish("Developers", function(company_id) { return companies.find({_id: company_id}); });
26. Manual subscribe Meteor.autosubscribe(function() { Meteor.subscribe( "Developers", Session.get("current_company") ); });
27. Gotta have some server code? // on server: Meteor.methods({ cleanup: function() { companies.find({developers: null}).drop(); return "Empty companies removed."; } ); // on client: Meteor.call("cleanup", function(error, result) { alert(result); });
28. Pluggable apps? $ meteor list You can also turn regular npm modules into Meteor smart packages
29. Real life
30. Change to real-life app • 3 files • 1 JS file • autopublishing • no security • meteor hosting • client, server & public folders • extract models & scripts per template • publish & subscribe • allow layer, accounts • bundle & run Node
31. Short comparison to Django • Server generated templates • SQL DB on server • API to expose data • Pluggable apps • Reactive templates • NoSQL DB on both client & server • Synchronized data • Smart packages & manager
32. Comparison to Node/Express? Meteor uses fibers, to simplify code - looks like synchronous code Meteor offers a complete web framework, letting you focus only on your app specifics Meteor uses its own package manager, & not benefiting directly from the npm
33. So where's the catch? Very young (v0.54) Limited connectivity (API, non-browser clients) Performance with heavy DB thru-put Own eco-system (not NPM)
34. Want to learn more?
35. See the examples meteor create --example todos meteor create --example leaderboard meteor create --example parties meteor create --example wordplay
36. Read the book
37. Questions?