7 ms·
Here is what some of it looks like. ``` <div @name="media-object" class="{ type }"> <img src="{ img }"> <aside> <h3>{ title }</h3> <p :if="desc">{
by gcau 3y ago
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.
- tipiirai 3y agoYes. 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.
- kitd 3y ago<p :if="desc">{ desc }</h3> That </h3> should be a </p>, I think.
- tipiirai 3y agoThanks. Fixed
- orangepanda 3y agoMy problem with these :ifs and v-ifs and {#ifs} is I cant place a breakpoint and step through _my_ code with a debugger.
- niutech 3y agoReact 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.
- Kiro 3y agoBoth className and htmlFor are native. https://developer.mozilla.org/en-US/docs/Web/API/Element/className https://developer.mozilla.org/en-US/docs/Web/API/Element/cla... https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelEl...
- arcanemachiner 3y agoWoah.
- niutech 3y agoYes, but it's JS, it isn't vanilla HTML.
- MrJohz 3y agoIt'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! ;)
- martinsnow 3y agoYou're confusing the XHTML/HTML and JavaScript API naming schemes
- sixbrx 3y agoI'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.
- shrimpx 3y agoTo push that point further, I’d say JSX is opinionated, adding magical/weird templatey syntax to Javascript.
- deleted 3y ago[deleted]
- vekker 3y agoReact 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.
- kehrin 3y ago> 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.
- iainmerrick 3y agoI 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.
- gcau 3y agoHooks are just normal javascript functions though, they're not syntax.
- iainmerrick 3y agoNo special syntax but they do have special semantics, as per the "rules of hooks".
- root_axis 3y ago"use" is just a convention for hook function names, react doesn't require or enforce it.
- iainmerrick 3y agoIt'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).