1 kb JS library

HyperApp is a JavaScript library for building frontend applications. In this way, it's similar to others like React, Vue or Ember. It supports IE10+, it's 1kb-ish minified and gzipped; it's fast and ships with a Router out of the box.

HyperApp's design is based on The Elm Architecture. Create scalable browser-based applications using a functional paradigm. The twist is you don't have to learn a new language. It combines state management with a Virtual DOM engine that supports keyed updates & lifecycle events — all with no dependencies.

Transcript

1. 1 Kb JS Library By: Widi Rizki Ayudya D.
2. SPA Web page that load a single HTML page and dynamically update that page as the user interacts with the app. (Single Page Application)
3. SPA Frameworks
4. Hyperapp by Jorge Bucaran
5. Hyperapp by Jorge Bucaran
6. Hyperapp by Jorge Bucaran • Follows principles: one-way dataflow, JSX, Virtual DOM • Based on Elm arch or React/Redux • Create app using a functional paradigm • You do not have to learn new language • Combines state management w/ V-DOM (all w/ no dependencies)
7. One way data flow principle Hyperapp follows
8. Elm Architecture • Functional language that compiles to JavaScript • The essential (Model, View, Update) • The fastest Virtual DOM • Friendly error messages: ➔ No null ➔ No undefined is not a function Hyperapp is based on
9. Functional Paradigm Imperative Paradigm (HOW) const weekday = “Friday” const heading = document.createElement(“h1”) heading.textContent = weekday document.body.appendChild(heading) HyperApp follows Declarative Paradigm (WHAT) <h1>Friday</h1> Friday
10. Virtual DOM How to write dynamic HTML declaratively? HyperApp follows <h1> </h1> weekday
11. Virtual Nodes on HyperApp { tag: “h1”, data: { style: { color: “blue” } }, children: “Friday” } Virtual DOM h( “h1”, { color: “blue” }, “Friday” ) <h1 style={{ color: “blue” }}>Friday</h1> const weekday = “Friday” const heading = <h1>{weekday}</h1> patch(document.body, heading)
12. Code Example const { h, app } = hyperapp app({ state: { text: "Hello!", defaultText: "<3" }, view: (state, { setText }) => <div> <h1> {state.text.trim() === "" ? state.defaultText : state.text} </h1> <input autofocus value={state.text} oninput={e => setText(e.target.value)} /> </div>, actions: { setText: (state, actions, text) => ({ text }) } }) HyperApp
13. Summary • Simplicity syntax - declarative • State management (not rely on external libraries) - Elm • Lightweight app - approximately 1Kb • Contributions from the community