Hit the Ground Running with Hyperapp and Parcel

In this lesson we will combine two tools that have been developed with simplicity and ease of use in mind. With the lightweight framework of Hyperapp and the low configuration requirements of Parcel, we'll get an application up and running within 4 minutes! We'll do this by only installing four node modules, creating a couple of files, and adding one package.json script.

You must be a Member to view code

Instructor: 00:00 inside of our project, we can do a Git init to get a Git repository up and running, as well as an NPM init for our packaged JSON. Once we have that up and running, we can install Hyperapp, as well as our Parcel bundler, our Babel plug-in transform-react-jsx, and our babel-preset-env.

00:21 Next, let's get a couple of files here. We'll start off with an index.html as well as an index.js. Now instead of our packaged JSON, let's add a new start script that will parcel our index.html. With Parcel, this is basically all the configuration that we need to do. Next, we need to make a .babelrc file. I'll paste in some code here.

00:46 To make life easier, we use the ES6 syntax and JSX. We need to get Babel the configs of using the ENV pre-set and to compile a JSX for Hyperapp. After we save this file, we've now completed all the work that's required to start writing our application. Parcel's low config requirements gives us a quick way to get up and going without the need of some boilerplate set-up.

01:14 Now instead of our terminal, we can simply run npm-start. Parcel's going to run our application. If we navigate to our local host 1, 2, 3, 4, you can see that we have a running app just with nothing on it. Now instead of our index.html, I'll paste in some HTML code. You can see that we load our application from index.js.

01:38 Inside of this file, we'll important h and app from Hyperapp, as well as our indexed CSS that we'll add later. We'll create a state object, Star Wars People, as an array. Then, we'll create an actions object with Fetch Star Wars People. It'll be a function that returns a function with state and actions.

01:58 Inside of that, we'll fetch our Star Wars API, unwrap our promise, and then, inside of this last promise, we will call another action Function Set Stars Wars People with Data. Now, this function will destructure the results from our fetch, return another function with state, and then, update our state object with these results.

02:23 Now that we have a state object to hold our data and actions to fetch and set our data, let's create our view. Const view is going to be a function that has state and actions. We'll start by returning a div, and inside that, we'll do a h2 with Get Star Wars People inside of that. Next, we'll create an unordered list with a class name of Container.

02:49 Inside of this, we'll map over our Star Wars People, printing off LIs with a class name of People and grabbing the name property off each one. We'll close our UL and make a button with a class name of Request Button with an on-click. We'll fire our actions, Fetch Star Wars People. Then, the button'll say Fetch People.

03:14 We'll close it off, and down at the bottom, we'll do app, state, actions, view, and document.body. Perfect. Now inside of this view, you can see that we've got an H2, a unordered list that will print off an LI for each of the people inside of our return results that we'll get when we click on this button that'll fire our Fetch Star Wars People action.

03:40 We can finish off by saving some styles inside of our index.css. Now with our browser back open, we can run our application, which will go and fetch the Star Wars API and return and print a list of Star Wars characters...