An Introduction to Ember

4 min readDec 17, 2019

^^You after mastering the powers of Ember.js

As a new web developer, I found myself wondering “What is Ember?”.

Just shy of a decade old, the JS Framework touts itself as something for ‘Ambitious Developers’. It was developed to help engineers create scalable single-page applications (SPAs) based on a Model-View-Controller (MVC) structure.

Things to Look Up: MVC, SPA, Ember

Why Would You Use Ember.js?

If you are looking to build an application that can change on the fly (modify itself as your application data changes), this is a good place to start. The beauty of such an application is that as your user interacts with your site, the site modifies and accounts for the new information, staying relevant and up-to-date.

There are 5 main features to the Ember.js framework.

Ember CLI: The goods you need to build Ember applications

Ember allows you to build routes, helpers, components, models, and more right from the CLI using the command “ember g _________”. For example, to build a route named home use:

ember g route home

Routing: Your app is a Model object with contains data that is tied to the current state of the app. Routes allow you to manipulate state from a URL associated with the app.

Templating Engine: Create application templates using Handlebar — also maintained by the Ember team

(To see more: https://handlebarsjs.com/)

P.S. this ^^ is so cool! Take a sneak peak:

Find out how to do this using {{#each}}

Ember Data: A way to work with APIs and manage data persistence

Ember Inspector: A browser extension for live application inspection

Things to Look Up: CLI, API, Handlebars

How To Get Started With Ember.js

First of all, take a look at the Ember.js docs here. This will be your best friend when it comes to Ember, sorry stackoverflow.

And you should probably know a thing or two about:

HTML
CSS
JS
Promises (used with APIs)
JS Modules (aka NPM packages, Node.js, etc)
Babel.js
ECMAScript 6
Components — custom reusable elements that are pieced together to make templates (HTML Markup) — such as a button or dropdown menu

Step 1: Run the following command in your terminal

Step 2: Create your project

Step 3: cd into your project folder. You will now see a basic folder structure already to go inside your app. The majority of your work will be in the -app- folder, while -config- holds your environment file and -public- will contain images and fonts. -node_modules- and -test- are pretty self explanatory.

Step 4: Once you are familiar with the project files, set up your server in a new terminal screen (CMD + N). Visit the server on your localhost.

or the long version: ember serve

Step 5: Test your application as you go! Learn more here.

And most importantly, make your app accessible! With more and more people gaining access to the internet everyday, it is so important to establish good habits around accessibility now. Be a developer who thinks about all users not just themselves and make sure people of all kinds and all abilities can easily use your app. Check out the docs to get started!

Developer Empathy:

After you make your first Ember app, whether you follow along with a video or venture out on your own, you may forget how and why you did something. It’s best to leave comments in your code, like a trail of breadcrumbs, on this first one so you can look back and remember what you did.

If you choose to do so, don’t be surprised when