5 ms·

Sad 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 th

Sad 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 ago
I 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 ago
The 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 ago
  I 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 ago
    Insane 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.
    - enraged_camel 3y ago
      >>which is the most effective way to avoid mixing different kinds spaghetti ingredients together I don't know if you've ever had spaghetti, because the ingredients _are_ meant to be mixed together. Maybe you were looking for another analogy?
    - yard2010 3y ago
      > Insane is cool I love your attitude. This library is not for me right now but I appreciate the pioneering. React also got a lot of hate in the beginning ("re-render on every change is insane"), people forget. Good luck!
      - tipiirai 3y ago
        Thank you for this! People here are so discouraging
- Etheryte 3y ago
  I'm not sure I'm convinced. If I open a random file in a project and see `count=0`, how do I know if it's a global variable used by legacy code, a reactive variable, or something else entirely?
  - tipiirai 3y ago
    Consider opening a Nue file and knowing that the components are based on ES6 classes. Then it's rather obvious.
    - Etheryte 3y ago
      This explanation can be used for any library though, consider that you know how the internals work, then it's rather obvious. If you don't know Nue and stumble on this it's just another flavor of unknown black box. Sure, the syntax might be nice for you, just like Awk and Vim are nice for some people, but it doesn't mean other people have a chance of understanding what's going on without looking up the documentation. Speaking of which, how do you interface with global variables in that case? Say I want to instantiate a global variable when the component is created, how do I do that?
      - tipiirai 3y ago
        I'm sure React users also know whether they are dealing with a functional component or whether they are using hooks for state management.
        YuukiRey 3y ago
        Hmmm.... I think that's because to use one of the React hooks you need to import them from React. If you create your own hook it'll eventually use something like "useState" internally, which leads you to "import { useState } from 'react'". Functional components on their own are not distinguishable from a good old Javascript function. I guess the presence of JSX and/or hooks give it away. I'd say it's half true that glancing at a random .js file it might not be immediately obvious if it's React or a function, but with some digging you should be able to find out by following the imports.
- lucideer 3y ago
  > It's an ES6 variable. It's absolutely not an ES6 variable. count=0 may be valid ES6 but in a NueJS setup it's not parsed by the JS interpreter: it's preprocessed. What actually gets served and parsed by the browser is an entirely different piece of code & that makes it inherently changeable in future releases. Also, while count=0 is technically valid ES6, most of the larger examples on the page are not; this is a DSL like any other, with all the drawbacks that brings. Masquerading as ES6 syntax won't fix that.
  - tipiirai 3y ago
    It is _absolutely_ an ES6 variable. Nue transpiler takes the code between the script tags and creates a true ES6 class instance from it. The larger examples are no different from the count=0 in here.
    - meiraleal 3y ago
      > It is _absolutely_ an ES6 variable. > Nue transpiler takes the code between the script tags and creates a true ES6 class instance from it. the second phrase negates the first. It will be a ES6 variable, it isn't.
      - tipiirai 3y ago
        Please read the article and the section "Reactivity under the hood": https://nuejs.org/blog/rethinking-reactivity/#reactivity-under-the-hood https://nuejs.org/blog/rethinking-reactivity/#reactivity-und... You'll see that the compiled code is pure JS and parsed by the JS interpreter on the browser, unlike the parent commenter states.
        lucideer 3y ago
        > the compiled code The argument being made here is that the pre-compiled code is not ES6. Of course the compiled code is - I can't see how that's relevant, that's the same for every JS FE DSL.
- meiraleal 3y ago
  for my surprise, count=0 is indeed ES6. I thought const, let or var were mandatory but it seems to not be the case. On Nue.js case tho the count=0 is misleading as it is a class variable that can get a setter and getter but in Nue.js code it is a normal variable that can't have a getter/setter. So the code doesn't really do what it is supposedly doing.
  - tipiirai 3y ago
    Sorry, which code? If you want getters and setters, you'll use standard ES6
    - meiraleal 3y ago
      > Sorry, which code? a normal "count = 0" used in the examples. a Nue "count = 0;" isn't the same as a ES6 "count = 0;". It needs compilation. I think trying to convince developers of the opposite won't help much grow a community.
      - tipiirai 3y ago
        When a Nue component is compiled it creates a native ES6 class directly from the contents of the inner script tag. The ES6 code is not traversed at all, let alone altered. That is: count = 0 is a native ES6 class instance variable.
        meiraleal 3y ago
        where is the class instance in count = 0? It is implied, it will be supplied by the framework after compiling the code. So no, it is not a ES6 class instance variable.
skeptrune 3y ago
Agreed

wrenky 3y ago

I 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 ago

The 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 ago
I 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 ago
  Insane 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.
  - enraged_camel 3y ago
    >>which is the most effective way to avoid mixing different kinds spaghetti ingredients together I don't know if you've ever had spaghetti, because the ingredients _are_ meant to be mixed together. Maybe you were looking for another analogy?
  - yard2010 3y ago
    > Insane is cool I love your attitude. This library is not for me right now but I appreciate the pioneering. React also got a lot of hate in the beginning ("re-render on every change is insane"), people forget. Good luck!
    - tipiirai 3y ago
      Thank you for this! People here are so discouraging
Etheryte 3y ago
I'm not sure I'm convinced. If I open a random file in a project and see `count=0`, how do I know if it's a global variable used by legacy code, a reactive variable, or something else entirely?
- tipiirai 3y ago
  Consider opening a Nue file and knowing that the components are based on ES6 classes. Then it's rather obvious.
  - Etheryte 3y ago
    This explanation can be used for any library though, consider that you know how the internals work, then it's rather obvious. If you don't know Nue and stumble on this it's just another flavor of unknown black box. Sure, the syntax might be nice for you, just like Awk and Vim are nice for some people, but it doesn't mean other people have a chance of understanding what's going on without looking up the documentation. Speaking of which, how do you interface with global variables in that case? Say I want to instantiate a global variable when the component is created, how do I do that?
    - tipiirai 3y ago
      I'm sure React users also know whether they are dealing with a functional component or whether they are using hooks for state management.
      - YuukiRey 3y ago
        Hmmm.... I think that's because to use one of the React hooks you need to import them from React. If you create your own hook it'll eventually use something like "useState" internally, which leads you to "import { useState } from 'react'". Functional components on their own are not distinguishable from a good old Javascript function. I guess the presence of JSX and/or hooks give it away. I'd say it's half true that glancing at a random .js file it might not be immediately obvious if it's React or a function, but with some digging you should be able to find out by following the imports.
lucideer 3y ago
> It's an ES6 variable. It's absolutely not an ES6 variable. count=0 may be valid ES6 but in a NueJS setup it's not parsed by the JS interpreter: it's preprocessed. What actually gets served and parsed by the browser is an entirely different piece of code & that makes it inherently changeable in future releases. Also, while count=0 is technically valid ES6, most of the larger examples on the page are not; this is a DSL like any other, with all the drawbacks that brings. Masquerading as ES6 syntax won't fix that.
- tipiirai 3y ago
  It is _absolutely_ an ES6 variable. Nue transpiler takes the code between the script tags and creates a true ES6 class instance from it. The larger examples are no different from the count=0 in here.
  - meiraleal 3y ago
    > It is _absolutely_ an ES6 variable. > Nue transpiler takes the code between the script tags and creates a true ES6 class instance from it. the second phrase negates the first. It will be a ES6 variable, it isn't.
    - tipiirai 3y ago
      Please read the article and the section "Reactivity under the hood": https://nuejs.org/blog/rethinking-reactivity/#reactivity-under-the-hood https://nuejs.org/blog/rethinking-reactivity/#reactivity-und... You'll see that the compiled code is pure JS and parsed by the JS interpreter on the browser, unlike the parent commenter states.
      - lucideer 3y ago
        > the compiled code The argument being made here is that the pre-compiled code is not ES6. Of course the compiled code is - I can't see how that's relevant, that's the same for every JS FE DSL.
meiraleal 3y ago
for my surprise, count=0 is indeed ES6. I thought const, let or var were mandatory but it seems to not be the case. On Nue.js case tho the count=0 is misleading as it is a class variable that can get a setter and getter but in Nue.js code it is a normal variable that can't have a getter/setter. So the code doesn't really do what it is supposedly doing.
- tipiirai 3y ago
  Sorry, which code? If you want getters and setters, you'll use standard ES6
  - meiraleal 3y ago
    > Sorry, which code? a normal "count = 0" used in the examples. a Nue "count = 0;" isn't the same as a ES6 "count = 0;". It needs compilation. I think trying to convince developers of the opposite won't help much grow a community.
    - tipiirai 3y ago
      When a Nue component is compiled it creates a native ES6 class directly from the contents of the inner script tag. The ES6 code is not traversed at all, let alone altered. That is: count = 0 is a native ES6 class instance variable.
      - meiraleal 3y ago
        where is the class instance in count = 0? It is implied, it will be supplied by the framework after compiling the code. So no, it is not a ES6 class instance variable.

skeptrune 3y ago

Agreed