Table of Contents
Introduction
Introduction
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.Ember Octane Edition
Mike describes how the editions system works in Ember, and how this system ensures stability between versions.
Components & Helpers
Course App Setup
Mike guides students through setting up the app for the course and explains its basic foundations, including JSON server, Handlebars, and Tailwind.Ember Components
Mike creates components that are expressed based on outer HTML to replace parts of the initial application file, which results in more semantic code.Ember Arguments
Mike demonstrates how to customize components through parameterization of the previously created components using Ember arguments.Helpers & Unit Testing Setup
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.Helper Integration Testing
Mike creates an integration test for the helper function created in the previous lesson. The test makes use of Handlebars markup.
Basic Routing
Setting Up New Routes
Mike introduces the section on routing by demonstrating the process of building routes for the login and teams pages.Linking Routes with LinkTo
Mike utilizes Ember's LinkTo element within the sidebar component's HTML file to route clicks on the logout button to the login page.Acceptance Testing
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.Acceptance Testing Q&A
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
Event Handling with the on Modifier
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.Handling Form Submit
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.Decorators & Action Decorator
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.Login Form Integration Test
Mike creates an integration test for the login form, elminating whitespace for readability and asserting against an array using the deepEqual method.Stateful Components
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.Using Tracked Properties
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.Tracked Properties Q&A
Mike fields questions about previous versions of Ember, objects with tracked properties, and the first Ember release which includes native classes.Handlebars if Helper
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.Component Integration Tests
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
Services
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.Stubbing Services in Tests
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.Guarded Login & Team Routes
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.Auth State & transitionTo
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.Integration Tests for Logout
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
Outlets, URLs & Routes
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.Routing Dynamic Segments
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.URL Driven Models
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.Reflecting State in the UI
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.Introduction to Fetch
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.Making API Calls
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.Forwarding Routes
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
Container & Presentational Components
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.Container Components
Mike creates a container component and explains why it is necessary to create a new array when loading data for tracked properties.Presentational Components
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.createMessage Action
Mike defines an asynchronous action for creating chat messages in the JavaScript module file for the chat container component.Channel Footer State
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.Message Submit
Mike wires up the application to enable submitting chat messages by passing information through levels of the system, eventually reaching the channelApi object.Keeping UI in Sync
Mike modifies the application to keep the UI updated with newly added messages without requiring the page to reload.Component Architecture Q&A
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.deleteMessage Action
Mike demonstrates how to thread the action from the container component to the delete button to enable removing chat messages.
Performance
Server Rendering
Mike adds and configures Ember's server-side rendering for the application, and explains the ways that server-side rendering boosts performance.Service Worker & Offline
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.Production Build Performance
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.Production Build Q&A
Mike fields questions about how fastboot affects performance, the server script, JSON server, and setup for the production server.