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

Show HN: Aberdeen – An elegant approach to reactive UIs

aberdeenjs.org

Post reply on HN
Print view View original

61–70 of 138 posts

Re: Show HN: Aberdeen – An elegant approach to reactive UIs

#61

Post by ibash »

vanviegen wrote: post #53
WorldMaker wrote: post #50

Earlier quoted context omitted.

> Also, in order to transform JSX into individual rerunnable functions, we'd need a whole different transpiler. I don't think you would. ` ` gets converted by current transpilers into `jsx(Component, { prop: "example" })`. The `Component` itself is passed as is. In the case of Components that are just functions, that passes the function as-is, as a function you can just call as needed. JSX was built for "rerunnable f…

The problem is that JSX transpilers will put child nodes in an array, instead of in an anonymous function, meaning there is no easy way (without transpiler magic) to rerender just a part of the component. This JSX: Welcome {data.enabled ? : "disabled"} Which becomes this with Babel: _jsx("section", {children: [ _jsx("h1", {children: "Welcome"}), data.enabled ? _jsx("input", {}) : "disabled" ]}) But we'd need somethin…

Modern react developers forget that if statements exist. When react was class based it was trivial to do:

  render() {
    if (this.dontNeedToRender) {
      return null
    }
  }
Now, because hooks can't be skipped, react developers jump through many hoops to use an if statement during rendering.

Re: Show HN: Aberdeen – An elegant approach to reactive UIs

#62

Post by gavinray »

vanviegen wrote: post #33
catlifeonmars wrote: post #19

Why not JSX? There’s no real cost to making the API JSX compatible, from what I can tell, and tsc has builtin support for transpiling JSX. It would also make porting code a lot easier. I’m only saying this because the type signature of $ is so similar to createElement. As an aside, I really like the class name and text content ergonomics (e.g div.someclass, span:some content). Reminiscent of pug/jade

I don't particularly like how control logic needs to be embedded within JSX using ?ternary : operators and .map(() => stuff) within the HTML. Also, in order to transform JSX into individual rerunnable functions, we'd need a whole different transpiler. I like being able to code browser-runnable JavaScript directly. To each their own. :-)

You can just write an IIFE expression, and use regular imperative logic like if/else and switch statements.

If you find the syntax ugly, you can create a function like "run(expr)" to wrap it, similar to Kotlin's method of the same thing.

    
    {(() => {
        switch (status) {
            case Status.LOADING: return Loading...
            case Status.ERROR: return Error: {error.message}
            case Status.SUCCESS: return 
        }
    })()}

Re: Show HN: Aberdeen – An elegant approach to reactive UIs

#63

Post by vanviegen »

jmull wrote: post #51
vanviegen wrote: post #39

Earlier quoted context omitted.

Meh, I think there's nothing magical about the HTML syntax that makes it particularly great for expression DOM structures. Except familiarity of course.

It's not a question of HTML's syntax. 1. HTML is a widely implemented standard. What you learn and know about HTML, and what you create with HTML is widely applicable. Not so much for your HTML alternatives, like Aberdeen. 2. HTML is what the browser accepts, which means you end up dealing with it anyway, just with a transformation in between, making things harder. The bigger the transformation the harder it is. To d…

Those are good points. Two things though:

1. I'd guess that of all the knowledge a web developer accumulates about HTML and CSS over the years, less than 1% concerns HTML's syntax. Everything else still applies.

2. As a client-side JavaScript developer, what you're actually dealing with is usually not HTML, but the DOM. JSX only resembles HTML rather superficially. It gets translated to a series of DOM method calls. HTML itself has no support for event handling, control structures, composition, etc.

That being said, going with pure JavaScript is of course a trade-off that also has downsides, such as indeed familiarity, and not being able to just paste a block of static HTML into your code. (Though there's a tool to help with that: https://aberdeenjs.org/Tutorial/#html-to-aberdeen)

Re: Show HN: Aberdeen – An elegant approach to reactive UIs

#64

Post by austin-cheney »

xiphias2 wrote: post #40

Congrats for reaching 1.0! Nice little library, but as it's signals based, it would be nice to make it compatible with the signals proposal ( https://github.com/tc39/proposal-signals ) At the same time for me, while it's super nice, in my opinion it just doesn't differentiate enough from other signals based frameworks to get mass adopted / make CRUD apps that much easier to make. The problem with remote server/databa…

I just read the signals proposal and was not impressed. There is a lot group thought in JavaScript, in Java too but more in JavaScript, around standardizing convenience based upon knowingly bad decisions from convenience abstractions.

Managing and updating the DOM is stupid simple and that simplicity has nothing to do with state, which a fully separate yet equally simplistic concern. That is something UI frameworks most commonly fail at horribly with a mountain of highly complex state bullshit that is forced on everything. But because framework people cannot architect original applications at any level these failures become indefensible standards enshrined by the most insecure among us.

Re: Show HN: Aberdeen – An elegant approach to reactive UIs

#65

Post by vanviegen »

GordonS wrote: post #46

Which Aberdeen was the inspiration behind the name? (I'm near the original Aberdeen in Scotland, but I know there's at least one in Australia and several in the US too).

The Scottish one! My girlfriend used to live there for half a year doing her Master's.

I also once made Glasgow (a React-clone created for educational purposes, when I was a CS teacher). So named, because it is ugly. ;-) https://www.npmjs.com/package/glasgow

I'm not sure what Edinburgh is going to be yet, but it would probably need to be rather iconic. :-)

Re: Show HN: Aberdeen – An elegant approach to reactive UIs

#66

Post by HWR_14 »

xiphias2 wrote: post #40

Congrats for reaching 1.0! Nice little library, but as it's signals based, it would be nice to make it compatible with the signals proposal ( https://github.com/tc39/proposal-signals ) At the same time for me, while it's super nice, in my opinion it just doesn't differentiate enough from other signals based frameworks to get mass adopted / make CRUD apps that much easier to make. The problem with remote server/databa…

> The problem with remote server/database is ,,what data to sync and when'' by the way, it's very different problem from what your framework is solving.

I also feel that the data synchronization (and conflict handling) is where there are a lot of opinions and patterns but few drop in libraries. Although I'm posting this in no small hope that I get corrected with someone pointing out something I should be using.

Re: Show HN: Aberdeen – An elegant approach to reactive UIs

#67

Post by zelphirkalt »

WorldMaker wrote: post #49
jitl wrote: post #42

Earlier quoted context omitted.

JSX is a better data structure than strings for expressing views, but this doesn’t use strings or any other data structure. The beauty of the OP’s approach is the immediate mode render approach. JSX is a data structure, immediate mode implies a structure from the order of execution of computation. You need JSX to pass around fragments of a view, unless your view is made entirely of computation, in which case you can…

JSX does not have any inherent data structure, it immediately converts to function calls. React is well known for taking the JSX calls and converting them to a reusable data structure, but that's React's thing and React's data structure is somewhat unique to React, other virtual DOM's have different data structures. You can do "immediate mode" JSX. There's nothing technical stopping you, and there are at least a few…

No matter how one turns it, JSX is still something different from plain JS. It is a kind of format, that needs to be parsed and interpreted. Writing only plain JS from that perspective is a purer approach than having JSX anywhere.

Re: Show HN: Aberdeen – An elegant approach to reactive UIs

#68

Post by johnofthesea »

vanviegen wrote: post #65
GordonS wrote: post #46

Which Aberdeen was the inspiration behind the name? (I'm near the original Aberdeen in Scotland, but I know there's at least one in Australia and several in the US too).

The Scottish one! My girlfriend used to live there for half a year doing her Master's. I also once made Glasgow (a React-clone created for educational purposes, when I was a CS teacher). So named, because it is ugly. ;-) https://www.npmjs.com/package/glasgow I'm not sure what Edinburgh is going to be yet, but it would probably need to be rather iconic. :-)

> I'm not sure what Edinburgh is going to be yet

Something with several layers? Old town, New town and space between.

Re: Show HN: Aberdeen – An elegant approach to reactive UIs

#69

Post by WorldMaker »

zelphirkalt wrote: post #67
WorldMaker wrote: post #49

Earlier quoted context omitted.

JSX does not have any inherent data structure, it immediately converts to function calls. React is well known for taking the JSX calls and converting them to a reusable data structure, but that's React's thing and React's data structure is somewhat unique to React, other virtual DOM's have different data structures. You can do "immediate mode" JSX. There's nothing technical stopping you, and there are at least a few…

No matter how one turns it, JSX is still something different from plain JS. It is a kind of format, that needs to be parsed and interpreted. Writing only plain JS from that perspective is a purer approach than having JSX anywhere.

There's no embedded interpretation in JSX, it's a direct "sugar" for a function call pattern. If you are already using Typescript, it's a "free" syntax sugar that Typescript supports well.

It's less pure in that it doesn't run directly in the browser today, but it is also way more pure than the template compilers in Angular and Vue and others.

Re: Show HN: Aberdeen – An elegant approach to reactive UIs

#70

Post by amiga386 »

vanviegen wrote: post #65
GordonS wrote: post #46

Which Aberdeen was the inspiration behind the name? (I'm near the original Aberdeen in Scotland, but I know there's at least one in Australia and several in the US too).

The Scottish one! My girlfriend used to live there for half a year doing her Master's. I also once made Glasgow (a React-clone created for educational purposes, when I was a CS teacher). So named, because it is ugly. ;-) https://www.npmjs.com/package/glasgow I'm not sure what Edinburgh is going to be yet, but it would probably need to be rather iconic. :-)

The Northern Lights of Old Aberdeen are home sweet home to me.

The Northern Lights of Aberdeen are what I long to see.

I've been a traveller all my life, and many's a sight I've seen.

God speed the day, 'til I'm on my way, to my home in Aberdeen!

https://www.youtube.com/watch?v=ufO8qNy2w6k

Post reply on HN