Try as I might, I can’t wrap my head around Ember. I am new to MVC frameworks but Angular is easy enough that I was able to learn it quickly. If anyone has experience with both frameworks and perhaps AngularUI’s UI Router, then maybe they can help me to finally understand Ember.
1.) Behind the scenes
With Angular, I pretty much put all of my logic in factories/services. These services talk to one another via dependency injection, which is as easy as passing factoryFoo as an argument to factoryBar.
With Ember, I am not sure where to put my logic. What belongs in the route? What belongs in controllers? Where do I put my constructors, my object instances, and my general services?
2.) The “model”
There isn’t any rigid concept of a model in Angular. I can toss around data in my services and then pick and choose which data I want to show in the view.
In Ember, it seems that the model just describes a record. Records are stored on a remote server or maybe locally in localStorage. However, this record is just a simple JSON object. What if my record is actually a complicated object with properties that include arrays and functions? What if my record has a function that periodically modifies another property of that record, all while in the background?
3.) Routing
In Angular, I can use UI Router’s resolve function (or I can create my own function) in order to pick data from factories/services to pass to my controller.
Is the model hook in the route the equivalent of this? The only examples I’ve seen either retrieve records from the store or the model (['red, 'yellow', 'blue']) is explicitly typed out and returned to the hook. What if I’m not using Ember Data and my “record” exists in some other file? Is it even possible to stick a model/record in some random factory outside of Ember Data?
4.) Ember conventions and modularity
With Angular, I can organize my JavaScript in to as many or few services as I want. Any of these services can be injected into the controller.
In Ember, it seems like all my views need a controller. All of my controllers need a route. How do I create the backend network of factories that do all the dirty work? These should just be pieces of JavaScript that aren’t bound to a route/model/controller/template. Or do I somehow need to figure out how to organize all of my logic into routes and controllers?
5.) Constructors
Here is an example in Angular, which is just plain JavaScript:
function Person(first, last) {
this.first = first;
this.last = last;
this.pets = [];
this.addPet = new PetHelper({type: "dog", name: "Underdog"});
}
var john = new Person("John", "Smith);
Ember seems a bit more complicated - here is how I think it should look:
var Person = Ember.Object.extend({
first: null,
last: null,
init: function () {
this._super();
this.set("pets", []);
this.set("addPet", PetHelper.create({type: "dog", name: "Underdog"}));
}
});
var john = Person.create({first: "John", last: "Smith"});
Assuming this is correct, I am now back at problem #1 - where does Ember.Object.create() go? In Angular, I would just put this in a factory. When I do ember help generate via ember-cli, I don’t see an option to generate a file to contain one-off pieces of JavaScript.
6.) Audience/project goals
My goal is to just make offline applications using web technologies. There is no server component to my applications. Any online functionality is just limited to HTTP requests using a service’s API or TCP socket/Websocket requests.
The Ember guides seem to assume that I am building something like a forum where I will be storing records on a remote server. The only persistence I need is saving things like user preferences locally. My model really shouldn’t have to use localStorage at all - if I’m using HTTP requests or Websockets, then my model/records can just exist in memory.
Is Ember the wrong framework for me if I just want to create fully offline web applications?
7.) The big picture
Angular:
Services: Most of your JavaScript will go here. You can also create your “model” here, like an array of objects. You will tell your router to iterate over this array and get a specific object, which it will pass to the controller.
Controllers: These bridge your services and templates. A controller is just a way for your services and your templates to communicate - it’s as simple as that. You can also put some template logic in your controller if you wish.
Templates: Nothing to understand here - this is just the UI. Some parts of your template will be backed by one or more controllers, that’s all you need to know.
Ember: I don’t really see the big picture in terms of all pieces of an Ember application (templates/views/controllers/routes/models/adapters/Ember Data). I know that it’s somewhat similar to Angular, but more opinionated. I mostly just don’t get what belongs in a route vs. a controller, I’m not sure what the equivalent of Angular services are.
Hopefully someone has the time to address at least a few of these concerns. I tried to keep it as short and simple as possible. There isn’t a single guide or blog post that explains Ember concepts for those who are comfortable with Angular, so hopefully this post can serve as a future reference for people like me who want to give Ember a shot but just can’t wrap their head around it.