11 ms·

Vue is specifically better because it uses HTML-based templates by default, and HTML is what's produced by web frameworks. This means you can use whatever techn

Vue is specifically better because it uses HTML-based templates by default, and HTML is what's produced by web frameworks. This means you can use whatever technology you want on the backend and everything works seamlessly. Also the syntax for directives, handlers, and other logic in these templates is much easier than dealing with JSX in the majority of uses-cases. SSR/isometric rendering isn't new, but it's usually hacks around using a frontend JS framework to run the backend and can result in the worst of both worlds. Projects like Blazor (.net) and Livewire (php/laravel) are interesting new solutions to fix this.

bobmaxup 5y ago
Why are Blazor and Livewire a new solution? It seems like if you are developing solely to meet "SEO friendly" criteria, you aren't exploring many alternative solutions. Does all this framework tooling exist to just avoid inspecting a user agent and serving from a different upstream? Having to maintain a large set of template files, with a dependency on a separate language or framework seems contrary to your premise that Vue is specifically better because it uses "HTML templates by default"
- manigandham 5y ago
  > "developing solely to meet "SEO friendly"" Never said I was. In fact that's just another nice benefit of traditional server-side frameworks rather than something you have to worry about implementing all over again. Blazor specifically is the first non-JS component-based UI framework for the web with multiple modes that bridges backend and frontend as a single service without any impedance mismatch. It's an entirely new way to approach web UIs and interactivity without all the plumbing and frontend-to-backend-for-the-frontend-to-the-backend nonsense. Livewire is not quite as polished but shows how far you can go with tight integration on the JS side.
scq 5y ago
In a lot of cases it's easier, true, but for other cases it makes things a lot harder. E.g. - how do you conditionally wrap some elements in another element? It's easy in React (assign the subtree to a variable), but impossible to do cleanly in Vue. That is a general theme, I've found - compared to React, Vue makes the easy things easier, but the hard things harder.
- manigandham 5y ago
  The hard things are exactly the same as React because you can use whatever render function you want. JS itself is a single-threaded event loop and all view engines basically follow the same functional pattern of data-> render function -> output. Vue comes with an HTML parser to create that render function, React and others use a JSX parser, or you can write your own from raw javascript. You can technically use any of them with any render function parser, but Vue starting with HTML by default and all the other niceties around reactivity make it a better fit.
- beebeepka 5y ago
  I've used both extensively. IMO, complex composition is sometimes easier in React but Vue wins in pretty much everything else. It's almost never in my way. I'd say Vue is the much more powerful tool in the hands of a skilled developer
- MartinodF 5y ago
  I know it's just an example, but it's really straightforward: you create a component which accepts a boolean prop and, based on that, either outputs the default slot directly or a wrapper containing the default slot via a simple v-if. If you wanted to get fancy, you could also accept a tag prop and v-bind all other $attrs on the container to make that a general purpose component.
- BiteCode_dev 5y ago
  > how do you conditionally wrap some elements in another element ? You use a dynamic component: <component :is="condition ? 'WrappedComponent' : 'UnwrappedComponent"></component> > That is a general theme, I've found - compared to React, Vue makes the easy things easier, but the hard things harder. While react make the easy things annoying. It took me an afternoon to be productive with vue, several weeks with react. And all that for what? Having the privilege to "just use javascript"? Here is "just javascript" in jsx: {items.map((items) => ( {display && <SomeElement onClick={e => e.preventDefault() && foo()} className="`${active ? 'current' : ''}`" />} ))} Here is the same in vue template: <SomeElement v-for="item in items" v-if="display" @click.prevent="foo()" :class="{'current': active}" /> Not only the react blob is impossible to scan, but it will be different depending of the dev who coded it, because there is no enforced patterns. You must use brain power to parse every single template line. HTML, that thing that was simple and declarative, now becomes complicated and imperative. And that's not even weird or unusual code. That's regular stuff one writes all the time. Don't get me started on state management or spaghetti hooks. I have yet to work on a react code base I was more productive than on a vue one. And the gaps get wider if the team is not composed of excellent coders, because react code by junior is a nightmare.
IshKebab 5y ago
Vue templates are far worse than JSX. JSX/TSX is understood by tools so you get static typing, code completion, go-to-definition and all the other benefits of modern tooling. Static typing alone is enough to rule out Vue in my opinion. I even went as far as writing a static type checker for Vue to work around it. It works by compiling the Vue template to a dummy Typescript function that only typechecks if your Vue types are correct. It found loads of bugs in our code.
- manigandham 5y ago
  That's just a tooling issue. HTML has been around for a long time, and plenty of tools provide typing. Also Vue supports typescript. Vue itself throws errors if the variables don't exist in your template. However you can use JSX with Vue if you want. All JS libraries are fundamentally the same, and all templating boils to a single function with input->output. Vue just offers HTML instead of JSX by default and it's far more useful in many instances.
  - IshKebab 5y ago
    > That's just a tooling issue. No it isn't. There isn't even a way to write down the types properly in Vue templates. Anyway just saying "it's a tooling issue" doesn't make it not an issue! > Also Vue supports typescript. "supports" is a scale, and the support isn't nearly as good as React/TSX.
    - manigandham 5y ago
      Vue 3 is written in typescript and comes with full definitions. The composition API is all regular functions. It doesn’t get better supported than that.
      - IshKebab 5y ago
        Yes it does. React has better support!
- vagrantJin 5y ago
bnt 5y ago
After building 2 large projects with Livewire (using it just to sprinkle interactivity instead of going for Vue, not being a psycho and building an entire SPA with Livewire), I simply don’t like it. In most cases it would be quicker for me to use jQuery, and the response times would be quicker.
- manigandham 5y ago
  Try Blazor then. It's cutting edge and currently the best implementation possible: https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor
- midrus 5y ago
  Try unpoly. It's great!
  - bnt 5y ago
    First time I heard of it from you, and I’ve been looking at it for the past day. I’ll definitely try a demo project to see if it fits my needs.
- amcsi 5y ago
  Although Livewire allows you to do that, and shows counters in its examples, for such things that shouldn't require communication with the backend (e.g. saving, or grabbing data from the DB), you are rather meant to use something like Alpine or petite-vue for lightweight JS manipulation than to make use of Livewire's feature for it to waste a roundabout request to the backend.
  - ipaddr 5y ago
    If you are reaching for Alpine or petite-vue I would consider jquery. The reason why people moved on from it "heavy dom changes" = "slow", "too messy in heavy js pages" is the reason to use it here. Lightweight pages + jquery = fast development, quick to load/render and tidy looking code.
  - 5y ago

bobmaxup 5y ago

Why are Blazor and Livewire a new solution? It seems like if you are developing solely to meet "SEO friendly" criteria, you aren't exploring many alternative solutions. Does all this framework tooling exist to just avoid inspecting a user agent and serving from a different upstream? Having to maintain a large set of template files, with a dependency on a separate language or framework seems contrary to your premise that Vue is specifically better because it uses "HTML templates by default"

manigandham 5y ago
> "developing solely to meet "SEO friendly"" Never said I was. In fact that's just another nice benefit of traditional server-side frameworks rather than something you have to worry about implementing all over again. Blazor specifically is the first non-JS component-based UI framework for the web with multiple modes that bridges backend and frontend as a single service without any impedance mismatch. It's an entirely new way to approach web UIs and interactivity without all the plumbing and frontend-to-backend-for-the-frontend-to-the-backend nonsense. Livewire is not quite as polished but shows how far you can go with tight integration on the JS side.

scq 5y ago

In a lot of cases it's easier, true, but for other cases it makes things a lot harder. E.g. - how do you conditionally wrap some elements in another element? It's easy in React (assign the subtree to a variable), but impossible to do cleanly in Vue. That is a general theme, I've found - compared to React, Vue makes the easy things easier, but the hard things harder.

manigandham 5y ago
The hard things are exactly the same as React because you can use whatever render function you want. JS itself is a single-threaded event loop and all view engines basically follow the same functional pattern of data-> render function -> output. Vue comes with an HTML parser to create that render function, React and others use a JSX parser, or you can write your own from raw javascript. You can technically use any of them with any render function parser, but Vue starting with HTML by default and all the other niceties around reactivity make it a better fit.
beebeepka 5y ago
I've used both extensively. IMO, complex composition is sometimes easier in React but Vue wins in pretty much everything else. It's almost never in my way. I'd say Vue is the much more powerful tool in the hands of a skilled developer
MartinodF 5y ago
I know it's just an example, but it's really straightforward: you create a component which accepts a boolean prop and, based on that, either outputs the default slot directly or a wrapper containing the default slot via a simple v-if. If you wanted to get fancy, you could also accept a tag prop and v-bind all other $attrs on the container to make that a general purpose component.
BiteCode_dev 5y ago
> how do you conditionally wrap some elements in another element ? You use a dynamic component: <component :is="condition ? 'WrappedComponent' : 'UnwrappedComponent"></component> > That is a general theme, I've found - compared to React, Vue makes the easy things easier, but the hard things harder. While react make the easy things annoying. It took me an afternoon to be productive with vue, several weeks with react. And all that for what? Having the privilege to "just use javascript"? Here is "just javascript" in jsx: {items.map((items) => ( {display && <SomeElement onClick={e => e.preventDefault() && foo()} className="`${active ? 'current' : ''}`" />} ))} Here is the same in vue template: <SomeElement v-for="item in items" v-if="display" @click.prevent="foo()" :class="{'current': active}" /> Not only the react blob is impossible to scan, but it will be different depending of the dev who coded it, because there is no enforced patterns. You must use brain power to parse every single template line. HTML, that thing that was simple and declarative, now becomes complicated and imperative. And that's not even weird or unusual code. That's regular stuff one writes all the time. Don't get me started on state management or spaghetti hooks. I have yet to work on a react code base I was more productive than on a vue one. And the gaps get wider if the team is not composed of excellent coders, because react code by junior is a nightmare.

IshKebab 5y ago

Vue templates are far worse than JSX. JSX/TSX is understood by tools so you get static typing, code completion, go-to-definition and all the other benefits of modern tooling. Static typing alone is enough to rule out Vue in my opinion. I even went as far as writing a static type checker for Vue to work around it. It works by compiling the Vue template to a dummy Typescript function that only typechecks if your Vue types are correct. It found loads of bugs in our code.

manigandham 5y ago
That's just a tooling issue. HTML has been around for a long time, and plenty of tools provide typing. Also Vue supports typescript. Vue itself throws errors if the variables don't exist in your template. However you can use JSX with Vue if you want. All JS libraries are fundamentally the same, and all templating boils to a single function with input->output. Vue just offers HTML instead of JSX by default and it's far more useful in many instances.
- IshKebab 5y ago
  > That's just a tooling issue. No it isn't. There isn't even a way to write down the types properly in Vue templates. Anyway just saying "it's a tooling issue" doesn't make it not an issue! > Also Vue supports typescript. "supports" is a scale, and the support isn't nearly as good as React/TSX.
  - manigandham 5y ago
    Vue 3 is written in typescript and comes with full definitions. The composition API is all regular functions. It doesn’t get better supported than that.
    - IshKebab 5y ago
      Yes it does. React has better support!
vagrantJin 5y ago

bnt 5y ago

After building 2 large projects with Livewire (using it just to sprinkle interactivity instead of going for Vue, not being a psycho and building an entire SPA with Livewire), I simply don’t like it. In most cases it would be quicker for me to use jQuery, and the response times would be quicker.

manigandham 5y ago
Try Blazor then. It's cutting edge and currently the best implementation possible: https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor
midrus 5y ago
Try unpoly. It's great!
- bnt 5y ago
  First time I heard of it from you, and I’ve been looking at it for the past day. I’ll definitely try a demo project to see if it fits my needs.
amcsi 5y ago
Although Livewire allows you to do that, and shows counters in its examples, for such things that shouldn't require communication with the backend (e.g. saving, or grabbing data from the DB), you are rather meant to use something like Alpine or petite-vue for lightweight JS manipulation than to make use of Livewire's feature for it to waste a roundabout request to the backend.
- ipaddr 5y ago
  If you are reaching for Alpine or petite-vue I would consider jquery. The reason why people moved on from it "heavy dom changes" = "slow", "too messy in heavy js pages" is the reason to use it here. Lightweight pages + jquery = fast development, quick to load/render and tidy looking code.
- 5y ago