Hacker News Reader

Comment by gcau | Hacker News Reader

Here is what some of it looks like.

``` <div @name="media-object" class="{ type }"> <img src="{ img }"> <aside> <h3>{ title }</h3> <p :if="desc">{ desc }</h3> <slot/> </aside> </div>

<div class="art-gallery"> <media-object :for="item in items" :bind="item"/> </div ```

I really don't like the opinionated, magical/weird syntax (like vue's :@v-for-OnClick="fn()"), I prefer how close and true to vanilla html/js react is, rather than stuff like this.

View on HN

My problem with these :ifs and v-ifs and {#ifs} is I cant place a breakpoint and step through _my_ code with a debugger.

Yes. Nue is indeed HTML-based and takes inspiration from Vue. It is designed for UX developers who prefer to use HTML/CSS and minimal JavaScript to communicate with the business model layer, that the JS developers are building. That is: separation of concerns.

I can understand that this syntax is not a preference for JavaScript/TypeScript developers who opt to JSX and want to write everything (logic, layout, styling) in JavaScript.

    <p :if="desc">{ desc }</h3>

That </h3> should be a </p>, I think.

Thanks. Fixed

React has a lot of opinionated, "magical" boilerplate. useThis, useThat, ... In my experience, Svelte did a much better job and is closer to vanilla html/js, but for some reason it seems to fail to gain significant traction.

I agree -- I don't love Svelte but it feels much closer to just writing plain HTML+JS+CSS than any other fancy JS framework I've tried.

The goals of this project and Svelte seem very similar, so I'd be interested to see a more in-depth comparison.

Hooks are just normal javascript functions though, they're not syntax.

No special syntax but they do have special semantics, as per the "rules of hooks".

"use" is just a convention for hook function names, react doesn't require or enforce it.

It's "just" a convention, but a strongly encouraged one. The React docs say:

Its name should always start with `use` so that you can tell at a glance that the rules of Hooks apply to it.

And it is required and enforced if you use the ESLint react-hooks plugin (which I'm guessing most large projects do).

https://stackoverflow.com/questions/66151248/do-react-hooks-...

> In my experience, Svelte did a much better job and is closer to vanilla html/js

I just looked at some Svelte examples and it's a mix of magic keywords (on, bind) with magic symbols (: | @) and new, completely unrelated syntax to both JS and HTML (#each, #if, :else). I guess it looks way more idiomatic if you have an IDE that highlights and lints it correctly. React with its few rules of hooks seems way closer to vanilla JS.

To push that point further, I’d say JSX is opinionated, adding magical/weird templatey syntax to Javascript.

React is far from vanilla HTML. It uses JSX with attributes e.g. `className` or `htmlFor` instead of HTML's `class` or `for`. And JSX requires compiling to HTML rather than being HTML from the beginning.

Both className and htmlFor are native.

https://developer.mozilla.org/en-US/docs/Web/API/Element/cla...

https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelEl...

Woah.

Yes, but it's JS, it isn't vanilla HTML.

It's almost identical to vanilla DOM, though, which does use className and htmlFor.

I'm not sure that the compilation aspect is relevant - pretty much all modern frameworks using a template language have a compilation step. ngFor doesn't exist in the browser after all! ;)

You're confusing the XHTML/HTML and JavaScript API naming schemes

I'd say it's JSX doing that because those attributes are clearly on the declarative/markup side of the divide, not the procedural/imperative dom manipulation side.

Reply on news.ycombinator.com