The Good Parts of JavaScript and the Web

10 hours, 54 minutes CC
The Good Parts of JavaScript and the Web

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
Close

Course Details

Published: June 20, 2016

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
Get Unlimited Access Now

Table of Contents

Programming Style and your Brain

Section Duration: 1 hour, 8 minutes
  • Two Systems
    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.
  • Visual Processing
    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.
  • JavaScript: Good Parts & Bad Parts
    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.
  • Programming Style
    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.
  • Composition
    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.
  • Scope
    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.
  • Bad Style
    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.
  • Code Written for Performance
    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
  • History of JavaScript
    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.
  • Objects
    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
    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.
  • Booleans and Strings
    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.
  • Arrays
    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.
  • Dates, RegEx, & Types
    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 Syntax
    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.
  • Statements
    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
  • Functions
    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.
  • Function Best Practices
    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.
  • Closure
    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.
  • Closure Examples
    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.
  • Pseudoclassical Inheritance
    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.
  • Module Pattern
    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.
  • Pseudoclassical Inheritance vs. Functional Inheritance
    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
  • The History of HTML
    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.
  • How JavaScript Saved HTML
    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.
  • The Browser
    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.
  • The Script Tag
    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.
  • Document Tree Structure
    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.
  • Retrieving 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.
  • Events
    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.
  • DOM Performance
    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.
  • Division of Labor
    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
  • A Better JavaScript
    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.
  • New Syntax
    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.
  • New Methods
    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.
  • Meta Object API
    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
    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

Principles of Security

Section Duration: 58 minutes
  • The History of Security
    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.
  • Cryptography
    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.
  • Security and the Browser
    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
    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.
  • Object Capabilities
    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.
  • Reducing Complexity
    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.
  • A Simple Attack
    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
    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
    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”.
  • JavaScript on the Server
    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
    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.
  • RQ Example
    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 Function Types
    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 with JSCheck
    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.
  • Closure and Continuation
    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

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now