A Tutorial On How To Build An Application With Hyperapp And Parcel
What Will You Learn?
In this two-part tutorial series, you will learn to build a simple application with a new frontend library called Hyperapp. Hyperapp is an exciting frontend library because it lets you make applications reasonably quickly without the need to learn too many new concepts. Most of the material will be familiar to you if you know one of the current frontend technologies like Vue.js, React, or Angular.
Hyperapp was born out of the attempt to do more with less. We have aggressively minimized the concepts you need to understand while remaining on par with what other frameworks can do.—Hyperapp on GitHub
Curriculum
- Build a starter project for Hyperapp
- Build a simple application using SteemJS on top of the starter we built in part one
In part one, you will learn to …
- build a starter for your next Hyperapp projects
- use Parcel to bundle your Hyperapp application
- use the starter in development mode
In part two, you will learn to …
- build a simple application on top of the Hyperapp starter
- style your application with Picostyle
- manage application state with Hyperapp's state management
- publish your application to the interwebs
Requirements
The tutorial is aimed at developers who already know some JavaScript and want to build a simple application with their skills.
Difficulty
The tutorial should be relatively easy to follow. But if you do not know JavaScript another tutorial might be better before going through this material.
The core technologies used in this tutorial series
- JavaScript
- Knowledge on using the command line interface
- Hyperapp is a 1 KB JavaScript library for building frontend applications
- Picostyle is a 0.4 KB CSS-in-JS library
- Parcel is a blazing fast, zero configuration web application bundler
Building A Starter Project For Hyperapp
This article is the first part of the series. Here you will learn to build a starter project for Hyperapp.
If you lose track it might be helpful to get the code and look at the final result. I have built the starter, called it HyperParcel, and pushed it to GitHub.
Create a folder named hyperparcel
and make it the current working dir.
mkdir hyperparcel
cd hyperparcel
Every JavaScript project needs a package.json
file. You can create one by invoking the following command:
yarn init
You will be asked some questions. Think name, version, description, entry point, repository, author, and license. You can hit return on each question, and yarn
will fill in some defaults. You can edit the package.json
later if need be.
Now we should have a package.json
file in our project root. The main purpose of this file is to keep track of the packages we rely on, our project's dependencies. Let's add some packages we need:
yarn add --dev parcel-bundler babel-preset-env babel-preset-react
This command will install the three packages and add the package names in the development dependencies section of the package.json
file.
The package parcel-bundler is the web application bundler we mentioned earlier. It is a program which puts all of our files into one bundle. In a project, we have HTML files, CSS files, JavaScript files and many more. Parcel will make sure that all the files needed by our application will be bundled up correctly. In the past, I used webpack for this, but Parcel is much easier to set up and use. Zero-configuration is the killer feature of Parcel.
One dependency is missing. Do you know which? Yes, correct, we have not yet installed Hyperapp. Let's do this:
yarn add hyperapp
Now we have set up the dependencies our Hyperapp starter relies on. Now we only need to add three more files.
The first thing we need is a configuration file for Babel. Babel is a JavaScript compiler which allows us JS developers to use next-generation JS features today. We need it also because we want to use JSX in our applications. And babel will take care of transpiling the JSX to the corresponding JavaScript functions.
Add the following contents to a file and save it as .babelrc
in your project root:
{
"presets": ["env", "react"],
"plugins": [["transform-react-jsx", { "pragma": "h" }]]
}
Please note that we are not using React here, we just utilize the same settings for Babel.
Now we need two more files. The first is an HTML file from which we will load and initialize our second file, the entry point into our application.
The HTML file is called index.html
and looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Hyperparcel Starter</title>
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>
Make sure to save it to the project root. The HTML file references a file called index.js
in the script
tag.
Create the index.js
file in the project root and add the following contents:
import { h, app } from "hyperapp"
const state = {
count: 0
}
const actions = {
down: () => state => ({ count: state.count - 1 }),
up: () => state => ({ count: state.count + 1 })
}
const view = (state, actions) => (
<main>
<h1>{state.count}</h1>
<button onclick={actions.down}>-</button>
<button onclick={actions.up}>+</button>
</main>
)
const main = app(state, actions, view, document.body)
Now we should have everything in place to start our application. But how do we launch the app? Typically we would start our development server through Parcel. But the parcel
command is not in our bin path because we did not install Parcel globally.
Let's add two short scripts to interact more easily with the bundler. One script to start the app and another script to build the app. Both scripts will be added to the scripts section within package.json
. Here is the complete package.json file:
{
"name": "hyperparcel",
"version": "1.0.0",
"description": "A starter for building apps with Hyperapp and Parcel.",
"main": "index.js",
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html --public-url ./"
},
"repository": "https://github.com/cutemachine/hyperparcel.git",
"author": "[email protected]",
"license": "MIT",
"devDependencies": {
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"parcel-bundler": "^1.5.1"
},
"dependencies": {
"hyperapp": "^1.0.2"
}
}
Now we can launch our HyperParcel starter with the command yarn start
. You will notice that Parcel is fast. The bundler only needs 1.5 seconds to bundle our application. Our application is tiny, but still, it is fast.
If you point your browser to localhost:1234
you should see the application running in your browser. You can stop the development server with control-c
.
If you want to build your application, you can do so with the command yarn build
. After the command has done its work, you should see a new folder called dist
in your project root.
Conclusion
Building simple applications with Hyperapp and Parcel seems to be a good fit. You can find the complete starter on GitHub: HyperParcel.
Outlook
In the second part, we will build a small application on top of this starter. It will make use of the SteemJS library. You will also learn how to style your application with Picostyle. So, stay tuned.
Best,
Jo
Posted on Utopian.io - Rewarding Open Source Contributors
You got a 9.04% upvote from @mercurybot courtesy of @cutemachine!
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Thanks Amos for the review.
Hey @cutemachine I am @utopian-io. I have just upvoted you!
Achievements
Suggestions
Get Noticed!
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x
You got a 15.18% upvote from @nado.bot courtesy of @cutemachine!
Send at least 0.1 SBD to participate in bid and get upvote of 0%-100% with full voting power.
You got a 11.92% upvote from @bid4joy courtesy of @cutemachine!
Awesome!! I hadn't heard of Hyperapp before. Looking forward to Part Two and doing some research of my own on these technologies.
Hello Steve, I will let you know when I publish part two. Hopefully, I will find the time this weekend. Hyperapp looks very promising. I'm glad you are interested :)
Hey Steve, in case you missed it, I just released the second part of the tutorial.
Now, I am working on a starter to make it easier to get a Hyperapp project off the ground.
Did you find some time to do your research? Just curious :)
Ah, excellent! I did miss it, but will have a look now. Haven’t done a great deal of research yet. When I first came across this tutorial, I’d just commenced learning Vue, and have still been pursuing that.
Thanks for following up - I really appreciate it.
Oh yes, Vue is very popular at the moment. I think it is filling the gap between React and Angular quite well.
I’m really enjoying it. It still lacks some of the functionality available through React and Angular, but the gap is getting smaller quickly.