Why-I-switched-from-Angular-to-Ember_imagefull

in Javascript

Why I switched from Angular to Ember

Ember is a framework for creating ambitious web applications.  Here is why I switched from Marionette to Angular to Ember, and I think I have found the framework I like the most – EmberJS.

Single Page Applications

I started with jQuery, until I got the concept of single page applications. Around 2012 I quickly started discovering the Backbone.js framework and it’s friend Marionette for giving the backbone applications some more structure. I loved it back then, it was a great concept -one could create a backend that was only an API and a separate repository for the actual web app itself. The decoupling was great, you could now expose an API for your web app that could instantly become a mobile app. The great thing about this concept with having a full-fledged API for your app is that you have the opportunity to:

  • Create your own web app
  • Create mobile native mobile apps for i.e. Android / iPhone consuming the API
  • Other developers can consume the API to create fantastic things.
  • Automated scripts that use the API for miscellaneous tasks such as cron jobs doing statical analysis.

After some time though, when the app got bigger, I saw that using Backbone even with Marionette one would have too write too much code for trivial tasks. The newer frameworks now have a lot more to offer then just a MVC layer with some custom views (i.e. Marionettes CollectionView,ItemView, CompositeViews).

Then came Angular

Angular was promising, first of it was developed by Google and that was of course a big plus. Angular was all about the “Two way binding” and just scattering your HTML withng-* attributes such as ng-click=”myActionHandler” ng-if=”something”. It also came with lots of new concepts in the JS world such as:

  • Directives
  • Dependency Injection
  • Services
  • Nested routing
  • Plugins created by others to extend Angular
  • .. and tons of more cool features..

I loved angular, though here are the reasons why I wanted to try something new:

  • No standard asset pipeline, meaning you would have to use grunt, gulp and set this up manually or use some kind of third party kit to do this for you. This also mean that is slower to get started out of the box.
  • No standard way of organizing the files, meaning more
  • Scattering the DOM with ng-attributes felt like giving the presentation layer a lot of logic.
  • Directives always felt kind of awkward, the way they were created with cryptic syntax.
  • DOM updates are slow compared to React.
  • Angular 2.0

Angular 2.0 was the biggest motivator to switch from Angular. It’s just bad how they suddenly revamp every concept of the Angular Framework and break all the apps running 1.x.

Ember

Now after two weeks of Ember, I can say that I’m deeply impressed with it already.Ember-cli is hands down the best asset pipeline on the market right now, it just works and have much more features out of the box such as:

  • Blueprints:
    Need a new route?
    ember g route my-route
  • Conventional Project Structure:
    With Ember CLI, it’s super strict of where you place your files. This is great, you now have an enforced rule of where  the files should actually be put. This means that in large teams you will never have to worry about people doing it “their own way”. In ember we say “ember way”.
  • Live reload
  • Development server
  • Easy deployment with fully minified js/css/templates and version controlled assets (even static images).
    ssh my.server
    cd project-folder
    ember build –env=”production”
    It’s that simple.

No logic in templates

Ember uses handlebars by default, which means that you will have little logic in the presentation layer. It’s also easy to extend handlebars with more functions and filters if you need so. You also don’t have the scattered ng- attributes around, instead you can use {{#if }} blocks like you would normally do in every other language.

2.0 is not a complete rewrite

Ember intend to make it easy to upgrade from 1.X to 2.X and so fourth by only deprecating features. They want developers to upgrade to new versions with minimum of rewrites such as only “Mechanical re-factoring”. This is a major benefit so that you don’t have to live with long lived branches and suddenly have to rewrite your whole app because you “want to upgrade to the latest”.

In fact, the Ember team says that you are actually using 2.0 today, since most of the features of 2.0 has already been implemented in the 1.10+ series!

It’s fast, as React

Yep, as of 1.13 (beta), Ember now have the new Glimmer rendring engine. This rendring engine uses much of the same concepts as react to handle dom manipulation which greating increases performance by many, many factors. This is super awesome and a big plus, while Angular remains slow.

Glimmer is a super awesome addition to Ember, it also means that React is not necessary to create high performance web apps!

The third-party apps

Those are great. Ember makes it easy to install 3rdparty apps with little to no effort.

Need  a thirdparty app/plugin?

There are tons of addons available that greatly reduces your code base. One I have used is for example the Simple auth authentication addon, its very very customizable and can work with ANY backend (I use Django Rest Framework with OAuth2 authentication).

Third-party apps have their own “initializers” so some addons are just to install and no configuration and TADA, you have installed the addon with a single command!

There is so much more

There is so much more I want to share, though the article is getting out of scope, so I will stop here.

I am now using Ember, and I have come to stay -that’s for sure.

Share this post

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Write a Comment

Comment