The Ember Times - Issue No. 138

Mar 6, 2020 – By Chris Ng, Abhilash LR, Jesse Jordan, Isaac Lee, Jared Galanis, Amy Lam

Happy International Women's Day, Emberistas! 🐹

2020 Ember Community Survey due this Sunday 📈, the possible future of app hooks and testing directories 📂, the evolution of Ember and Intercom 🚀🐹, splitting & migrating your project to a monorepo 🐘, read the blog post on modifiers 🦄, and find out how to use Ember with WebAssembly (Rust) 💡!

2020 Ember Community Survey due March 8th! 📈

If you haven't yet, please take a brief moment of your day to fill out the annual survey! Your feedback can help everyone shape Ember better. 💞

Discuss the future of app hooks and testing directories in Ember 📂

Since the early days of the framework, the Ember CLI has been a major factor for productivity and great developer ergonomics when developing Ember apps. And a while ago Mehul Kar (@mehulkar) submitted two new Requests for Comments (RFCs) to suggest even more improvements for the favorite productivity tool of any Emberista!

In RFC#575: Test Directories a new directory structure for testing is proposed. The change of test type names in the official Ember testing guides that followed the implementation of RFC#232: Simplify QUnit Testing API inspires the new directory format: f.e. files for testing component functionality used to be called integration tests in the former Ember QUnit testing API, and have been renamed to rendering tests. To reflect this change in the documentation, the new RFC suggests to move DOM-focused component tests from tests/integration/**-test.js to tests/rendering/**-test.js accordingly. You can learn more about the detailed design by reading the original proposal.

With RFC#578: Ability to hook into build process without addons, a suggestion for more developer flexibility for an app's build process is made. The proposal suggests that treeFor hooks provided by BroccoliJS - a core library for powering the Ember CLI build pipeline - should be available via the options parameter of an Ember app instance. This would allow future Ember developers to leverage treeFor hooks in an app itself without developing a supplementary addon (which is currently the only way to use these build pipeline APIs directly). To learn more about the motivation behind this RFC, be sure to check out the pull request on Github and feel free to leave your thoughts and questions in the comments below.

The evolution of Ember and Intercom 🚀🐹

If you have not had a chance to check out Gavin Joyce's (@GavinJoyce) blog post on the evolution of Ember and Intercom, and the accompanying talk, you might want to give it a read / watch!

The blog post covers the massive growth of Intercom over 6 years, how the company came to choose Ember and how Intercom's growth tracks with the growth of Ember over time.

Interestingly, many of the principles of R&D, design and Engineering overlap with Ember's conventions and release cycles.

The blog post also provides some nice detail on the technical evolution in Ember's rendering engine and it provides a look at how Ember Octane can let us write beautiful, minimal and clean components in mostly native JavaScript.

It's a fascinating and encouraging read, and it's very cool to see how the stability and innovation of Ember has allowed Intercom to build the amazing product it is today!

Splitting & migrating your Ember project to a monorepo 🐘

Robin Philip Thomas (@MalayaliRobz) details his experience having worked with a huge codebase and the difficulties he and his team had faced with a massive monolith and how they split their codebase to multiple engines and add-ons. While that wasn't enough, he goes on to explain how dependencies caused problems related to version upgrades in each repository. As a result, he talks about how he arrived at using Yarn workspaces and how Lerna solves those problems. Check out the blog post!

Blog post: Introducing Ember modifiers 🦄

Ava Gaiety Wroten (@sharpshark28) wrote a blog post on the ember-modifier addon which provides an API for authoring element modifiers in Ember.

We learn how to use the {{on}} modifier to track the focus state of a DOM element. The blog then describes how to handle key presses by creating our very own modifier such as the example {{key-down}} below:

{{!-- my-component.hbs --}}
<button
  {{key-down this.handleEnter key='Enter'}}
  My Button
</button>

Unlike attributes, element modifiers do not run on the server-side, because there is no general-purpose and complete way to serialize the results of an element modifier into HTML.

Be sure to check out ember-render-modifiers and ember-focus-trap as well and read the full article on Ember modifiers!

Using WebAssembly in Ember.js 💡

WebAssembly (wasm) is a technology that enables high-performance computing (traditionally achieved with C or C++) on the web.

Martin Feckie (@mfeckie) published a guide on how you can integrate your Ember app with a Rust program. Martin walks you through how to generate UUIDs and plot Mandelbrot sets. These examples represent a complex calculation that you might do in a production app.

We encourage you to check out the article! Along the way, you can also pick up a little bit of TypeScript + Octane, dynamic import, and {{ref}} modifier. 🎶

That's another wrap! ✨

Be kind,

Chris Ng, Abhilash, Jessica Jordan, Isaac Lee, Jared Galanis, Amy Lam and the Learning Team