Blog

We write about Ember.js, Ruby on Rails as well as Elixir and Phoenix.

Front End Development

Ember-CLI Basics

Ember-cli is truly a world class build tool, and it’s more capable and versatile than most people think!

We need look no further for proof of its impact than angular-cli and react-create-app, as continuations of the idea that Single Page Apps are deserving of first class tools, optimized for their specific needs.

1
Module 1 Duration: 120 minutes

1 — Broccoli Basics

Broccoli is a fast, robust and portable asset pipeline, built with ember-cli in mind. It uses node’s fs module as it’s API, and is deliberately designed to steer users away from potential snags.

Agenda
Broccoli Basics Duration: 15 minutes
9:00
Welcome & Kick Off

We’ll go through the day’s agenda, and highlight some goals for the training.

Broccoli Basics Duration: 30 minutes
9:15
Standalone Use with Broccoli-CLI

Broccoli has its own CLI, and although it’s missing some of the stuff we take for granted in ember-cli, it can be useful to look at broccoli independently, in order to understand where it ends and where there rest of ember-cli begins

Broccoli Basics Duration: 20 minutes
9:45
Debugging & Developing Plugins

Broccoli plugins can be thought of as streams, or lazily evaluated pieces in a functional chain. Because of this characteristic of laziness, we must take a different approach to debugging, relative to how we treat synchronous client-side code. You’ll be provided with suggestions for an easy and intuitive broccoli plugin development workflow, that will maximize time spent getting results, and minimize time spent scratching your head.

Broccoli Basics Duration: 55 minutes
10:05
EXERCISE: Building your first Broccoli Plugins

We’ll put our newfound skills to use, and build our first two broccoli plugins

2
Module 2 Duration: 210 minutes

2 — Apps & Addons

The contents of your ember-cli-build file is on center stage when consuming ember-cli’s asset pipeline features. We’ll dive into some features exposed by way of the EmberApp and EmberAddon objects, using some familiar tasks as case studies.

Agenda
Apps & Addons Duration: 30 minutes
11:00
Importing Assets

One of the most common things a team needs to do in their ember-cli-build.js file is import a third party library into their app. We’ll look at the the best way for getting this done, and provide some tips and tricks for consming as many things as possible via ES6 modules instead of globals.

Apps & Addons Duration: 30 minutes
11:30
EXERCISE: Globals to ES6

Consuming as much as possible by way of ES6 modules is the way to go, for reasons we’ve already gone over. Let’s take a library that makes its self available as a global, and use our knowledge of importing assets to expose it to our app or addon with ES6. This will include making things available as both named and default imports.

Apps & Addons Duration: 45 minutes
12:00
Trees aplenty

Having worked with broccoli already, we are already familiar with the concept of a tree. Ember app builds have several trees, and provide a few places to customize them, as files are transformed, combined and prepared for production.

Apps & Addons Duration: 45 minutes
12:45
Lunch

Break for Lunch

Apps & Addons Duration: 30 minutes
13:30
EXERCISE: Tweaking trees in the right places

We’ve covered the various trees in an ember-cli build, and means of customizing them. You’ll be provided with some broccoli plugins, which you must insert into the build in the right places. Some of these will operate on the trees while JS and CSS remain in individual files, and some will need to operate on the concatenated and minified production assets.

Apps & Addons Duration: 30 minutes
14:00
Anatomy of EmberApp and EmberAddon

ember-cli-build.js and index.js are the main focus of the ember-cli public API surface. We’ll overview the various hooks, member data and other capabilities available to you when working with these files, and the important objects contained therein.

3
Module 3 Duration: 165 minutes

3 — Codegen & Commands

Ember-cli’s blueprints and command features are incredibly powerful, and are tremendously under-utilized in the ember community. In this unit, we’ll explore:

  • How apps (and addons contained therein) can extend ember-cli
  • How arguments passed to ember-cli on the command line make it into your blueprint or command
  • Testing on the node.js side
Agenda
Codegen & Commands Duration: 30 minutes
14:30
Adding Commands

Like many modern tools, much of the amazing stuff we appreciate about ember-cli comes from the ability to extend it by way of libraries. We’ve already looked at how this can be done with broccoli plugins, but we can also change ember-cli’s code generation features, and even add brand new commands!

We’ll first look at an addon that adds new commands to ember-cli, and discuss positional and named options, default values, and automatic ember help generation.

Codegen & Commands Duration: 30 minutes
15:00
EXERCISE: A new command

Add a new command to ember-cli, to broadcast a slack message to a particular channel.

Codegen & Commands Duration: 30 minutes
15:30
Beautiful Blueprints

We can build our own blueprints for dynamic code generation, and study how options and locals turn our parameterized code templates into code. This underutilized and under-appreciated ember-cli feature has the potential to save you and your team loads of time, and to reduce accidental inconsistencies as well!

Codegen & Commands Duration: 30 minutes
16:00
EXERCISE: Computed property macro blueprint

Build a blueprint that makes a new computed property in the app/cp folder of your app, using command line arguments to dynamically specify local names (and number) of arguments passed to the macro.

Codegen & Commands Duration: 30 minutes
16:30
Testing Commands and Blueprints

One of the challenges around building ember addons that are more tool oriented than client-side oriented, is that the existing testing stories that we rely on for our ember app’s code won’t help us much. We’ll outline some strategies for asserting that your blueprints and commands do the things they’re supposed to do, and ensure that these tests (in addition to testing your browser-based code) are part of what’s run in your CI pipeline.

Codegen & Commands Duration: 15 minutes
17:00
Wrap Up & Goodbye

We’ll recap the things we’ve learned today, and discuss resources for continued research and practice.

Do you Have a Project in Mind?