Hyperapp: The 1 KB JavaScript Library for Building Front-End Apps
Feb 15, 2025 am 10:54 AMHyperapp: A streamlined JavaScript library for building feature-rich web applications
Hyperapp is a lightweight JavaScript library for building feature-rich web applications. It combines a pragmatic, Elm-inspired approach to state management with a VDOM engine that supports keyed updates and lifecycle events—all without relying on other libraries. The source code size after it is minimized and gzip compressed is about 1KB.
This tutorial will introduce you to Hyperapp and help you get started quickly with some code examples. I assume you have some understanding of HTML and JavaScript, but don't need to have experience using other frameworks.
Key Points
- Hyperapp is a compact JavaScript library that allows developers to build web applications that combine state management with a virtual DOM engine, with a size of about 1KB.
- Applications built with Hyperapp consist of a single state object, operations that modify states, and views that convert states and operations into user interfaces. State is a normal JavaScript object that describes the application's data model and is immutable.
- Hyperapp uses a virtual DOM, which is a description of what the actual DOM should look like, created from scratch in each rendering cycle. This brings high efficiency, as there are usually only a few nodes that need to be changed.
- Hyperapp can be used with JSX (a JavaScript language extension for representing dynamic HTML) or alone. You can also load Hyperapp from a CDN like unpkg, which will be available globally via the window.hyperapp object.
- Hyperapp is simpler compared to other libraries like React or Vue because it is small and is a complete solution for building web applications. It further develops the concept of view as a state function and has built-in state management solutions inspired by Elm.
Hello World
We will start with a simple demonstration showing all the components working together. You can also try this code online.
import { h, app } from "hyperapp"; // @jsx h const state = { count: 0 }; const actions = { down: () => state => ({ count: state.count - 1 }), up: () => state => ({ count: state.count + 1 }) }; const view = (state, actions) => ( <div> <h1>{state.count}</h1> <button onclick={actions.down}>-</button> <button onclick={actions.up}>+</button> </div> ); app(state, actions, view, document.body);
This is roughly what each Hyperapp application looks like: a single state object, operation that fills states, and a view that converts states and operations into user interfaces.
Inside the app
function, we copy your state and operations (it is impolite to modify objects we don't own) and pass them to the view. We also wrap your actions so that the application is re-rendered every time the state changes.
app(state, actions, view, document.body);
State is a normal JavaScript object that describes your application data model. It is also immutable. To change it, you need to define the actions and call them.
const state = { count: 0 };
In the view, you can display the properties of the state, use it to determine which parts of the UI should be displayed or hidden, etc.
<h1>{state.count}</h1>
You can also attach an action to a DOM event, or call an action in your own inline event handler.
import { h, app } from "hyperapp"; // @jsx h const state = { count: 0 }; const actions = { down: () => state => ({ count: state.count - 1 }), up: () => state => ({ count: state.count + 1 }) }; const view = (state, actions) => ( <div> <h1>{state.count}</h1> <button onclick={actions.down}>-</button> <button onclick={actions.up}>+</button> </div> ); app(state, actions, view, document.body);
The operation will not directly modify the state, but will return a new clip of the state. If you try to modify the state in an action and then return it, the view will not rerender as you expected.
app(state, actions, view, document.body);
app
Call returns the operation object connected to the status update-view rendering cycle. You also receive this object in view functions and operations. It is very useful to expose this object to the outside world because it allows you to interact with your application from another program, framework, or native JavaScript.
const state = { count: 0 };
(The rest of the content is similar, but the sentence is replaced synonyms and sentence structure adjustments, keeping the original meaning unchanged, and the length is too long, omitted here)
Summary: Hyperapp provides a lightweight solution for building efficient web applications with its extremely small size and simple design. It provides powerful features in state management and virtual DOM while maintaining easy-to-learn and use features. Whether it is a small project or a large application, Hyperapp can provide an efficient and flexible development experience.
(The picture remains the original format and position unchanged)
The above is the detailed content of Hyperapp: The 1 KB JavaScript Library for Building Front-End Apps. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

In JavaScript, choosing a single-line comment (//) or a multi-line comment (//) depends on the purpose and project requirements of the comment: 1. Use single-line comments for quick and inline interpretation; 2. Use multi-line comments for detailed documentation; 3. Maintain the consistency of the comment style; 4. Avoid over-annotation; 5. Ensure that the comments are updated synchronously with the code. Choosing the right annotation style can help improve the readability and maintainability of your code.

Yes,JavaScriptcommentsarenecessaryandshouldbeusedeffectively.1)Theyguidedevelopersthroughcodelogicandintent,2)arevitalincomplexprojects,and3)shouldenhanceclaritywithoutclutteringthecode.

Java and JavaScript are different programming languages, each suitable for different application scenarios. Java is used for large enterprise and mobile application development, while JavaScript is mainly used for web page development.

JavaScriptcommentsareessentialformaintaining,reading,andguidingcodeexecution.1)Single-linecommentsareusedforquickexplanations.2)Multi-linecommentsexplaincomplexlogicorprovidedetaileddocumentation.3)Inlinecommentsclarifyspecificpartsofcode.Bestpractic

CommentsarecrucialinJavaScriptformaintainingclarityandfosteringcollaboration.1)Theyhelpindebugging,onboarding,andunderstandingcodeevolution.2)Usesingle-linecommentsforquickexplanationsandmulti-linecommentsfordetaileddescriptions.3)Bestpracticesinclud

JavaScripthasseveralprimitivedatatypes:Number,String,Boolean,Undefined,Null,Symbol,andBigInt,andnon-primitivetypeslikeObjectandArray.Understandingtheseiscrucialforwritingefficient,bug-freecode:1)Numberusesa64-bitformat,leadingtofloating-pointissuesli

JavaScriptispreferredforwebdevelopment,whileJavaisbetterforlarge-scalebackendsystemsandAndroidapps.1)JavaScriptexcelsincreatinginteractivewebexperienceswithitsdynamicnatureandDOMmanipulation.2)Javaoffersstrongtypingandobject-orientedfeatures,idealfor

The following points should be noted when processing dates and time in JavaScript: 1. There are many ways to create Date objects. It is recommended to use ISO format strings to ensure compatibility; 2. Get and set time information can be obtained and set methods, and note that the month starts from 0; 3. Manually formatting dates requires strings, and third-party libraries can also be used; 4. It is recommended to use libraries that support time zones, such as Luxon. Mastering these key points can effectively avoid common mistakes.
