Interrested in using Ember, need insight

1

Hello everyone,

First off I apologize if this comes accros as being a dull set of questions but I figured I was better off asking people with experience before diving into documentations. It might turn out that my usage case might not work completely or would need rethinking.

I’m working on upgrading one of our webapps. Some aspects could benifit greatly from using Ember so here’s a quick description of what I’m looking at:

Idealy I would like to have a single page load and then any extra content displayed would be dynamically loaded from the servers via ajax calls. The application contains dozens of different pages with different content for different uses. The complexity of each page varies, and to this will be added a number of “modules” that have their own set of pages within the application layout (partial view renders). Modules are loaded (or removed) by the administrator during runtime so they do not exist within the core application.

The web app server side scripting uses an MVC framework that will handle all user rights/roles and content logic (filtering,scoping,etc.).

With this in mind here are my questions:

  1. From reading documentation and checking videos, it seems like all HTML for the webapplication needs to be loaded initialy. I have found that you can use JQuery .ajax() along with Ember.TEMPLATES but is that the only option? I’d obviously be interrested in loading HTML content (or in this case “text/x-handlebars” content) on link click or preloading a single depth of links.

  2. If that is the only option then is it also possible to dynamically load ember code along with these templates? or does all application javascript have to reside in the initial load? An example would be if I used ember for the page layout. Could I dynamicaly load nested ember scripts (with page loads inside this layout) that could interact with the layout level features. I haven’t looked into specifics but if I could load ember scripts within the main ember application I would like to know if events could bubble up and possibly down the nested scripts.

  3. The server side framework comes with a number of widgets that I plan on using. One such example is pagination. Pagination reloads a content dynamically via ajax calls (either on tables or a list of elements). With this particular example navigating through pages has cons in regards to going “back” to previous pages or to the correct page in the pagination if you accessed another page afterwards. I don’t think there’s an easy solution here other than ditching this completely for an ember equivalent but this removes a lot of inbuilt filtering and sorting options the framwork provides.

All in all I’m trying to weigh pros and cons of simply making due with JQuery only or going all the way and making something fully fledged with ember.

1 Like
2

Welcome to Ember :slight_smile:

You might wanna read this post: Ember-Light: A Build For Migrating Page-based Apps :: madhatted.com

But I have a hard time seeing how you’re going to be able to gradually convert your app to Ember. Since you seem prepared to do an extra effort, is there any reason why you choose not to build an Ember app from scratch? It might be a lot easier, since it’s the best way to let the framework handle a lot of things for you.

3

We are using a full ember build whilst converting our app. Our solution is to simply create an Ember app with a different rootElement:

App = Ember.Application.create({
  rootElement: '#application'
});

And then defer application readiness, which will disable Ember bootstrapping until you specify that the app should load. This means you can enable your app on a per-page basis. The code for this bit is:

App.deferReadiness();

When we have a page that we want to be controlled by Ember, we redirect to that model immediately:

App.IndexRoute = Ember.Route.extend({
  redirect: function () {
    this.transitionTo('mypage');
  }
});

App.advanceReadiness();

As for paging, you can call queries using Ember Data by using the find method and passing an object. We’re using that in conjunction with Ember List View to create a lazily loaded list. So, all of this is possible.

It is recommended to load everything initially because the content will be cached and your app will load faster on subsequent requests of the app. I think you could load content lazily using require.js or AMD (I’m fairly sure that these work, but am unfamiliar with the process of doing so).

4

Thanks guys those links and info were what I was looking for.

This is a rewrite so we could very well go with ember fully from the start. I however have a little apprehension as to the initial loading of full content as the application would be pretty heavy.

My other issue had to do with additional modules. If I lazy load the content for those can they have their own modular ember code? And can they interract with the main application?