chapter five

5 Vanilla JavaScript

 

This chapter covers

  • How JavaScript has evolved into ECMAScript versions and what this means for Vanilla projects.
  • The essentials of modern JavaScript syntax and patterns you will use on a daily base.
  • Coding using ES Modules in Vanilla Web projects.
  • Handling errors for robust apps without external libraries.

One of the most prominent parts of a Vanilla Web project is JavaScript, specifically what we usually refer to as Vanilla JavaScript: the use of the core language and browser APIs to develop apps without large libraries or frameworks.

In the previous chapters we covered the Web UI basics, including the semantic usage of HTML and modern CSS features. In this chapter we’ll start covering how to use JavaScript to enhance HTML and CSS through dynamic features without using libraries or frameworks. JavaScript is the only programming language compatible with all browsers and web rendering engines.

Before moving on with the JavaScript code, it is essential to understand how JavaScript is versioned under its original name, ECMAScript. By versioning, we are thinking about how we name new abilities in the language and in the execution engine. Do we have a JavaScript 3.0? Or maybe a JS 9.1.1?

5.1 Versioning

5.2 Latest additions to the language

5.2.1 ESNext

5.3 Using a transpiler

5.4 Using polyfills

5.5 ECMAScript Modules

5.5.1 Named exports

5.5.2 Importing modules

5.5.3 Import Maps

5.5.4 Top-level await

5.5.5 Preloading and execution order

5.5.6 Lazy loading

5.5.7 Error handling and timeouts for dynamic imports

5.5.8 JSON modules import

5.5.9 Re-exports and module organization

5.5.10 Caching, single evaluation, and side effects

5.5.11 Practical rules of thumb

5.6 Modern JavaScript Essentials

5.6.1 Optional chaining and nullish coalescing

5.6.2 Logical assignment operators

5.6.3 Destructuring + rest/spread in practice

5.7.1 Arrays