HyperApp은 프론트 엔드 애플리케이션을 구현하기 위한 JavaScript 라이브러리입니다.

선언적 : HyperApp의 디자인은 느릅 나무 아키텍처를 기반으로 합니다. 기능 패러다임을 사용하여 확장 가능한 브라우저 기반 응용 프로그램을 만듭니다. 새로운 언어를 배울 필요가 없다는 단점이 있습니다.

상태 없는 구성 요소 : 마이크로 구성 요소에서 복잡한 사용자 인터페이스를 작성하십시오. 상태 비 저장 구성 요소는 프레임 워크에 무관심하고 재사용 가능하며 예측 가능하고 디버깅 하기 쉽습니다.

배터리 포함 : HyperApp에는 기본적으로 Elm과 유사한 상태 관리, 가상 DOM 엔진 및 라우터가 있습니다. 그것은 여전히 1kb의 무게와 의존성이 없습니다. 우리는 당신의 스택에 대해서도 반발하지 않았습니다. Hyperif와 함께 Browserify를 사용하십시오. Webpack 또는 Babel / JSX 등의 롤업

https://github.com/jorgebucaran/hyperapp 

https://hyperapp.dev/

Hyperapp 앱을 처음부터 만드는 단계별 연습. Hyperapp를 처음 사용하는 경우 여기에서 시작하십시오.

Counter 

import { h, app } from "https://unpkg.com/hyperapp"

app({
  init: 0,
  view: state =>
    h("div", {}, [
      h("h1", {}, state),
      h("button", { onClick: state => state - 1 }, "-"),
      h("button", { onClick: state => state + 1 }, "+")
    ]),
  node: document.getElementById("app")
})

Calculator 

import { h, app } from "hyperapp"

const computer = {
  "+": (a, b) => a + b,
  "-": (a, b) => a - b,
  "×": (a, b) => a * b,
  "÷": (a, b) => a / b
}

const initialState = {
  fn: "",
  carry: 0,
  value: 0,
  hasCarry: false
}

const Clear = () => initialState

const NewDigit = (state, number) => ({
  ...state,
  hasCarry: false,
  value: (state.hasCarry ? 0 : state.value) * 10 + number
})

const NewFunction = (state, fn) => ({
  ...state,
  fn,
  hasCarry: true,
  carry: state.value,
  value:
    state.hasCarry || !state.fn
      ? state.value
      : computer[state.fn](state.carry, state.value)
})

const Equal = state => ({
  ...state,
  hasCarry: true,
  carry: state.hasCarry ? state.carry : state.value,
  value: state.fn
    ? computer[state.fn](
        state.hasCarry ? state.value : state.carry,
        state.hasCarry ? state.carry : state.value
      )
    : state.value
})

const Calculator = state =>
  h("main", {}, [
    Display(state.value),
    Keypad([
      Functions({ keys: Object.keys(computer) }),
      Digits({ keys: [7, 8, 9, 4, 5, 6, 1, 2, 3, 0] }),
      AC,
      EQ
    ])
  ])

const Display = value => h("div", { class: "display" }, value)

const Keypad = children => h("div", { class: "keys" }, children)

const Functions = props =>
  props.keys.map(fn =>
    h("button", { class: "function", onClick: [NewFunction, fn] }, fn)
  )

const Digits = props =>
  props.keys.map(digit =>
    h(
      "button",
      { class: { zero: digit === 0 }, onClick: [NewDigit, digit] },
      digit
    )
  )

const AC = h("button", { onClick: Clear }, "AC")
const EQ = h("button", { onClick: Equal, class: "equal" }, "=")

app({
  init: initialState,
  view: Calculator,
  node: document.getElementById("app")
})