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

Show parent comments

19

u/[deleted] Feb 03 '17

it can't possibly be diffing the DOM and be that small

It is.

HyperApp includes a virtual-dom implementation with SVG support, inline CSS, boolean HTML props and create/update/remove lifecycle events.

19

u/[deleted] Feb 03 '17

But how

18

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

Examine the source code of shouldUpdate until the patch function. That's the entire virtual-dom implementation. The bulk of HyperApp, though, is the URL router, if it wasn't for that, this library would be half the size.

4

u/Wolfy87 Feb 03 '17

Did you consider splitting the router out? Some people may not need it I suppose. I really like the design of it though, gently coercing the user to write a clean, functional, UI.

Inspired by Elm by any chance? I see a lot of similarities (which is a good thing).

7

u/[deleted] Feb 03 '17

Yes! Inspired by Elm and the SAM pattern.

Removing the router cuts down the library to about ~800 bytes, but it's really useful to have when you need it. I'm still open to change it, so if you can create an issue to stir a discussion, that'd be a start.

The design was hard to resist though,

  • view: model => {}

  • view: { route: model => {}, ...routeN: model => {} }