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. Templates

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.

  • TemplatesStarting with HTML and CSS

    The starting point for our workshop will begin with raw HTML and CSS. We'll begin with a high-level tour of a modern Ember app's folder structure, how to start our development webserver with Ember CLI, and the highest-level entry points for HTML and CSS markup.

  • TemplatesTemplate-Only Components

    The simplest and easiest components are only .hbs files! We'll start to break our large application.hbs file into smaller re-usable pieces, without needing to touch a single piece of JavaScript!

  • TemplatesParameterized Components

    One of the most powerful aspects of components is that they have an explicit contract with the outside world. We'll introduce the concept of arguments, which provide a mechanism for passing values into components.

  • TemplatesHelpers

    Handlebars helpers can be thought of as enabling functions for use in our .hbs files. We'll build two: one that's stateless and formats a date to a string, and another that formats timestamps relative to the current time (e.g., "3 minutes ago"). To do this, we'll apply the pattern of keeping the interesting code in vanilla JavaScript, and wrapping it with a thin layer of Ember to integrate it with the framework. As part of this exercise, we'll end up writing both a unit test for the date formatting utility, and integration tests for the helpers.

  • TemplatesA Multi-Page Experience

    We'll get our first taste of Ember's routing layer by moving our markup into independent /teams and /login pages, with a link to get from one to the other.

  • TemplatesAcceptance Tests

    To ensure that our routes and the "Logout" link continue to work properly, we'll write our first integration test to simulate a user going through the simple "Logout" workflow.

  • TemplatesMorning Break

    Morning coffee break

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