Ember Octane Essentials

The release of Ember's Octane Edition breaks nothing while changing everything. This leap forward in support modern JS and TS language syntax, dramatic simplification of the programming model, and continued dedication to 'stability without stagnation' set the stage for a new generation of opinionated single-page apps.

In this workshop, we'll build an Ember Octane app from scratch, staying focused on two core concepts: routing and Components. Along the way, we'll have plenty of opportunity to conquer state management flow challenges and learn about data flow, employ a variety of mechanisms for effortlessly handling user interactions, and leverage Ember's powerful, performant and declarative handlebars templates.

Ember Octane Essentials

Component Architecture

The Container/Presentational Component architecture pattern separates the world into components that either "do things" or "look like things". We'll look at how this pattern leads to code that's very easy to test, and use it to implement several features in our app that involve state and concurrency.

  • Component ArchitectureContainer & Presentational Components

    We'll take a close look at the container and presentational component architectural pattern where components can either do things or look like things, but never both. It'll be easy to see first-hand that this results in code that's easier to write, maintain, test and reuse.

  • Component ArchitectureCreate Chat Message

    We'll put our newfound Ember Octane knowledge to the test, and implement the "create a message" feature of our app

  • Component ArchitectureDelete a Chat Message

    We'll put our newfound Ember Octane knowledge to the test, and implement the "delete a message" feature of our app

  • Component ArchitectureNotification Center

    We'll put our newfound Ember Octane knowledge to the test, and implement the "notification center" feature of our app


Learn how to apply modern JavaScript and TypeScript language syntax like native classes, decorators, generators and async functions to modern Ember apps

See, first hand, how Glimmer Components are just as capable as Ember Components, while being simpler, easier, faster and smaller

Understand how the mental model of how data flows through your app has changed in a big way with Ember Octane

Revel in the ease of writing unit, integation and acceptance tests with Ember's first-class testing infrastructure

Study several handcrafted examples that highlight easy patterns for worry-free state management