HyperHTML Up and Running part 1

If you haven't heard of hyperHTML, it is worth your time checking into it. As an alternative to the big, popular frameworks, hyper is a blazing fast, small-footprint library that keeps you in the driver seat. HyperHTML centers around making extremely fast DOM updates, and can be integrated into any other framework if you wish (pro-tip: you won't want to).

But seeing is believing, so let's fire up a new project and see how easy it is to get started using hyperHTML. This tutorial will focus on the various ways to set up your development environment using hyperHTML. You'll learn a bit about hyperHTML, webpack, rollup, and modules. We'll assume you have working knowledge of web technologies like HTML, CSS, and of course JavaScript.

Let's begin by setting up our local folder structure.

hyperhtml
|_dist
|_src

We'll be using a few tools from npm throughout this tutorial, so make sure you have nodejs installed.

In your root folder, create a standard, boilerplate index.html file. By far the easiest way to enjoy developing apps with hyperHTML is to use the unpkg CDN. Include this line in the <head> of index.html:

<script src="https://unpkg.com/hyperhtml@latest/min.js"></script>

This gives us access to the hyperHTML variable. Create a <div id="app"> and then before the closing body tag, work magic the likes of which Merlin couldn't fathom:

<script>
    const app = document.querySelector('#app');
    hyperHTML(app)`<h1>Welcome to Hyper</h1>`;   
</script>

Fire up your favorite dev server (for the moment, we're using http-server. Http-server is a simple, zero-config server) and load the page. Tada! HyperHTML everyone. If you aren't sure what's going on here, take a minute to research tagged template literals. We'll be here when you get back.

Let's add a couple more DOM nodes to our "app":

<script>
    const app = document.querySelector('#app'),
          welcome = (name) => `Intrepid traveler, ${name}, welcome!`;    
    hyperHTML(app)`<h1>Welcome to Hyper</h1>
                    <div class="row">
                      <div class="col-sm-6">
                         <p>${welcome("Steve"}</p>
                      </div>
                    </div>`;
</script>

Save, refresh, drop the mic. But can we move this JavaScript madness to another file?

Sure!

Create an app.js file inside the src folder in our project. Move all that JS magic into app.js, then include the file in index.html.

<script src="./src/app.js"></script>

Let's see if it worked; before you save and refresh, kick Steve out and let King Richard the Lionheart come to the party.

<p>${welcome("King Richard the Lionheart"}</p>

This is very, very basic stuff. However, it shows that hyperHTML doesn't need anything more than the library and a server. You could develop loads of apps with just this, but why would you want to?

Let's harness the power of some other tools to make our development lives easier.

Webpack

The first tool we'll look at is webpack. Webpack is a module bundler and loader. The first step is to install webpack with npm, locally to our project. In the root folder, run:

npm i webpack
npm i webpack-cli

Cool.

Since we're using webpack now, we don't need to use a CDN to grab hyperHTML. We can import it. First, install with npm:

npm i hyperhtml

And at the top of app.js, do the import:

import hyperHTML from 'hyperhtml/cjs';

Note: '/cjs' is a module hyperHTML has to work with CommonJS module loaders like Webpack. In a little bit we'll see another module hyper gives us, '/esm'.

We can now remove the script tag from index.html that was pulling in hyperhtml. We're almost ready to let webpack bundle everything. We need to make one more modification to index.html:

Change <script src="./src/app.js" /> to
<script src="dist/bundle.js" />.

Finally, we need to tell webpack where to start bundling our files. While we can run wepack without a config, most projects you'll make will need one, so we're going to set it up now. Create a webpack.config.js file and place it in the project root. Inside this file we need a very simple config:

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

And now, the moment you've been waiting for. In your project root on the command line, run npx webpack. Don't worry if you get a couple warnings or errors. You should now be able to find a bundle.js file in your dist folder. Fire up http-server and check it out!

Ready for more wizardry, my young apprentice? With just a few more steps, we can import CSS files. Watch and learn:

Create a styles.css file and put it in the src folder. Include some style rules in it.
In app.js, import "styles.css"
Run npm i style-loader css-loader on the command line.
Add this to your webpack.config.js:

module: {
     rules: [
       {
         test: /\.css$/,
         use: [
           'style-loader',
           'css-loader'
         ]
       }
     ]
  }

Run npx webpack again a see the lightning bolts fly from your fingers! For more in-depth information, see the webpack docs.

Feel free to import/export until your heart is content. With this very quick introduction to hyper + webpack, we've seen that it's easy to get up and running with hyperHTML in a modern webdev environment.

Rollup

Another great module bundler we can use is rollup.js. One reason you might choose rollup for your next project is that it utilizes a technique called tree-shaking. Tree-shaking is a term we use to refer to only bundling code we're actually using. Sometimes we might not want an entire library, just one function from it. Tree-shaking allows this, we're shaking the dead leaves (dead code) from our tree. Webpack offers tree-shaking too, but there's another configuration to set before that happens. Rollup uses tree-shaking automatically.

As you'd expect, our first step is to install rollup in our project.

npm i rollup

You're already familiar with webpack.config.js, so the new file we need, rollup.config.js should come with no surprises.

module.exports = {
  input: 'src/app.js',
  output: {
    file: 'dist/bundle.js',
    format: 'es'
  }
};

Place rollup.config.js in your root.

Now, rollup comes as a basic utility with a lot of features out of the box. However, there are a lot of plugins you can install to enhance your applications even further. This gives you the ability to use only what you need, not more. More on plugins in the next part.

One caveat of rollup is that everything you import needs to be a relative link. So, for example, importing hyperHTML from a node modules as we were when we used webpack won't work with rollup. We can install a plugin to do the trick, rollup-plugin-node-resolve, but since this is a simple project we'll just link to the file we need.

In app.js, change import hyperHTML from 'hyperhtml/cjs' to
import hyperHTML from '../../node_modules/hyperhtml/esm', provided your node_modules directory exists two levels above your /src directory.

For now, remove our import for styles.css.

And now, run rollup from the command line:

rollup -c

If we refresh our webpage, we see everything is working.

I hope you've enjoyed this introductory post about getting an environment up and running with hyperHTML. In the next part, we're going to look at some quality-of-life plugins that will make app development even easier. So stay tuned code wizards!

Blog

HyperHTML Up and Running part 1

Paul Thompson

Webpack

Rollup

Join Our Newsletter. No Spam, Only the good stuff.

Related