The Ember Times - Issue No. 182

👋 Emberistas! 🐹

Using the in-element helper, migrating Controllers to top-level Components, Ember Upgrade Sprints, Ember development on Twitch, and remodeling an Ember App Part 2.


Using the in-element helper ⛳

Faith Or (@faith-or) wrote a blog post on how they migrated from ember-wormhole to the built-in in-element helper introduced in Ember 3.20.

Ember Wormhole is an addon that renders a child view somewhere else in the DOM outside of the component.

The in-element helper renders its block content outside of the regular flow, into a DOM element given by its destinationElement positional argument.

Common use cases for both include when a piece of UI is a logical child of a component but needs to render somewhere else such as a loading screen, a modal, tooltip or even a dropdown. The differences between the two are slight. Faith goes into more detail in the blog post.

There are 3 main takeaways.

  1. in-element needs the destination to exist before we use it, while ember-wormhole does not.
  2. With in-element, when the destination element changes, the content is re-rendered completely.
  3. By default, the in-element helper will replace all the contents of the destination element. (You will need to configure it not to using insertBefore=null.)

Read the full blog post on LinkedIn and check out the demo on GitHub!


Migrating Controllers to top-level Components in Ember 📖

In this blog post, Juan Manuel Azambuja (@juanazam) shows a real world example of how to replace your template contents with a single top-level component. The top-level component can then take on a similar role as the controller.

Juan presents a few tricks as well as a useful discussion of using ember-modifiers addon to solve updating issues. The blog sums up the advantages and disadvantages of the top-level approach, and cautions that the framework doesn't fully support this solution without some compromises.


Ember Upgrade Sprints 🆕

A key ingredient of app development is maintenance. Without refactoring code and upgrading dependencies often, our development cycle can slow down and we may fail to meet compliance. When you have a couple of apps to maintain, upgrading Ember may not be a big problem. What can you do when you have many apps to maintain and work with many other people?

In Ember Upgrade Sprints, Steve Tyler (@stevetyler) provides a few tips for upgrading apps with every LTS release (Long-Term Support). In addition, Steve shares some challenges that you may face and how you can orient your teams' sprints.

For more information, we encourage you to check out the blog post. What are some of your insights and resources for upgrading Ember apps and addons? Please share them with the community!


Ember development on Twitch.tv 📺

Chris Manson (@mansona) has started to stream Ember development on Twitch. In engaging Twitch streams Chris shows how he does maintenance and development in the Ember ecosystem. Every stream has a nice table of contents and time boxed periods where Chris works on a certain topic.

Every Thursday at 10:30 - 13:00 (GMT+2), you can join Chris on an adventure through contributing in Open Source, chat with other Ember enthusiasts and get inspired to contribute yourself.


Remodeling an Ember App Part 2 🐹

Part 2 of Jen Weber's (@jenweber) ✨fantastic✨ new series on bringing an older Ember app up-to-date with Octane and a modern Ember Data strategy is out now!

In part 2, Jen covers some testing and debugging strategies that Chris Thoburn (@runspired) shared and are particularly helpful when upgrading an Ember application.

From approaches to how to optimize running the tests suite to approaches on how to deal with linting errors to better understanding application test failures, there is a ton of great content in the post that developers of any experience level could learn from.

Be sure to continue to watch for additional posts with more great content as this series continues!


Contributors' corner 👏

This week we'd like to thank Sumit Dhanania (@sumitd94), Francesco Novy (@mydea), Hanna (she/her) (@hannakim91), Scott Newcomer (@snewcomer), Anne-Greeth van Herwijnen (@MinThaMie), Amy Lam (@amyrlam), Godfrey Chan (@chancancode), Esquith Allen (@esquith), Jared Galanis (@jaredgalanis), Camille TJHOA (@ctjhoa), Robert Jackson (@rwjblue), @sandstrom, Isaac Lee (@ijlee2), Dave Laird (@kiwiupover), Nathaniel Furniss (@nlfurniss), Chris Ng (@chrisrng), Kelly Selden (@kellyselden), Giles Thompson (@gilest), Sander Melnikov (@sandydoo), Steve Calvert (@scalvert), Stefan Penner (@stefanpenner), James Herdman (@jherdman), Matthew Beale (@mixonic), Simon Ihmig (@simonihmig), Jaco Joubert (@jacojoubert), Bryan Mishkin (@bmish), Charles Fries (@charlesfries), Cory Forsyth (@bantic), Chirag Patel (@chiragpat), Cyrille David (@dcyriller), Katie Gengler (@kategengler), Prakash Choudhary (@prakashchoudhary07), Ankush Dharkar (@ankushdharkar), Chris Manson (@mansona), Robert Wagner (@rwwagner90), Tim (@fozy81), Tobias Bieniek (@Turbo87), and Sara Cope (@saracope) for their contributions to Ember and related repositories! 💖


Connect with us 🤓

Office Hours Tomster Mascot

Wondering about something related to Ember, Ember Data, Glimmer, or addons in the Ember ecosystem, but don't know where to ask? Readers’ Questions are just for you!

Submit your own short and sweet question under bit.ly/ask-ember-core. And don’t worry, there are no silly questions, we appreciate them all - promise! 🤞

Want to write for the Ember Times? Have a suggestion for next week's issue? Join us at #support-ember-times on the Ember Community Discord or ping us @embertimes on Twitter.

Keep on top of what's been going on in Emberland this week by subscribing to our e-mail newsletter! You can also find our posts on the Ember blog. See you in two weeks!


That's another wrap! ✨

Be kind,

Tim Foster, Anne-Greeth van Herwijnen, Chris Ng, Isaac Lee, Jared Galanis, Amy Lam, and the Learning Team