CI with GitHub Actions for Ember Apps

Lately I’ve been working on Ember Music, an app that I can use as a playground to test addons and ideas in Ember. When I need to write a blog post, I can reach for this app instead of designing a new one each time. Since the app will grow over time, I wanted to introduce continuous integration (CI) and continuous deployment early.

Heroku Dashboard makes deploying code on GitHub simple. From the Deploy tab, you select GitHub, find your repo, then check “Wait for CI to pass before deploy.”

Heroku makes deploying code on GitHub simple.
Heroku makes deploying code on GitHub simple.

For continuous integration, I tried out GitHub Actions since it is free (there are limits to minutes and storage for private repos) and my code is on GitHub. I also wanted to find an alternative to Codeship Pro that I use for work. One app has about 150 tests, but CI time wildly varies between 3 and 15 minutes. Because ten minutes is how long CI took for a larger app that I had worked on, I haven’t been content.

With GitHub Actions, I was able to make a workflow that did everything I want:

  • Set operating system and Node version
  • Cache ​dependencies (avoid yarn install)
  • Lint files and dependencies
  • Run tests separately from linting
  • Split tests and run in parallel
  • Take Percy snapshots in parallel
  • Be cost effective

In this blog post, I will share my workflow because there is a high chance that you, too, want to solve the problems listed above. Rather than dumping the entire workflow on you, I will start with a simple one and let it organically grow. Throughout, I will assume that you use yarn to manage packages. If you use npm, please check the GitHub Gist at the end to see the differences.

Continue reading “CI with GitHub Actions for Ember Apps”

Prototyping Apps with Ember Octane: Behind the Scenes

On Saturday, I presented Ember Octane to Austin Code Mentorship. I had been hesitant about organizing the workshop (what if no one shows up?). Thankfully, 6 people joined for the whole session, while some more stopped by. In one hour, we prototyped an e-commerce app where a user can view products before making a purchase decision.

Products page for an e-commerce app

This post primarily serves as a retro doc for myself, but also welcomes two audiences. If you are new to Ember and can follow a tutorial without guidance, you can skip to the end. There, you will find instructions and links to the base and finished projects. If you want to run a workshop or onboard a developer, what follows next is for you.

Continue reading “Prototyping Apps with Ember Octane: Behind the Scenes”

Rewriting Apps in Ember Octane

Last Friday, Ember 3.15 was dubbed the Octane edition. To see how easy (and fun) writing an Octane app is, I spent the weekend rewriting my apps Ember Animated (v3.8) and Lights Out (v2.18). Let me share what I learned.

If you have tutorials and demo apps, I encourage you to rewrite them in Octane. You can publish both versions to help everyone understand how the programming model in Ember has evolved over time.

Continue reading “Rewriting Apps in Ember Octane”

Write Tests Like a Mathematician: Part 3

In the last two blog posts, you learned that Ember treats testing as a first-class citizen. Out of the box, Ember provides 3 types of tests so that you can fine-tune test coverage and performance. It also supports a variety of addons and debugging tools to improve your developer experience in testing.

Today, we address an important question: How should you write tests? By the end of this post, you will learn 5 simple rules that I like to follow. The rules aren’t do-this-or-do-that’s (cold hard facts). Instead, they carry nuance and interesting side stories. To keep your learning experience fun, I will transcribe my talk at EmberFest 2019 (rather than summarizing it) to engage in a dialogue with you.

Continue reading “Write Tests Like a Mathematician: Part 3”

Write Tests Like a Mathematician: Part 2

Ember provides 3 types of tests out of the box:

  • Unit tests
  • Rendering tests (previously known as integration tests)
  • Application tests (previously known as acceptance tests)

Broadly speaking, these tests differ in two aspects:

  • Which parts of your app they check for correctness. Having different types of tests help separate testing concerns.
  • How fast they execute.

Let’s take a look at each type and when you might use one over another.

Continue reading “Write Tests Like a Mathematician: Part 2”