Early Access Open Now!

Diving into Ember Octane

43:27 | 6 videos, more to come

Angle Bracket Syntax

5:33 | added on 04/30

Template Best Practices

4:24 | added on 04/30

ES6 Native Classes with Ember

5:32 | added on 04/30

Computed Property and Ember Data Decorators

5:12 | added on 04/30

Getting Started with Glimmer Components

11:19 | added on 04/30

Tracked Glimmer Properties

11:27 | added on 04/30

Time

43 minutes of video

Content

6 videos

Angle Bracket Syntax

Get Started with this Course

To get started with this course, make sure to have Node.js version 10 or higher installed and install the latest version of NPM. If you need to install or upgrade Node.js check the official site to update your installation.

Next you'll need to git clone the starter project and install node_module dependencies using the following commands:

git clone https://github.com/embercasts/diving-into-ember-octane.git
cd diving-into-ember-octane
npm install

Once the project has been cloned and the dependencies have installed, start open the project in your favorite code editor and start the Ember server:

npm start

Now the development server should be running and the app should load on http://localhost:4200!

Ember Octane introduces a new Angle Bracket syntax to use components in templates. This new syntax allows for some new flexibility while keeping all of the features of traditional Curly Brace component syntax. Let's take a look!

Meet your instructor

Ryan Tablada

Instructor

Ryan Tablada is a Senior Engineer at Prototypal and member of the Ember Learning team. He formerly taught at the Iron Yard coding school and has been using Ember.js since 2011.

What You Will Learn

In this course, we'll convert our Library app to use Ember Octane by converting old features to the new Octane spec, build a new dark mode toggle for styling customization, and implement a cart service. In the process, you'll learn the new angle bracket component syntax as well as the templating patterns and linting that will help you separate components, properties, local variables, and helpers inside your templates. Then, you'll convert modules to use native ES2015 class syntax and decorators. Finally, you'll learn how to build native Glimmer components and use tracked properties to manage data updates within your app.

Purchase this Series

EARLY ACCESS OFFER