Let’s say you have 1–2 weeks to learn as much as possible, perhaps before an interview, or to boost your portfolio during some funemployment. What do you need to know, and where can you find it? A fellow dev asked me about this exact scenario, so I’ll share my thoughts with you too.
First a checklist, then explanations:
- What is Ember? Better know that before your interview ;)
- Install the ember cli
- Follow the Ember Quickstart (including Core Concepts)
- Do the Tutorial (maybe minus Testing)
- Read certain parts of The Guides
- Google things and ask for help
- Learn how to find/use ember addons and npm packages
- Build your own app
- Deploy!
- And then…???
What is EmberJS?
EmberJS is a front end framework that is geared towards long-term maintainability and productivity. You can use it to build websites (aka web apps) or even mobile apps with the help of some other tools. It’s open source, meaning that it’s built by a lot of people, over 600 as of writing this article, not counting the ecosystem of tools that extend beyond the core source code. Like many other popular front end frameworks, it is a “SPA” or single page application, so instead of all the content reloading as you navigate to each new page on a site (with blank screens while you wait for the next page to load), the application loads once and after that, everything is “magically” snappy and fast. Of course, there are multiple pages and urls that the user sees. You can see an Ember app in action just by visiting the Ember Docs. Since Ember is a front end framework, if you want any data to be saved, have login things, etc. you will also need to build a back end API.
Lastly, you should know that Ember follows “convention over configuration.” What that means is that there are really easy, reliable ways to do common everyday things. And, since there are strong conventions, other people in the community are more able to help you out. The path is well paved. However, if you start doing hacky stuff like injecting HTML into the DOM and using JQuery libraries and event listeners, you may have a hard time.
Installing the Ember CLI
The Ember CLI is a command line tool that helps you do a whole bunch of things: generate your app’s files, run your project locally, build and deploy, install addons, and more. You have to use it, which means you have to use the command line (aka Terminal for Mac users). If you are a beginner to Ember, do not create new files by copying, pasting and renaming. It is way too easy to make a mistake in the naming, placement, and boilerplate, so why risk it? Always always always use the ember-cli.
As of the writing of this article, the Ember CLI documentation is separate from the main Ember website. You can find it here, but don’t worry about it for now. If you already have npm and your dev environment set up, just follow the instructions for installation in the Quickstart. If you don’t have npm and are really new to the whole command line thing, I wrote a guide for Mac users.
Follow the Quickstart (including Core Concepts)
You can find the quickstart here. This is mostly a check to make sure everything is installed correctly and introduces you to the most basic things. If you have problems at this stage, check to make sure you are running ember cli commands in the right working directory, and then pop into Ember chat or forums to share your error. You can find links to join it here.
Do the Tutorial (maybe minus testing)
The Tutorial will walk you through building a basic app. You’ll use the patterns you learn here to build something of your own creation later. If Ember is your first front end framework, you could possibly skip the testing sections, in my opinion. When I first learned to code, testing was extremely confusing to me until I understood the basics of the framework. It did more harm than good to struggle with it. However, if Ember is not your first framework, definitely do the testing sections. Having a grasp of testing will help you move much more quickly once you’re done with the tutorial.
Google things and ask for help
There are a bunch of places you can get help! Before you start asking questions, it is a good idea to reread the relevant section of the Guides or the API docs and do a Google search for your error message or question. However, I recommend only looking at blog posts and Stack Overflow from 2016 onward. Just skip 2015 and older. A lot of the techniques you’ll find in older content now has easier, built in ways to accomplish them. Most 2.x tutorials are still useful, but use a slightly different import style. This article will help you understand and convert the examples into Ember 3 syntax.
If you do ask a question, be sure to share some of your code. Maybe someone can spot the problem right away. If you’re reeeeeally having trouble, try making an example in Ember Twiddle and share it. It’s like JSBin or Codepen, but for Ember.
If something in the official Ember learning materials was unclear and you have an idea of how to make it better, speak up! This is the benefit of open source. You can open up an issue in the relevant EmberJS or Ember Learn GitHub repository. The learning team also has a dedicated channel, #dev-ember-learning in the community Discord.
Read certain parts of The Guides
Once you’re done with the tutorial, it’s time to build an app of your own. Chances are, your idea will be a little more involved than the Super Rentals app. This is where The Guides come in. The explanations and examples will help you bridge the gap between doing a simple tutorial app and being able to make use of the API Docs. The API docs have good examples too, but they are more descriptive of input, output, and options of functions, and don’t handle as much of “why and when do I use this?” As you read The Guides, you won’t remember everything. But you will have an idea of where to look. It’s like studying for an open book test.
I would argue that every part of The Guides is important, but you have one week! So here are the essentials to read and reread. The links below go to version 2.14, the latest version at the time of this article, but make sure you choose the most up to date version. Every major release version of Ember has Guides that go with it:
- The Object Model — Computed Properties, Computed Properties and Aggregate Data, and Enumerables
- Routing- Introduction and Defining your routes. Plus, if you already know what they are, Query Parameters.
- Every section under the Templates heading
- Every section under Components
- Controllers
- Models from Introduction through Pushing Records Into the Store
- Application Concerns- Services (sidenote, services can be accessed in any components. If you’re wondering “how do I share information between components that are on different routes?” services are the answer)
- The Ember Inspector, if you are using Ember Data
Learn how to find/use ember addons and npm packages
Since Ember has been around for a long time, it has a huge ecosystem of ember-specific packages that you can use. They are referred to as addons. Many addons are wrappers for popular libraries you may already be familiar with, including things like Moment, JQuery stuff, charts, and more. My favorite source for Ember addons is Ember Observer. I especially like the scoring system, and recommend factoring it into your decisions of which addons to choose. Although they are available through npm’s servers, the best way to install addons is ember install package-name . Many packages have special setup that won’t be run if you simply use npm install .
Some popular addons for building an ok-looking app quickly are ember-bootstrap, ember-power-select, and ember-pikaday.
But what if there are no Ember versions of a package you want to use? You can still use them from npm. The easy way is to install ember-browserify. Then you can use the package almost anywhere in your app with import someCoolModule from "npm:some-cool-module" . If you try to use an npm module without ember-browserify or other special approaches, it will break your app because of the “require” syntax found in npm packages. Alternately, you could write your own wrapper/shim for an npm library or jquery functionality, but you only have a week. Just keep it simple and search for an Ember addon that someone else has made or use ember-browswerify with npm.
Build your own app
So many options and possibilities! Here’s a handy list of some open source Ember apps. A lot of these are “advanced” apps that aren’t one week things, but they can show you how a real project goes together. If you want to skip building a back end and just make a prototype that doesn’t actually save its state, check out http-mock in the Ember CLI documentation. It’s easy way to make it look like your app has data… until you refresh the page.
Deploy!
I like to put my portfolio things on GitHub Pages. By pushing your built files to a magic branch called gh-pages and doing some special configuration in your app, you can have your app hosted for free. The easiest way to get an Ember app up on GitHub pages is to use the ember-cli-github-pages addon. (Walking through it by hand is a pain.) There are many other options besides GitHub Pages: Heroku, AWS, etc. But I like having all my portfolio work in one place.
And then…?
There are some fantastic resources to help you keep learning. Here are a handful. I haven’t used all of them, but I’ve heard good things about many, and to my knowledge, they are all 2.0+. Keep in mind, if you are really, truly short on time, a comprehensive and possibly paid course may be the best course of action. Message me with the things I missed. If you are one of the creators, thank you for all your hard work :)
- Ember Screencasts (free)
- EmberWatch (free)- collection of videos from meetups
- Rock and Roll with EmberJS (paid) — book and activities, has been highly recommended to me by others
- EmberSchool (paid)— although the creator is taking a break from tech, this course is still maintained, including Q&A
- YouTube (free) — search for meetups and conferences in general
- EmberIgniter (free)- articles
- EmberWeekend podcasts (free)
- Ember Weekly Newsletter (free) — really useful for keeping up with the latest news across many platforms
- Ember.js Times (free) — official newsletter of the Learning Team
- EmberMap (paid) — video tutorials and courses
- EmberCasts (paid) — video tutorials and courses
- Program With Erik (free) video series
- YoEmber (free) — tutorial/course
- EmberJS Cookbook (paid)
- Code School course on Ember (some free sections, mostly paid)
- FrontEnd Masters course (paid) — I did one of these a year ago and would recommend it for people who know another framework well
- EmberGrep (paid) course
- Discover Ember2 (paid) course
- Udemy courses (paid) — watch out for sales discounts and outdated courses
- EmberJSThemes — Learn by example! Check out and use apps that someone has already laid the foundation for.
- EmberSherpa’s collection of open source Ember apps — See how in-production apps are put together
- Conferences (paid)- EmberConf, So Ember, EmberFest, EmberCamp, etc.
Thanks for reading! And special thanks to Sivakumar Kailasam, Mike Behnke, and Ricardo Mendes for additional feedback to improve this article.
