The Ember Times - Issue No. 186

👋 Emberistas! 🐹

Read the blog post on Avoiding Lifecycle in Components, announcing Glimmer Apollo, new release for ember-responsive-image, and code in public: Ember dev streaming on Twitch.

---

Blog post: Avoiding Lifecycle in Components ✍️

NullVoxPopuli (@NullVoxPopuli) published a blog post on Avoiding Lifecycle in Components, namely the lifecycle hooks that come with ember-render-modifiers.

For some context, ember-render-modifiers was created from RFC 415: Render Element Modifiers which introduced three new generic element modifiers: {{did-insert}}, {{did-update}}, and {{will-destroy}}. The caveat however was that these modifiers were meant for quickly migrating away from classic Ember components to Glimmer components, because they largely allow you to use the same lifecycle hook methods you've already written while attaching them to these modifiers.

The blog outlines several possibilities to avoid using these modifiers:

• Creating your own custom modifier when behavior is tied to a particular DOM node or DOM tree
• Starting Ember 3.25, using a local modifier which is only referenced within your component
• Using useFunction from ember-resources to lazily load data instead of doing it in did-insert or did-update modifiers
• Handling destruction using registerDestructor from @ember/destroyable or using willDestroy directly from the Glimmer lifecycle hook

Read more about the different strategies to avoiding lifecycle in components at the Avoiding Lifecycle in Components blog post!

---

Announcing Glimmer Apollo 🎉

Josemar Luedke (@josemarluedke) shared Glimmer Apollo on Twitter, a new addon that integrates GraphQL in your Ember and Glimmer apps with a declarative API to query, mutate, and access GraphQL data.

For background, GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. Apollo Client is a popular, declarative data-fetching library for GraphQL. Glimmer Apollo uses the concept of Resources to enable the integration of Glimmer's autotracking system with Apollo Client. The library is also reactive: queries are automatically re-executed when arguments change. The UI reflects any changes when cache data has been updated.

Glimmer Apollo is written in TypeScript, allowing APIs to specify the shape of the result data and variables. TypeScript also has friendly IntelliSense while coding. Glimmer Apollo is also an Embroider native addon (v2) and integrates with FastBoot (server-side rendering). 💯

---

ember-responsive-image v3 release 🖼

Optimising image size and formats to improve performance can get complicated, but the ember-responsive-image addon has your back! Now you have even more reason to take advantage of its abilities following the annoucement by Simon Ihmig (@simonihmig) of version 3. This release provides support for Cloudinary and imgix image CDNs, further enriching a full set of functionality for re-sizing images and optimizing image loading times across all browsers. Go check it out.

---

Code in public: Ember development streaming on Twitch 📹

Chris Manson (@mansona) of the Ember Learning Team continues to livestream open source Ember development on Twitch! Check out the channel at twitch.tv/real_ate and give it a follow! In the most recent stream, Chris does some coding work on MelSumner/a11y-automation, then switches gears to empress/field-guide. Catch the next episode live every Thursday from 10:30-13:00 (GMT+2)!

---

Contributors' corner 👏

This week we'd like to thank Swaraj Rajpure (@swarajpure), Amy Lam (@amyrlam), Scott Newcomer (@snewcomer), Melanie Sumner (@MelSumner), Suchita Doshi (@suchitadoshi1987), Ricardo Mendes (@locks), Chris Manson (@mansona), Stefan Penner (@stefanpenner), Godfrey Chan (@chancancode), Chris Ng (@chrisrng), Jen Weber (@jenweber), Giles Thompson (@gilest), Katie Gengler (@kategengler), Jared Galanis (@jaredgalanis), Robert Jackson (@rwjblue), Dan Gebhardt (@dgeb), Nathaniel Furniss (@nlfurniss), Igor Terzic (@igorT), Thomas Wang (@xg-wang), Brenden Palmer (@brendenpalmer), Isaac Lee (@ijlee2), Steve Calvert (@scalvert), and Jessy Jordan (@jayjayjpg) for their contributions to Ember and related repositories! 💖

---

Connect with us 🤓

---

That's another wrap! ✨

Be kind,

Tim Foster, Chris Ng, Amy Lam, and the Learning Team