How To Create Easy Shareable Ember Components

adidas Runtastic
Jul 24, 2017 · 2 min read

When we started building our Ember apps, we soon figured out that we wanted to have one place to share stylesheets, L10N and components as well as config files across all the different apps we create and maintain. Why did we want to do this? To keep everything maintainable and DRY (Don’t Repeat Yourself). Initially, we created a small, lightweight Ember addon we could easily include in all apps without encountering problems.

The longer we worked with this approach, the more we realized that we didn’t need all the shared content everywhere, but some of it still needed to be shared with a few apps. How could we avoid moving everything back into the apps directly or maintain different shared addons without increasing the payload size of each single app?

Every single piece of code from the shared addon got added in the compiled code, which caused the app size to grow without using all the pieces in the stack.
The first noticeable problem was that the page performance slowed and the page load time grew. Not nice. For us as developers, it quickly started to get annoying as the server startup and building of the apps took longer and longer. And nobody likes to wait — not for page load and even less when developing cool new things.

Only include what is needed

We introduced a way to include only the parts of our shared addon that we actually need (or exclude those we don’t).

Read full story on the adidas Runtastic blog

Written by

Interesting insights into everything tech at Runtastic and what we are currently working on in the way of IT.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade