17 ms·
Nue.js: Rethinking Reactivity
- kh_hk 3y agoPatiently waiting until the pendulum swings back to async binding js events to elements by classes and ids and any inlining gets frowned upon.
- tipiirai 3y agoNot sure what you mean. Can you provide some sample code so I can undesrstand the issue / use-case?
- kh_hk 3y agoNot sure why but separation of concers was hammered so hard for a while that I cannot accept any inlined javascript or css at all. For me the reason is clear, I do not need to scan the html to know what a particular piece of code is doing and will just assume these ids are somewhere out there. The first example of the site would become: <div> <h2>You clicked {count} times!</h2> <button id='decrement'>Decrement</button> <button id='increment'>Increment</button> <script> count = 0 $('button#increment').on('click', () => { count++ }) $('button#decrement').on('click', () => { count-- }) </script> </div>
- meiraleal 3y agoA bit more magic to need a new framework: <div> <h2>You clicked {count} times!</h2> <button id='decrement'>Decrement</button> <button id='increment'>Increment</button> </div> <script> count = 0 increment.click(() => { count++ }) decrement.click(() => { count-- }) </script>
- tipiirai 3y agoGlad to hear people still care about separation of concerns! It's been so untrendy. Particularly after Tailwind came around.
- gnrlst 3y agoSo we've come back to MVVM KnockoutJS-style frameowkrs after they went out of fashion oh so many years ago.
- tipiirai 3y agoAre you talking about Svelte- like two-way data bindings? Like here for example: https://svelte.dev/blog/write-less-code https://svelte.dev/blog/write-less-code — Same works in Vue. MVVM is Not implemented in Nue yet.
- baggachipz 3y agoI love the idea of this and see great potential. The one blind spot I have is how to scale and DRY the application with shared libraries and outside plugins.
- tipiirai 3y agoThanks! You can import code on a top- level script tag. Will provide examples.
- grumblingdev 3y agoWe are just making our way through every permutation of frontend API at this point.
- dingi 3y agoAs I would like to call it, the new shiny js tool of the week. Aren't we all already tired of this
- ilrwbwrkhv 3y agoNue is a breath of fresh air. Those who are suffering from a prisoner's dilemma under React will obviously say "How can you do this?" You should mostly ignore them. Hope the ecosystem around Nue flourishes. Can't wait to use it.
- tipiirai 3y agoAuthor here. After releasing Nue JS here just two weeks ago[1], the most common questions were: “How does reactivity work”? and “How is this different from Svelte”? This article attempts to answer those. [1]: https://news.ycombinator.com/item?id=37507419 https://news.ycombinator.com/item?id=37507419
- auraham 3y agoI am very impressed by the examples, they are so easy to read. I have zero experience with React, Svelte and JS in general, but after reading the examples make me want to learn more.
- tipiirai 3y agoThank you! So glad to hear this
- samuelstros 3y agoInterop, achievable via web components, is far more important than syntax, the last ms of performance, or shaking of 1kb in large applications contexts. Hence, I strongly encourage the author to compile to web components instead of a custom output to increase/achieve interop.
- tipiirai 3y agoThere's a lot of discussion around Web Components in Nue JS discussion forum. Can I ask you submit your thoughts here? https://github.com/nuejs/nuejs/discussions/44 https://github.com/nuejs/nuejs/discussions/44 Would love to hear the details! Sample code would help a lot understanding the problem/solution. Thanks!
- machiaweliczny 3y agoSad that this is on front page. Having just count=0 is stupid and you will learn it the same way as Svelte did. Comparing it like that when they explain all the issues in Svelte 5 is even more dishonest. Any variable can be state and/or be reactive and they arent marked? GL with that. You need to manually call update after fetching data, why?
- wrenky 3y agoI think its kinda great its on the front page, I only work in backend so this looks quite appealing like ALL tech demos do. Love to see it pulled apart in comments with explanations I understand haha
- tipiirai 3y agoThe update() method is there because Nue does not make a difference between reactive variables and other variables and it's impossible to know if a state changed when there is no specific DOM event or array manipulation call.
- tipiirai 3y ago> Having just count=0 is stupid and you will learn it the same way as Svelte did. I obviously disagree. This is not only compact, but also standards- based. It's an ES6 variable. I don't expect Nue to change here, like ever. Svelte internals are quite different.
- skeptrune 3y agoI think you are insane for this take. It should be very clear from a cursory glance what is reactive and what is not if you want your code to not become spaghetti rapidly. Signals w/ getter/setter are incredibly nice for this.
- tipiirai 3y agoInsane is cool. Nue is a heavy promoter of the separation of concerns pattern — which is the most effective way to avoid mixing different kinds spaghetti ingredients together. These small, extra $- characters are minor factors.
- OsrsNeedsf2P 3y agoIt's funny how React and other frameworks spent so much effort abstracting the render loop, meanwhile Nue is just like "call update()". And in the end, Nue looks a lot simpler to use.
- bigDinosaur 3y agoWhat exactly is hard about React?
- deliriumchn 3y ago> nue looks a lot simpler to use Than what? I couldn't imagine react being hard, maybe for novice developers that just start with programming in general. > React and other frameworks spent so much effort abstracting the render loop Considering how big is community adoption and teams that are working on big 3 frameworks, they're doing it not "just because" and not to make your app slower. There are reasons for this and this new library will learn them as well, just like svelte did with their reactive variables approach.
- johncoltrane 3y agoFor the benefit of other commenters: the parent said "simpler", not "easier".
- sli 3y agoNow I'm curious. Why do you suppose the render loop's performance was so important to the React team, then? It surely wasn't for no reason, and I'm not going to be convinced that React is more complex "just because."
- skeptrune 3y agoHow performant is this?
- tipiirai 3y agoUnfortunately no benchmarks yet. Nue is very new. Will be there some day!
- nish1500 3y agoThis is the cycle of JavaScript frameworks. You create something deceivingly simple that tramples upon idiomatic usage but looks great for a todo app. Beginners realize the hard way that this doesn't scale because deep reactivity shouldn't be a default, they no longer know what a vanilla JS variable should behave like, and code is un-readable. Let the bundler minify your JavaScript. Less characters !== simple.
- tipiirai 3y agoI prefer thinking scalability more literally (like Chris Coyier): an approach that works for a small site and remain the same approach for a large site. Nue's approach is MVC, which is a project not released yet. Check: https://nuejs.org/tools/ https://nuejs.org/tools/ Less characters in source code is obviously a better metric for simplicity than what there are on the minified code (Nue wins on both btw)
- meiraleal 3y agoI appreciate your effort on creating a full ecosystem from the ground up. I'm doing the same, the more the better. It brings me an old time hackers vibe. We don't need 10s of VC-backed frameworks trying to lockdown users to cash them. I hope you plan to continue doing this work by yourself in place of launching a PaaS/SaaS on top of it.
- tipiirai 3y agoThank you, Alan!
- moffkalast 3y agoThe best kind of JS framework is no framework, especially for small teams. Especially now that self encapsulating modules are a thing and server side templating can fill in html's lack of import tags. Reusable components sound great in principle, but trying to replace one that's used in 30 different locations with small nuances in each spot leads to complete debugging hell, just like typical overzealous polymorphism. Allegedly we're even getting optional typing soon, so TS will become obsolete as well.
- nsonha 3y agosame old template based data binding, just like observable never existed. Most of the problems with data binding stem from the fact that there is not a prorammable understandable primitive for us to reason about it. Yet time and time again people try to hide such primitive behind some magic templates, hooks, runes and that kind of nonsense
- SebastianKra 3y agoSummarizing: - It re-renders on click - It mutates pop/push/... to observe arrays - Otherwise, you have to manually call `update()` IMO, don't touch this. All of this has been tried before. It also looks like lists are unkeyed. If you receive another list from the server, you have to do the diffing yourself. It's disappointing that a framework proclaiming to solve all issues of frontend dev, while evidently understanding none of them, will go uncriticised by HN.
- pupppet 3y agoLifecyle of every JS framework seems to be.. 1. Look how little boilerplate we have! 2. Oops actually we need more boilerplate.
- willio58 3y ago> will go uncriticised by HN. Says the comment at the top of the thread criticizing the project.
- tipiirai 3y agoKeys are unnecessary in Nue, just like many, many other framework abstractions. If you receive another list from the server, Nue takes care of it automatically. No need for diffing.
- Timon3 3y ago"Keys are unnecessary" in what way? The only reason they are necessary in React etc. is to keep DOM mutations to a minimum. Are keys unnecessary because you always re-render the whole list, making for very inefficient updates?
- chaosprint 3y agolooks good at first glance, but I am not very happy with "count++" everything inside "" should be string; otherwise it's confusing. this is my personal preferences and it applies to any project
- tipiirai 3y agoYou can also call instance methods from the @click handlers. Nue syntax is heavily inspired by Vue.
- k__ 3y agoFor me there are two tiers. 1. The problem is so basic, I get it done with useState/useReducer 2. I problem is complex, and needs something more explicit like RxJS, or I'll lose my mind.
- markcollin 3y agoGoing through the nue the tldr I got is "bring back simple html friendly declarative directives (hello AngularJS)" Nice to see people trying to push boundaries Nue might not be a great option for building large scale web apps; it however could be a great way to add reactivity to simple websites. We don't need to have the full fledged webpack monstrosity for every little site.
- activitypea 3y ago> ES6 classes make your code look amazingly compact and clean. You can add variables, methods, getters, setters, and async methods with the cute and short syntax. Huh, I didn't know that. I still don't know that :)
- deleted 3y ago[deleted]
- audessuscest 3y agohaving js code in html attribute is not something I want (`@click="count--"`) I'd rather have longer, actual js code as a trade-off
- tipiirai 3y agoYou can call an instance method as well, as seen on the examples. Similar to what you can do in Vue and with a standard JS 'onclick' handler.
- sergioisidoro 3y agoSaving a few lines in a Hello World example is not the super great argument many of these web frameworks think it is...
- jampekka 3y agoMore than a few lines in a Hello World example is a very damning argument against a framework. Less code is better and DRY is by far the most important principle in software engineering. Sadly every second generation seems to have to learn the hard way that the mega enterprise architecture astronaut stuff is a huge waste of time and produces bad software.
- frodowtf 3y agoDRY is by far the most overrated software engineering principle and constantly pushing for it only leads more developers down the way of creating wrong, irreversible abstractions.
- qabqabaca 3y agoNueJS: “It’s just HTML!” The HTML: <button @click=“count++”> {count} </button>
- tipiirai 3y agoPlease read the whole sentence. It starts with: If React is “Just JavaScript, then...” React users often say that "It's just JavaScript" but then they write: return ( <div> <h2>You clicked {count} times!</h2> <button onClick={() => setCount(count - 1)}> Decrement </button> <button onClick={() => setCount(count + 1)}> Increment </button> </div> ) Nue is the opposite side of the same coin.
- paulddraper 3y ago> If React is “Just JavaScript, then...” React is just JavaScript. React+JSX is JSX. This: <button onClick={() => setCount(count + 1)}>{count}</button> Is sugar for: React.createElement('button', { onClick: () => setCount(count + 1) }, count) True, the JSX version is most popular, but it's trivial syntax sugar with no "magic." This is different then Angular, Vue, Svelte, etc templates
- _v7gu 3y agoisn't that just syntax sugar? I believe it compiles into (for some el function and safe string tag) return el("div", { children: [ el("h2", { children: [safe`You clicked ${count} times!`]) }, el("button", { onClick: () => setCount(count - 1), children: [safe`Decrement`] }), el("button", { onClick: () => setCount(count + 1), children: [safe`Increment`] }) ]}); The "it's just javascript" part comes from having no hidden getters, setters or proxies littered in code that may or may not behave as how we expect, and not littering the html with react-specific attributes for iteration, events, etc
- tipiirai 3y agoIt surely is. React is a good pick for frontend engineers who prefer to use JavaScript or TypeScript. Nue is designed for UX engineers, who prefer a HTML- like syntax for defining the structure & layout.
- closetnerd 3y agoI think I'm one that is a bit fatigued by the idea of learning a new thing w/o enough wins here. On the other hand, the unproductive critique in all the comments makes me think everyone forgot how hard it is try to make something better.
- orangepanda 3y agoMy brain is too smooth to grok this. This calls a referenced function: @click="addFruit" This executes an expression: @click="images.pop()" What if I have a expression that returns a function that should be called?
- tipiirai 3y agoThis the same as in standard JavaScript DOM event call. If you want to call a returned function in JS, you can do: <button onclick="getFunction()()">. Similar behaviour in Vue (and Nue)
- orangepanda 3y agoIts a typo then? onclick="addFruit" is not the same as onclick="addFruit()"
- tipiirai 3y agoThe onclick="addFruit" calls an instance method between the inner script tags. Similar to how JS would call a global window.addFruit with a similar syntax.
- orangepanda 3y agoKeyword being "similar", as in, not the same. Its neither the behaviour of html onclick attribute, nor dom onclick attribute.
- jefozabuss 3y agoIt's using the event listener properties like "onclick" or "onload" as "@" gets replaced with "on" in the code from what I see so you will have this more oldschool event handling: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#other_event_listener_mechanisms https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Bu... it also has some additional things here:https://github.com/nuejs/nuejs/blob/a5c844494852cdbe3282fdc588ca81742f39b56e/src/nue.js#L143 https://github.com/nuejs/nuejs/blob/a5c844494852cdbe3282fdc5... so might not work the same way, didn't spend much time to check it just a glance.
- caporaltito 3y agoWhy does the majority of front end developers have trouble learning OOP and spend their whole time trying to avoid it? Signed: a concerned Angular (the best framework there is in the whole world) developer
- lampe3 3y agoThis does not look scalable. Also debugging prod code will be a pain. Cool tech demo but I would not use this for bigger projects
- tipiirai 3y agoWhen building larger projects you should consider using a MVP (model-view-controller) pattern to separate your view code from the business logic. This way you can keep the view code simple, and the model code out from view-specific abstractions. This is called separation of concerns and is the primary way to build scaleable applications. I'll tackle this topic in detail along with a more complex demo application when Nue MVC project is released: https://nuejs.org/tools/#nue-mvc https://nuejs.org/tools/#nue-mvc Nue will be absolutely fantastic for scaling large applications and teams!
- meiraleal 3y agoI'm starting to become a fan of your motivation (although count = 0 is still not ES6 classes variables). Good luck scaling it! Are you creating this framework out of your own necessity or just because it can be done? Any medium/large app using it to showcase?
- tipiirai 3y agoNice! Definitely my own necessity. Unfortunately no large showcases, because the toolset is not ready yet.
- meiraleal 3y agoAs Svelte move away from this, I think it is valid that some framework will pick on it and continue developing this route. It was one of the reasons I ditched Svelte so it won't make me use Nue.js.
- Jenk 3y agoThe reasons for not using/supporting typescript[0] seem irrelevant. 1. Is wholly immaterial. 2. Is pure conjecture ("Dynamic typing is a good thing") that I happen to vehemently disagree with. 3. Also wholly immaterial. [0]: https://nuejs.org/faq/#ts https://nuejs.org/faq/#ts
- jampekka 3y agoA lot more material than your claims of "immateriality" with no justification though. In fact it's rare to see "material" reasons for using TypeScript. Mostly baseless claims how static typing is "obviously better".
- Jenk 3y agoI don't need to "justify" their immaterialness. The OP needs to explain how it is material. But whatever... The merits of ES6 are also present in typescript. Thus claim 1 is immaterial. Claim two is rebuked by intellisense and very strongly argued against in a shared-code world. Claim 3 is presumptive that TypeScript would be the only transpilation, despite nue itself being a transpiler. In addition to all the other bundling modern products use for treeshaking, minification, etc. This is an insignificant and thus immaterial point. ("justification" enough for you?) Did you even read the FAQ?
- tipiirai 3y agoJenk — can you help me with a list of valid reasons to choose JavaScript so that the TypeScript community is pleased? This would help me a lot. Thank you!
- mackross 3y agolol the JS crowd have fatigued themselves reinventing the wheel a dozen times to the point where they’re now just haters. Good luck op!
- tipiirai 3y agoThank you, Mack — I can feel it!