emberjs/ember.js — Issue #563: Idea: ProxyView - An Idea
Author: keithpitt
Created: 2012-03-05 23:50:14+00:00
State: open

Hi Guys,

So our current app, renders everything in Javascript. Every single element is rendered through Handlebars. This works great in Chrome and Firefox, on OSX, but things start to get pretty grim when we move over to IE. When the page loads, it stays white for 5-10 seconds, before the user starts to see _something_. I could put a "loading app" type screen there - but that kinda sucks. Why can't I just start showing some page chrome?

Now, there are things on the page that we could render on the server. Navigational elements, footer elements, forms, etc. The problem is, _some_ have dynamic behaviour. Maybe a click, or a small hover event. I could just jQuery these things, but I don't want to pull things out of the Ember run loop.

So I had an idea:

```html

...

```

And then:

```coffeescript
SomeElement = Em.ProxyView.extend
click: ->
...
mouseOver: ->
...
```

Some sort of object, that had no rendering, was just a proxy between a dom element, and the Ember event run loop stuff. I set out to write the proxy view object, and the result was this:

https://gist.github.com/25d4e061956bd8f0c464

I've been using this in our app, and we've gotten our load time down from 17 seconds to 3 seconds in IE. We don't render our entire app anymore. Our logic goes something like this:

1) If its a static element, render it on the server
2) If it has behaviour, use a ProxyView
3) If it has dynamic content, use an Em.View

This has been really successful for us. It means we can bind proxy views to other data in the site, and add dynamic behavour. I wanted to share this code