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

91–100 of 138 posts

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

#91

Post by vanviegen »

zareith wrote: post #80

This looks cool, love the API. I don't any support for lifecycle hooks (eg. something like onMount when the returned node will be attached to the document) in the component api. In absense of those, I imagine integrating with vanillajs libraries will be difficult (eg. codemirror, slickgrid etc.) Curious what your thoughts in the matter are.

While in a rendering scope, `getParentElement()` will get you access to the raw DOM element. As long as you don't detach/move it, you'll be fine letting third-party code loose on it.

Aberdeen has one life cycle callback: `clean`, which is called right before rerunning or destroying a scope.

I think that's enough for just about anything you'd want to do.. ?

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

#92

Post by vanviegen »

tgv wrote: post #28

I don't dislike it, but how does this differ from e.g. Vue? And does it know which functions changed, or does it run the top-level function on each update? For those who prefer HTML: I'm sure this can be adapted with JSX or a template pre-processor.

> I don't dislike it

That must count for something! :-)

Re "Vue": https://news.ycombinator.com/item?id=43937303

When running a function through `$()`, it will keep track of proxied data that was read, and of all DOM changes made. When data changes, DOM changes are reverted, and the function is rerun. As at least such a function exists for each DOM element that has children, it's pretty finegrained. Also, Aberdeen is smart about reactive iteration.

With enough transpiler magic, impossible is nothing! :-)

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

#93

Post by vanviegen »

and0 wrote: post #15

IMO That example is way too complicated to be an elevator pitch. I'm trying to understand what working with your framework would be like for a web app, not the boilerplate to establish rules and state management of a small game. The tutorial has a much better Hello World + incremental feature introduction, I'd put some of that before the larger example.

You're right. Updated, thanks!

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

#94

Post by ilikejam »

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

Oi! Glasgow's lovely! Well, some bits are...

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

#95

Post by vlod »

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

Disappointed there's no mascot with a cone.

https://www.bbc.com/news/uk-scotland-glasgow-west-65914456

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

#98

Post by dsego »

vanviegen wrote: post #38
lucasacosta_ wrote: post #32

Earlier quoted context omitted.

At first glance and on a syntax level, Vue from the start had part of its code in html syntax and the rest on JS. Aberdeen goes fully into JS. So if I get it right, in Aberdeen there would not be any pure html written at all, right? Is that the "ideal"? Or it would be more of a hybrid with Aberdeen accompanying plain html?

Correct! As far as I know, Vue has always had its own HTML-based template engine, with special HTML attributes for conditions, loops, etc. Different trade-off. Since Vue 3, it does indeed rely on `Proxy` for its reactivity, like Aberdeen. The idea is the write whole applications without HTML. We've done some pretty big projects in this style, and in terms of DX and velocity it's actually really good. Recycling (tiny)…

Aberdeen looks a bit like the venerable Mithril in terms of DX.

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

#99

Post by recursive »

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

> I don't particularly like how control logic needs to be embedded within JSX using ?ternary : operators and .map(() => stuff) within the HTML.

It doesn't.

In my[1] framework, there is JSX, but control flow like map is done with a function.

    
      { ForEach(model, item => Fruit: { item }) }
There is a lambda there, yes, but at the top level it's a ForEach() function call.

Likewise, it is possible to use get conditional elements in JSX without using react's ugly approach.

[1] https://mutraction.dev/

Post reply on HN