Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: A JavaScript UI library for imperative JSX

npmjs.com

Post reply on HN
Print view View original

1–10 of 55 posts

Show HN: A JavaScript UI library for imperative JSX

#1

Post by danielvaughn »

I've been building a web UI library for a side project of mine. I thought it might be useful to others, so I'm releasing it as open source.

To put it simply, I realized that most of my pain points with React come from its declarative model ui=f(state). So I'm trying something that I'm calling "imperative JSX." Instead of treating JSX as the source of truth for your UI, it essentially becomes a query interface for DOM manipulation.

I first had the idea for it a few months ago, and only began writing it in earnest last week, so it's extremely early and nowhere near production-ready. Still, I'd appreciate feedback on it (positive and negative)!

The side project I'm working on is called Matry, so the library is currently called @matry/dom. I'm slowly building up a list of examples of it in action at this repo: https://github.com/matry/dom-recipes

Cheers!

Show HN: A JavaScript UI library for imperative JSX
npmjs.com

Re: Show HN: A JavaScript UI library for imperative JSX

#4

Post by udbhavs »

> If we accept the fact that the web is inherently imperative, then I believe we can resolve most if not all of the above problems. We don't need to throw the baby out with the bathwater though, because JSX is fantastic.

Also look into SolidJS for dropping the "functional" component model while still retaining JSX - it looks similar to React but works more like Vue, running components as setup functions only on initial render and doing state updates with mutations via signals.

Re: Show HN: A JavaScript UI library for imperative JSX

#5

Post by danielvaughn »

lgas wrote: post #2

Can you talk a little about the pain points you encountered, which this presumably solves?

Sure! There are several, but let's take a trivial one - setTimeout. This is an example of something that is inherently imperative, and therefore requires some awkward logic to get it working correctly in React. Here's an article explaining how to do it:

https://codedamn.com/news/reactjs/how-to-use-settimeout-in-r...

In contrast, here's how you would do it in matry:

  let someValue = 0;

  setTimeout(() => {
    someValue++;
    setContent(value is {someValue}
)
  }, 1000)
There's no special concept you need to understand, and what's more is that it will not perform any rendering logic on #some-element's siblings or descendants. React may do that depending on how you structured your component.

Re: Show HN: A JavaScript UI library for imperative JSX

#6

Post by danielvaughn »

gushogg-blake wrote: post #3

Hmm, interesting. What advantages do you see of using JSX for querying over the old jQuery-style $("#id").append(...)? Did you consider doing something more like that, but allowing JSX instead of HTML strings like it was done in jQuery?

Using JSX syntax allows you to consolidate all similar operations in a single call. matry-dom traverses the JSX you pass into a call, finds all leaf nodes, and performs the operation on each of them. So you could do this:

  function onUserLogin(user) {
    matry.replace(
      
        
        
          Welcome, {user.name}
        
      
    )
  }
In this example, the img and aside elements could be anywhere in the tree.

Re: Show HN: A JavaScript UI library for imperative JSX

#8

Post by danielvaughn »

udbhavs wrote: post #4

> If we accept the fact that the web is inherently imperative, then I believe we can resolve most if not all of the above problems. We don't need to throw the baby out with the bathwater though, because JSX is fantastic. Also look into SolidJS for dropping the "functional" component model while still retaining JSX - it looks similar to React but works more like Vue, running components as setup functions only on initi…

Yeah I like the idea of signals a lot. I haven't played with SolidJS but I'll give it a shot.

Re: Show HN: A JavaScript UI library for imperative JSX

#9

Post by danielvaughn »

mati365 wrote: post #7

That's the worst idea for framework I've seen recently

Seems like others are downvoting you, but I appreciate seeing the sentiment. I’ll just note that the some of the most influential technologies I’ve encountered in my career were initially disgusting to me.

I thought React was gross and I thought Tailwind was gross. But now I love them.

Doesn’t mean this is going to be good, just that first impressions aren’t everything.

Post reply on HN