hyperapp이란?

React 및 Vue와 마찬가지로 프런트 엔드 용 뷰 라이브러리. 마찬가지로, 라고 썼지만 소스 코드의 사이즈가 합계 1KB가 되어 있어 앞서 말한 프레임워크와 비교해 꽤 경량·심플한 구조가 되고 있다.
그래서 그 신경이 쓰이면 소스를 모두 읽고 내부의 거동을 파악한 후에 사용할 수 있다.

자세한 것은 개발자씨가 기사를 쓰고 있으므로 그쪽을 참조.
2018년은 Hyperapp의 해이다 - Qiita

GitHub는 이쪽
GitHub - hyperapp/hyperapp: 1 KB JavaScript library for building frontend applications.

또 소스 코드를 해설하고 있는 기사도 있으므로 그쪽도 읽어 두면 이해가 깊어진다.
Hyperapp 소스 코드 읽기

샘플 앱

간단한 TODO 앱과 카운터를 구현한 것이 공개되어 있지만
어느 정도 규모의 큰 것을 컴포넌트로 나누어 개발하는 경우 어떤 느낌이 될까,
그 근처를 의식하고 샘플을 만들어 보았다.



만든 것은 카운터와 자주 있는 TODO 앱을 무리하게 갓챠코한 것(외형도 기능도 심하다).
빌드에는 webpack+babel을 사용. GitHub의 README에 기재된 바와 같이,
transform-react-jsx 플러그인을 넣어 JSX ⇒ h 함수로 변환하는 설정을 추가했습니다.
component,action을 이하의 구성과 같이 그대로 나누어 정의했다.

App/
　│
　├ actions/
　│　　CounterActions.js
　│　　TodoListActions.js
　│
　├ components/
　│　  Counter.js
　│　  AddTodo.js
　│　  TodoList.js  　
　│　  　　
　├ app.js
　└ index.html

출처

Todo 주위의 소스를 발췌

app.js

import { h, app } from "hyperapp"
import TodoList from "./components/TodoList"
import Counter from "./components/Counter"

import CounterActions from "./actions/CounterActions"
import TodoListActions from "./actions/TodoListActions"


const state = {
　/*コンポーネントごとにstateの階層をつくる*/
  counter: { count: 0 },
  todoList: { todos: [ { id: '1', value: 'Homework', done: false },
                       { id: '2', value: 'Clean the room', done: false } ] 
            }
}

const actions = {
  /*stateと階層を合わせることで同階層のstateを更新するactionを簡単に定義できる*/
  counter: CounterActions,
  todoList: TodoListActions
}


const view = (state, actions) => (
  <div id="main">
    <h1>HyperApp_Sample</h1>
    <Counter state={state.counter} actions={actions.counter} />
    <TodoList state={state.todoList} actions={actions.todoList} />
  </div>
)

app(state, actions, view, document.body)

TodoListActions.js

const actions = {

    toggle: ({ done, id }) => state => {

        return {
            todos: state.todos.map(todo => {

                return {
                    id: todo.id,
                    value: todo.value,
                    done: todo.id === id ? !todo.done : todo.done
                }
            })
        }
    },
    addTodo:(value) => state => {

        return {todos: [...state.todos,{id:state.todos.length,value:value,dane:false}]}

    }
}

export default actions;

TodoList.js

import { h } from "hyperapp"
import AddTodo from "./AddTodo"

export default ({ state, actions }) => {

    return (
        <div id="todo-area" >
            <h2>TODO List</h2>
            <AddTodo state={state} addTodo={actions.addTodo}/>
            <ul>
                {state.todos.map(({ id, value, done }) => {
                    return <li id={id} key={id} className={[done ?"done" :"doing", "todo"].join(' ')} onclick={e => actions.toggle({done,id}) }>{value}</li>
                })}
            </ul>

        </div>

    )

}

AddTodo.js

import { h } from "hyperapp"

export default ({ state, addTodo }) => {

    return (
        <div>
            <input id="todo-val" type="text" />
            <button onclick={e => addTodo(document.querySelector('#todo-val').value)} >ADD TODO</button>
        </div>
    )

}

감상

state나 action이 늘어나면 이런 느낌으로 각 모듈로 분할하는 것일까-라는 느낌으로
해봤지만 이것이 정답인지는 모르기 때문에 이상한 곳이 있으면 꼭 지적해 주셨으면 합니다.

이번에는 사용하지 않았지만 React처럼 라이프 사이클 후크도 준비되어 있으며,
VDOM을 설계의 골자로 해 앱을 만들기 위한 최저한이고 충분한 기능이 제공되고 있다고 느꼈다.
보일러 플레이트도 적고, 기본적으로 순수한 js로 실장해 나갈 수 있기 때문에
React, Redux로 마음이 부러진 사람에게도 쉬운 라이브러리가 되어 있는 것은 아닐까.
아무래도 Qiita도 hyperapp로 만들어진 것 같아 1



새로운 Qiita에서 React를 중지하고 hyperapp를 채택한 배경 - Qiita  ↩