Modern JS

A guide to help you learn Modern JavaScript

The beginning

What is JavaScript ? What is modern JavaScript ?

Web page events & DHTML AJAX & DOM jQuery JavaScript components JavaScript MVC JavaScript outside of a browser Languages that produce JavaScript: JSX and Typescript So what is modern JavaScript ?

Modern JavaScript essentials: Concepts and tools

ECMAScript: ES5, ES5.1, ES6 (or ECMAScript 2015), ES7 (or ECMAScript 2016), ES8 (or ECMAScript 2017) ES.Next - The 'catch-all' ECMAScript future Shims and Polyfills Minifiers-Obfuscators-Compressors and Source Maps Package managers Transpiling and transpilers Modules, namespaces & module types Module loaders and bundlers

Modern JavaScript complements: WebAssembly and Rust

WebAssembly Rust
The concepts

JavaScript key concepts & syntax

  • ES5 - ECMAScript 5 & ECMAScript 5.1
    • ES5: Understanding scope and functions in JavaScript ECMASCript 5/ECMAScript 5.1 are functionally equivalent ES5: 'use strict' ES5: var, scope, hoisting and undefined ES5 strict mode prevents access to undeclared variables ES5: Equality symbols ==, !=, === and !== ES5: Function declarations, function expressions, and immediately-invoked function expressions (IIFE) Multiple ways to create JavaScript namespaces Why are JavaScript namespaces so convoluted in ES5 ? ES5: Lexical scope, the this execution context and closures The JavaScript global object and the this, global and window keywords What is the difference between the apply(), call() and bind() functions that alter the this context ? Careful reassigning this to potentially conflicting keywords
  • ES6 - ECMAScript 6 / ECMAScript 2015
    • ES6: Scoping and namespaces from ES5 resolved, modules, functions get new syntax and behaviors, plus additional "syntactic sugar" ES6: Block scope, let and const Use let and const over var ES6: Modules, namespaces, export and import ES6: Files, modules, scripts, <script> tag, <script type="module"> tag and <module> tag Pre-ES6 modules detour: CommonJS, AMD and UMD; plus a first look at transpiling and bundlers You should avoid transpilation and any other heavyweight operation -- like loading SystemJS -- on browsers ES6: Arrow functions with => and default function values ES6: Generators - Functions with * and yield ES6: Spread/rest ... operator, template literals and tagged templates with backquotes ` `
  • ES7 & ES8 - ECMAScript 2016 & ECMAScript 2017
    • ES2016 (ES7): A little "syntactic sugar", nothing more ES2017 (ES8): Asynchronous functions with async and await
  • TypeScript
    • TypeScript: The JavaScript that should have been Can browsers run TypeScript ? Yes, but with a lot of work TypeScript: Versions and what makes TypeScript a JavaScript superset TypeScript: Static type syntax TypeScript: Same old, same old JavaScript syntax TypeScript: Files, modules, scripts, module, namespace, export = , import = require() and declare

    JavaScript data types

    JavaScript object-orientated and prototype-based programming

    JavaScript for loops

    JavaScript asynchronous behavior
    The libraries

    React JS

    A JavaScript library to buildi user interfaces(UI), created by Facebook. Includes explanation of React components without ES6 (createClass()), React components with ES6 (React.Component); React component use of this, props and state; JSX, Babel & transpiling; React deployment with npm and webpack.

    Angular

    A JavaScript client side MVC framework, built by Google.

    Node JS

    A JavaScript run-time environment & package manager that runs outside of a browser