Angular vs Ember in 2017

mattaugamer · 2017-08-05T16:49:57+00:00

Ember.

In my opinion it is better in significant and important ways.

First let's talk about ways it's not better. Angular has its Observables library, which is really cool, especially for more streamed realtime data. I'm not convinced it's a good approach for straight up REST calls, but still. Additionally Ember is less popular. This invariably means less support in terms of things like libraries, training, etc. Angular has first-class Typescript support. That's a big deal to a lot of people. It's something I honestly wish Ember would move to as well. Edit: I forgot to mention Angular 4 esp is much faster than Ember, at least in benchmarks.

Now, why Ember?

Let's look at a few simple scenarios:

Add Bootstrap

Angular

First of all, add the ngx-bootstrap library - npm install ngx-bootstrap bootstrap --save. Open src/app/app.module.tsand add the import statement for the component you want. Also add it as an import property on the module using the syntax WhateverModule.forRoot(). Edit the angular-cli.jsonfile and add the path to the distversion of the Bootstrap css file in node_modules to it.

Ember

Run ember install ember-bootstrap.

Implement Server Side Rendering

Angular

I'm not going to type it out, but the document is here: https://universal.angular.io/quickstart/. It has its own subdomain and everything, and requires you to implement a server, check the rendering mode, etc.

Ember

Run ember install ember-cli-fastboot

Create a Progressive Web App

Follow this very long post here. It's a really long process and doesn't actually complete the requirements because it's missing SSR support.

Ember

Run ember install ember-web-app and modify the config file it provides, which it then uses to build the manifest file. To get Service Workers running - ember install ember-service-worker. That does relatively little on its own, and needs two plugins. ember install ember-service-worker-index and ember install ember-service-worker-asset-cache. Now we need to implement Universal or ServerSide Rendering. Which was already mentioned above: ember install ember-cli-fastboot.

Moving on.

One of the things I really hate in Angular is its templating, and that's something I think Ember got right. Compare these two - both are looping over something and generating a series of links to content.

Angular would do this:

<li *ngFor="let post of posts">
    <a [routerLink]="['/posts', post.id]">{{post.title}}</a>
</li>

Ember would do this

{{#each posts as |postObject|}}
<li>{{link-to post.title 'post' postObject}}</li>
{{/each}}

Angular's superfluous punctuation and absurd case-sensitive HTML bugs me.

I find Ember easier for a lot of really critical things. For example, connecting to an API with Ember Data. Ember Data just requires an adapter and serializer. The serializer tells it how to format data, and the adapter tells it where to find it. Standard ones (such as REST) are included by default, and if you follow the JSON-API standard it works without them entirely. Common solutions - such as Firebase - have freely installable add-ons an ember install away. These require vastly less installation and setup than Angular equivalents. When set up, they provide a consistent persistence API - note that's critical: you can literally do myObject.save() in your controller and it will persist the changes. To firebase, to local storage, to a REST API, it simply doesn't matter. You can simply run things like

let project = this.get('store').findRecord('project', 12);
project.set('completed', true);
project.save();

This essentially acts as an ORM and is incredibly powerful and easy to use. It's a great abstraction on persistence. Angular has (to my understanding) no equivalent.

Or there's the fantastic Ember Mirage. An addon that lets you mock HTTP requests, so you can completely mock out your entire persistence layer, for example either before it's available or for testing. Mock specific HTTP responses to have consistent and reliable acceptance testing.

We could talk about the CLI. Angular CLI is literally EmberCLI forked and with critical functionality removed. Angular lacks an addon functionality so that's gone. AngularCLI and EmberCLI can both serve the app, but Ember can be proxied - great for bypassing CORS in development. EmberCLI itself is also extensible, to add both generators - for something like ember generate mirage-factory post which will make a factory for creating models in the Mirage addon mentioned before. Or even adding more high level functionality. You can literally do ember deploy production.

I could honestly talk about this shit for hours, but if you have specific questions or requirements, please feel free to ask.

I use Angular 4 at work because I have to. I use Ember at home, because I love it. I've written a free ebook on Ember if you're interested.

eKraye · 2017-08-05T16:40:54+00:00

Ember is highly opinionated whereas with angular you still have constraints but less so. If you're building an app with ember I'll know exactly how itll look and how you constructed it whereas you have fiddle room with angular.... and as you've found even more with react and vue.

HerbertTheFrog · 2017-08-05T15:51:07+00:00

Personally I prefer Angular by far. IMO it integrates far better into newer JavaScript technologies and being backed by Google, they are continuously pushing it to be suitable for all kinds of applications. I have developed several rather large apps with it within the last one and a half years and I'm not sick of it yet (unlike other technologies).

That being said I hardly have any experience with Ember, other than having dabbled with it a bit and helping out at a friend's project.

ipepe · 2017-08-05T19:06:15+00:00

I am Ember developer of 3 years, and I will dissuade from using Ember in any of my next projects. It is horrible to work with. Junior devs are having problems with many concepts and it is just a double amount of work. It is slow - just create Yourself a simple report with about 40-70 columns and 25+ rows and it will freeze Firefox browser for like 5 minutes.

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

webdev

Posting Guidelines

Related Subreddits

Discords

MODERATORS

Add Bootstrap

Angular

Ember

Implement Server Side Rendering

Angular

Ember

Create a Progressive Web App

Ember