Mike North
Stripe
Course Description
Learn to build an Ember Octane app from scratch that works as a Progressive Web App (PWA), while staying focused on Ember’s main core concepts: routing and components. You’ll get hands-on experience with glimmer components, tracked properties, actions, modifiers and everything you need to know to build performant, production-ready Ember apps with Octane!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: July 2, 2019
Topics
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 9 minutes
Mike North introduces the course on Ember Octane, which was created for apps with high levels of data and interactivity, and will be used throughout the course to build an interactive chat application.
Mike describes how the editions system works in Ember, and how this system ensures stability between versions.
Components & Helpers
Section Duration: 30 minutes
Mike guides students through setting up the app for the course and explains its basic foundations, including JSON server, Handlebars, and Tailwind.
Mike creates components that are expressed based on outer HTML to replace parts of the initial application file, which results in more semantic code.
Mike demonstrates how to customize components through parameterization of the previously created components using Ember arguments.
Mike demonstrates how to create helper functions and then navigates to the test runner page for Ember. QUnit, the default testing framework for Ember, is introduced.
Mike creates an integration test for the helper function created in the previous lesson. The test makes use of Handlebars markup.
Basic Routing
Section Duration: 24 minutes
Mike introduces the section on routing by demonstrating the process of building routes for the login and teams pages.
Mike utilizes Ember's LinkTo element within the sidebar component's HTML file to route clicks on the logout button to the login page.
Mike describes how to perform acceptance testing for the purpose of testing routing functionality, using ember-cli to generate an acceptance test for the logout button.
Mike fields questions about other ways to perform acceptance testing, pauseTest vs debugger statements, debugging mode, and inspecting the state during pauseTest.
Component State & Actions
Section Duration: 53 minutes
Mike explains how to handle user interactions in Ember through the "on" modifier, which Mike adds inside of an HTML tag and uses to refer to a modifier function within the component's JavaScript module.
Mike adds code to get the user id for the form submission, prevent the default behavior during the submit event, and log the user id. Mike then fields questions about event timing and adding custom global code.
Mike describes how to create decorators and action decorators in Ember, and how this solves the problem of which "this" context a function is using by binding the method to the component instance.
Mike creates an integration test for the login form, elminating whitespace for readability and asserting against an array using the deepEqual method.
Mike begins to add state to the login component by creating a property for the userId. Then, the property is used to control the initial selection state.
Mike differentiates one-way and two-way data binding, giving the implications of one-way data binding by default in Ember, and demonstrates usage of the @tracked decorator. Then, the state is used to handle whether form submission is enabled.
Mike fields questions about previous versions of Ember, objects with tracked properties, and the first Ember release which includes native classes.
Mike makes use of the handlebars if helper to disable the login message if submit is disabled, and also adds conditional CSS so the submit button reflects whether form submission can occur.
Mike updates the previous login integration test based on recent changes, and uses the test helper fillIn to create a more meaningful integration test that checks if the submit button is enabled after an option is selected.
Application State
Section Duration: 44 minutes
Mike creates a service for user authentication and configures the service to hold onto the ID of the logged in user by utilizing local storage in the browser.
Mike demonstrates how to create a mock auth service meant to be stubbed in during testing, wires it to the auth service tests, and runs tests to show that the mock service is being successfully stubbed in.
Mike uses Ember's routes and hooks to configure the site so that only logged in users can reach the Teams page, and only logged out users can reach the Login page.
Mike gives reasons for using either replaceWith or transitionTo, urging students to choose one over the other based on testing and user history. Then, Mike adds login functionality to the auth service.
Mike walks through the creation of the integration test for logout functionality, and fields questions about when to use the action decorator.
Nested Routes & Async Data
Section Duration: 57 minutes
Mike discusses the structure of the application, displaying an animation showing how URLs, nested routes, and templates are connected. Mike uses the animation to set up the next steps for the course.
Mike creates new dynamic routes with ember-cli, analyzes the automatically-generated parts of router.js, and then breaks up application code between files so that each contain only what is necessary, moving more specific content into more specific files.
Mike configures the application to pass data from routes down into templates (with the team selector as an example) and introduces the each helper, which is similar to a for loop in handlebars.
Mike modifies the application to create a URL-driven state, making changes so that the UI reflects changes in the route. Then, Mike refactors a test based on recent changes.
Mike explains the benefits of using fetch to retrieve data from the database file instead of hard-coded data. A change is made to the teams model to utilize a fetch request and return the response.
Mike demonstrates how to use fetch to gather data from the API, iterates over channel data for teams to build the channel list, and explains best practices for reaching across models.
Mike discusses index pages and how they relate to forwarding routes. Then, a default is set for the teams and channels routes in the cases that there is and is no data available.
Component Architecture
Section Duration: 1 hour, 10 minutes
Mike demonstrates how to apply the common component architecture pattern of container and presentational components to the application. The roles of container and presentational components are presented.
Mike creates a container component and explains why it is necessary to create a new array when loading data for tracked properties.
Mike introduces the yield helper, the did-insert modifier, and the did-update modifier to expose message data from the container and re-render on update. Then, Mike pipes data into the presentational component and discusses strategies for test creation.
Mike defines an asynchronous action for creating chat messages in the JavaScript module file for the chat container component.
Mike generates a component for the channel footer, adds actions for events related to submitting chat messages, and handles the state by controlling when the message send button is enabled or disabled.
Mike wires up the application to enable submitting chat messages by passing information through levels of the system, eventually reaching the channelApi object.
Mike modifies the application to keep the UI updated with newly added messages without requiring the page to reload.
Mike fields questions about currying, Ember's "fn" helper, clearing the message body, using more than one handler for submitting messages, content for template files, and removing function helpers.
Mike demonstrates how to thread the action from the container component to the delete button to enable removing chat messages.
Performance
Section Duration: 27 minutes
Mike adds and configures Ember's server-side rendering for the application, and explains the ways that server-side rendering boosts performance.
Mike explains what the purpose of a service worker is and modifies the application to be a progressive web app that can run in the browser offline as a second independent program.
Mike generates a production build of the application using the Ember build --prod command and a production-grade server, and then demonstrates how to audit performance within the browser.
Mike fields questions about how fastboot affects performance, the server script, JSON server, and setup for the production server.
Wrapping up
Section Duration:
Mike concludes the course by summarizing what was learned, and discussing what Ember Octane offers as a way to build applications.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops