—Course Overview
1m 30s
You Need a Starter Kit
- 19m 38s
—You Need a Starter Kit
2m 35s
—A Starter Kit Is an Automated Checklist
2m 34s
—Who Is This Course For?
4m 52s
—What Belongs in Your Starter Kit?
1m 16s
—Set Up Github
2m 56s
—Agenda
3m 53s
—Summary
1m 29s
Editors and Configuration
- 8m 8s
—Intro
0m 36s
—What To Look For in a JavaScript Editor
1m 46s
—JavaScript Editor Recommendations
1m 43s
—Editorconfig
1m 29s
—Demo: Editorconfig
1m 54s
—Summary
0m 37s
Package Management
- 10m 38s
—Intro
0m 47s
—Package Managers
2m 5s
—Demo: Install Node and npm Packages
4m 12s
—Package Security
1m 42s
—Demo: Node Security Platform
1m 2s
—Summary
0m 47s
Development Web Server
- 19m 26s
—Intro
0m 35s
—Development Web Servers
4m 31s
—Demo: Set up Express
4m 24s
—Sharing Work-in-progress
5m 33s
—Demo: Sharing Work-in-progress
3m 31s
—Summary
0m 50s
—Intro
0m 38s
—Automation Options
4m 55s
—Demo: npm Scripts
1m 48s
—Demo: Pre/Post Hooks
1m 36s
—Demo: Create Security Check and Share Scripts
2m 7s
—Demo: Concurrent Tasks
3m 24s
—Summary
0m 42s
—Intro
0m 57s
—JavaScript Versions
1m 37s
—Transpilers
6m 43s
—Babel Configuration
2m 45s
—Transpiling Build Scripts
1m 11s
—Demo: Set Up Babel
4m 9s
—Summary
1m 22s
—Intro
1m 27s
—Module Formats
1m 44s
—Why ES6 Modules?
2m 33s
—Choosing a Bundler
7m 25s
—Demo: Configuring Webpack
5m 33s
—Demo: Configure Webpack with Express
1m 36s
—Demo: Create App Entry Point
3m 21s
—Demo: Handling CSS with Webpack
2m 10s
—Sourcemaps
1m 20s
—Demo: Debugging via Sourcemaps
1m 51s
—Summary
1m 17s
—Intro
0m 49s
—Why Lint?
1m 55s
—Linters
1m 14s
—ESLint Configuration Decisions Overview
0m 44s
—Decision 1: Configuration File Format
0m 59s
—Decision 2: Which Rules?
0m 27s
—Decision 3: Warnings or Errors?
1m 46s
—Decision 4: Plugins?
0m 47s
—Decision 5: Preset
2m 3s
—Watching Files with ESLint
1m 41s
—Linting Experimental Features
1m 25s
—Why Lint Via an Automated Build?
1m 17s
—Demo: ESLint Set Up
7m 29s
—Demo: Watching Files
2m 20s
—Summary
1m 9s
Testing and Continuous Integration
- 42m 44s
—Intro
1m 6s
—Test Decisions Overview
1m 49s
—Decision 1: Testing Framework
2m 27s
—Decision 2: Assertion Libraries
1m 21s
—Decision 3: Helper Libraries
1m 23s
—Decision 4: Where To Run Tests
1m 44s
—Decision 5: Where Do Test Files Belong?
3m 8s
—Decision 6: When Should Tests Run?
2m 47s
—Demo: Testing Setup
4m 52s
—Demo: DOM Testing
5m 21s
—Demo: Watching Tests
1m 7s
—Why Continuous Integration?
1m 54s
—What Does Continuous Integration Do?
1m 3s
—Choosing a CI Server
1m 15s
—Demo: Travis CI
6m 3s
—Demo: Appveyor
3m 31s
—Summary
1m 46s
—Intro
0m 59s
—HTTP Call Approaches
5m 4s
—Centralizing HTTP Requests
1m 26s
—Demo: Fetch
6m 39s
—Selective Polyfilling
1m 11s
—Why Mock HTTP?
1m 5s
—How to Mock HTTP
3m 50s
—Our Plan for Mocking
2m 11s
—Mocking Libraries
3m 18s
—Demo: Creating a Mock API Data Schema
3m 14s
—Demo: Generating Mock Data
2m 45s
—Demo: Serving Mock Data via JSON Server
5m 54s
—Demo: Manipulating Data via JSON Server
4m 32s
—Summary
2m 8s
Project Structure
- 9m 47s
—Intro
0m 44s
—Why a Demo App?
1m 37s
—Tip 1: JS Belongs in a .js File
3m 35s
—Tip 2: Consider Organizing by Feature
0m 49s
—Tip 3: Extract Logic to POJOs
1m 34s
—Summary
1m 25s
Production Build
- 46m 1s
—Intro
0m 55s
—Minification and Sourcemaps
1m 12s
—Demo: Production Webpack Configuration with Minification
4m 12s
—Demo: Configure Local /dist Server
2m 48s
—Demo: Toggle Mock API
2m 52s
—Demo: Production Build npm Scripts
2m 44s
—Dynamic HTML Generation
2m 26s
—Demo: Dynamic HTML Generation
5m 5s
—Bundle Splitting
1m 17s
—Demo: Bundle Splitting
5m 53s
—Cache Busting
1m 35s
—Demo: Cache Busting
2m 59s
—Demo: Extract and Minify CSS
2m 23s
—Error Logging
1m 45s
—Demo: Error Logging
2m 10s
—Demo: HTML Templates via EmbeddedJS
4m 17s
—Summary
1m 20s
Production Deploy
- 26m 50s
—Intro
0m 51s
—Separating the UI and API
2m 23s
—Cloud Hosting
1m 8s
—Demo: Automated API Deploy via Heroku
8m 51s
—Demo: Automated UI Deploy via Surge
3m 51s
—Starter Kit Update Approaches
1m 13s
—Option 1: Yeoman
1m 7s
—Option 2: Github
0m 21s
—Option 3: npm
3m 18s
—Inspiration
1m 16s
—Challenge
1m 15s
—Summary
1m 10s