Servage Magazine

Ember.js is yet another JavaScript framework for building the UI for web applications. While there seems to be many JavaScript frameworks out there at the moment, each of them is targeted for a specific use case, or at least is more suitable for something than the others. Usually a single framework is not always the best choice for all kinds of websites and web applications. Let’s explore Ember together and figure out how it works and what types of websites benefit from it the most.

Ember.js Quick Start

If you have ever worked with Angular, chances are you find getting started with Ember quite easy. The process of setting up your first Ember project is almost identical to the Angular workflow. You should start by installing the Ember CLI using “npm install -g ember-cli”. Then you can use the “ember” command to create a new project: “ember new ember-quickstart”. This creates the project for you in a folder called ember-quickstart.

The folder comes with everything you need to get started, including a development web server that you can start by running “ember server”. You should now be able to navigate to localhost:4200.

Diving Deeper into Ember

An Ember.js application consists of a few key pieces such as components, controllers, routes and models.

Let’s start with a route. As you can possibly guess, a route is something users can visit, such as localhost:4200/foo. In Ember, you can create such a route using the Ember CLI with “ember generate route foo”. This creates not only a new route but also a template file for it under the app/templates directory. You can modify the template and you will see the changes when you navigate to that route.

If you want to reuse pieces of functionality on multiple pages, you can use a UI component instead. You can create a component using the “ember create component <name>” command.

Models are used create individual data containers like users, products and invoices. Models are persisted using an external database and retrieved as JSON from an API where the database is hosted.

Controllers contain the business logic of the application, including authentication, handling orders, forum posts and more. Controllers can be created by running “ember generate controller <name>”.

The Benefits of Ember.js

With all this said, there is one question left to answer: when to use Ember? If testing is important to your project, Ember may be a good choice because both unit and integration testing are core features of the framework. You can test everything from routes and models to controllers and components. Ember also has a handy tool called Ember Inspector that can be used to debug your models, routes and much more when your web application is running. If you find these features useful, Ember may be a good choice for you.

The learning curve of Ember might be a little steep, but once you get a hang of the framework, it may prove a valuable tool for the front end of your project.