Watch the new EmberMap video on the on modifier 🔦, mut and set autotracking in Octane 📖, Ember Twiddle updates 🌟, Ember performance tweaks 🏎, preview deployments with ember-cli-deploy and GitHub Actions ✅, and last, but not least, see helpers spawn from JavaScript files ✨!
Check out the new EmberMap video on the {{ opening_double_curly() }}on{{ closing_double_curly() }} modifier, a new way to attach events in Ember. It can be attached in either a plain HTML element or an Ember component.
The {{ opening_double_curly() }}on{{ closing_double_curly() }} modifier accepts two arguments: the event name and the function handler. The event name is actually the same argument that the vanilla JS API element.addEventListener(eventName) accepts. And the function handler is any action, meaning any properly bound function. It can either live on the component instance or be passed in as an argument.
There's a new blog post 🎉 by Chris Krycho (@chriskrycho) about some behavior that may surprise you involving auto-tracking when using mut or the set helper, and how they can differ from the use of actions in Ember Octane.
Read more about this at Chris' blog. It's a quick read that may prevent you some refactoring pain if you're aware of the issues ahead of time. 😃
Ember Twiddle 0.17.1 is here, now supporting Ember 3.18 and template colocation! Need to share an Ember code reproduction? Ember Twiddle is a JSFiddle for Ember.
Abhilash LR (@abhilashlr) blogs about optimizing build timelines & bundle size in your Ember apps, the first in a series on getting started with performance optimizations! Check out his tips and tricks in the writeup here. Highlights include:
Speeding up development
Removing tests from the dev build
Removing Mirage from the dev build
Minification, gzip or brotli compression, and fingerprinting
Asset size
Analyze bundle size and optimize asset size
Removing dependencies not needed on app boot
The smaller the page assets, the faster it is for the user to view them. The faster it is for the user to view the page with text and UI, the greater trust they have on our apps/websites.
But wait, there's more! In Abhilash's second part of the performance blog post series it's all about optimizing assets for that perfect Lighthouse score. It teaches you how to reduce the number of requests for application assets to the absolute minimum, optimize your images efficiently and many other modern best practices related to asset handling.
The proposal suggests the creation of a new API, that allows you to invoke helper functions via JavaScript and not only via templates (the only way how helpers can invoked in Ember apps today). This would extend Ember's reactive model by an API that:
allows a transparent reuse of common code and patterns
as, similarly to components, owning a lifecycle
is, unlike components, JavaScript class and template compatible.
If you want to learn more about the API design of invokeHelper, be sure to read the full RFC and post your questions and ideas in the comments below!
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! 🤞