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
Ā modifiersHandling 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Ā š¤
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, Chris Ng, Amy Lam, and the Learning Team