Octane Octopus The Multi-Faceted Migration Jordan Hawker March 16th, 2020

Jordan Hawker Staff Frontend Engineer

Cooper Australian Cattle Dog 4 Years Old

LinkedIn Talent Solutions (LTS) Our products work together to deliver unique insights from the LinkedIn community to help build winning teams. • Talent Insights, Job Postings, Candidate Sourcing, Company Branding, & More • Built with Ember! • 3 Applications • Nearly 50 Internal Addons • Dozens more company-wide & community addons

Why is the migration experience important?

• Past Migrations Sucked • Stability Is Key • Productivity Is Paramount

Octane: Moving You Forward Without Holding You Back What Is Octane? Octane is an Edition of Ember that represents a set of new features meant to fundamentally modernize and improve the way we write Ember applications. Why Migrate To Octane? Octane adopts modern JavaScript features and brings in new patterns to streamline components, state management and more. Interoperability with classic Ember allows developers to build new Octane code while they’re still migrating. We’re all crossing the bridge together!

Octane Features You’ll learn more about these this week… • Angle Bracket Syntax • Native Classes • Named Arguments • ES5 Getters • Modifiers • Glimmer Components • Tracked Properties

Octane Migration What’s our approach?

Migration Goals What do we want to accomplish? • Unlock new features quickly • Reduce manual refactoring cost • Minimize overhead of learning new patterns • Accomplish migration with limited resources • No Logical Changes • Stay Productive!

How do we break this down for piecemeal migration?

When are Octane features available? Many features have been introduced over time throughout the Ember 3.x series. Most features are polyfilled and stable back to 3.8, and all features are available in 3.15. Addon authors can even update to Octane while supporting older versions!

Our Initial Plan Where we started six months ago 1. Upgrade to Ember 3.8 2. Enable Features & Polyfills 3. Codemod Supported Features 4. Upgrade to Ember 3.16 5. Convert Components to Glimmer 6. Convert Computed Properties to Tracked Properties

What We Recommend Now Phase 1

Upgrade to Ember 3.16. It’s the latest LTS, and no polyfills are needed!

Enable Octane Features Opt-in to these when you’re ready, then start using them! • Disable Implicit Application Wrapper • Enable Template-Only Glimmer Components • Enable Async Observers • Install @glimmer/component • Install @glimmer/tracking Note: ember-cli-update can do this!

Phase 2: Codemods

•Component Template Colocation •Angle Bracket Syntax •No Implicit This •ES5 Getters •Native Classes

Phase 3: Prepare For Glimmer

Remove Classic Patterns From Your Code Remember, your team is still being productive! @classic Decorators Workflow • These are added by the Native Class codemod to ease the migration • This decorator allows classic class methods like get/set and enforces the use of init over constructor for superclasses • Progressively convert EmberObject-based classes to Native Classes Remove Classic Ember Patterns • Observers • Ember event listeners such as this.on(‘init’) • Mixins ”Template-Only” Components • Enabling template-only glimmer components runs a codemod that creates a backing class for classic template-only components • Remove this backing class • Remove state mutations from helpers like mut • Remove any 2-way binding

Phase 4: Adopt Glimmer

The Final Steps Bring your old code up to your new standards Preliminary Component Refactors • Migrate classic components to empty tagname • Wrap component in a root element • Migrate classNames, classNameBindings, and attributeBindings • Migrate methods like click to {{on ‘click’}} • Move DOM manipulation to modifiers • Migrate action to on / fn modifiers Finish Glimmer Conversion • Convert classic components to Glimmer • Convert lifecycle hooks • Convert computed properties & .set to tracked properties • Convert computed properties in non- components to tracked properties Success! You now have a lighter, more ergonomic component interface.

Now all of your code is streamlined with modern Ember features!

Next Steps What does your Octane Migration look like?

Resources Information for tackling your Octane Migration • #topic-octane-migration on the Ember Community Discord • Octane Guides • Ember Atlas Recommended Octane Migration • Classic vs Octane Cheat Sheet • Coming Soon in Ember Octane • Ember-Codemods on GitHub

Key Callouts • Upgrade to Ember 3.16 • Octaneify Your Code • Use Octane While You Migrate • Logically, The Same Ember App!

Thank You! AxleHellfire elwayman02 Slides: jhawk.co/emberconf20