Lessons from a year in JavaScript —AngularJS vs EmberJS
Two heavy weight Javascript frameworks out there these days are are AngularJS and Ember. While AngularJS has obviously been superseded by Angular 2 (4 now or just Angular), it still has its place in some projects. Ember and Angular have a few similarities. Over the past year I have learnt about them both and this article looks at some of the technical differences between the two from a high level.
But first. It’s important for the next paragraph to introduce one similarity. Both frameworks include two-way data binding. This is useful because it means that if the UI is updated the model will update as well. Similarly, if the model updates the UI will update with it. It means that the state of your view and the controller are the same.
However, the implementations of the two-way data binding are a bit different. Angular uses a process of Dirty Checking. This works by remembering the old and new values and comparing them in a snapshot known as the $digest Loop. When it does this check Angular will check the entire scope. If any values on the $scope have changed it will force every variable to be reassigned as well. Dirty checking will cause performance issues when you have a large amount of scope bindings (~2000) because dirty checking scans the entire scope for changes. While this is not a problem for small or medium apps it could be an issue for larger ones. Ember however, uses observers. Ember will only re-render changed values. Performance wise it’ll mean that in larger apps Ember will perform better.
Ember is very strict in how a developer should set up and create their app. Although this might only be true if you if you are using Ember CLI. But by enforcing such a tight structure, it leaves the developer with little freedom on how to structure their app. This can be good because it enforces a standard which will minimize bugs occurring. But bad if the developer wants freedom in how the application should be structured. This is what Angular offers. Angular will allow you to include all controllers in a single file or split them up. However, this can be a problem because without a standard, developers might be unsure on how files should be structured. For example, Angular has no standard model class like in Ember. I don’t know if there is a standard way a model should look which may cause confusion when looking at examples. Thus leading to bad practices.
Finally, templating is done differently in both frameworks. Angular uses HTML templates and extends on them using directives such as ng-if. Ember on the other hand uses Handlebar templates. Using an entire library might increase the file sizes of Ember projects. But developers, like me, might prefer handlebars. At the end of the day this comes down to personal preference. I personally prefer handlebars because I think that directives make the HTML messy and harder to read.
To conclude, there are obviously loads more differences between these two frameworks. This is just a high level overview. Ember and Angular are quite different in their development opinions. But both of the are great and to be honest I am totally amazed by what they are capable of!
