What is Hyperapp?
Hyperapp is a lightweight Javascript framework for developing feature-rich web applications. It is written in ES5 i.e., ECMAScript 5. Hyperapp requires Node.js, NPM, JSX and Webpack modules installed on the system before jumping on building a web application. The idea behind working on Hyper App framework is to get more from less, i.e., minimizing the dependencies and usage of simpler software code.
While comparing to other frameworks like React, Preact, Vue, Ember, Mithril, etc., in the market, HyperApp framework is very compact API which holds minimal bundle size and built-in state management. It has a strong foundation and significant community support. One can participate in their online community support for developing Hyperapp a robust frontend javascript framework.
In JavaScript, various libraries are open source and commercial both, with which data visualization tasks can be performed easily. Click to explore about, Data Visualization JavaScript Libraries
How Hyperapp Works?
Hyperapp framework basically wraps up the three interconnected approaches i.e., state, actions, and view. The state is responsible for updating the changes every time the user performs the action on the user interface(view). View holds the responsibility for rendering the changes over the user interface which user can see. An action is a unary function that holds the single argument expecting a payload. The payload could be anything user want to pass into the action. On each action call, the state changed and then the state redraws the changes onto the view. Here is a simple "Hello World" example -
import { h, app } from "hyperapp"
const state = { title: "Hi." }
const actions = {}
const view = state => {state.title}
app(state, actions, view, document.body)
import { h, app } from "hyperapp"
const state = {
text: "Hello!"
}
const actions = {
setText: text => ({ text })
}
const view = (state, { setText }) => (
<main>
{state.text.trim() === : state.text}
<input
autofocus
value={state.text}
oninput={e => setText(e.target.value)}
/>
</main>
)
app(state, actions, view, document.body)
What are the benefits of Hyperapp?
The benefits of Hyperapp are listed below:
- Lightweight Javascript library - HyperApp framework has build size of 1KB (1.3 KB) delivering the purpose of building web applications with simple and easy.
- State Management - HyperApp framework based on Elm architecture just like React and Redux, but it has built-in state management unlike React which depends on Redux for state management. Therefore, delivers functional web application efficiently with fewer lines of code.
- Minimal (Simple to understand) - HyperApp team aggressively minimizes the concepts user needs to follow to be productive. Therefore with its fewer dependencies and just a hundred lines of code, it becomes easier to adopt such an approach for newcomers.
- Standalone - HyperApp approach is to do more with less. HyperApp supports inbuilt state management with virtual DOM which supports key updates & lifecycle events — all with no dependencies.
- Pragmatic - HyperApp, when managing the state holds a firm on functional programming but follows a practical approach to allow for side effects, DOM manipulations. And asynchronous actions.
- Not a one-man-effort - HyperApp has a broad foundation and supports community which helps framework to get better and flexible every time.
Implementing S.O.L.I.D principles in code will help in the Code reusability, Adapt to new code or easy code changes in future, Easy to read, Easy to maintain, and Easy to test. Click to explore about, SOLID Principles in JavaScript and TypeScript
Why Hyperapp Matters?
HyperApp is lightweight, easy to use, less number of lines of code, if anyone doesn't want to write the code or wants to create the app quickly, use HyperApp. It can be a better option for the smaller application; one can not recommend for the complex application. Event handling and changing states of the component is easy in Hyperapp as compared to Redux. HyperApp is easy to learn if the user is familiar with the Redux framework. Its lifecycle is similar that the React, i.e., oncreate, onupdate, onmove, ondestroy. API calls are easy to handle in Hyperapp.How to adopt Hyperapp?
Here is a simple counter application to make the user familiar with working of HyperApp framework - Make dir named "hyperapp" on the local system and make dir working -
mkdir hyperapp
cd hyperapp
yarn init
npm init
yarn add --dev parcel-bundler babel-preset-env babel-preset-react
yarn add hyperapp
npm install hyperapp
{
"presets": ["env", "react"],
"plugins": [["transform-react-jsx", { "pragma": "h" }]]
}
<!DOCTYPE html>
<html>
<head>
<title>Hyperparcel Starter</title>
</head>
<body>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>
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)
{
"name": "hyperapp",
"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": "jo@cutemachine.com",
"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"
}
}
- the name consists of the name of the project "hyperapp."
- version includes the version of the project.
- description includes the small description of the project (not compulsory).
- main includes the main entry of the project which is "index.js" file.
- scripts include the start, build and other scripts required at the time of building and starting the application.
- the repository includes the git repository where our project is present, and anyone can clone this repo in there a local system in the case to run this project.
- the author is the name of the developer who has to build the project.
- the license includes the standard "MIT" license provided.
- devDependencies includes all the development based dependencies which are required at the time of development.
- Dependencies include all the dependencies required at the runtime.
What are the best practices of Hyperapp?
This example is a counter that can be incremented or decremented -
import { h, app } from "hyperapp"
const state = {
count: 0
}
const actions = {
down: value => state => ({ count: state.count - value }),
up: value => state => ({ count: state.count + value })
}
const view = (state, actions) => (
<div>
<h1>{state.count}</h1>
<button onclick={() => actions.down(1)}>-</button>
<button onclick={() => actions.up(1)}>+</button>
</div>
)
app(state, actions, view, document.body)
{
"plugins": [["@babel/plugin-transform-react-jsx", { "pragma": "h" }]]
}
const view = (state, actions) =>
h("div", {}, [
h("h1", {}, state.count),
h("button", { onclick: () => actions.down(1) }, "-"),
h("button", { onclick: () => actions.up(1) }, "+")
])
Hyperapp Tools
The tools required to get started with HyperApp framework -Conclusion
HyperApp web applications are interactive and responsive web applications. It follows powerpack three principles, one-way data flow, JSX, and virtual DOM to make the app more flexible and robust. HyperApp framework is based on Elm architecture. Other Elm based frameworks include React and Redux etc.
- Explore about Design Pattern in TypeScript and JavaScript
- Read more about Kubernetes Native Serverless Framework
