Ember Octane Fundamentals
Table of Contents
IntroductionMike 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 EditionMike describes how the editions system works in Ember, and how this system ensures stability between versions.
Components & Helpers
Course App SetupMike guides students through setting up the app for the course and explains its basic foundations, including JSON server, Handlebars, and Tailwind.
Ember ComponentsMike creates components that are expressed based on outer HTML to replace parts of the initial application file, which results in more semantic code.
Ember ArgumentsMike demonstrates how to customize components through parameterization of the previously created components using Ember arguments.
Helpers & Unit Testing SetupMike 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 TestingMike creates an integration test for the helper function created in the previous lesson. The test makes use of Handlebars markup.
Setting Up New RoutesMike introduces the section on routing by demonstrating the process of building routes for the login and teams pages.
Linking Routes with LinkToMike utilizes Ember's LinkTo element within the sidebar component's HTML file to route clicks on the logout button to the login page.
Acceptance TestingMike 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&AMike fields questions about other ways to perform acceptance testing, pauseTest vs debugger statements, debugging mode, and inspecting the state during pauseTest.
Component State & Actions
Handling Form SubmitMike 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 DecoratorMike 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 TestMike creates an integration test for the login form, elminating whitespace for readability and asserting against an array using the deepEqual method.
Stateful ComponentsMike 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 PropertiesMike 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&AMike fields questions about previous versions of Ember, objects with tracked properties, and the first Ember release which includes native classes.
Handlebars if HelperMike 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 TestsMike 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.
ServicesMike 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 TestsMike 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 RoutesMike 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 & transitionToMike 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 LogoutMike 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 & RoutesMike 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 SegmentsMike 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 ModelsMike 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 UIMike 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 FetchMike 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 CallsMike 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 RoutesMike 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.
Container & Presentational ComponentsMike 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 ComponentsMike creates a container component and explains why it is necessary to create a new array when loading data for tracked properties.
Presentational ComponentsMike 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.
Channel Footer StateMike 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 SubmitMike 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 SyncMike modifies the application to keep the UI updated with newly added messages without requiring the page to reload.
Component Architecture Q&AMike 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 ActionMike demonstrates how to thread the action from the container component to the delete button to enable removing chat messages.
Server RenderingMike adds and configures Ember's server-side rendering for the application, and explains the ways that server-side rendering boosts performance.
Service Worker & OfflineMike 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 PerformanceMike 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&AMike fields questions about how fastboot affects performance, the server script, JSON server, and setup for the production server.