A Tutorial On How To Build An Application With Hyperapp And Parcel

in #utopian-io8 years ago (edited)

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

Hyper Parcel

Curriculum

  1. Build a starter project for Hyperapp
  2. 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

Sort:  

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

  • You have less than 500 followers. Just gave you a gift to help you succeed!
  • Seems like you contribute quite often. AMAZING!

Suggestions

  • Contribute more often to get higher and higher rewards. I wish to see you often!
  • Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

  • Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

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.

Coin Marketplace

STEEM 0.09
TRX 0.32
JST 0.031
BTC 108179.13
ETH 3894.26
USDT 1.00
SBD 0.61