I came cross the name Ember.js and was curious to know more about what it actually is. I quickly discovered that is another framework used for web application, and also some of the companies I used often also use Ember.js. As I pursue a career as a software engineer, Ember.js is another framework that I can possibly add to my skillset. I would like to share what I've learned so far.

What is Ember.js?
Ember.js is a JavaScript framework for creating single-page web applications (SPAs) with dynamic and responsive user interfaces. It uses Model-View-Controller (MVC) pattern and includes helpful tools like a templating engine, a built-in router for navigation, and features to manage data and application state effectively.Ember.js was released in 2011 and was created by Yehuda Katz.

Image description

Key Concepts

  • Routes: The app's state is tied to URLs, with each URL having a "route object" that controls what the user sees.

  • Models: Each route has a model containing data for that part of the app, typically managed and loaded by Ember Data.

  • Templates: Define the app's HTML using HTMLBars, a version of Handlebars that directly creates DOM elements.

  • Components: Components are custom HTML tags that have their own behavior and look. They manage their own data and can interact with other components.

  • Services: Services are single-instance objects used to store long-term data, such as user sessions.

Image description

Key Features

  • Convention-over-Configuration: letting developers focus on features.

  • Ember CLI: command-line tool that helps manage projects.

  • Two-Way Data Binding: Changes in the model update the view, and changes in the view update the model.

  • Routing: handles navigation and state changes in single-page apps with nested routes and dynamic URLs.

  • Ember Data: Manages app data making it easy to fetch, create, update, and delete data from a server.

  • Templates and Handlebars: Uses the Handlebars templating engine to define dynamic HTML content.

  • Components: Reusable UI elements that combine logic and view.

  • Testing: focuses on testing by using built-in support for unit, integration, and acceptance tests to catch bugs early.

Image description

Getting Started with Ember.js

  • Make sure you install Node.js and npm on your system.
  • Install Ember CLI globally with the following command. 
npm install -g ember-cli
npm install -g phantomjs
  • Create a New Ember Application. 
ember new my-app

This will create a new Ember app with the default folder setup and settings.

  • Run Your Application: Go to your project folder and start the Ember server. 
cd my-app
ember server

Your app will be available at http://localhost:4200.

  • Create Routes and Templates: You can add new routes and templates using Ember CLI: 
ember generate route about

This command will create a new route for the "About" page and will have a template and JavaScript file.

Time to start building your application.

Image description

Conclusion
Ember.js is a JavaScript framework for building complex web applications.Ember.js allows you to concentrate on writing code instead of managing the framework. Ember offers tools and framework for effective development.

Image description

Sources