English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 5h 19m | 733 MB
Starting a new JavaScript project from scratch is overwhelming. This course provides a playbook outlining the key decisions you need to make. Build a robust development environment that handles bundling, linting, transpiling, testing, and much more.
Building a JavaScript application from scratch today is overwhelming. You have to make decisions about package management, bundling, linting, transpiling, automated testing, and much more. There are literally over 40 important decisions to consider. This course is a playbook of potential options that provides a clear path through the key decisions. Along the way, we’ll build a robust automated development environment from the ground up using ES6. You’ll learn how to set up a reusable development environment that provides a powerful foundation for future projects, that’s tailored just for your team’s needs.
Table of Contents
1 Course Overview
You Need a Starter Kit
2 You Need a Starter Kit
3 A Starter Kit Is an Automated Checklist
4 Who Is This Course For?
5 What Belongs in Your Starter Kit?
6 Set Up Github
7 Agenda
8 Summary
Editors and Configuration
9 Intro
10 What To Look For in a JavaScript Editor
11 JavaScript Editor Recommendations
12 Editorconfig
13 Demo: Editorconfig
14 Summary
Package Management
15 Intro
16 Package Managers
17 Demo: Install Node and npm Packages
18 Package Security
19 Demo: Node Security Platform
20 Summary
Development Web Server
21 Intro
22 Development Web Servers
23 Demo: Set up Express
24 Sharing Work-in-progress
25 Demo: Sharing Work-in-progress
26 Summary
Automation
27 Intro
28 Automation Options
29 Demo: npm Scripts
30 Demo: Pre/Post Hooks
31 Demo: Create Security Check and Share Scripts
32 Demo: Concurrent Tasks
33 Summary
Transpiling
34 Intro
35 JavaScript Versions
36 Transpilers
37 Babel Configuration
38 Transpiling Build Scripts
39 Demo: Set Up Babel
40 Summary
Bundling
41 Intro
42 Module Formats
43 Why ES6 Modules?
44 Choosing a Bundler
45 Demo: Configuring Webpack
46 Demo: Configure Webpack with Express
47 Demo: Create App Entry Point
48 Demo: Handling CSS with Webpack
49 Sourcemaps
50 Demo: Debugging via Sourcemaps
51 Summary
Linting
52 Intro
53 Why Lint?
54 Linters
55 ESLint Configuration Decisions Overview
56 Decision 1: Configuration File Format
57 Decision 2: Which Rules?
58 Decision 3: Warnings or Errors?
59 Decision 4: Plugins?
60 Decision 5: Preset
61 Watching Files with ESLint
62 Linting Experimental Features
63 Why Lint Via an Automated Build?
64 Demo: ESLint Set Up
65 Demo: Watching Files
66 Summary
Testing and Continuous Integration
67 Intro
68 Test Decisions Overview
69 Decision 1: Testing Framework
70 Decision 2: Assertion Libraries
71 Decision 3: Helper Libraries
72 Decision 4: Where To Run Tests
73 Decision 5: Where Do Test Files Belong?
74 Decision 6: When Should Tests Run?
75 Demo: Testing Setup
76 Demo: DOM Testing
77 Demo: Watching Tests
78 Why Continuous Integration?
79 What Does Continuous Integration Do?
80 Choosing a CI Server
81 Demo: Travis CI
82 Demo: Appveyor
83 Summary
HTTP Calls
84 Intro
85 HTTP Call Approaches
86 Centralizing HTTP Requests
87 Demo: Fetch
88 Selective Polyfilling
89 Why Mock HTTP?
90 How to Mock HTTP
91 Our Plan for Mocking
92 Mocking Libraries
93 Demo: Creating a Mock API Data Schema
94 Demo: Generating Mock Data
95 Demo: Serving Mock Data via JSON Server
96 Demo: Manipulating Data via JSON Server
97 Summary
Project Structure
98 Intro
99 Why a Demo App?
100 Tip 1: JS Belongs in a .js File
101 Tip 2: Consider Organizing by Feature
102 Tip 3: Extract Logic to POJOs
103 Summary
Production Build
104 Intro
105 Minification and Sourcemaps
106 Demo: Production Webpack Configuration with Minification
107 Demo: Configure Local /dist Server
108 Demo: Toggle Mock API
109 Demo: Production Build npm Scripts
110 Dynamic HTML Generation
111 Demo: Dynamic HTML Generation
112 Bundle Splitting
113 Demo: Bundle Splitting
114 Cache Busting
115 Demo: Cache Busting
116 Demo: Extract and Minify CSS
117 Error Logging
118 Demo: Error Logging
119 Demo: HTML Templates via EmbeddedJS
120 Summary
Production Deploy
121 Intro
122 Separating the UI and API
123 Cloud Hosting
124 Demo: Automated API Deploy via Heroku
125 Demo: Automated UI Deploy via Surge
126 Starter Kit Update Approaches
127 Option 1: Yeoman
128 Option 2: Github
129 Option 3: npm
130 Inspiration
131 Challenge
132 Summary
Resolve the captcha to access the links!