Table of Contents
Speaker IntroductionKyle 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.
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.
Execution of Function CodeAs the execution phase continues within the function scope, the same LHR and RHR operations are applied. Things get a little interesting with undeclared variables. They are automatically declared in the global scope.
Function Declarations, Function Expressions, and Block ScopeA 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.
Lexical ScopeBoth Lexical Scope and Dynamic Scope are two models of scope programming languages. Meaning "compile-time scope," Kyle uses a building metaphor to help explain Lexical Scope.
IIFE PatternThe Immediately Invoked Function Expressions (IIFE) Pattern is a technique used to hide scope involving wrapping code inside a function that is immediately called. This technique allows developers to create an object in their scope without polluting the outer scope.
IIFE Pattern QuestionsBefore discussing the let keyword, Kyle fields a few questions about syntax style with the IIFE pattern.
Block Scope in ES6In 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.
Problems with let keywordKyle 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.
Dynamic ScopeUsing a hypothetical example, Kyle briefly describes dynamic scope as it relates to Lexical scope.
zz: ScopeKyle presents a quiz about what was covered in the Scope section of this course and reviews the answers with the audience.
Exercise 1For this exercise, you will be using the files in the day1/ex1 folder. Look at the README.md file for exercise instructions.
Exercise 1: SolutionKyle walks through the solution for exercise 1.
Binding ConfusionAttempting 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.
Explicit BindingThe 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 added as of ES5 in the form of the "bind" method.
Quiz: thisKyle presents a quiz about the "this" keyword.
More Closure ExamplesKyle 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.
Module PatternsKyle explains the different module patterns that use closure. This includes the classic, modified, and modern patterns. He also discusses what to expect in ES6.
Quiz: ClosureKyle presents a quiz about the different closure topics he covered.
Exercise 2For this exercise, you will be using the files in the day1/ex2 folder. Look at the README.md file for exercise instructions.
Exercise 2: SolutionKyle walks through the solution for exercise 2.
Prototypes Explained, Part 1Using a code example from the slides, Kyle spends some time diagramming the relationship between an object and its prototype.
Prototypes Explained, Part 2Kyle 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.
Prototype LinkagesPrototype 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 the function code. This binding is beneficial as long as developers don't break any rules.
Linked Prototype DiagramKyle 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.
Quiz: Object PrototypesKyle presents a quiz about object prototypes and their behavior.
Exercise 3For this exercise, you will be using the files in the day1/ex3 folder. Look at the README.md file for exercise instructions.
Exercise 3: SolutionKyle walks through the solution for exercise 3.
OLOORather 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.
OLOO QuestionsNow 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.
Quiz: Prototype UnitKyle presents a quiz about the prototype unit.
Exercise 4For 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.
Exercise 4 SolutionKyle spends a few minutes at the beginning of the next day describing the solution to exercise 4.
Solving Callback ProblemsKyle 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.
GeneratorsGenerators 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.
PromisesKyle 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.
asynquenceKyle shows a library he wrote as an alternative to promises called asynquence. Sequences are automatically chained promises. His library, asynquence, represents asynchronous sequences.
Quiz: Async PatternsQuiz: Async Patterns
Exercise 5For 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.
Exercise 5 SolutionKyle spends a few minutes at the beginning of the next day describing the solution to exercise 5.