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.

1. Best Practice Routing
in Meteor and beyond

2. (BLAZE) OPINIONATED
TALK AHEAD

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

7. Different platforms,
different challenges

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

18. Template.post
Template.post
Template.activities
Template.profile

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

26. https://github.com/kadirahq/flow-router

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