Advanced JS, Web Performance & Realtime Node.js
0:00:00 - 0:13:57
Kyle Simpson is back with his second Frontend Masters workshop. He starts with a little background about himself including links to his website, open source projects, and contact information.
0:13:58 - 0:19:34
Speaker Introduction (Part 2)
Kyle makes his living teaching and presenting around the world. He provides links to all of his presentations and talks a little about the new book he's writing.
0:19:35 - 0:22:59
0:23:00 - 0:32:16
ECMAScript Language Specification
- 0:00:00 - 0:13:57 Speaker Introduction Kyle Simpson is back with his second Frontend Masters workshop. He starts with a little background about himself including links to his website, open source projects, and contact information.
- 0:58:51 - 1:10:24 Execution of Function Code As the execution phase continues within function scope, the same LHR and RHR operations are applied. Things get a little interesting with undeclared variables. They are automatically declared on the global scope.
- 1:23:36 - 1:33:39 Function Declarations, Function Expressions, and Block Scope A function declaration occurs when the function keyword is the first word of the statement. Functions assigned to a variable become function expressions. Kyle explains these difference while also describing why it is bad to use anonymous functions.
- 1:33:40 - 1:38:44 Lexical Scope There are two models of scope programming languages typically use: Lexical Scope and Dynamic Scope. Lexical scope means "compile-time scope". Kyle uses a building metaphor to help explain Lexical Scope.
1:47:59 - 1:57:28
The Immediately Invoked Function Expressions (IIFE) Pattern is a technique used to hide scope. It involves wrapping code inside a function that is immediately called. This allows developers to create object in their own scope without polluting the outer scope.
- 1:57:29 - 2:01:54 IIFE Pattern Questions Before discussing the let keyword, Kyle fields a few questions about syntax style with the IIFE pattern.
- 2:01:55 - 2:06:02 Block Scope in ES6 In ECMAScript 6, the "let" keyword will implicitly create a block-level scope and add declarations to that scope rather than the enclosing function. The most common use-case for the let keyword is for loops.
2:06:03 - 2:14:09
Problems with let keyword
Kyle describes a few issues he has with the let keyword. Some of his issues are stylistic, but others are related to common variable functionality like hoisting. Kyle discusses his solutions for these issues and a tool he created to help.
- 2:16:02 - 2:17:41 zz: Scope Kyle presents a quiz about what was covered in the Scope section of this course and reviews the answers with the audience.
- 2:30:42 - 2:33:45 Exercise 1 For this exercise, you will be using the files in the day1/ex1 folder. Look at the README.md file for exercise instructions.
- 2:33:46 - 2:41:37 Exercise 1: Solution Kyle walks through the solution for exercise 1.
- 2:53:43 - 3:00:15 Binding Confusion Attempting to force the this keyword into a different lexical scope can lead to some binding confusion. Kyle pulls an example he found on Stack Overflow around this confusion to further demystify usage of the this keyword.
- 3:00:16 - 3:13:06 Explicit Binding The explicit binding rule allows developers to use the call method and pass an explicit reference for the this binding. Explicit bindings can also be set using the apply method. Kyle explains explicit bindings and also detours into a discussion about a technique he calls hard binding. Hard binding was actually added as of ES5 in the form of the bind method.
- 3:21:13 - 3:24:40 Quiz: this Kyle presents a quiz about the this keyword.
- 3:39:19 - 3:44:36 More Closure Examples Kyle demonstrates a few additional closure examples inside loops and the misconceptions that arise. He also compares closure to traditional object references to explain the difference.
- 3:44:37 - 3:55:07 Module Patterns Kyle explains the different module patterns that use closure. This includes the classic, modified, and modern patterns. He also discusses what to expect in ES6.
- 3:55:08 - 3:59:03 Quiz: Closure Kyle presents a quiz about the different closure topics he covered.
- 3:59:04 - 4:00:58 Exercise 2 For this exercise, you will be using the files in the day1/ex2 folder. Look at the README.md file for exercise instructions.
- 4:00:59 - 4:11:15 Exercise 2: Solution Kyle walks through the solution for exercise 2.
- 4:16:17 - 4:26:16 Prototypes Explained, Part 1 Using a code example from the slides, Kyle spends some time diagramming the relationship between an object and its prototype.
- 4:26:17 - 4:33:11 Prototypes Explained, Part 2 Kyle explains the relationship between __proto__ (dunder-proto) and the prototype keyword and how both reference the underlining prototype. ES5 added a standardized way to do this using the getPrototypeOf method.
- 4:33:12 - 4:41:42 Prototype Linkages Prototype linkages allow delegation to other objects to hand method calls or property references. This allows additional objects to be created from a prototype with duplication of function code. This binding is beneficial as long as developers don't break any rules.
- 4:48:06 - 4:52:28 Linked Prototype Diagram Kyle revisits the prototype diagram he drew on the whiteboard earlier. This time, however, he shows a more complex version outlining the relationship of the two linked prototypes.
- 4:52:29 - 4:55:31 Quiz: Object Prototypes Kyle presents a quiz about object prototypes and their behavior.
- 4:55:32 - 4:58:18 Exercise 3 For this exercise, you will be using the files in the day1/ex3 folder. Look at the README.md file for exercise instructions.
- 4:58:19 - 5:05:02 Exercise 3: Solution Kyle walks through the solution for exercise 3.
- 5:10:08 - 5:16:22 OLOO Rather than relating prototypes to inheritance, Kyle demonstrates that prototypes allow actions to be delegated to other objects. Kyle refers to this a Objects Linked to Other Objects or OLOO. He modifies the previous example to use this OLOO technique.
5:16:23 - 5:25:26
Now that Kyle has explained this OLOO method for creating and delegating objects, he spends a few minutes answering audience questions. He also compares the old prototype-based code with the new OLOO code and shows all the prototype functionality is moved to the Object.create method.
- 5:25:27 - 5:32:41 Quiz: Prototype Unit Kyle presents a quiz about the prototype unit.
- 5:32:42 - 5:34:53 Exercise 4 For this exercise, you will be using the files in the day1/ex4 folder. Look at the README.md file for exercise instructions. In the interest of time, Kyle gives this exercise to the audience as a "homework" assignment.
- 5:34:54 - 5:57:14 Exercise 4 Solution Kyle spends a few minutes at the beginning of the next day describing the solution to exercise 4.
- 6:05:26 - 6:08:25 Solving Callback Problems Kyle demonstrates a few techniques developers have used to get around callback issues. For example, providing separate callbacks in the case of success and failure functionality. Most of these solutions only lead to more inversion of control.
- 6:08:26 - 6:15:55 Generators Generators are coming in ES6. A generator is a new type of function that can be paused during execution and resumed at a later time. The are paused using the yield keyword.
- 6:15:56 - 6:23:56 Promises Kyle explains how promises are a way to subscribe to the completion of a task. For example, when a function is called, a promise will let you know when the function completes. Kyle demonstrates jQuery's implementation of promises and compares it to the native implementation in ES6.
6:23:57 - 6:29:41
Kyle shows a library he wrote as an alternative to promises called asynquence. Sequences are automatically chained promises. His library, asynquence, represents asynchronous sequences.
- 6:29:42 - 6:32:06 Quiz: Async Patterns
- 6:32:07 - 6:34:38 Exercise 5 For this exercise, you will be using the files in the day1/ex5 folder. Look at the README.md file for exercise instructions. In the interest of time, Kyle gives this exercise to the audience as a "homework" assignment.
- 6:34:39 - 6:54:24 Exercise 5 Solution Kyle spends a few minutes at the beginning of the next day describing the solution to exercise 5.