Paypal
The Good Parts of JavaScript and the Web
10 hours, 54 minutes
CC
Course Description
In this course, you will learn the history of JavaScript, the details of the language, with particular attention to functions, which is where the power of the JavaScript language is hidden. There is also an overview of how browsers work, how servers work, and security.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: June 20, 2016
Topics
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Programming Style and your Brain
Section Duration: 1 hour, 8 minutes
Doug Crockford begins his course on the Good Parts of JavaScript with a brief look at the course agenda. He then shares a metaphor for human thought that separates it into two systems: The Head and The Gut.
When confronted with something confusing like an optical illusion, the brain can often misinterpret what it sees. This misinterpretation is because messages between the head and the gut are in conflict. Doug explains how these conflicts influence a developer’s ability to write programs and use programming languages.
Every programming language has good parts and bad parts. Doug introduces JSLint which is a program he created to analyze JavaScript applications that help developers write more consistent code. After sharing some background JSLint, Doug demonstrates some common syntax issues with curly braces.
Doug argues that good programming style can help produce better programs. He also feels style should not be about personal preference or self-expression. Doug illustrates these concepts with his analysis of a switch statement.
Where applicable, you should use elements of good composition. For example, Doug believes spaces should be used to disambiguate parentheses. Doug also shares a few examples where poor composition can lead to unintended consequences. These examples include immediately invocable functions, transitivity, and multiline string literals.
The scope is one of the most useful inventions in programming; however, best practices around declarations differ from language to language. Doug explains why variables should always be declared at the top of their functions and functions should be declared before they are called. He also shares some thoughts on other declarations like global variables and the new prefix.
Less code isn’t necessarily better code. Doug explains the fascination developers have with creating “one-liners” and how it has led to operators like ++ and bad coding styles. Doug believes by avoiding these types of operators, many classes of errors can be eliminated.
Optimized code can make a program more difficult to read. Doug explains that most code has a negligible impact on performance and developers should only optimize the code taking the most time. He also recommends focusing on algorithm replacement as a means for increasing performance.
And Then There Was JavaScript
Section Duration: 1 hour, 3 minutes
Doug spends some time talking about how JavaScript was created. He includes the companies involved in its creation as well as the history behind its naming. Doug also briefly talks about the evolution of ECMAScript and the differences between versions.
An object is a dynamic collection of properties. Every property has a key string that is unique within that object. Doug shares some APIs for working with Objects. He also talks about concepts like classes vs. prototypes, delegation, and prototypical inheritance.
Numbers are simpler in JavaScript than other programming languages because they are represented by a single type. Sharing a few of their shortcomings, Doug describes how numbers behave in JavaScript. Doug then talks about the Math object and the various operations that can be performed on JavaScript numbers.
After briefly talking about the Booleans, Doug dives into the strings. Strings are immutable sequences of 0 or more 16-bit Unicode characters. Doug outlines some methods in the API and shares a few style suggestions when using strings.
In JavaScript, the Array type inherits from the Object type. Indexes are converted to strings and used as names for retrieving values. Doug spends some time comparing arrays and objects, discussing array methods, and gives a few examples where the array API produces unexpected results.
Doug explains dates and regular expressions. He then talks about how JavaScript treats object types. The "typeof" prefix returns a string identifying the value type. There are also helper methods like isArray() which are type-specific. Finally, Doug spends a few minutes talking about how JavaScript is loosely typed and why this is one of the good parts.
JavaScript is syntactically a member of the C family. The main syntax difference between JavaScript and C is in the type system. Doug gives different JavaScript syntax examples including identifiers, comments, and operator use.
Doug looks at some statement blocks that exist in JavaScript. This includes conditions, loops, and error handing.
Function the Ultimate
Section Duration: 1 hour, 3 minutes
In JavaScript, functions are very versatile. They can be used as methods, classes, constructors, modules, etc. Doug discusses the behavior and syntax of functions. He also talks about function variables and explains concepts like hoisting.
Doug spends a few minutes explaining a few best practices when working with JavaScript functions. He talks about avoiding creating functions inside loops. Doug also demonstrates the four ways to call a function.
Doug believes closure is one of the best features of JavaScript. Closure is when the context of an inner function includes the scope of the outer function. The inner function retains this context even after the outer function has returned.
Doug walks through a few code examples on how to use closure. He begins with a global variable example and demonstrates how closure can eliminate the possibility of variable conflict and allow for more performant reusability.
JavaScript was designed with a prototype object. Inheritance easy to implement through this prototype object, however, it has a lot of shortcomings. Doug spends some time looking at how prototypical inheritance works in JavaScript and identifies the areas where problems arise.
The module pattern is a much better technique for creating reusable objects through inheritance because function scope can be used as a container for private variables and methods. This eliminates the need to create global constructor functions or objects with “leaky” APIs. Doug demonstrates how the module pattern is easily transformed into a powerful constructor pattern.
Doug compares the old pseudoclassical inheritance model to the module-based function inheritance model. He also demonstrates how functional inheritance has added features like privacy making for tighter APIs.
The Metamorphosis of Ajax
Section Duration: 1 hour, 4 minutes
Doug spends some time looking at where the HTML language and syntax came from. HTML has roots in other markup languages like GML, Scribe and Runoff. Doug also shares a few examples of these parent languages.
HTML was not state-of-the-art technology when it was introduced no was it intended to be an application platform. Doug explains how HTML was only really meant for simple document retrieval and the arrival of CSS didn’t make things any better. There reason HTML and CSS didn’t die was because of JavaScript.
Doug walks through a flow chart of how the original web browsers functioned. This includes everything from fetching a URL to painting the display. He compares this original flow to scripted browsers which added an event loop.
When the <script> tag was added to early browsers, there were a few hacks necessary to not break older browsers. Doug shares a little history about this tag. He also talks about the benefits of externalizing scripts and avoiding the document.write() method.
Doug summarizes the document tree and explains the relationship between child, sibling, and parent elements. He also demonstrates how to create a recursive function that can walk through the DOM by following the firstChild and nextSibling nodes.
Nodes can be retrieved using many different methods. For example, the document class has methods getElementById() and getElementByName(). There are many other methods for retrieving one or more nodes. After discussing node retrieval, Doug demonstrates how to manipulate node properties through getters/setters and explores the style API.
The browser has an event-driven, single-threaded programming model. Events are targeted at particular nodes and trigger event handler functions. After introducing events and event handlers, Doug expands on some deeper topics like event bubbling and cancellation.
Doug spends a couple minutes talking about why performance is a huge problem when working with the DOM. Styling, reflowing, and repainting can all have big performance costs. Doug also makes a case for using JavaScript libraries.
Developers typically need to decide how to divide applications between the browser and the server. Historically, the majority of the work was done on the server. Modern applications tend to rely more on the browser. Doug spends a few minutes explaining why he recommends to “seek the middle way”.
ES5: The New Parts
Section Duration: 37 minutes
Doug talks about the history of ECMAScript and recommends working in ES5/Strict. He also explains what the goals for ES5 were and how they wanted to improve the language for the users of the language.
Even though it contradicted an original goal, ES5 introduced a lot of new syntax. Doug shares a few code examples of the new syntax added in ES5 including trailing commas, getters and setters, and constants. He also talks briefly about the addition of regular expression literals and JSON.
Doug describes many of the new methods added in ES5. Most of these methods were added to the Array and Date objects, but he also covers the String.trim() and Object.create() methods.
Objects have two kinds of properties: Data properties and Accessor properties. These properties are comprised of four attributes. Until ES5, these attributes were not accessible. Doug explains how the addition of the Meta Object API opens up access to property attributes.
Strict mode was added to ES5 as a way to repair parts of the JavaScript language through an opt-in approach. By adding ‘use strict’ to the top of a file or function, strict mode will be enabled. Doug shares some rules enforced in strict mode and concludes his discussion on ES5 with a few resources and audience questions. - ***FYI - Looks like this video ended a few seconds early before he was done talking.
Fun with Functions
Section Duration: 2 hours, 35 minutes
After a brief explanation of the setup, Doug gives the audience a quiz. Then he begins the Fun with Functions exercises.
In this challenge, you will write the curry() function.
In this challenge, you will write the twice(), reverse(), composeu(), composeb(), and limit() functions.
In this challenge, you will write the from(), to(), fromTo() and element() functions.
In this challenge, you will write the collect(), filter(), and concat() functions.
In this challenge, you will write the gensymf(), gensymff(), and fibonaccif() functions.
In this challenge, you will write the counter() and revocable() functions.
In this challenge, you will write the m(), addm(), and liftm() functions.
In this challenge, you will write the exp() function and gives the instructions for writing the addg() function.
In this challenge, you will write the addg(), liftg(), arrayg(), and continuize() functions.
Doug takes a brief break from the function challenges to explain how to create a better constructor. He starts with a pattern he’s previously shown where a function is used to construct objects. He then revises the pattern to incorporate some ES6 syntax and make the code more secure and reliable.
In this challenge, you will write a wrapper method with get(), store(), and append() methods.
Doug spends some time challenging the audience to find the security vulnerabilities within his vector() function. He fields questions about the code while guiding the discussion closer to a solution.
Doug continues to field audience questions about the vulnerabilities in the code.
Doug walks through the solution for patching security vulnerabilities on the array object in the vector() function.
In this challenge, you will write a function that makes a publish/subscribe object.
Doug demonstrates how to properly secure the publish() and subscribe() methods within the pubsub() function. He adds some error handling, replaces the for loop, and utilizes Object.freeze()
Doug finishes his demonstration on how to secure the pubsub() function by ensuring messages are delivered in the correct order.
Principles of Security
Section Duration: 58 minutes
Doug’s first principle of JavaScript security is that deterrence is not effective. You are not able to punish an invisible attacker. Doug illustrates this with a brief story and some historical language context.
The Kerckhoffs Principle states the design of a system should not require secrecy; and compromise of the system should not inconvenience the correspondents. This principle leads Doug into a discussion about cryptography and the One Time Pad.
The browser platform is historically insecure. HTML5 has only made it more vulnerable. Doug outlines a number of the vulnerabilities presented by building applications in the browser. This includes the ability for an attacker to read the document, alter the display, and access database information.
Cross site scripting attacks (XSS) were invented in 1995. Doug looks at some of the security steps that have been put in place to protect against XSS but stresses browsers are still insecure by default. He also analyzes what causes XSS vulnerabilities and why they still exist.
Using the principle of least authority, Doug explains how the “actor model” can be applied to object oriented programming to create more secure software. He calls this application Object Capabilities.
Bugs in code are often manifested from confusion. Complex code leads to more confusion and results in highly vulnerable systems. Doug shares a few recommendations about reducing complexity and how to write better code.
Doug walks through a very simple example of a cross site scripting attack. He also stresses the importance of properly encoding all non-literal elements during concatenation. Doug wraps up his coverage on security with a few final thought and recommendations.
Managing Asynchronicity
Section Duration: 55 minutes
Synchronous functions do not return until the work is complete or an error has occurred. They are predictable, but can easily cause issues like blocking. Even if JavaScript had multi-threading, race and performance issue could still arise. Doug spends a few minutes looking at why threading would not be good for JavaScript.
Asynchronous functions return immediately. Success or failure are determined in the future. Doug explains how synchronicity works in a turn-based system. He talks about the history of the event loop and the need to adhere to the “law of turns”.
Doug spends a few minutes talking about JavaScript’s evolution to the server. Node.js has implemented a web server in the JavaScript event loop. The only problem is the event-model in the browser doesn’t fit the workflows on a server.
Functional programming has grown in popularity because it contains the solutions to a lot of the asynchronous problems of deeply nested event handlers. Doug introduces the RQ library which helps manage synchronicity in server applications.
Doug shares an example of an RQ program. In this case, most of the logic is in the form of nested arrays. After demonstrating the application, Doug moves on to talk about RQ’s ability to handle other cases like timeouts and cancellations.
RQ has four types of functions. They are requestor, callback, factory, and cancel. Doug spends a few minutes looking at each function type and their use cases.
Testing asynchronous systems can be difficult because often times a value to be tested is not available at the time of the assertion. Inspired by the Haskel-based library QuickCheck, Doug wrote a library called JSCheck. His library provides both case generation and testing over turns.
Doug wraps up his coverage on Asynchronicity with a few final thoughts on closure and continuation. He also provides links to his RQ and JSCheck projects and answers a few audience questions.
The Better Parts
Section Duration: 1 hour, 25 minutes
Doug believes if a feature is sometimes useful and sometimes dangerous and there’s a better option available, always use the better option. This has been his foundation for the good parts of JavaScript. Doug shares a little about his experience with making mistakes and learning from the language.
While Doug’s book is still relevant today, there are developers that have challenged many of his assertions. Doug lists some of the arguments he hears about the good parts and shares his thoughts.
ES6 has added more features to the JavaScript languages. Doug talks about what he considers the “new good parts”. These include proper tail calls, the ellipse operator and modules. He also demonstrates how megastring literals can make regular expressions more readable.
Doug looks back at the the original Good Parts and reflects on what’s changed. For example, originally he stopped using the new operator and switched to Object.create(). Now he’s stopped using Object.create(). Doug explains why and also talks about his experience with AdSafe.org
Doug hypothesizes about the next programming language that will replace JavaScript. While he doesn’t talk about specifics, he shares some of lessons he’s learned studying various programming languages.
Prototypical inheritance was Doug’s original method of choice. His views of inheritance have evolved, however. He now recommends using class-free object oriented programming. Doug reviews some of the function best practices he covered earlier in the course.
Doug spends a few minutes talking about a bug he had with the int number format. It was due to the way overflow is handled. This has led him to propose a new number format called DEC64.
Doug shares some thoughts about his work on the JSON data format. He also gives some advice to anyone designing alternative data formats.
Doug wraps up the course with a few final thoughts and begins answering some audience questions.
Doug spends a few more minutes answering audience questions.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops