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

  1. Courses
  2. Ember Octane Essentials
  3. Components

Components

Components are modular and reusable chunks of UI that can be composed together to build rich web experiences while keeping complexity under control. We'll explore how components have a well-defined contract with the outside world, how the tracked decorator can be used to keep your data and DOM in sync, how to handle user interactions like clicks and form submissions, and how to write quick and effective tests to ensure things work as they should.

  • ComponentsHandling User Interaction

    To handle user interaction, we'll need to involve a component with a JavaScript module. We'll create one for the Login form, and use the {{on}} modifier and @action decorator to invoke a component method when a DOM event is fired. We'll explore what would happen if we didn't use these tools in an effort to understand what each of them adds to the process.

  • ComponentsTracked Properties and Derived State

    In order to add some basic validation to our login form so that a user must be selected in order to authenticate, we'll introduce tracked properties, and explore how vanilla JavaScript getters can be used to create derived state.

  • ComponentsComponent Integration Tests

    Now that we've enriched our login experience, we'll write some component integration tests to protect our form validation from future regression.

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