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

RawJS is a better way to call document.createElement()

squaresapp.org

Post reply on HN
Print view View original

81–90 of 135 posts

Re: RawJS is a better way to call document.createElement()

#81

Post by jmull »

eek2121 wrote: post #74
jmull wrote: post #73

It seems so obviously bad to have to write your CSS and HTML in javascript. I don't get why people keep coming back to it. I mean, I get that the point is to add something that plain CSS and HTML don't do on their own, but it seems so much better to start with regular CSS/HTML and enhance... keep the standard syntax and semantics everywhere you possibly can, so that the dev only has to deal with framework-specific sy…

I mean, that is basically JSX is it not? I agree with your points, however. How the W3C has not come up with a good solution is beyond me.

> I mean, that is basically JSX is it not?

Yes, exactly.

I get that many devs have learned and internalized how JSX (and the rest of react) renders to HTML and CSS, and have come to understand the mechanism well enough to debug when mistakes are made and things go wrong. But time and effort dealing with the framework takes away from time and effort spent on the thing you're actually trying to build. It just pays to minimize that where you can. JSX isn't as bad as this "rawjs" but it certainly has its issues.

Beyond requiring extra dev attention, JSX is also part of and implies the whole virtual DOM diffing/rendering mechanism, which just limits the rendering optimizations the framework is capable of doing on its own. That leads to poor performance (and/or incorrect rendering), or, again, the dev spending time on something the framework could have taken care of if it had been designed differently.

Fundamentally, a framework needs to be able to figure out what needs to be rerednered and what doesn't when state changes because it can't reredner everything on any change. That's just harder and more limited when everything is rendered dynamically.

I'm not trying to bash react and JSX... obviously it was workable and did a ton to popularize the reactive approach. But I don't think anyone thinks it was perfect from the start and obviously we've learned a lot about what works and what doesn't. To me this "rawjs" is a step backwards from even where react started out.

Re: RawJS is a better way to call document.createElement()

#82

Post by chuckadams »

agloe_dreams wrote: post #47
chuckadams wrote: post #28

Earlier quoted context omitted.

The sample repo is at least well-commented. I've taken the liberty of pasting some of the sample code here, sans comments, so we can see what the code style is like. My editorial take: no thanks. This looks less declarative than jQuery. If this is the alternative, then yeah, you still probably need React (or Vue/Svelte/Astro/whatever) namespace App { export class SegmentedButtonComponent { readonly head constructor(.…

...yuck. The hilarious part to me is that every single thing this does could be done in one line of an angular template with massively less typing and opportunity for error. just a: Like, I know you want to create an element and blah blah...but if it takes your dev 4x longer to write it, why are you doing it? Ultimately, in the real world, all of this is devs trying to make bragging rights for reasons with no real co…

> you should never use a div as a button, it is an accessibility nightmare

Eh, that's easily fixable with role="button" and tabindex="0". Oh, and adding a keyup handler so space and enter both click it. After that though, you have a perfectly good button. Well, minus any visual feedback that it's being clicked, but presumably you're doing some custom effect to go with the custom element...

So never say "never", but yeah, use a damn whenever you have the choice. The roles are there to give you an escape hatch when you don't. And sometimes buttons are actually just button-shaped links, in which case you _really_ want to use an tag, because those are heinous to imitate properly.

Re: RawJS is a better way to call document.createElement()

#83

Post by theogravity »

iandanforth wrote: post #51

Apparently the author has it out for import statements. "No import dumpster at the top of each file. Forget imports even existed. Just access whatever you want, wherever you want. TypeScript knows where to find it." This is a bizarre preference. Is there some reason the JS community has turned against explicitly listing what libraries are used by a module?

the namespacing is also odd as well. I don't usually see it used that way in Typescript.

Re: RawJS is a better way to call document.createElement()

#84

Post by tomhallett »

xnorswap wrote: post #60

You know what's an even easier way to call "document.createElement"? $.append Sure, there's a reason why people moved away from JQuery, but I'm not convinced that a half dozen lines of boilerplate per element is a good solution either. The example almost reads like a parody, here's a half dozen lines to write what you could write in one line of raw html: But I guess I just don't get it, I don't understand the use cas…

To me the usescase feels like: I am using Hotwire/htmx. When I need more complex behavior, instead of using stimulus/apline/hyperscript, you can make custom webcomponents which use rawjs for the rendering.

Re: RawJS is a better way to call document.createElement()

#85

Post by Py_ »

xnorswap wrote: post #60

You know what's an even easier way to call "document.createElement"? $.append Sure, there's a reason why people moved away from JQuery, but I'm not convinced that a half dozen lines of boilerplate per element is a good solution either. The example almost reads like a parody, here's a half dozen lines to write what you could write in one line of raw html: But I guess I just don't get it, I don't understand the use cas…

RawJS library author here.

$.append appends, in the name ".append".

Though

The point of RawJS is to help with element constructions. jQuery was a god-send back in the day for manipulation and querying (before we had document.querySelector()) but constructions of hierarchies were never really its thing.

There are other libraries that work like RawJS to make complex DOM constructions with function calls. I just don't think the ergonomics of them were as well thought-out as it is in RawJS.

Re: RawJS is a better way to call document.createElement()

#86

Post by Py_ »

nogridbag wrote: post #71

This showed up in my google news feed last night and I immediately searched to see if it was posted to HN, which it had not. So it's interesting to see this reach the front page this morning. There's a youtube video linked from the github that goes into some explanation into the "why", e.g. we should minimize deps, use standards instead of framework silos, avoid frameworks which have monopoly on dom, easier debugging…

This take is really on-point.

I'd like to add that from my experience, the more "out there" and the less "rudimentary" your UI and general app is, the more the frameworks really get in your way.

Re: RawJS is a better way to call document.createElement()

#87

Post by Py_ »

whstl wrote: post #66
jakelazaroff wrote: post #56

Earlier quoted context omitted.

I definitely would not say the authors’ opinions are representative of the JS community.

This is the third or fourth time I see today in HN of someone treating someone's personal project or opinion as "the direction the community is moving". If every new toy framework is treated like this, it's no wonder people feel overwhelmed by frontend development.

RawJS library author here. Moving away from modules is definitely not what I've observed in the community, I see no evidence that this is "the direction the community is moving".

That said, I admittedly have a visceral hatred for ES modules. I personally believe them to be the worst thing that has ever happened to the language. Encapsulation is of course a great thing but in my opinion there are much better ways to do this. I'm not the only person that thinks this–there was a gist that got to the homepage of HN a while back titled something like "ES Modules are terribly, actually" (IIRC).

Re: RawJS is a better way to call document.createElement()

#88

Post by Py_ »

jakelazaroff wrote: post #45

Can someone explain these bullet points from the sample repo? [1] They seem contradictory, but maybe there's some esoteric definition of "builds" that I'm missing. > - No bundler, no build system. Near-zero complexity. > - TypeScript builds your app in milliseconds, even if your app gets huge. [1] https://github.com/squaresapp/rawjs-sample

Repo author here. Sorry–maybe not the best choice of words.

By "no bundler, no build system", it kind of means "no webpack, rollup, gulp, etc".

I tend to think of TypeScript as a non-negotiable for any serious project (hopefully I don't get flamed for saying that), so using the build system that's baked into TypeScript means you don't have to rely on yet another tool to handle this.

Re: RawJS is a better way to call document.createElement()

#89

Post by Py_ »

merelysounds wrote: post #30

I appreciate that there is a code sample at https://github.com/squaresapp/rawjs-sample , but I'd prefer something more explicit. Like what https://youmightnotneedjquery.com did - comparisons between the popular library and the replacement.

RawJS library author here.

Thanks for +1'ing this idea. I like what that website did and I might need to build something similar.

Re: RawJS is a better way to call document.createElement()

#90

Post by Py_ »

base wrote: post #4

The page needs some code examples. It's just marketing talk, needs to be more oriented to it's audience.

RawJS library author here.

There's a demo app here: https://github.com/squaresapp/rawjs-sample

(Does that help you? Or do you think it still needs more?)

I'll get on updating the readme shortly.

Post reply on HN