Perceived performance of routes

How come parent routes don’t render until their child routes models have resolved?

It seems like in this fiddle the application’s header could render straight away, as soon as it is ready. As it would on a traditional website. But it doesn’t. This feels like it should be the default behaviour. It would certainly improve the perceived performance and reduce the ‘white screen’ problem, which is amplified by Ember’s large file size.

I’m sure there are technical reasons for it being like this. I’d love to know more about why. I dug into the Router source and Outlets, but I’m none the wiser.

It just depends on how “blocking” you are in the routes model hook. If you wait until each route’s model returns a promise you will block forever as you mentioned. In modern apps I fire off an ajax request async (not blocking) and return an empty array (or object). When that returns right away that means I paint right away -when the async code resolves I populate the array and let ember’s 2WDB update the view :slight_smile:

Thanks @toranb, but not helpful. Please re-read the post :slight_smile:

This example project shows it in action btw :smile: https://github.com/toranb/kanban-board-without-ember-data/blob/master/app/repositories/todo.js#L7

I’m aware of work-arounds. I’m interested in what the parent route is doing hanging around not rendering itself.

  1. Parent route resolves model… could render, but doesn’t
  2. Child route resolves model… renders.

Obviously I’m missing some knowledge about Ember’s internals. And I’d like to know more.

Why does adding blank loading templates appear to ‘flush’ the render buffer, ultimately achieving what I would expect to be the default behaviour?

@amk I don’t really know much about the decisions behind the way it works. I just want to clarify what you’re talking about.

Ember does what you expect when a loading template is defined, right? And you are suggesting that it work the same way without a loading template? What would you have Ember render in the {{outlet}} when there is no loading template?

Well, no - no it doesn’t do what I’d expect :slight_smile: Considering all the talk about perceived performance.

Does my jsfiddle make sense to you? The point is simple really… why doesn’t the route render ‘progressively’ by default as a traditional web page would. You have to include blank loading routes for the desired effect.

I genuinely don’t understand how nobody else seems to be talking about this

1 Like

https://github.com/emberjs/rfcs/pull/97