4 ms·

Have you used React before? It's miles above HTML templating. I honestly don't use frameworks that have regular templating anymore, like Vue or Svelte.

acdha 4y ago
Yes. JSX is nice for escaping by default but encourages total spaghetti coding hiding app logic in the templates and various footguns like non-standard attributes className and breaking id. Running it on the server side mitigates the React performance hit somewhat but the selling point is interactivity.
alanwreath 4y ago
What are you referring to? I am unaware of what “regular” templating you’re referring to or what react is achieving that is not available or cumbersome under react or svelte. I mean if JSX is considered as something particularly powerful (not saying it does) doesn’t Vue actually do that https://vuejs.org/guide/extras/render-function.html https://vuejs.org/guide/extras/render-function.html ?
- zdragnar 4y ago
  Think of JSX as a macro, rather than "regular" templating, which is typically string substitution. For static sites, this means that you get functions and objects the entire way through the render pipeline right up until there is a full tree built and the final output is rendered. You still get all the separation powers of contexts, the component based reusability, etc, and it is all regular JavaScript / typescript except for the JSX macro itself and React's APIs (which are just JavaScript). Conversely, with templating engines like handlebars / erb / et al you need to learn the specific DSL of the template engine- custom loops and controls, imports for partials, and your custom helpers are limited to what they can do. Even Vue's render function has special markup for control (v-if, v-else).
  - ricardobeat 4y ago
    Some day we have to stop repeating this nonsense. JSX requires much more learning than simple templating, there is no inherent benefit. Even a simple conditional is more complex than your average template.
    - cercatrova 4y ago
      The thing is, if you know JS, then a conditional is JSX is the same as in JS. Contrast that with every new templating language under the sun which might have its own way of doing conditionals and loops and control flow. That to me is much more annoying.
      - 9dev 4y ago
        But you’re aware JSX is just plain old PHP files, code intermingled with HTML? It’s the exact same thing, and it breeds the exact same bad behaviour.
        zdragnar 4y ago
        Separation of concerns is different from separation of languages. PHP intermingled with HTML was bad because developers would do things like run database queries and other operations that caused side effects directly in the markup. Every templating system still has logic in it, and almost every templating system as a way to create custom helpers which are written in the host language. Since API calls and calls to react's `setState` are asynchronous, and the rendering pipeline is synchronous, it is still obvious that you can't put code that makes an AJAX call in your html markup.
        9dev 4y ago
        JSX doesn't separate languages, you're mixing HTML with TypeScript. You can absolutely do database queries in your template. What is keeping you from doing `fetch('https://side-effect.ts').then https://side-effect.ts').then(() => doSomethingHorrible())` in your template? Or invoking an `alert()`?
tshaddox 4y ago
I have used React. I'm a huge fan and I also prefer it over its most common "competitors" like Vue and Svelte. But React (like Vue and Svelte) are fundamentally about interactivity. If I had a project where I knew for sure that I only wanted to generate HTML sans JS on the server (or with a static build process) I wouldn't even consider using React. It barely even makes sense. Your "React components" would just be JavaScript functions that take props and return some JSX. None of the interesting React features and hooks would even make sense, other than maybe context (and presumably most or all popular static HTML templating tools have comparable features).
- dsego 4y ago
  Which looks nicer? Eta vs JSX <%~ includeFile('./navbar', { pages: [ 'home', 'about', 'users' ] }) %> <navbar pages={['home', 'about', 'users']} /> > would just be JavaScript functions that take props and return some JSX They can also be async functions that process data independently. Whereas templates are commonly just passed in data from the controller. https://github.com/dsego/ssr-playground/#jsx-partials https://github.com/dsego/ssr-playground/#jsx-partials
- munbun 4y ago
  JSX is much easier to maintain than pretty much every other templating language. If you are building a growing design system with any degree of complexity, React is one of the best tools available.

acdha 4y ago

Yes. JSX is nice for escaping by default but encourages total spaghetti coding hiding app logic in the templates and various footguns like non-standard attributes className and breaking id. Running it on the server side mitigates the React performance hit somewhat but the selling point is interactivity.

alanwreath 4y ago

What are you referring to? I am unaware of what “regular” templating you’re referring to or what react is achieving that is not available or cumbersome under react or svelte. I mean if JSX is considered as something particularly powerful (not saying it does) doesn’t Vue actually do that https://vuejs.org/guide/extras/render-function.html https://vuejs.org/guide/extras/render-function.html ?

zdragnar 4y ago
Think of JSX as a macro, rather than "regular" templating, which is typically string substitution. For static sites, this means that you get functions and objects the entire way through the render pipeline right up until there is a full tree built and the final output is rendered. You still get all the separation powers of contexts, the component based reusability, etc, and it is all regular JavaScript / typescript except for the JSX macro itself and React's APIs (which are just JavaScript). Conversely, with templating engines like handlebars / erb / et al you need to learn the specific DSL of the template engine- custom loops and controls, imports for partials, and your custom helpers are limited to what they can do. Even Vue's render function has special markup for control (v-if, v-else).
- ricardobeat 4y ago
  Some day we have to stop repeating this nonsense. JSX requires much more learning than simple templating, there is no inherent benefit. Even a simple conditional is more complex than your average template.
  - cercatrova 4y ago
    The thing is, if you know JS, then a conditional is JSX is the same as in JS. Contrast that with every new templating language under the sun which might have its own way of doing conditionals and loops and control flow. That to me is much more annoying.
    - 9dev 4y ago
      But you’re aware JSX is just plain old PHP files, code intermingled with HTML? It’s the exact same thing, and it breeds the exact same bad behaviour.
      - zdragnar 4y ago
        Separation of concerns is different from separation of languages. PHP intermingled with HTML was bad because developers would do things like run database queries and other operations that caused side effects directly in the markup. Every templating system still has logic in it, and almost every templating system as a way to create custom helpers which are written in the host language. Since API calls and calls to react's `setState` are asynchronous, and the rendering pipeline is synchronous, it is still obvious that you can't put code that makes an AJAX call in your html markup.
        9dev 4y ago
        JSX doesn't separate languages, you're mixing HTML with TypeScript. You can absolutely do database queries in your template. What is keeping you from doing `fetch('https://side-effect.ts').then https://side-effect.ts').then(() => doSomethingHorrible())` in your template? Or invoking an `alert()`?

tshaddox 4y ago

I have used React. I'm a huge fan and I also prefer it over its most common "competitors" like Vue and Svelte. But React (like Vue and Svelte) are fundamentally about interactivity. If I had a project where I knew for sure that I only wanted to generate HTML sans JS on the server (or with a static build process) I wouldn't even consider using React. It barely even makes sense. Your "React components" would just be JavaScript functions that take props and return some JSX. None of the interesting React features and hooks would even make sense, other than maybe context (and presumably most or all popular static HTML templating tools have comparable features).

dsego 4y ago
Which looks nicer? Eta vs JSX <%~ includeFile('./navbar', { pages: [ 'home', 'about', 'users' ] }) %> <navbar pages={['home', 'about', 'users']} /> > would just be JavaScript functions that take props and return some JSX They can also be async functions that process data independently. Whereas templates are commonly just passed in data from the controller. https://github.com/dsego/ssr-playground/#jsx-partials https://github.com/dsego/ssr-playground/#jsx-partials
munbun 4y ago
JSX is much easier to maintain than pretty much every other templating language. If you are building a growing design system with any degree of complexity, React is one of the best tools available.