6 ms·

Is there anyone out there who has written non-trivial applications (i.e. a _lot more_ than the quintessential todo app) in both, AngularJS & EmberJS and can off

Is there anyone out there who has written non-trivial applications (i.e. a _lot more_ than the quintessential todo app) in both, AngularJS & EmberJS and can offer a non-biased opinion? Some time ago, I started off with AngularJS, I liked what I saw (except the dirty checking part) and started building my product / startup with it. I don't have the time to stop all dev and experiment with EmberJS, but would like to know if it's really better or if it's to-mah-toh vs tom-ae-toe. I mean, how hard could it be to have an AngularJS port where the dirty-checking part is removed and Ember-style getters & setters are introduced (thus removing the only efficiency-related issue that I ever came across). On the other hand, what's the equivalent for "directives" in EmberJS? It's singularly, the most powerful concept that I've come across in AngularJS. Btw, AngularJS has an accepted way to define models -- inside "factories" (I know they just sound like Java-esque hell, but they're really simple, once you get to understand them).

ldn_tech_exec1 13y ago
we've built a rock solid architecture for complex AngularJS apps here: brandid.github.io/parse-angular-demo/
camus 13y ago
there is no directives in EmberJS , you could use any DOM templating engine ( =/= string template engine like Mustach ) with it I guess to get something similar to directives.
- kapv89 13y ago
  Oh please, "template-engines-thingies" don't even come close to the concept of directives
- ctvo 13y ago
  No, I wouldn't say that's something similar to directives.
- saurabhnanda 13y ago
  You don't understand the power of directive till you actually use them.
pico303 13y ago
Let me say to start that I'm no JavaScript expert. I don't write JavaScript full-time (we're a small company; I don't do anything "full"-time), though I do like the language and what it can do for web-based client-side programming. I've written non-trivial apps for the same backend, first in Ember, then in Angular. The Ember app is the consumer-driven frontend, while Angular runs the administrative interface. It wasn't my intention to use two different frameworks, but we started the Ember one when Angular was really just starting to gain traction. A few months later on the advice of a friend, I thought I'd give it a shot. The biggest problem between the two isn't really anything about the frameworks. They're very different beasts, and they both have their strengths and weaknesses. The noticable difference out the gate is the documentation. Ember is a mess. It's older, and things keep changing, so documentation gets out of date. Also most of the tutorials and cookbooks online are all for older versions, and that can be very confusing when you're starting out. I personally find Ember's patterns to be confusing at times, but I also have this hunch that there should be a point I get it and it will all make sense. For example, there's controller, which should manage representations of your models for UIs, and there's views, which manage events in your templates. Right now that's where I always get lost. I have no idea where to put anything. When you click on a button, is it the controller or the view that handles it? The answer appears to be "yes, depending...". I think this confusion comes from Ember's philosophy: it's trying to be a desktop-like UI kit for web development. That works 80% of the time, and the other 20% introduces "fudge factors" like this.get and this.set. There's also too much magic happening in Ember, which makes it difficult to learn. Things happen based on the names of objects and templates, and then you hook into this magic to override certain steps. Since I don't spend all my time in Ember, when I go back to look at code I've written previously, I'm often lost at where something was updated or triggered. Angular on the other hand is very straightforward as to where things go. For example, people mention directives. You start off by hooking events and values into your templates in the controllers. After a while, you'll start migrating that code out of controllers into directives, so you can reuse it in many different templates. As your application grows, your templates become filled with reusable directives and your controllers get simpler and simpler. It's a very nice philosophy. Also, Angular doesn't buck the web workflow as much as Ember. Like I said, Ember is trying to be a desktop-like UI for the web, while Angular feels more like you're just transferring your older, do-it-on-the-server templates to JavaScript. This gives you a lot more flexibility with UIs and animation, but it doesn't completely break the browser, which is why I think Angular doesn't have as many edge cases to deal with as Ember. On the downside, Angular has this initial easy learning curve, which gets steep later. The basic stuff is easy, and you'll have a web site up in a day or so, vs. a couple weeks to figure out the basics of Ember and get something meaningful online with that. However, Angular quickly gets complicated when you want to dive into complex directives and some of the more esoteric aspects of the framework. For support, I haven't been hugely happy with Angular. There are more people using it, and there are more blog articles and tutorials out there on it, as well as lots of plugins to add features (like websockets and local storage support). That's great. But the community itself doesn't feel as helpful. Most of my posts to the mailing list went unanswered. I haven't tried Angular's IRC, so maybe that's where I should be. The Ember folks on IRC are hugely helpful and very friendly. There is a bit of "our way is the best way", but I think that comes from understanding Ember and everything you can do with it and knowing it's probably a more powerful framework in the end. However, the discussion forums are horrible. They're using Discourse, which was written in Ember, and it's nearly impossible to find answers to anything previously posted. Because it's in Ember it's all JavaScript, so nothing is indexed on Google, and the built-in search is awful. I would recommend if you're starting out and you don't have super, super strong JavaScript skills, you should go with Angular. You'll feel more productive quickly. Ember will be frustrating. If you're an advanced JS developer and you've built desktop UIs, maybe Ember is more your cup fo tea. Also take a look at http://yeoman.io http://yeoman.io. It's by far the easiest way to get an Angular "build" system going. Yeoman supports Ember too, but like everything else with Ember, it's a bit tricky (for example, updates to the templates will crash grunt server if there's an error).
Kiro 13y ago
What problems did you encounter with dirty checking?
- saurabhnanda 13y ago
  The way AngularJS works is that it allows you to use plain ol' JS objects all over the code and allows you to implicitly/explicitly set-up "watches" on these JS objects. Whenever the value of the object changes, your app is given a chance to react to it. When you use these objects in your view, the "reaction" is implicit, i.e. the view gets automagically updated. However, the process of checking whether JS objects have changed, is not very pretty. AngularJS maintains a copy of every object in the "scope". After every "digest cycle", Angular compares the copy of each object with the previous known state/value and figures out what changed. (I'm sure internally they're using really tight loops & optimized code to make this fast). A "digest cycle" is triggered after every event that may possibley change the state/value of the tracked JS objects. Eg. a keypress, an HTTP event, a click, etc. When you have several-thousand bindings, each digest cycle gets computationally very intensive and the app starts to feel sluggish. Typing a key in a form-field and waiting for it to appear on the screen, can also lag. Please note: this happens if you have several-thousand bindings on one page -- something that is actively discouraged in the Angular world. In my case, I was building a dashboard app, where the nature of the app required me to show several thousand data-points with the option of "zooming-in" or "zooming-out" from data points (not in the visual sense). Later, I realized that this limitation is easily overcome if you stop using the implicit two-way data bindings provided by Angular for such cases. If you know that those JS objects aren't really going to change with every digest cycle, it's best to not use {{ var }} to display them in your views and come-up with a custom directive that does NOT set-up a watcher on the variable. The downside is that you have to manually update your views whenever the underlying data does actually change -- not very different from how EmberJS does it.
  - steveklabnik 13y ago
    Thank you for this explanation. I didn't quite 100% grok how it worked, and had heard there was some kind of limitation around it, but didn't know the details. This was very clear.

ldn_tech_exec1 13y ago

we've built a rock solid architecture for complex AngularJS apps here: brandid.github.io/parse-angular-demo/

camus 13y ago

there is no directives in EmberJS , you could use any DOM templating engine ( =/= string template engine like Mustach ) with it I guess to get something similar to directives.

kapv89 13y ago
Oh please, "template-engines-thingies" don't even come close to the concept of directives
ctvo 13y ago
No, I wouldn't say that's something similar to directives.
saurabhnanda 13y ago
You don't understand the power of directive till you actually use them.

pico303 13y ago

Let me say to start that I'm no JavaScript expert. I don't write JavaScript full-time (we're a small company; I don't do anything "full"-time), though I do like the language and what it can do for web-based client-side programming. I've written non-trivial apps for the same backend, first in Ember, then in Angular. The Ember app is the consumer-driven frontend, while Angular runs the administrative interface. It wasn't my intention to use two different frameworks, but we started the Ember one when Angular was really just starting to gain traction. A few months later on the advice of a friend, I thought I'd give it a shot. The biggest problem between the two isn't really anything about the frameworks. They're very different beasts, and they both have their strengths and weaknesses. The noticable difference out the gate is the documentation. Ember is a mess. It's older, and things keep changing, so documentation gets out of date. Also most of the tutorials and cookbooks online are all for older versions, and that can be very confusing when you're starting out. I personally find Ember's patterns to be confusing at times, but I also have this hunch that there should be a point I get it and it will all make sense. For example, there's controller, which should manage representations of your models for UIs, and there's views, which manage events in your templates. Right now that's where I always get lost. I have no idea where to put anything. When you click on a button, is it the controller or the view that handles it? The answer appears to be "yes, depending...". I think this confusion comes from Ember's philosophy: it's trying to be a desktop-like UI kit for web development. That works 80% of the time, and the other 20% introduces "fudge factors" like this.get and this.set. There's also too much magic happening in Ember, which makes it difficult to learn. Things happen based on the names of objects and templates, and then you hook into this magic to override certain steps. Since I don't spend all my time in Ember, when I go back to look at code I've written previously, I'm often lost at where something was updated or triggered. Angular on the other hand is very straightforward as to where things go. For example, people mention directives. You start off by hooking events and values into your templates in the controllers. After a while, you'll start migrating that code out of controllers into directives, so you can reuse it in many different templates. As your application grows, your templates become filled with reusable directives and your controllers get simpler and simpler. It's a very nice philosophy. Also, Angular doesn't buck the web workflow as much as Ember. Like I said, Ember is trying to be a desktop-like UI for the web, while Angular feels more like you're just transferring your older, do-it-on-the-server templates to JavaScript. This gives you a lot more flexibility with UIs and animation, but it doesn't completely break the browser, which is why I think Angular doesn't have as many edge cases to deal with as Ember. On the downside, Angular has this initial easy learning curve, which gets steep later. The basic stuff is easy, and you'll have a web site up in a day or so, vs. a couple weeks to figure out the basics of Ember and get something meaningful online with that. However, Angular quickly gets complicated when you want to dive into complex directives and some of the more esoteric aspects of the framework. For support, I haven't been hugely happy with Angular. There are more people using it, and there are more blog articles and tutorials out there on it, as well as lots of plugins to add features (like websockets and local storage support). That's great. But the community itself doesn't feel as helpful. Most of my posts to the mailing list went unanswered. I haven't tried Angular's IRC, so maybe that's where I should be. The Ember folks on IRC are hugely helpful and very friendly. There is a bit of "our way is the best way", but I think that comes from understanding Ember and everything you can do with it and knowing it's probably a more powerful framework in the end. However, the discussion forums are horrible. They're using Discourse, which was written in Ember, and it's nearly impossible to find answers to anything previously posted. Because it's in Ember it's all JavaScript, so nothing is indexed on Google, and the built-in search is awful. I would recommend if you're starting out and you don't have super, super strong JavaScript skills, you should go with Angular. You'll feel more productive quickly. Ember will be frustrating. If you're an advanced JS developer and you've built desktop UIs, maybe Ember is more your cup fo tea. Also take a look at http://yeoman.io http://yeoman.io. It's by far the easiest way to get an Angular "build" system going. Yeoman supports Ember too, but like everything else with Ember, it's a bit tricky (for example, updates to the templates will crash grunt server if there's an error).

Kiro 13y ago

What problems did you encounter with dirty checking?

saurabhnanda 13y ago
The way AngularJS works is that it allows you to use plain ol' JS objects all over the code and allows you to implicitly/explicitly set-up "watches" on these JS objects. Whenever the value of the object changes, your app is given a chance to react to it. When you use these objects in your view, the "reaction" is implicit, i.e. the view gets automagically updated. However, the process of checking whether JS objects have changed, is not very pretty. AngularJS maintains a copy of every object in the "scope". After every "digest cycle", Angular compares the copy of each object with the previous known state/value and figures out what changed. (I'm sure internally they're using really tight loops & optimized code to make this fast). A "digest cycle" is triggered after every event that may possibley change the state/value of the tracked JS objects. Eg. a keypress, an HTTP event, a click, etc. When you have several-thousand bindings, each digest cycle gets computationally very intensive and the app starts to feel sluggish. Typing a key in a form-field and waiting for it to appear on the screen, can also lag. Please note: this happens if you have several-thousand bindings on one page -- something that is actively discouraged in the Angular world. In my case, I was building a dashboard app, where the nature of the app required me to show several thousand data-points with the option of "zooming-in" or "zooming-out" from data points (not in the visual sense). Later, I realized that this limitation is easily overcome if you stop using the implicit two-way data bindings provided by Angular for such cases. If you know that those JS objects aren't really going to change with every digest cycle, it's best to not use {{ var }} to display them in your views and come-up with a custom directive that does NOT set-up a watcher on the variable. The downside is that you have to manually update your views whenever the underlying data does actually change -- not very different from how EmberJS does it.
- steveklabnik 13y ago
  Thank you for this explanation. I didn't quite 100% grok how it worked, and had heard there was some kind of limitation around it, but didn't know the details. This was very clear.