The Ember Times - Issue No. 193

– By Chris Ng, Jared Galanis

👋 Emberistas! 🐹

Happy 10th Birthday Ember 🐹, Ember Addon Roundup 🌎, First-Class Component Templates RFC 📖, Author Built-In Blueprints in TypeScript RFC in FCP ⌛️, Defaults & Initial Values in Octane 🔥, Uploading images to S3 in Ember 📸

Happy 10th Birthday Ember 🐹

On December 8th Ember.js completed another trip around the 🌞 and turned 10 years old! 🥳

Yehuda Katz (@wycats) recently tweeted about the milestone for Ember and called out some of the most notable things that have been achieved in Ember's history:

  • we adopted promises and made them the primary way to do async in Ember (2013)
  • we added first-class support for JS modules via ember-cli (2014)
  • we adopted React-style one-way data flow via Glimmer (2015)
  • we landed the VM architecture (Glimmer 2) as a drop-in, backwards-compatible change (2016). This change was cited by React as one of the technical motivations for Hooks.
  • Moved the primary Ember API from Ember.* (global) to an intentionally designed JS module API (2016)
  • Landed support for native JS classes (2017)
  • Landed support for ES getters and setters, eliminating the need for manual get/set (2018)
  • Eliminated mandatory dependency on jQuery (2018)
  • Tracked Properties and Autotracking (2019)
  • Landed the Octane Edition in a minor release as a backwards-compatible change (2019). This came with a revamped component system based on native JS features (no longer inheriting from the classic Ember.Object superclass), more composable DOM (modifiers), autotracking by default
  • Landed the primitives needed to support putting templates and JS in the same file, as well as multiple components in one file (2020). Also shipped a library that works with stable Ember that lets you use it today.
  • Landed Embroider, Ember's next generation, drop-in build system that natively supports npm packages, template imports (see above) and webpack bundling (2021). It also (already) supports route-based code-splitting for Ember apps that opt into slightly stricter (idiomatic) code
  • Large, real-world apps have been able to make the migration to route-based code splitting in a matter of a few weeks.
  • All of that doesn't include massive improvements to a11y, very strong TypeScript support (soon maintained officially by the framework team, once the relevant RFCs are approved), migration from a bespoke transpiler to Babel -> 6 -> 7 (transparently to users)
  • SSR with rehydration with only mild strictness restrictions like not using real DOM at the top level of your module (also idiomatic, basically necessary for tests to function well)

All of this has been achieved, and more! 🤯 And as Yehuda points out, all of this doesn't even include our amazing progress on governance and release cadence.

What's more, in honor of the occasion Mel Sumner (@MelSumner) created an amazing website tribute to the framework we know and 💛💙💜💚🧡 l️ove 💛💙💜💚🧡. The Why Ember site is now live! The site contains a ton of information about what makes Ember such a great choice, including resources for those new to the framework or considering migrating and a list of some awesome addons.

There have been many, many achievements over the last decade, and our core teams and community members alike deserve to be proud of what we have accomplished - congratulations to all and we can't wait to see what's next! 🎉🚀

Ember Addon Roundup 🌎

We’ve had several addons across the Ember ecosystem release updates recently, here’s what you may have missed and reasons to upgrade!

First-Class Component Templates RFC 📖

Following his fantastic blog series on Ember Template Imports, Chris Krycho (@chriskrycho) has opened a RFC covering First-Class Component Templates.

The RFC proposes that we adopt <template> tags as a format for making component templates first-class participants in JavaScript and TypeScript with strict mode template semantics. As Chris mentions, doing so would help provide a number of new capabilities to Ember and Glimmer users:

  • accessing local JavaScript values with no ceremony and no backing class, enabling much easier use of existing JavaScript ecosystem tools, including especially styling libraries—standard CSS Modules will “just work,” for example
  • authoring more than one component in a single file, where colocation makes sense—and thereby providing more control over a component’s public API
  • likewise authoring locally-scoped helpers, modifiers, and other JavaScript functionality

Go ahead and check out the RFC today.

Author Built-In Blueprints in TypeScript RFC in FCP ⌛️

There's another ✨ awesome ✨ RFC that's recently entered its final comment period. This one is on enabling blueprints to be written in TypeScript and was written by Chris Freeman (@cafreeman).

So if you are interested in contributing please head on over and comment on the RFC before time runs out!

Defaults & Initial Values in Octane 🔥

There's a cool new video on Defaults & Initial Values in Octane by Ilya Radchenko (@knownasilya)! 😎

This video continues the series that Ilya has been producing on features and patterns in developing with Ember Octane. In this episode Ilya checks out use of the localCopy decorator from tracked-toolbox to define class properties.

If you haven't seen the video you can find it here.

Uploading images to S3 in Ember 📸

Ever wanted to learn more about what it takes to upload files to a service like AWS S3 with Ember? Fortunately, there's a great new article by Balint Erdi (@balinterdi) on exactly that!

Balint walks us through the high-level architecture, setting up AWS for direct uploads, how to make a request for a pre-signed url, and implementing things in Ember (and a backend).

Take a look at the article when you get a chance!

👏 Contributors' corner

This week we'd like to thank Chris Thoburn (@runspired), Robert Wagner (@rwwagner90), Sergey Astapov (@SergeAstapov), @kumkanillam, Bing Dai (@michaelbdai), Scott Newcomer (@snewcomer), Mahema Singh (@MahemaS27), Jen Weber (@jenweber), @NullVoxPopuli, Isaac Lee (@ijlee2), Ricardo Mendes (@locks), Jared Galanis (@jaredgalanis), Bert De Block (@bertdeblock), Robert Jackson (@rwjblue), Kelly Selden (@kellyselden), Chris Ng (@chrisrng), Chirag Patel (@chiragpat), Tobias Bieniek (@Turbo87), Dave Laird (@kiwiupover), Godfrey Chan (@chancancode), Edward Faulkner (@ef4), Jacob (@jfdnc), @tarinrickett, Chris Krycho (@chriskrycho), Matthew Beale (@mixonic), and David Tang (@skaterdav85) 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,

Chris Ng, Jared Galanis and the Learning Team