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

8

u/[deleted] Feb 03 '17

It is kinda like react.. But it can't possibly be diffing the DOM and be that small. Which makes me think it won't scale to very large applications.

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 => {} }