The Ember Times - Issue No. 170
👋 Emberistas! 🐹
Ember 3.23 released 🎉,
explore Ember/Glimmer component performance 🚅,
read the blog post on the Ember Octane mental model ✍️,
Ember + Tailwind 2.0 🎨,
learn how to use WebSockets with Ember Data 📟,
Glimmer apps with Snowpack 🔥️⛄,
and last, but not least, meet fractal-page-object ❄️!
Ember 3.23 Released 🐹
Version 3.23 of Ember.js, Ember Data, and Ember CLI was released on December 14th! Please use the ember-try addon to continuously test your projects against the latest Ember releases.
Ember.js 3.23 included improved error ergonomics, the invokeHelper from JavaScript Helper Invocation API RFC, and the helper manager from Helper Managers RFC. There were no deprecations in Ember 3.23.
Ember Data 3.23 deprecates najax requests when ember-fetch is installed to better guide users on how to update their app. If you do not have jQuery enabled, this deprecation does not apply to you.
There were no significant changes in Ember CLI 3.23.
Read the full Ember 3.23 release notes for the complete information.
Glimmer and Ember component performance playground 🚅
Using @glimmer/component instead of @ember/component can get you up to 2x speed boosts at almost half the memory consumption. -@nullvoxpopuli (source)
Play with the interactive browser demo or explore the source behind a performance comparison of Native JS, Ember Components and Glimmer Components. Feel the performance improvements the core team has achieved for yourself! 🔥
Within the source README.md are links to Twitter conversations happening across frameworks as well including similar projects for React (demo) and Svelte (demo). 🌐
Blog: Ember Octane is a new mental model ✍️
Chris Krycho (@chriskrycho) wrote a blog post on how Ember Octane is not a 1:1 translation from Ember Classic but rather a whole new way of thinking and designing your code. This new programming model means that some patterns that you’re used to using in the Classic paradigm do not work in the new paradigm.
Chris goes through a couple examples of code that was fundamentally coupled to Ember Classic idioms such as the Evented API and usage of didReceiveAttrs. The blog argues that although these cases were rare, it’s possible the abstraction would benefit from being reworked substantially towards the Octane idioms.
Read the full blog post on Chris’s blog or follow the discussion on GitHub!
Ember + Tailwind CSS 2.0 🎨
On the functional CSS train? Now that Tailwind 2.0 is out, you may be looking for guidance on setting it up in your Ember app, as there are some slight differences from Tailwind 1.x. Ray Tiley (@raytiley) put together tailwind-ember-example to demonstrate how to get things configured in Ember. Check out the conversation on Twitter or chime in on GitHub if you have more to add or run into any gotchas!
What's new in Tailwind 2.0? A new color palette, dark mode support, an extra wide 2XL breakpoint, and more. (Note that Tailwind 2.0 is not compatible with IE11, but IE11's end of life is set for 2021.) Check out Tailwind's fancy release trailer video or the blog post for more details.
Live updates with WebSockets in Ember Data 📟
If you want to learn how to update your Ember app with live data provided by others, Josh Justice (@CodingItWrong) wrote a blog about how to use WebSockets in combination with JSON:API to get live updates in your app.
The blog post is a step-by-step explanation with extensive code examples of using WebSockets with Ember Data. At the end of the blog post you will have a Todo List that will update information of all users to each other. Live updates are a new way of thinking about the data flow in your app, but the libraries that you probably are already using allow you to add them without adding too much code. This blog will give you a nice place to start experimenting with this cool technology.
Glimmer apps with Snowpack 🔥️⛄
There's an awesome new blog post from Rajasegar Chandran (@rajasegar) about how to build your Glimmer app with Snowpack 🔥️⛄!
The Glimmer VM runs the components we know and 💜 in Ember, and it is designed to run them super fast 🔥. Snowpack ⛄️ is a new, lightning-fast frontend build tool designed for the modern web. Snowpack leverages JavaScript's native module system.
The post explains how to create a Snowpack app, add dependencies such as Glimmer, and how to configure Snowpack.
It's an exciting foray into new technologies that are built to optimize our experience as developers and users of web technologies.
But that is not all. Rajasegar has also created a create-snowpack-app template to bootstrap your Glimmer app and use Snowpack.
There's also a sample Todo List app built using these exciting new technologies if you want to check it out.
Still not enough cool frontend bundler technology for you? Well, Rajasegar has written a follow-up post about how to use Rollup with a Glimmer app as well!
Meet fractal-page-object ❄️
Ben Demboski (@bendemboski) released fractal-page-object, a lightweight JavaScript page object addon for testing. It is framework-agnostic but is built with Ember and qunit-dom in mind. 🧡
Please give it a try and provide feedback. To learn more about testing with fractal-page-object, you can check out the README file.
Contributors' corner 👏
This week we'd like to thank Gavin Joyce (@GavinJoyce), Bryan Mishkin (@bmish), Alex Kanunnikov (@lifeart), Andrew A Lee (@drewlee), Eli Flanagan (@efx), Steve Calvert (@scalvert), Jeff Daley (@jeffdaley), Nicholas Rutherford (@nruth), Bryan (@BryanCrotaz), Steven Pham (@spham92), Suchita Doshi (@suchitadoshi1987), Isaac Lee (@ijlee2), Chris Garrett (@pzuraq), Tal Tchernihovski (@taltcher), Chris Manson (@mansona), Robert Wagner (@rwwagner90), Ava Gaiety Wroten (@hergaiety), Jen Weber (@jenweber), Robert Jackson (@rwjblue), Anne-Greeth van Herwijnen (@MinThaMie), Ewan McDougall (@mrloop), Jared Galanis (@jaredgalanis), Nick Schot (@nickschot), Ben Demboski (@bendemboski), Ricardo Mendes (@locks), Scott Newcomer (@snewcomer), Katie Gengler (@kategengler), Amy Lam (@amyrlam), Edward Faulkner (@ef4), and Chris Ng (@chrisrng) 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.
That's another wrap! ✨
Be kind,
Ava Wroten, Amy Lam, Anne-Greeth van Herwijnen, Chris Ng, Jared Galanis, Isaac Lee, and the Learning Team