Pop

Pop is a Hyperapp / Ultradom spin-off project — yet another micro-framework for creating graphical user interfaces. This is not the final title, but let's go with that for now.

With Pop I intend to improve the pain points I've experienced with Hyperapp due to its pragmatic attitude towards application building. The tradeoff is that Pop will be less flexible, making it very difficult to produce side-effects.

Pop's core value proposition is the eradication of the "wired" actions concept, making it extremely easy to load new functionaly into your application dynamically and reducing the boilerplate necessary to assemble your state from different modules, passing props through the component tree, etc.

Install

npm i pop

Usage

import Pop, { Time } from "pop"
 
const decrement = state => ({
  count: state.count - 1
})
 
const increment = number => state => ({
  count: state.count + number
})
 
const double = state => ({
  count: state.count - 1
})
 
document.body.appendChild(
  Pop.create({ count: 0 }, state => (
    <Main>
      <div>
        <h1>{state.count}</h1>
        <button onclick={decrement}>Increment</button>
        <button onclick={increment(1)}>Decrement</button>
        <button onclick={double}>Decrement</button>
      </div>
 
      <Time every={1000} ontick={increment(1)} />
    </Main>
  ))
)

License

Pop is MIT licensed. See LICENSE.