AngularJS vs EmberJS Notes

Just watched a video from Norwegian Developers Conference, “EmberJS vs AngularJS” and it’s a code battle between two developers (one of whom is the lead developer of EmberJS) demonstrating the basics of each framework. The AngularJS code wasn’t as good as it could have been.

Below are my notes, mostly noting the basics of the frameworks and their philosophical differences.

AngularJS vs EmberJS Notes

Why use JavaScript frameworks? There’s latency on requests, separation of presentation from JSON requests.

Why not use jQuery? Wiring up lots of events with DOM and AJAXY requests makes for messy untestable code.

Emberjs has a starter kit, includes ember and handlebars templates. Dynamic values wrapped in curly braces (for handlebars templates). Live updates done using dynamic text field bound to other variable.

Angular uses the DOM, using tags and attributes rather than custom tenplating syntax. Use a model for data binding, specify variable name in ng-model.

In ember there is a difference between dynamic tags and static tags. They’re still html tags.

Ember makes you think about urls up front. What really makes a web developer is when you care a lot about urls. Setup a router with url end points, uses hash links.

Handlebars templates can be named by setting the id. Same with Angular inline templates.

Ember uses ‘outlet’ in templates, similar to how Angular uses transclusion in directives.

Angular scans the entire DOM.

Module function is used for creating modules, apps can be a collection of modules. Uses dependency injection. Use config function to inject a route provider.

Router needs a url, a template or template url, and a controller.

Ember has outlet for recursive templates. Scope and transclusion in Angular can also be inherited. You would use a directive for nested templates.

Directive created for example of list of blog posts. Restricted to element, set up a template. The restrict property sets the type of DOM element to use for the directive. You can setup a controller for it. There is no url attached to it.

Example using node endpoint. In ember, series of nested templates, each template backed by a model of some kind.

Ember knows how to deal with Promises, useful for jQuery getJSON.

Angular has http provider for getting JSON from APIs. Use get and specify success callback function.

Angular scope works between the controller and template.

Angular provides filters for displaying variables in templates. There is a currency filter included by default. Also includes date time formatting filter. Emberjs example had to use extra currency library, no filters built in. However you can define helper functions that can be called in handlebars templates.

Using two rows for a model in ember. In Angular you would use a custom directive, template can’t handle it.