How do plugin-style addons really work in Ember.js projects? Senior Engineer Lisa Backer aims to answer that question in her technical deep dive at EmberConf 2019, March 18-20 in Portland, Ore. Along the way she’ll discuss the service-worker ecosystem and why searching for broccoli on Google won’t get you any closer to understanding those customizations in Ember. Read more of her thoughts and catch her at EmberConf.
What do you hope the audience gains from your presentation?
This is a technical “how-to” presentation, so there will be a lot of code we’re working through. That said, I really want to show people that digging into code doesn’t have to be a scary, daunting challenge. And once you’ve jumped in, the work can be truly rewarding.
There’s a system I use starting with understanding the concepts, researching documentation, and then studying the code in depth. When you break it down, the process is more manageable. I’ll walk through that process and demonstrate what I’ve learned about plugins, addons, and the build process along the way.
What are plugins for Ember.js?
Spoiler alert, a plugin architecture is actually used by much of the software we have in Ember everyday. Ember addons utilize a plugin architecture to add functionality to an Ember application. In the same way, addon plugins add functionality to an addon. When set up for the build process, this type of architecture can enable powerful functionality by simply installing the plugins you want and providing some configuration.
Powerful systems such as ember-service-worker and ember-cli-deploy use this type of strategy to enable Progressive Web Applications or complicated deployment strategies, respectively. In fact, a combination of ember addons in this style of architecture enables the development of a PWA with Ember.
Sounds great, right? Well, there are a few more things to understand to build or maintain systems like this on your own. To really understand you need to be able to read and write configuration, and be able to affect the build output with BroccoliJS. You also need to able to provide an API for plugins, and test the whole deal.
What tools do you use to help you understand a new implementation of code?
“Code Search” in Ember Observer is a great tool to search through existing addons to find out how they utilize various Ember addon hooks. I also do a lot of reading code while stepping through in my browser’s debugger tools to see how things are called. In cases when analyzing the build process, though, I do node debugging in VS Code and use Broccoli Stew to help track down the various stages of a build.
Why broccoli?
BroccoliJS is the build pipeline used by Ember applications. Broccoli trees, or nodes, are the states of files as they are transformed and prepared for the final build output. Despite a new Broccoli build web guide released recently, you wouldn’t know that if you just Googled the term. In addition to pictures of broccoli stalks, I found a question asking if broccoli is real. So that’s not helpful. But there is a tutorial from EmberConf 2018 that explains broccoli in an accessible way. I recommend developers start there or with the new site.
What are you looking forward to at EmberConf?
I’m looking forward to learning about Ember Octane and the newest direction for EmberJS. I always enjoy the Women Helping Women programs and this year the new evangelism track is high on my list. I’m also excited to see old friends from past conferences, form new friends through hallway chats, and, of course, doughnuts, ice cream, and hopefully getting to catch a performance by the Unipiper.
DockYard is a digital product agency offering exceptional user experience, design, full stack engineering, web app development, custom software, Ember, Elixir, and Phoenix services, consulting, and training.
