CODEWITHSUNDEEP
ruby-on-railsember.js
kempchee
kempchee

Reputation: 470

Load Only Part of an Ember App at Once

I am building an ember app and it is starting to get large. Is there any way to do lazy loading of the ember files so that it does take 10+ seconds to load when the user first hits the site? For example since I have several logically separate modules as part of the site, I could load the modules as they are accessed. I am using ruby on rails and the ember-rails gem.

Upvotes: 1

Views: 159

Answers (2)

Renato Carvalho
Renato Carvalho

Reputation: 451

On this Keynote on Embercamp London 2016, @wycats and @tomdale talk about the plans for improving Ember with slicing and dicing of the app. They talk about loading only what it's needed for that particular route. This is going to be great. I think that's what you wanted :)

https://www.periscope.tv/w/1mrGmzPBvQqJy#

Upvotes: 1

Gagan Gami
Gagan Gami

Reputation: 10251

If you think about what Ember is actually doing to render that code, you can understand why it is slow. Suppose you're creating 2k view instances, and rendering 2k templates. Templates that for the most part are doing very little. Especially if you don't care about data binding.

For a first stab, let's stop rendering through templates. This code uses itemViewClass to render each item with a custom view instead of the view used internally by each.

// Use with {{each item in items itemViewClass=App.SpanView}}
App.SpanView = Em.View.extend({
  render: function(buffer) {
    buffer.push("<span>"+this.get('content')+"</span>\n");
  }
});

JSBin: http://jsbin.com/enapec/35/edit66

With render over-ridden, we need to interact with the render buffer ourselves.

Even faster would be getting rid of the view entirely. I think there are two ways to do this. You could create a custom view with a render method that loops over all the items, and pushes each element onto the buffer. I think given the previous example you can get that going yourself.

Another simple option is to use a helper. A dumb helper like this is more difficult to wire up for re-rendering when the list changes, but sometimes it is the right solution.

// Use with {{eachInSpan items}}
Em.Handlebars.registerBoundHelper('eachInSpan', function (items) {
  return (
    new Handlebars.SafeString(
      items.map(function (i) {
        return '<span>'+i+'</span>';
      })
    )
  );
});

Live JSBin: http://jsbin.com/enapec/34/edit

Lastly, you could do this in jQuery with didInsertElement and the afterRender queue. I don't recommend it though.

Ember.RenderBuffer gathers information regarding the a view and generates the final representation. Ember.RenderBuffer will generate HTML which can be pushed to the DOM.

FYI here is the RenderBuffer API

DEFINED IN

MODULE : Ember-views

I am also new bee but I got this from some resource. Thanks.

Upvotes: 1

Related Questions