Frontend Masters – Advanced JavaScript by Kyle Simpson (Jun 2014) [56 MP4]
English | Size: 2.49 GB (2,669,425,313 bytes )
Category: Tutorial
Kyle Simpson, author of the “You Don’t Know javascript” book series, details the inner workings of javascript in extreme detail. Gain an advanced understand of the core mechanics of the javascript language. This course deep dives into scope, closure, object oriented, and asynchronous programming in javascript.
Introduction
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.
– http://getify.me
– http://labjs.com
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.
– http://speakerdeck.com/getify
– http://youdontknowjs.com
0:19:35 – 0:22:59 javascript Resources Before jumping into the course content, Kyle runs through a few resources for javascript API documentation, writing styles, and the ECMAScript Language Specification.
– http://developer.mozilla.org/en-US/docs/javascript
– http://github.com/rwldrn/idiomatic.js
0:23:00 – 0:32:16 ECMAScript Language Specification Recently, Kyle tasked himself with finding clarification to the behavior of the “this” keyword. Kyle uses this example to demonstrate how to read and use the javascript specification.
– http://www.ecma-international.org/ecma-262/5.1
0:32:17 – 0:39:19 Course Plan Kyle explains the scope of this course. He will focus on the “what you need to know” parts of javascript. This includes coverage on Scopes, Closures, Object Oriented Coding, and Asynchronous Patterns.
Scope
0:39:20 – 0:49:48 Scope and the javascript Compiler Scope is where you go to look for things. The current version of javascript only has function scope. Kyle uses the concept of scope to help understand the way the javascript compiler works.
0:49:49 – 0:58:50 Compiling Function Scope As the javascript compiler enters a function, it will begin looking for declaration inside that scope and recursively process them. Once all scopes have been compiled, the execution phase can begin.
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:10:25 – 1:23:35 Scope and Execution Example Kyle walks the audience through another example of how the javascript compiler will declare and execute variables and functions. This example includes a nested function which creates a nested 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:38:45 – 1:47:58 Cheating Lexical Scope: eval As with most things in javascript, there are ways to cheat. Kyle demonstrates how the eval keyword can be used to cheat Lexical Scope rules. He also describes issues that arise when using the with keyword.
1:47:59 – 1:57:28 IIFE Pattern 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.
– http://benalman.com/news/2010/11/immediately-invoked-function-expression/
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.
– http://github.com/getify/let-er
2:14:10 – 2:16:01 Dynamic Scope Kyle briefly describes dynamic scope as it relates to Lexical scope. This is a theoretical example since it doesn’t actually exist in javascript.
2:16:02 – 2:17:41 Quiz: Scope Kyle presents a quiz about what was covered in the Scope section of this course and reviews the answers with the audience
.
2:17:42 – 2:30:41 Hoisting Hoisting is the moving of declarations to the top of the scope block during the compiling phase. Hoisting applies to both variable declarations and functions. Kyle spends some time explaining why hoisting exists in javascript and the gotchas surrounding it.
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:41:38 – 2:53:42 this Keyword Every function, while it’s executing, has a reference to its current execution context called “this”. This reference is javascript’s version of dynamic scope. Kyle dives into an explanation of the this keyword and it’s relationship to the call site of the function.
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:13:07 – 3:21:12 The new keyword Regardless of what you’ve been told, javascript does not have classes and the new keyword does not do any instantiation. Kyle explains the functionality of the new keyword and the affects it has when placed in front of a function call.
3:21:13 – 3:24:40 Quiz: this Kyle presents a quiz about the this keyword.
Closure
3:24:41 – 3:31:24 Closures Closures are often times misunderstood by javascript developers. Closures are when a function remembers its lexical scope even when the function is executed outside that lexical scope.
3:31:25 – 3:39:18 Closure Examples To further explain closure, Kyle shows examples using a number of common javascript structures like setTimeout and click events. He also demonstrates closure in shared scopes and nested scopes.
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.
Object-Oriented
4:11:16 – 4:16:16 Prototype In javascript, every object is built by a constructor function. This does not mean classes are being instantiated. When an constructor function is called, a new object is created with a link to the object’s prototype.
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:41:43 – 4:48:05 prototype: Objects Linked Prototypes in javascript can be linked and share a parent-child relationship similar to a subclass and superclass. This is beneficial when extending a prototype to add additional methods. However, there are issues with constructor references.
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: prototype 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:05:03 – 5:10:07 Inheritance In classical inheritance, properties and methods of a class are copied to object instantiated of that class. Subclasses inherit the properties and methods of a parent class and copy them to their instantiated objects. Kyle contrasts that with javascript’s “prototypal inheritance” or “behavior delegation”
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 OLOO Questions 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.
– http://gist.github.com/getify/5572383
– http://gist.github.com/getify/5226305
5:25:27 – 5:32:41 Quiz: Prototype 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.
Async Patterns
5:57:15 – 6:05:25 Callbacks Callbacks are integral to javascript, but can lead to many problems. They allow for asynchronicity to occur, but in the process, create an inversion of control where developers are handing off control of their application to another area or mechanism.
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 asynquence Kyle shows a library he wrote as an alternative to promises called asynquence. Sequences are automatically chained promises. His library, asynquence, represents asynchronous sequences.
– http://github.com/getify/asynquence/
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.
DOWNLOAD:
http://rapidgator.net/file/f864781a573bb763078c327a78850c93/Frontend_Masters_-_Advanced_JavaScript_-_A_Course_for_Serious_Programmers.part1.rar.html
http://rapidgator.net/file/a5e3de907c8fda433a656cff312704e6/Frontend_Masters_-_Advanced_JavaScript_-_A_Course_for_Serious_Programmers.part2.rar.html
http://rapidgator.net/file/1f3f86c22121efaad8eb03bafd319836/Frontend_Masters_-_Advanced_JavaScript_-_A_Course_for_Serious_Programmers.part3.rar.html
http://rapidgator.net/file/5c180c4feafecae99d7f2fb004bc5834/Frontend_Masters_-_Advanced_JavaScript_-_A_Course_for_Serious_Programmers.part4.rar.html
http://rapidgator.net/file/5417e26c4317780fd3bb115f2f0177b9/Frontend_Masters_-_Advanced_JavaScript_-_A_Course_for_Serious_Programmers.part5.rar.html
http://rapidgator.net/file/143fe599569b65cb939ce7533523b8d4/Frontend_Masters_-_Advanced_JavaScript_-_A_Course_for_Serious_Programmers.part6.rar.html
http://www.nitroflare.com/view/6C3ECE4D6D64FEB/Frontend_Masters_-_Advanced_JavaScript_-_A_Course_for_Serious_Programmers.part1.rar
http://www.nitroflare.com/view/FAA2180D2C4D705/Frontend_Masters_-_Advanced_JavaScript_-_A_Course_for_Serious_Programmers.part2.rar
http://www.nitroflare.com/view/1A67648B5626601/Frontend_Masters_-_Advanced_JavaScript_-_A_Course_for_Serious_Programmers.part3.rar
http://www.nitroflare.com/view/8E35CE218C1C413/Frontend_Masters_-_Advanced_JavaScript_-_A_Course_for_Serious_Programmers.part4.rar
http://www.nitroflare.com/view/F3FDFC91B4901B8/Frontend_Masters_-_Advanced_JavaScript_-_A_Course_for_Serious_Programmers.part5.rar
http://www.nitroflare.com/view/FDC64D60B16792D/Frontend_Masters_-_Advanced_JavaScript_-_A_Course_for_Serious_Programmers.part6.rar
If any links die or problem unrar, send request to http://goo.gl/aUHSZc
Leave a Reply