Chapter 8
Creating a Beautiful User Experience

APIs and command-line tools are excellent for developers to use and for systems to talk to each other. But at some point, if you’re going to have nondevelopers use your software, you’ll need a more friendly and beautiful user experience.

In this chapter, you’ll learn how to set up a web front end for the APIs you developed across the preceding chapters. The bulk of this work is around installing and configuring webpack, a popular bundler for producing web-based UI deliverables. Doing this, we’ll cover the following aspects of developing a front end for Node.js:

Node.js Core

In previous examples in the book, we’ve used Node.js modules that had runtime dependencies and development dependencies. In this chapter, we’ll explore peer dependencies, which are often used to describe relationships between frameworks and their plugins.

Patterns

The framework-plus-plugins model is popular in front-end JavaScript development and you’ll see several examples. Additionally, in modern JavaScript it’s common to transpile code from one language or dialect into another. You’ll learn how to use TypeScript to transpile and type-check your code.

JavaScriptisms

In the last chapter, you used async functions to write code in a synchronous style using try/catch blocks to handle the results of Promises. We’ll do that again here, using the browser-native, Promise-producing fetch method to perform asynchronous requests to the server. You’ll work with other DOM APIs, too, to perform regular front-end development tasks like handling user-interaction events and navigation.

Supporting Code

Developing a web-based UI from scratch is a surprisingly large undertaking, so rather than implement everything, we’ll lean heavily on supporting tools. We’ll use Twitter’s Bootstrap framework to provide beautiful default styles. For rendering dynamic HTML, we’ll use a mature and popular library called Handlebars.

One of the things I most enjoy about Node.js development is that there’s always more than one way to do anything. This is even more true of front-end JavaScript development.

There’s no shortage of front-end frameworks, each with its own strengths. Both the field of frameworks and their features are in a state of constant flux.

So rather than put a stake in the sand and claim that this, that, or the other framework is the right one to use, my goal here is decidedly lower level. I’ll show you how to put together a web-based UI on top of Node.js-powered APIs. Then, when it comes to writing the front-end code, we’ll stick to generic techniques that transfer across frameworks. This should give you the flexibility to explore and choose from any number of frameworks and libraries you like.

With those caveats out of the way, let’s start with the basics: installing and using the webpack dev server.