Best practice routing in Meteor.js and beyond
1 like1,172 views
The document discusses routing best practices in Meteor and other platforms. It describes how routing was not initially part of Meteor's core but packages like Iron Router and Flow Router were created to enable routing. Iron Router was designed for pre-Meteor 1.0 while Flow Router is designed for post-Meteor 1.0. It also compares routing approaches in other platforms like Rails, Django, and PHP. The document provides guidance on migrating from Iron Router to Flow Router and their differences in areas like subscriptions, route definitions, hooks, templates, and helpers.
![Route:
/apps/:appId/:section
Helper:
Templates['foo'].helpers({
"someData": function() {
var appId = Router.
current().params.appId;
return doSomething(appId);
}
});
When is the “someData”
helper run?
Whenever the route changes!
→ i.e. when :section changes
https://github.com/kadirahq/flow-router
Router.current() is evil](https://image.slidesharecdn.com/meteorbestpracticerouting1-151023080213-lva1-app6892/85/Best-practice-routing-in-Meteor-js-and-beyond-14-320.jpg)
![Router.onBeforeAction(function () {
console.log(“before action”);
});
Router.onAfterAction(function () {
console.log(“after action”);
});
FlowRouter.triggers.enter([function(context){
console.log(“before action”);
}]);
FlowRouter.triggers.exit([function(context){
console.log(“after action”);
}]);
Hooks](https://image.slidesharecdn.com/meteorbestpracticerouting1-151023080213-lva1-app6892/85/Best-practice-routing-in-Meteor-js-and-beyond-22-320.jpg)
Best practice routing in Meteor.js and beyond
- 1. Best Practice Routing in Meteor and beyond
- 3. One step back: Meteor History ● designed for single page apps ● routing is not part of core ● no guidelines or best practices
- 4. Iron Router ● the community steps in ● designed for Meteor < 1.X ● one-stop-shop for multi page apps: routing, subscriptions, rendering, layout manager https://github.com/iron-meteor/iron-router
- 5. Flow Router ● designed for Meteor > 1.X ● only routing! ● separate packages for rendering etc. https://github.com/kadirahq/flow-router
- 8. The role model: RAILS ● “core gem” of RAILS ● enforces the MVC pattern ● CRUD ● full stack approach http://guides.rubyonrails.org/routing.html
- 9. Python unchained: Django ● processes HTTP requests ● maps URL patterns to views (via functions) ● no pattern enforced https://docs.djangoproject.com/en/1.8/topics/http/urls/
- 10. Old to the new: PHP http://programmers.stackexchange.com/questions/122190/..
- 11. … is designed to emulate the familiar MVC pattern of frameworks like Ruby on Rails … MVC for Node? Meet sails.js
- 13. ● Meteor is not the best MVC platform (yet) ● client-side routing ● Model-View-Presenter pattern Think different http://blog.nodejitsu.com/scaling-isomorphic-javascript-code/
- 14. Route: /apps/:appId/:section Helper: Templates['foo'].helpers({ "someData": function() { var appId = Router. current().params.appId; return doSomething(appId); } }); When is the “someData” helper run? Whenever the route changes! → i.e. when :section changes https://github.com/kadirahq/flow-router Router.current() is evil
- 15. Iron Router - waitOn ● easy to understand and implement ● it works (magic) ● subscriptions on the route level ● blocks rendering http://iron-meteor.github.io/iron-router/#the-waiton-option
- 17. Template Level Subscriptions ● the place to manage subscriptions in Meteor > 1.X ● template lifetime == subscription lifetime ● templates are more reusable
- 19. Do I have to ... ● migrate my existing project to FlowRouter? ● refactor a lot of code if I decide to migrate? ● learn new concepts to use it? ● use FlowRouter for my next project? no yes no yes!
- 20. meteor add iron:router meteor add kadira:flow-router meteor add kadira:blaze-layout (meteor add kadira:react-layout) How to get started
- 21. Router.route('/', function () { this.layout('layout'); this.render('MyTemplate'); }); FlowRouter.route('/, { action: function() { BlazeLayout.render("layout", {main: "MyTemplate"}); } }); Route definitions
- 22. Router.onBeforeAction(function () { console.log(“before action”); }); Router.onAfterAction(function () { console.log(“after action”); }); FlowRouter.triggers.enter([function(context){ console.log(“before action”); }]); FlowRouter.triggers.exit([function(context){ console.log(“after action”); }]); Hooks
- 23. Template.blogPost.onCreated(function() { var self = this; self.autorun(function() { var postId = FlowRouter.getParam('postId'); self.subscribe('singlePost', postId); }); }); https://kadira.io/academy/meteor-routing-guide Breaking changes: subscriptions
- 24. Template.blogPost.helpers({ post: function() { var postId = FlowRouter.getParam('postId'); var post = Posts.findOne({_id: postId}) || {}; return post; } }); https://kadira.io/academy/meteor-routing-guide Helpers
- 25. <template name="blogPost"> <a href="/">Back</a> {{#if Template.subscriptionsReady}} {{#with post}} <h3>{{title}}</h3> <p>{{content}}</p> {{/with}} {{else}} <p>Loading...</p> {{/if}} </template> https://kadira.io/academy/meteor-routing-guide Templates
- 27. There is more to come https://github.com/kadirahq/flow-router
- 28. Do it yourself today https://github.com/meteorhacks/meteor-inject-initial meteor add meteorhacks:inject-initial
- 30. faburem Fabian Kromer @faburem