As the front end development technology is getting advanced each day with node.js, another front end framework has evolved after React JS known as Hyperapp JS. Hyperapp is the latest front end framework after React JS (1 KB in size) but capable to build sophisticated web applications with less number of steps than its predecessor frameworks.

What is Hyperapp?

Hyperapp can be explained with the following points.

• Hyperapp is a light weight front end development framework, sized around 1KB and. it is capable of building a wide variety of sophisticated web applications, static and dynamic websites with great ease. It is very simple to understand and fun to use.
• Hyperapp requires node.js, npm, and gulp node modules along with 1 KB Hyperapp module to be installed on your system before we can build a web application in Hyperapp.
• The idea behind the development of the Hyperapp framework is to get more out of less by minimizing dependencies and write simpler software code.
• When comparing Hyperapp with frameworks like React, Preact, Vue, Ember, Mithril, etc., it is a compact API and has built-in-state management with very small bundled sized.
• Hyperapp based web applications support IE10+ browsers and they perform their task quickly on these browsers and are feature-rich web applications.
• Hyperapp has online community support and one can participate in the community that helps in building Hyperapp a stronger front end framework over its competitor.
• Hyperapp based web applications are interactive and responsive web applications. They support and follow the popular principles such as one-way data flow, JSX, and Virtual DOM.
• The Hyperapp framework is based on the Elm architecture. Other frameworks which are built on similar architecture are React, Redux, etc.
• Hyperapp is a combination of a state management with a VDOM engine which helps to support keyed updates and lifecycle events without dependencies.
• Hyperapp is written in ES5 i.e. ECMAScript 5.
• In Hyperapp, we can format our code before creating a new commit by using npm run format. Hyperapp developers follow the ideology to keep the files within the application.

Pros and Cones of Hyperapp

• Light-weight JavaScript Library: Well known for its small sized framework it is built for simplicity and to provide ease in building web applications.
• State management: Hyperapp is based on the Elm Architecture, and it is independent. Therefore, it enables us to build functional web applications with great ease and less lines of code.
• Hyperapp is simple to understand: When you read hundred lines of code for Hyperapp you will realize it is very simple to grasp. You can build web application with less number of dependencies, few lines of code and breaking the app building idea among state, action and view.
• Hyperapp is simply awesome: Hyperapp framework utilizes every single aspect of the virtual DOM engine. Efforts are being made towards its performance, to make it better than existing front end frameworks such as React, Vue, etc.
• Not a one-man-effort: Hyperapp community invites people with innovative ideas. It is not a one man show like Mithril and Inferno. Hyperapp is thought to be built as multiple people’s project and with their substantial contributions from the community, Hyperapp framework could become one of the best framework of its own kind which will flourish long and outdated existing front end framework soon.

Basic Example on Hyperapp

Given below is an example of a simple web application that says “Hello Hyperapp JS”. We will discuss in detail about installing Hyperapp JS and getting started to build a web application in the upcoming articles. To work with the Hyperapp framework, experience with other frameworks is not needed, but the basic knowledge about HTML and JavaScript is required.
./assets/js/hyper/actions/Actions.js

export const actions = {
  up,
  intro
}

function up (state, actions) {
  return (
    {counter: state.counter + 1}
  )
}


function intro (state, actions) {
  console.log ('My first App in Hyperapp JS' )
  return (
    {count: state.counter + 1}
  )
}

./assets/js/hyper/components/Application.js

import {h, app} from 'hyperapp'

export default function App ({state, actions}) {
  return (
    

      

        
Hyperapp JS Demo
          Hello Hyperapp JS!
      
    
  )
}

./assets/js/hyper/state/appState.js

export const globalState = {
  counter: 0
}

./assets/js/hyper/index.js

import {h, app } from 'hyperapp'
import devtools from 'hyperapp-redux-devtools';
import {actions} from './actions/actions.js'
import {globalState} from './state/appState.js'
import Application from './components/Application.js'

app ({
  state: {globalState},
  view: (state, actions) => ,
  root: document.getElementById ('app'),
  actions,
  events: {
    action (state, actions, {name, data }) {
      console.groupEnd ()
    },
    Load (state, actions) {
      actions.intro ()
    }
  },
  mixins: [devtools()]
})

./public/index.html

Command to execute Hyperapp application

We need to execute “npm run watch” at the project root of Hyperapp web application as shown below.

Output
Once the application is build successfully, we can see the application loaded at below URL [http:/localhost:3000/] as shown below.

What’s coming next for Hyperapp?

The Hyperapp framework is quite stable now and it is being used to build elegant and pure functional websites. But it is still undergoing improvements with the support of community members and there are many new things which are coming up in year 2018 such as improved documentation, DevTools integration, etc. to make Hyperapp the best front end framework. Hyperapp community is still inviting new members to participate in the contribution of Hyperapp front end framework development, bug fixes, and improvements based on innovative ideas.

Source for this Hyperapp Blog is here 

The post Everything You Need To Know About Hyperapp JS appeared first on Eduonix Blog.