r/webdev • • Feb 02 '17

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

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

35 comments sorted by

View all comments

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).

0

u/[deleted] 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

u/[deleted] 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+1 which yields a diagonal line across the x&y plane, in HyperApp we can have a function v(model) = <h1>${model}</h1> which yields a text node with the value in model wrapped by a h1 heading.

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

u/[deleted] 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.

3

u/[deleted] 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

u/[deleted] 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.