The Ember Times (26 Part Series)
Happy New Year, Emberistas! 🐹
This week, we have an Ember Octane Special Edition for you!
We've collected as much info as possible about this new Ember edition. So throughout this post, you will find useful information to help you get the most out of Ember Octane.
Octane is modern Ember, and I’m psyched that we got it over the finish line. Have fun building apps! ~ Yehuda Katz (@wycats)
This week: What is the Octane Edition? 🙋♀️🙋♂️, where can I learn more 🤓, how to migrate to Octane 🐹🏗️, community feedback from Outdoorsy 👏, conquer Octane with Ember Atlas 🗺🌍, and Octane at EmberConf 2020 📢!
Ember Octane introduces the idea of editions. Let's look at what an edition means in Ember and what features you can find in the Octane edition.
In Ember, an edition represents a cohesive programming model and can focus on a particular theme. For example, the Octane edition is focused on productivity and performance!
Having editions helps you and the Ember teams in many ways:
You can see the big picture of how features work together. Before editions were introduced, you might have had to stay on top of RFCs and release notes to understand why a feature was added or removed.
Editions mark an opportunity to update Ember documentation, idioms, addons, and tooling (Ember Inspector, blueprints, codemods, and error messages). The end result is a cohesive, polished experience for you!
Many new features cohere to form a new component model and a new reactivity system for Ember. These two big changes are keystone to Octane's ergonomic improvements.
You can find the full list of features in the Ember Guides. We'll highlight a few major ones below.
Glimmer components offer a greatly simplified API, for both template and backing class. Say hi to outer HTML semantics and namespaced arguments!
Modifiers let you interact with the DOM—animate this element, scroll to that element, autofocus on the first form input, etc. Modifiers work on any element.
If you want to try out Ember Octane, you might want to learn more about the new APIs and best practices for building modern Ember apps. We highly recommend the following learning resources to you:
The Ember community worked hard to make the official Ember documentation consisting of the Guides, the Tutorial and the API Docs ready for the release of Octane. Be sure to make use these learning materials your first stop for getting started with Ember Octane.
- The official documentation - Ember.js Guides
- The official beginner's tutorial - Build the Super Rentals app
- The official API reference - Ember.js API Docs
Octane provides a very gentle on-ramp and lets you learn and grow into the framework as the needs arise in your app. You start with HTML templates, then extract pieces into template-only components for clarity, add arguments for reusability, add a js class to add behavior, add a service for shared functionalities, install an addon for more cool stuff, etc. I’m excited to see all of these pieces coming together and finally ready to teach the version of ember we had envisioned. Check out the new tutorial to see the difference for yourself! ~ Godfrey Chan (@chancancode)
- Octane Core Concepts Blog Series by Chris Garrett (@pzuraq)
- Most Common Mistakes Using Octane and How to Avoid Them by Jen Weber (@jenweber)
- Bringing Clarity to Templates through Ember Octane by Ricardo Mendes (@locks)
- Ember Octane Fundamentals Course on Frontend Masters (paid subscription) by Mike North (@mike-north)
Ember Octane represents a big shift in Ember's syntax, features, and mental models. There is, however, no need for a stop-the-world migration, Octane provides an opt-in method of migration where you can apply each core feature enhancement incrementally.
If you are migrating an existing Ember application to Octane we have an excellent list of resources to help you out:
- Ember Guides: Octane Update Guide
- Rewriting Apps in Ember Octane by Isaac Lee (@ijlee2)
- The Ember Octane vs. Classic Ember Cheat Sheet
- Ember Atlas: Recommended Migration Order
Whatever you end up doing, you won’t have to do it alone as members of the community have generously contributed numerous codemods to help us to migrate efficiently.
- Angle Brackets Codemod
- Tracked Properties Codemod
- Native Class Codemod
- No Implicit This or foo to this.foo Codemod
- ES5 Getter Codemod
- Template Colocation Migrator
If you need help along the way, visit the Ember Community chat and forums.
Wondering about who has been using Ember Octane features in production?
We’ll spend some time over the next several issues focusing on projects and teams who are using Ember Octane in their apps.
Today’s focus is on Outdoorsy, a peer-to-peer marketplace that connects RV and camper van owners with campers encouraging them to get into the great outdoors. Outdoorsy maintains three large-scale Ember apps for their flagship web product.
The developers at Outdoorsy have been using Octane features in production since September and have reportedly had a super enjoyable experience. Jaco Joubert (@jacojoubert), a Front-End Engineer at Outdoorsy, says "Octane has allowed us to build highly interactive experiences that are well tested in an unbelievably short time. Leveraging Octane we rebuilt our entire search experience from the ground up in less than five weeks, something which would have taken orders of magnitude longer before."
Outdoorsy's Ember app is a particularly nice highlight of what's possible in an Ember Octane upgrade experience. The app was written in classic Ember style over the last 4 years or so, and is large enough that a team of 26 developers works on it (about half of whom are focused on the frontend). The app is actually a monorepo of several Ember apps and addons and employs a rehydrated Ember Fastboot app for its public facing pages for SEO purposes.
As with any upgrade of an app this size, there were pain points, but the Outdoorsy team took advantage of the opportunity of being together at their fall engineering summit (the team is distributed, and many work remotely) to tackle the upgrade over the course of a week.
The new Octane syntax took a bit of getting used to, particularly around how to make use of tracked properties in place of computed properties, but the team is enjoying using the new auto-tracking system and class based components in many places throughout the application, and plans on incrementally updating all of their components over time.
Almost all new work that gets done on the application is written with Glimmer components and in a clean and idiomatic Ember Octane way.
Some of the big benefits that the Outdoorsy team experienced from Octane are a simplified mental model of how Ember works, improved code readability, and easier reasoning about what context a state is derived from. Not having to reference several files to determine where a property is initially defined was definitely a boon to developer productivity.
It’s great to hear that Octane is working really well in a production application at the scale and complexity of Outdoorsy’s.
We know there are lots of other great examples of Octane being used in the wild. If you’d like to share your experiences, please feel to reach out to the Ember Times team.
Ember’s staying power comes from the energy and dedication of our community, and the Octane release is a great example of how the community can come together, agree on a plan, and execute to a high-level of polish. ~ Edward Faulkner (@ef4)
We alluded to the Ember Atlas Octane Upgrade Guide earlier. This section includes information to help Ember developers upgrade from Classic apps/addons to Octane ones. 🚀
So what is Ember Atlas?
Ember Atlas is an unofficial resource for Ember curated by various people in the Ember Community. It includes best practices, upgrade guides and more! The Ember Atlas is built to be a curated wiki for Ember for various content that isn't in the guides yet, or won't ever make it in.
If you want to listen and talk to people about Octane, EmberConf in Portland, OR is the place to be! March 16th-18th will be filled with awesome talks by Godfrey Chan (@chancancode), Suchita Doshi (@suchitadoshi1987), DanMonroe (@DanMonroe) and many others.
It’s also a nice place to meet up with your Ember-friends and learn about many more topics. For more information, check out the EmberConf website and join the #ember-conf channel on the Ember Discord.
Ember has stability and staying power, and it has for a long while. That makes it super great to work with, and a great choice for companies and teams, but it also means our time in the hype-cycle spotlight happened a while back. Octane is an amazing improvement, and it’s also a great opportunity to get folks who are overly focused on the hype to give it another look. I hope our community members use the little buzz-bump to nudge Ember even further into their companies and projects. ~ Leah Silber (@wifelette)
That's another wrap! ✨
Chris Ng, Alon Bukai, Jessica Jordan, Anne-Greeth van Herwijnen, Isaac Lee, Jared Galanis, Amy Lam and the Learning Team