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

21–30 of 135 posts

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

#21

Post by troupo »

Ah yes. Yet another "we know better" lib/framework of the week with unsubstantiated claims

> No learning curve beyond knowing how to work the DOM.

Except, you know, all the weird and non-weird stuff that they have that may or may not work as you expect it to:

    raw.section(
      "some-class",
      functionThatMightReturnAString(),
      e => e.classList.has("the-returned-class-string") && "another-class"
      raw.on("click", () =>
      {
       alert("Button clicked!");
      }),
      "section-class",
      raw.div("text"),
      ["class-2", [raw.div()]],
      "section-class-other",
      raw.on("connected", () =>
      {
          // Magic non-standard event!
      }),
      { attr: "value" },
      e => raw.on(window, "keydown", ev =>
      {
          // somehow global events
          // and e is magically our element, of course
          if (ev.key === "Escape")
       e.remove();
      }),
     )
> No weird or unpredictable framework "magic".

Except, you know, all of the above

> No performance overhead.

Remains to be seen

> No virtual DOM.

The weird obsession with "no virtual DOM" is weird because the fastest libs out there use virtual DOM. But zealots be zealoting

> Works in Node.js for server-side HTML generation (with the help of HappyDOM).

So, requires full DOM implementation to be used on the server. Most libraries/frameworks don't need that.

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

#24

Post by giancarlostoro »

8organicbits wrote: post #10
jack_riminton wrote: post #2

Big claims and zero code examples? No I'm not going to go digging in a repo without so much as a top-level overview of the approach

The demo is here. https://rawjssample.pages.dev/ I immediately see that it ~hijacks my back button~ fills my back-stack such that I can't use the back button normally. Doesn't look promising.

I'm not a fan of websites with super huge font. I'm on a 1080, and a lot of the words fit in a smaller font just fine.

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

#28

Post by chuckadams »

jack_riminton wrote: post #2

Big claims and zero code examples? No I'm not going to go digging in a repo without so much as a top-level overview of the approach

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(...segments: ((element: HTMLElement) => Raw.Param)[]) {
          this.head = raw.div(
            raw.css(
              "> *", {
                display: "inline-block",
                padding: "1em",
                borderRadius: "5px",
                userSelect: "none",
                webkitUserSelect: "none",
                cursor: "default",
              },
              "> .active", {
                backgroundColor: "hsl(215, 100%, 50%)",
                color: "white",
              },
            ),
            () => {
              const buttons: HTMLElement[] = []
    
              for (const fn of segments) {
                const button = raw.div()
    
                raw.get(button)(
                  raw.on("click", () => this.select(button)),
                  fn(button),
                )
    
                buttons.push(button)
              }
    
              return buttons
            },
          )
        }
    
        select(childElement: HTMLElement) {
          toggleClass(childElement, "active")
        }
      }
    
      function toggleClass(child: Element, cls: string) {
        Array.from(child.parentElement!.children).map(e => e.classList.toggle(cls, e === child))
      }
    }

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

#29

Post by nosefurhairdo »

8organicbits wrote: post #10
jack_riminton wrote: post #2

Big claims and zero code examples? No I'm not going to go digging in a repo without so much as a top-level overview of the approach

The demo is here. https://rawjssample.pages.dev/ I immediately see that it ~hijacks my back button~ fills my back-stack such that I can't use the back button normally. Doesn't look promising.

Anything that is supposed to replace web UI frameworks needs to be able to perform client side routing. You can argue that the different colors shouldn't represent a push to history, but that's a criticism of the implementation, not the library.
Post reply on HN