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 to be installed on the system before jumping on building a web application. The idea behind working on the Hyper App framework is to get more from less, i.e., minimizing the dependencies and usage of simpler software code.
Compared to other frameworks like React, Preact, Vue, Ember, Mithril, etc., the HyperApp framework is a very compact API with 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 wraps up the three interconnected approaches i.e., state, actions, and view. The state updates the changes every time the user acts on the interface(view). The view is responsible for rendering the changes over the user interface, which the user can see.
An action is a unary function with a single argument expecting a payload. The payload could be anything the user wants to pass into the action. On each action call, the state changes, 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)
The user triggers action on the web application. After the action is initiated, the action function is called and takes responsibility to replace the previous state with the new state and update the state. The state is updated asynchronously when the action is triggered, changes to the user interface (view), and the whole process follows. HyperApp includes stateless components, which are pure javascript functions that render themselves and allow actions to trigger. These functions are framework-agnostic and easy to test and debug.
What are the benefits of Hyperapp?
The benefits of Hyperapp are listed below:
- Lightweight Javascript library - HyperApp framework has a build size of 1KB (1.3 KB) delivering the purpose of building web applications with simple and easy.
- State Management— The HyperApp framework is based on Elm architecture, just like React and Redux. However, unlike React, which depends on Redux for state management, it has built-in state management. Therefore, it delivers functional web applications efficiently with fewer lines of code.
- Minimal (Simple to understand)—The HyperApp team aggressively minimizes the concepts users need to follow to be productive. Therefore, with fewer dependencies and just a hundred lines of code, it becomes easier for newcomers to adopt such an approach.
- Standalone— The HyperApp approach is to do more with less. HyperApp supports inbuilt state management with virtual DOM, which supports key updates and lifecycle events—all with no dependencies.
- Pragmatic— When managing the state, HyperApp is 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 the community which helps the framework to get better and more 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 smaller applications; one can not recommend it for complex applications.
Event handling and changing components' states are easier in Hyperapp than in Redux. HyperApp is easy to learn if the user is familiar with the Redux framework. Its lifecycle is similar to React's: create, update, move, destroy. 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 the HyperApp framework - Make a dir named "hyperapp" on the local system and make the 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)
Make sure to keep both the index.html and index.js files in the root path of the project. Launch the application and run the development server. Run the Parcel command, but the Parcel not included in the bin path, include start and build scripts under the scripts section in the package.json file.
{
"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, "hyper app"
-
version includes the version of the project.
-
A description of the project (not compulsory) is included.
-
Central includes the main entry of the project, which is the "index.js" file.
-
Scripts include the start, build and other scripts required when building and starting the application.
-
The repository consists of the git repository where our project is present, and anyone can clone this repo in a local system when running 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 the HyperApp framework -Conclusion of working with Hyperapp
HyperApp web applications are interactive and responsive. They follow Powerpack's three principles, one-way data flow, JSX, and virtual DOM, to make the app more flexible and robust. The HyperApp framework is based on Elm architecture. Other Elm-based frameworks include React and Redux.
- Explore Design Patterns in TypeScript and JavaScript
- Read more about Kubernetes Native Serverless Framework.
More Ways to Explore Us
Hyper-Converged Infrastructure Benefits and Best Practices
What is Hyperautomation? | Key Elements and Benefits
Hyperautomation Use Cases and its Latest Trends
