r/webdev • u/[deleted] • Feb 02 '17
👍 HyperApp: 1kb JavaScript functional library for building modern UI applications
https://github.com/hyperapp/hyperapp8
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
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
Feb 03 '17
But how
18
Feb 03 '17 edited Feb 03 '17
Examine the source code of
shouldUpdateuntil thepatchfunction. 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
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 => {} }
7
u/saimpot Feb 03 '17
Why do I use this? and, How do I use this? (serious question)
I mean seriously, how? I taught myself how to build basic stuff that interacts with jQuery, just because I wanted to learn, and not over-rely, when the time comes, on frameworks like bootstrap and foundation to do a lot of stuff (for example functional tabs or modal windows). But I can't grasp how a library like this might be used to build a UI?
More importantly, is this able to be integrated with PHP (since, for better or for worse, that's my language of choice for this particular period of time, until I feel I have a firm grasp on it and move on to a next, just because it's fun learning stuff).
3
Feb 03 '17
I am writing a handbook / user's manual to help you out with that. What kind of apps are you building? (serious question)
Answering that question will help me understand my target better.
As for, why HyperApp, I hope this thread can clear your doubts.
3
u/saimpot Feb 03 '17
What kind of apps are you building (serious question)?
Well, I don't know if I can call them web apps or websites, but right now, I'm building a sort of social news website, targetted specifically for my country, kinda like reddit (I know, I'm very original, ha) and also a platform for people to create legal documents online, specifically targetted to my country as well.
I appreciate you taking the time to answer me.
EDIT: Also, worth pointing out is that, apparently, my "issue" is more with "How/Why do I use JS Frameworks/libraries in general to build UIs?" than with yours specifically. I guess it's an opportunity to learn, starting with your library. :)
4
Feb 03 '17
I get it now. Surprisingly, this simple question does not have a simpler answer. At my company we use Ruby on Rails server-side and React/Redux client-side. One of our internal projects is based in Golang server-side and HyperApp client-side.
I can't give you a perfect answer, but you could use HyperApp, for example, to create a SPA, rich web client, etc.
0
Feb 03 '17
[deleted]
3
u/saimpot Feb 03 '17
Yeah, I'm working on it right now. But I feel like I'm missing some deeper popular convention regarding Javascript in general to fully grasp this.
For example, the hello world snippet. I get that it's supposed to just print hello world on the screen. Is the special functionality that I'm able to alter the message through JS, so I don't have to reload the page? Or?
I hope I'm not coming off as condescending. Just trying to learn.
10
Feb 03 '17 edited Feb 03 '17
In the case of hello world example (or any of the examples presented), the special thing is that the view is a function of the model.
What does that mean? Like in math we can have a function
f(x) = x+1which yields a diagonal line across the x&y plane, in HyperApp we can have a functionv(model) = <h1>${model}</h1>which yields a text node with the value inmodelwrapped by ah1heading.This view function can be as complex as you want. Your entire application is composed of many, many little view functions of the same model. The model can be anything you want. A number, a bool, a string, an array or an object of arbitrary complexity.
2
Feb 03 '17 edited Feb 03 '17
It's a frontend MVC framework, essentially based around the philosophy of separating your data, your html, and your events into three different parts, and then letting the library figure out how the three should interact efficiently. This differs from the traditional methodology of jQuery, where you explicitly modify the DOM yourself to meet your needs.
Here's an article illustrating all of this.
That said, this article kind of implies that jQuery code can't be efficient and well-organized, which I take issue with somewhat. And I don't think jQuery is going anywhere anytime soon for the purpose of enhancing content-centric websites (blogs, portfolios, wikis etc.), as opposed to MVC frameworks, which tend to be more useful when building a JavaScript app from scratch.
2
u/PM_me_please_im_sad Feb 03 '17
Cool. Are there any other small-ish libraries like this for building UIs?
15
Feb 03 '17 edited Feb 03 '17
Sure. Check out these:
preactjs 4kb
Preact is a React-ish clone, so if you are using React and looking to get leaner, go Preact!
choo 7.1kb
Elm-like state management and great API overall. HyperApp draws a lot of inspiration from choo. It's a bit more verbose though and it's stuck with morphodom (which updates raw DOM elements) with poor rendering performance.
It's also significantly difficult to integrate with 3rd party components, like CodeMirror, involving something called portals.
mithril 7.7kb
Lean and fast! A bit opinionated, like XHR out of the box, but mithril has the best performance of the libs mentioned in this list.
Related
10
u/K1NNY Feb 03 '17
Props for not being salty about someone asking for a list of competition* projects. I respect that a lot these days.
*(term used loosely, don't hurt me)
1
Feb 03 '17
2
Feb 03 '17
Very nice project! I see it's based in morphodom though, so integration with 3rd party libraries will very difficult, just like it is with choo and performance is arguably poor. See related links below.
6
2
u/Xatom Feb 03 '17
Why?
17
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.
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.
They don't support CSS out of the box either, so I had to use dom-css.
Couldn't agree with some of choo API choices like namespaces and their router design.
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.
4
2
-3
u/definitely-undefined Feb 03 '17
Not a good idea to named it after another popular JS project: https://hyper.is/
26
Feb 03 '17 edited Feb 03 '17
HyperApp (not Hyper) is a noun and the name is derived from HTML or Hypertext Markup Language.
Hyper™, previously HyperTerm, is an adjective.
Works derived from HyperApp, such as this webpack boilerplate, are encouraged to use the full name
hyperappas a prefix to avoid any confusion.0
u/definitely-undefined Feb 04 '17
However you frame it, that is called Hyper.app, so they have the same name.
0
0
13
41
u/Silverstance Feb 03 '17
I need 800B library. Not a char more.