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

Stage One Templates

Ember's declarative templates allow components and pages to be described using familiar Handlebars syntax. We'll start with regular HTML and extend the vocabulary we can use in templates by using helpers and template-only components.

  • Duration: 105 minutes
Schedule

Stage Two 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.

  • Duration: 90 minutes
Schedule

Stage Three Services & Dependency Inection

Services are Ember's primary tool for sharing state and behavior across many concerns in an application. We'll build a service for authentication state, and demonstrate how we can use Ember's dependency injection system to safely "stub" it in tests.

  • Duration: 105 minutes
Schedule

Stage Four Routing

Ember's routing layer provides some powerful primitives for making sure our app is URL-driven. We'll build up a mental model for Ember's hierarchy of routes and transitions between them, and quickly move on to more advanced topics like redirecting users and preventing "logged out" users from entering certain parts of the app.

  • Duration: 135 minutes
Schedule

Stage Five 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.

  • Duration: 120 minutes
Schedule

Stage Six Performance & PWA

Making a blazing-fast ember app is easier than ever. We'll tap into the power of Ember's rich addon ecosystem to add a service worker to our app, allowing it to work offline, and fastboot for a fast server-rendered initial page load. In the end, we'll have a 0.2 page load time on desktop class browsers, and 0.7s over a 3G network connection on mid-range mobile devices!

  • Duration: 0 minutes
Schedule

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