This richly layered and comprehensive course provides the perfect framework in which to learn all about using JavaScript/ECMAScript in Front-end Development. The course especially prepares student to use frameworks such as Angular, React, Vue and Svelte.

It is expected that delegates will be familiar with the fundamentals of JavaScript. The Introduction to Modern JavaScript is the perfect preparation for this course.

The main focus of this course is to work with experienced developers to significantly raise their level of knowledge and understanding of JavaScript/ECMAScript, JavaScript frameworks and libraries

Introduction and Recap

Recap key aspects of JavaScript/ECMAScript

• Recap of JavaScript/ECMAScript/ES
• List the various versions and their support
• Discuss equality (difference between == and ===)
• Discuss advantages of immutable values
• Review different string literals (template strings)
• Understand variable hoisting
• Discuss the disadvantages of using statements over expressions

Recap and More on Object Literals

• Recap Object literals and defining properties and methods
• Define accessors (aka getters/setters)
• Using shorthand property names
• Appreciate the Destructuring assignment for objects
• Use destructuring to when using immutable objects
• Using constructors

Dealing with null and undefined

• understand the difference between null and undefined
• Problems of nullish (null/undefined)
• Protecting against nullish values
• Using logical operators (&& and ||)
• Appreciate Conditional Chaining (es2020)
• Appreciate Nullish coalescing operator (es2020)

Front-end Development (tools)

• Introduce Node.js (for front-end development)
• Setting up a new project
• Managing dependencies using npm and/or yarn

Modules

• Introducing modules (ES Modules (ESM), CommonJS, …)
• Defining and using modules (exporting/importing)
• Using ESM in the browser

Babel

• Introduce Babel
• Setting up a babel project
• Appreciate babel plugins and presets
• Use and configure the preset-env
• Introduce Browserlist
• Defining browserlist queries to define your target browsers

Webpack

• Introduce webpack
• Using webpack
• Understand webpack's architecture
• Understand and define entry points and outputs
• Using and configuring the development-server
• Discuss tree shaking
• Using loaders
• Using plugins
• Introduce asset modules (and how they replace certain loaders)
• Configuring Webpack for CSS and SASS
• Using various optimisations

Functional JavaScript

• Principles of Functional Programming
• Functional Programming in JavaScript
• Dealing with state and mutability
• Recap Functions as values
• Recap Higher-order functions
• Recap Lambda/arrow functions
• Using clojures
• Use Function members (this,apply/call, arguments)
• partially applied functions
• Currying in JavaScript
• Combining functions using the Pipeline operator (|>)
• Using recursion
• Functional Libraries

Classes

• Explain the concept of Prototypical inheritance
• Defining ES classes
• Defining methods
• Defining constructor functions
• Overriding methods and constructors
• Defining fields (using ES2020) = Defining private fields
• Adding static members
• Class inheritance

Key APIs

• Using Promise for asynchronous code
• Defining promises
• Handling Promise errors
• Combining promises
• Using async/await
• Using XHR to interact with servers
• Using the fetch API
• Using the history API

Testing / BDD

• Introduce the importance of testing
• Discuss different testing techniques (unit, bdd, e2e)
• Introduce Jasmine
• Setup up Jasmine
• Writing Suites and Specs
• Writing Asynchronous code
• Mocking and Stubbing using Spies
• Mocking time