Readers' Questions: "What is Embroider?"

Learning Team
1

Hello once again to Readers’ Questions, presented by the folks at The Ember Times :newspaper:with a little help from the Ember Core Team and friends :sparkles:

Today I’ll be answering a question by jj:

What is Embroider and why is everyone talking about it?

For a long time Ember pioneered the idea of a zero config build solution for JavaScript applications in the front end development ecosystem. Since the release of Ember v1.11.0 in March 2015 (1), Ember CLI has been the official and build tool for Ember applications, co-maintained and released alongside Ember.js itself.

Embroider is a modern, full-featured build system that works in tandem with Ember CLI. Its future implementation is subject to change and still in the planning phase and it’s up to the community to decide about its direction. You can read and comment on the current Embroider Compatibility RFC (Request for Comments) that is still open for discussion (2). As shaped through the RFC process, Embroider has the potential to unlock many build features that had been proposed by the community in the past (3):

  • significantly reduced build and reload times
  • direct native, or so-called “zero-config”, imports from npm packages
  • support for arbitrary code splitting
  • tree-shaking of unused modules, components, helpers, etc from the app and all addons

Optimisations like code splitting and tree shaking are possible because Embroider’s v2 package format compiles Ember addons and apps to a much more static and easily analysable code (2). Furthermore, Embroider embraces the ECMA standard for importing ES modules, making Broccoli’s app.import API for Ember apps obsolete.

In contrast to Ember’s classic build pipeline, Embroider’s layered build system and clearly defined API will provide an easier integration path of other tools and libraries. This allows to benefit from and evolve together with current and future developments in the wider JavaScript ecosystem in regards to code bundling and bundle optimisation. Taking into consideration that Embroider allows for a much more flexible build pipeline solution in Ember apps, it’s also worth mentioning that the v2 implementation effectively supersedes the Packager RFC (4).

The project is on its way to 1.0 release. Although it’s not recommended to rely on Embroider builds in production yet, users are encouraged to try out Embroider in their own apps (5) and most importantly, file issues and bug reports to pave the way to its first major release (6). You can choose to integrate a feature flag in your app’s build configuration to switch between Broccoli and Embroider builds easily and evaluate the current benefit for yourself (7):

// ember-cli-build.js
'use strict';
const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    // Add options here
  });

  // opt-in to classic builds via `CLASSIC=true ember serve`
  if (process.env.CLASSIC) { 
    return app.toTree();
  }

  const Webpack = require('@embroider/webpack').Webpack;
  return require('@embroider/compat').compatBuild(app, Webpack);
};

Further Reading

To learn more about the motivation behind Embroider and what it does, be sure to check out @ef4’s detailed Embroider introduction, featuring an interesting live demo at the EmberJS Austin meetup. The project’s documentation is a great resource to learn more about its use. Listen to another insightful interview with @ef4 about Embroider at the Embermap podcast and don’t miss out on giving the RFC for the v2 addon implementation a read!

Sources

This answer was published in Issue #104 of The Ember Times. Don’t forget to subscribe to the newsletter to get new Readers’ Questions and other development news right to your inbox. You can also submit your own questions! You will find a link at the bottom of the newsletter.

See you in the next issue! :sparkling_heart:

11 Likes
2

Will i be able to build and deploy ember engines independently using Embroider build way?