Powering the Together Framework
Tags: actionshackathon, ember, javascript, cicd
Published: 2020-08-31 17:09:53

In 2020, [Ember.js](https://emberjs.com/) earned an unofficial nickname—The _Together_ Framework. Since inception, Ember championed 3 things that led to this moniker:

- Share solutions (via battery-included framework and complementary [addons](https://emberobserver.com/))
- Adopt new technologies via [RFCs](https://github.com/emberjs/rfcs) (open to all)
- Pave migration paths (e.g. [deprecation warnings](https://emberjs.com/deprecations/), [codemods](https://github.com/ember-codemods)) so that developers who maintain older apps aren't abandoned

Because developers and teams follow a set of conventions, it's particularly easy to write GitHub Actions workflows that can be **shared among Ember apps and addons**.


### My Workflow

For the hackathon, I created workflow templates for Ember apps and addons.

✅ The workflow for Ember apps has several features:

- Leverages 5 [officially supported actions](https://github.com/actions/) (all `v2` or `v2-beta`)
- Lints files and dependencies
- Runs tests in parallel
- Takes [Percy](http://percy.io/) snapshots in parallel
- Caches `node_modules` for faster run
- Pre-builds test app for faster run
- Deploys the app (to any provider that [ember-cli-deploy](http://ember-cli-deploy.com/) supports, such as [GitHub Pages](https://github.com/ef4/ember-cli-deploy-git), [Netlify](https://github.com/exelord/ember-cli-deploy-netlify-cli), and [S3](https://github.com/ember-cli-deploy/ember-cli-deploy-s3))

✅ The workflow for Ember addons has several features:

- Leverages 5 [officially supported actions](https://github.com/actions/) (all `v2` or `v2-beta`)
- Lints files and dependencies
- Runs tests in parallel
- Takes [Percy](http://percy.io/) snapshots in parallel
- Caches `node_modules` for faster run
- Pre-builds test app for faster run
- Ensures that addon works with [LTS, release, beta, and canary versions](https://github.com/ember-cli/ember-try) of Ember

To top these off, I created [inspect-workflow-runs](https://github.com/ijlee2/inspect-workflow-runs). You can analyze past workflow runs and make a data-driven decision for calibrating `timeout-minutes`. (The default value is [360 minutes](https://docs.github.com/actions/reference/workflow-syntax-for-github-actions#jobsjob_idtimeout-minutes), which can lead to accidentally running out of minutes in private repos.)


### Submission Category: 

- Maintainer Must-Haves


### Yaml File or Link to Code

I created 4 workflow templates for the hackathon. They account for Ember addon vs. app, and yarn vs. npm.

- Ember addons: [yarn](https://gist.github.com/ijlee2/25004d700cd008ee08ecc4873c109a5b), [npm](https://gist.github.com/ijlee2/fba20304670b8d2b71f0b81cd07ea026)
- Ember apps: [yarn](https://gist.github.com/ijlee2/1c864ebe96a55f239e80800829ef0bf4), [npm](https://gist.github.com/ijlee2/6576ae82895d522ccc0695518c2a6ce7)

My main entry for the hackathon is [Ember addons - yarn](https://gist.github.com/ijlee2/25004d700cd008ee08ecc4873c109a5b). Addons like `ember-container-query` are the open-sourced npm packages that bring the Ember community together to develop, share, and support. 🧡

<figure>
<img src="https://crunchingnumbersdotlive.files.wordpress.com/2020/08/cover_image_github_actions.png" alt="A workflow run for Ember Container Query shows 20 jobs that completed in 3 minutes." width="600" height="300" />

<figcaption>A workflow run for <code>ember-container-query</code> shows 20 jobs that completed in 3 minutes. Thanks to CI and thorough testing, the addon has had 0 bug reports.</figcaption>
</figure>


### Additional Resources / Info

To learn more about writing GitHub Actions workflows for Ember projects, I recommend my blog posts:

- [CI with GitHub Actions for Ember Apps: Part 1](https://crunchingnumbers.live/2020/03/17/ci-with-github-actions-for-ember-apps/)
- [CI with GitHub Actions for Ember Apps: Part 2](https://crunchingnumbers.live/2020/08/31/ci-with-github-actions-for-ember-apps-part-2/)

The workflow templates that I built now power a few open source projects for the Ember community:

- [ember-container-query](https://github.com/ijlee2/ember-container-query/blob/main/.github/workflows/ci.yml)
- [ember-octane-vs-classic-cheat-sheet](https://github.com/ember-learn/ember-octane-vs-classic-cheat-sheet/blob/master/.github/workflows/ci-cd.yml)
- [ember-themed](https://github.com/dknutsen/ember-themed/blob/master/.github/workflows/ci.yml)
- [ember-times-tools](https://github.com/ember-learn/ember-times-tools/blob/main/.github/workflows/ci.yml)
- [whats-new-in-emberland](https://github.com/ember-learn/whats-new-in-emberland/blob/master/.github/workflows/ci.yml)

While I created the workflow templates on my own, my knowledge and experience with GitHub Actions stand upon those of amazing developers in the Ember community. I'd like to recognize:

- [Dan Knutsen](https://github.com/dknutsen)
- [Katie Gengler](https://github.com/kategengler)
- [Jen Weber](https://github.com/jenweber)
- [Jan Buschtöns](https://github.com/buschtoens)
- [Dan Freeman](https://github.com/dfreeman)
- [Preston Sego](http://github.com/NullVoxPopuli)