The Legend of Zelda: A {{link-to}} the past

This talk tries to demystify what happens under the covers when you click on a {{link-to}} helper in Ember. It attempts to dive a layer or two down in to what happens in the router when transitioning from one route to another.

The presentation has absolutely nothing to do with Zelda other than the title slide. I just got a chuckle every time I thought of the title. So I couldn't help myself.

For the best experience, start at slide #178. Once you reach the final slide, hold the left arrow key and flip back through every slide as fast as possible. I left a little surprise for those that came just for the Zelda reference.

Transcript

1. Game Over
2. Game Over
3. Game Over
4. Game Over
5. Game Over
6. Game Over
7. Game Over
8. Game Over
9. Game Over
10. Game Over
11. Game Over
12. Game Over
13. Game Over
14. Game Over
15. Game Over
16. Game Over
180. Aaron Chambers @grandazz github.com/achambers
181. github.com/ember-cli/ember-cli-deploy
183. {{link-to}} What does it ACTUALLY do?
184. GET /posts <a href="/posts">Go to posts</a>
185. ? {{#link-to “posts”}}Go to posts{{/link-to}}
187. WOW
188. // app/router.js Router.map(function() { this.resource('about', function() { this.route('faq'); }); this.resource('user', { path: '/users/:user_id'}, function() { this.route('profile'); }); });
189. // app/routes/user/profile.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); // app/routes/application.js export default Em.Route.extend({ actions: { willTransition: function(transition) { } } }); // app/routes/about.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/about/faq.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/user.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); /about/faq /users/1/profile
190. // app/routes/user/profile.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); // app/routes/application.js export default Em.Route.extend({ actions: { willTransition: function(transition) { } } }); // app/routes/about.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/about/faq.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/user.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); /about/faq /users/1/profile
191. // app/routes/user/profile.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); // app/routes/application.js export default Em.Route.extend({ actions: { willTransition: function(transition) { } } }); // app/routes/about.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/about/faq.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/user.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); /about/faq /users/1/profile
192. // app/routes/user/profile.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); // app/routes/application.js export default Em.Route.extend({ actions: { willTransition: function(transition) { } } }); // app/routes/about.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/about/faq.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/user.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); /about/faq /users/1/profile
193. // app/routes/user/profile.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); // app/routes/application.js export default Em.Route.extend({ actions: { willTransition: function(transition) { } } }); // app/routes/about.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/about/faq.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/user.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); /about/faq /users/1/profile
194. // app/routes/user/profile.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); // app/routes/application.js export default Em.Route.extend({ actions: { willTransition: function(transition) { } } }); // app/routes/about.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/about/faq.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/user.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); /about/faq /users/1/profile
195. // app/routes/user/profile.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); // app/routes/application.js export default Em.Route.extend({ actions: { willTransition: function(transition) { } } }); // app/routes/about.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/about/faq.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/user.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); /about/faq /users/1/profile
196. /about/faq {{#link-to “user.profile” currentUser}}User Profile{{/link-to}} User Profile
197. willTransition phase model resolution / validation phase sync exit / enter / setup phase
198. willTransition phase model resolution / validation phase sync exit / enter / setup phase
199. willTransition phase model resolution / validation phase sync exit / enter / setup phase
200. willTransition phase model resolution / validation phase sync exit / enter / setup phase
201. willTransition phase model resolution / validation phase sync exit / enter / setup phase
202. willTransition phase
203. // app/routes/user/profile.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); // app/routes/application.js export default Em.Route.extend({ actions: { willTransition: function(transition) { } } }); // app/routes/about.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/about/faq.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/user.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); /about/faq /users/1/profile willTransition phase model resolution / validation phase sync exit / enter / setup phase
204. // app/routes/user/profile.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); // app/routes/application.js export default Em.Route.extend({ actions: { willTransition: function(transition) { } } }); // app/routes/about.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/about/faq.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/user.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); /about/faq /users/1/profile willTransition phase model resolution / validation phase sync exit / enter / setup phase willTransition: function(transition) { }
205. // app/routes/user/profile.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); // app/routes/application.js export default Em.Route.extend({ actions: { willTransition: function(transition) { } } }); // app/routes/about.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/about/faq.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/user.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); /about/faq /users/1/profile willTransition phase model resolution / validation phase sync exit / enter / setup phase willTransition: function(transition) { }
206. // app/routes/user/profile.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); // app/routes/application.js export default Em.Route.extend({ actions: { willTransition: function(transition) { } } }); // app/routes/about.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/about/faq.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/user.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); /about/faq /users/1/profile willTransition phase model resolution / validation phase sync exit / enter / setup phase willTransition: function(transition) { }
207. model resolution / validation phase
208. // app/routes/user/profile.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); // app/routes/application.js export default Em.Route.extend({ actions: { willTransition: function(transition) { } } }); // app/routes/about.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/about/faq.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/user.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); /about/faq /users/1/profile willTransition phase model resolution / validation phase sync exit / enter / setup phase
209. // app/routes/user/profile.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); // app/routes/application.js export default Em.Route.extend({ actions: { willTransition: function(transition) { } } }); // app/routes/about.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/about/faq.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/user.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); /about/faq /users/1/profile willTransition phase model resolution / validation phase sync exit / enter / setup phase beforeModel: function() { },
210. // app/routes/user/profile.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); // app/routes/application.js export default Em.Route.extend({ actions: { willTransition: function(transition) { } } }); // app/routes/about.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/about/faq.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/user.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); /about/faq /users/1/profile willTransition phase model resolution / validation phase sync exit / enter / setup phase afterModel: function() { },
211. // app/routes/user/profile.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); // app/routes/application.js export default Em.Route.extend({ actions: { willTransition: function(transition) { } } }); // app/routes/about.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/about/faq.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/user.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); /about/faq /users/1/profile willTransition phase model resolution / validation phase sync exit / enter / setup phase beforeModel: function() { },
212. // app/routes/user/profile.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); // app/routes/application.js export default Em.Route.extend({ actions: { willTransition: function(transition) { } } }); // app/routes/about.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/about/faq.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/user.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); /about/faq /users/1/profile willTransition phase model resolution / validation phase sync exit / enter / setup phase model: function() { },
213. // app/routes/user/profile.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); // app/routes/application.js export default Em.Route.extend({ actions: { willTransition: function(transition) { } } }); // app/routes/about.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/about/faq.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/user.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); /about/faq /users/1/profile willTransition phase model resolution / validation phase afterModel: function() { }, sync exit / enter / setup phase
214. sync exit / enter / setup phase
215. // app/routes/user/profile.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); // app/routes/application.js export default Em.Route.extend({ actions: { willTransition: function(transition) { } } }); // app/routes/about.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/about/faq.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/user.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); /about/faq /users/1/profile willTransition phase model resolution / validation phase sync exit / enter / setup phase
216. // app/routes/user/profile.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); // app/routes/application.js export default Em.Route.extend({ actions: { willTransition: function(transition) { } } }); // app/routes/about.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/about/faq.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/user.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); /about/faq /users/1/profile willTransition phase model resolution / validation phase sync exit / enter / setup phase deactivate: function(transition) { },
217. // app/routes/user/profile.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); // app/routes/application.js export default Em.Route.extend({ actions: { willTransition: function(transition) { } } }); // app/routes/about.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/about/faq.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/user.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); /about/faq /users/1/profile willTransition phase model resolution / validation phase sync exit / enter / setup phase deactivate: function(transition) { },
218. // app/routes/user/profile.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); // app/routes/application.js export default Em.Route.extend({ actions: { willTransition: function(transition) { } } }); // app/routes/about.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/about/faq.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/user.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); /about/faq /users/1/profile willTransition phase model resolution / validation phase sync exit / enter / setup phase activate: function() { },
219. // app/routes/user/profile.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); // app/routes/application.js export default Em.Route.extend({ actions: { willTransition: function(transition) { } } }); // app/routes/about.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/about/faq.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/user.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); /about/faq /users/1/profile willTransition phase model resolution / validation phase sync exit / enter / setup phase setupController: function() { }
220. // app/routes/user/profile.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); // app/routes/application.js export default Em.Route.extend({ actions: { willTransition: function(transition) { } } }); // app/routes/about.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/about/faq.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/user.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); /about/faq /users/1/profile willTransition phase model resolution / validation phase sync exit / enter / setup phase activate: function() { },
221. // app/routes/user/profile.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); // app/routes/application.js export default Em.Route.extend({ actions: { willTransition: function(transition) { } } }); // app/routes/about.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/about/faq.js export default Em.Route.extend({ deactivate: function() { }, actions: { willTransition: function(transition) { } } }); // app/routes/user.js export default Em.Route.extend({ beforeModel: function() { }, model: function() { }, afterModel: function() { }, activate: function() { }, setupController: function() { } }); /about/faq /users/1/profile willTransition phase model resolution / validation phase sync exit / enter / setup phase setupController: function() { }
222. Transition Complete!
223. willTransition Hooks Resolved Models Deactivated Old Routes Activated New Routes /about/faq /users/1/profile /about/faq /users/1/profile willTransition beforeModel model afterModel deactivate activate setupController
224. willTransition Hooks Resolved Models Deactivated Old Routes Activated New Routes /about/faq /users/1/profile /about/faq /users/1/profile willTransition beforeModel model afterModel deactivate activate setupController
225. willTransition Hooks Resolved Models Deactivated Old Routes Activated New Routes /about/faq /users/1/profile /about/faq /users/1/profile willTransition beforeModel model afterModel deactivate activate setupController
226. willTransition Hooks Resolved Models Deactivated Old Routes Activated New Routes /about/faq /users/1/profile /about/faq /users/1/profile willTransition beforeModel model afterModel deactivate activate setupController
227. willTransition Hooks Resolved Models Deactivated Old Routes Activated New Routes /about/faq /users/1/profile /about/faq /users/1/profile willTransition beforeModel model afterModel deactivate activate setupController
228. Questions?
229. Aaron Chambers @grandazz github.com/achambers