Getting Started with Ember JS

Jonathan Heemstra
Jul 22, 2017 · 3 min read

Over the course of this series I will walk through building out a simple app using Ember JS. It is my goal to not only walk through how to build the app from start to finish but also to explain some of the details along the way.

I am fairly new to Ember and will do my best to describe how the application is working. At the bottom of each post I’ll include a section with additional links to other developers with much more experience than who can expand more on specific topics.

My approach in building this application

Ember apps at their foundation are made up of routes, templates, models, views, and components. The good thing about this architecture is it really provides a solid separation of concerns that allows for app to leverage the highly object oriented nature of EmberJS to keep different parts of the application isolated from each other.

How I plan to take advantage of this is by separating the models and components into their own project. Because the components and models will live in their own library I can import as needed into any project they may be needed in. This keeps the amount of code in our application to a minimum and allows for reuse of components across a variety of applications, not just this one.

A great example of how I intend to leverage this would be a button component. Buttons are used everywhere and generally have some very core characteristics that are consistent across all apps. Instead of building a button for every app we can build a generic one that provides the base functionality necessary without having to build it in every Ember app we build.

Generating the Ember component library

First make sure you have ember-cli installed globally on your machine.

ember -v

If you don’t have it installed you can easily install it from NPM

npm install -g ember-cli

It should go without saying but the assumption is you also have NodeJS installed.

Start by generating a new Ember component library

ember new ember-component-library

Important to note: Ember will also generate all of the necessary .git files. In order to get your new project up on github make sure to create a repo on github with the same name as the Ember app you just generated. You won’t need to include a .gitignore or README.md since both of these files were already generated. Then from your command line just run:

git remote add origin https://github.com/[ACCOUNT NAME]/[REPO-NAME].git
git push -u origin master

Github should provide you all of these instructions if you initialize your repo without a .gitignore and README.md.

Assuming your commit works you should see the commit message of:

Initial Commit from Ember CLI v[EMBER.CURRENT.VERSION]

Next generate the Ember app

Finally you can generate the application you are wanting to build. For this demo I will be building an app that uses the free SWAPI api.

ember new star-wars-search-emberjs

You can name the repo whatever you want but I generally like to be as descriptive as possible in my repo naming conventions.

Design Spec

Now that we have our repos created it’s time to take a look at the design spec. I will be following this spec as I build out this project and feel free to use these assets if you are also following along.

Spec | Assets

In my next post I’ll go through connecting our ember-component-library and star-wars-search-emberjs repos so that components we build in library can be used in the star wars app.

Additional Links

https://emberigniter.com/5-essential-ember-concepts/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade