chapter ten

10 The power of JavaScript

 

This chapter covers:

  • Evaluating JavaScript’s role in a Jamstack based website
  • Building dynamic features like asynchronous form submission in our website
  • Using npm modules assembled via Hugo’s support for the JavaScript/Typescript ecosystem to perform fuzzy search
  • Embedding a single page application in a Hugo website
  • Tip and technique to being successful with using JavaScript in a Hugo based website

The definition of dynamic in terms of websites has changed over time. In the early days of web, a dynamic website was the one that could have user generated content, server-side processing and all the great features we developed in the previous chapter (like comments and contact forms). This started to change with the advent of web applications which redefined dynamic as web pages that could update on the fly without explicitly reloading the whole content. These pages can not only fetch content in the background but also provide real-time updates without the user manually triggering some action. This modern definition of a dynamic website is possible with client-side processing which is done by a script that accompanies the website content and runs on the end user machine. JavaScript is the standard programming language that is used on the browser frontend and all frameworks including Hugo need to play nice with JavaScript to unlock additional features.

10.1 Why use JavaScript in a Hugo project

10.2 Using JavaScript to control the page flow

10.2.1 Handling forms in JavaScript

10.2.2 Building and loading JS using Hugo Pipes

10.3 Approaches for JavaScript handling

10.3.1 HTML as primary JS as utility

10.3.2 JS as a separate layer to HTML

10.4 Converting JavaScript to a utility controlled by the HTML code.

10.4.1 Enabling dynamic forms through JS

10.4.2 Splitting JS into multiple files

10.4.3 Passing variables while building JS

10.5.2 Showing the search box in the header

10.5.3 Loading the website data

10.5.4 Importing a search library

10.5.5 Updating our build systems to support npm

10.5.6 Creating a search index

10.5.7 Getting search input and showing results

10.6 A single page application in a Hugo website

10.6.2 Creating a template for the SPA.