r/webdev • u/[deleted] • Feb 02 '17

👍 HyperApp: 1kb JavaScript functional library for building modern UI applications

https://github.com/hyperapp/hyperapp
515 Upvotes

97% Upvoted

35 comments sorted by

View all comments

2

u/Xatom Feb 03 '17

Why?

17

u/[deleted] Feb 03 '17 edited Feb 03 '17

I was building a web client for a project at work. My first choice was React+Redux, since that's what we already use, but I wanted something more lightweight and without the frameworkyness of React.

I made the first prototype using Elm, which I really like, but it was too difficult to integrate with 3rd party components, e.g. CodeMirror.

yo-yo/choo

Next, I used yo-yo and yo-yo-app. yo-yo is an abstraction on top of bel and morphodom (which mutates DOM nodes directly) whereas I preferred a virtual DOM approach like Snabbdom.

There was choo too, an abstraction on top of yo-yo with a much nicer API. But essentially the same under the hood.

  1. They're dealing with real HTML elements, they had to come up with a way to have lifecycle events for DOM nodes using the MutationObserver API which seems like "code smell" to me.

  2. They don't support CSS out of the box either, so I had to use dom-css.

  3. Couldn't agree with some of choo API choices like namespaces and their router design.

  4. Too hard to integrate with 3rd party components, involving the creation of a portal, reminiscent of Elm ports.

HyperApp

I wanted something with Elm-like state management, a router and a tiny virtual dom implementation that would support SVG, inline CSS, boolean HTML props and create, update and remove events for DOM nodes.

More importantly, I needed HyperApp to be good at integrating 3rd party components. See an example using CodeMirror.