When I prototype, I use Vue without any build tooling (no vue-cli, no webpack, no dev server; just an HTML file; double-click, open, edit, refresh). I made a single-file template for me to kickstart new projects with it.
For React, at least I need a dev server to be productive. Some people recommended me babel-standalone, but it doesn’t work with <script src="..."> in file:/// URLs without disabling web security in Chrome. htm also exists that lets me create virtual DOM nodes with tagged template literals, but my code wouldn’t be in normal JSX syntax anymore. I also tried hyperscript before. Having different syntaxes to represent the virtual DOM in different React projects added a lot of mental load. When I use React I prefer JSX and nothing else.
I find Vue’s reactivity system and its two-way bindings for forms (v-model) made me very productive. I just change the object (this.loading = true) and the UI updates. No need to useState and do all the data-binding ceremony.
Now the closest thing to this experience I’ve found so far in React land is MobX, but it requires me to use either useObserver (hooks), <Observer> (render props) or observer (HOC) to make the component reactive. It’s not built in.
Vue comes with a :class helper, which turns arrays and objects into a class string. e.g. :class="[ running ? 'bg-green-400' : 'bg-red-400', { 'opacity-50': disabled }]"
In React, I had to concatenate className strings by myself or use a third-party library such as classnames. It’s not built in.
In React I would have to use a 3rd party library like react-flip-move. It’s not built in.
However, if I’m creating a project that I intend to maintain long-term, I would use React.
It has a first-class support by TypeScript ("jsx": "react"). The JavaScript and TypeScript Language Service allows me to do large-scale automated refactoring. For example, in VS Code, I can rename a component’s prop, let’s say from title (a very common name) to pageTitle, and the editor would find every file that uses this component and automatically renames it. (Video demonstration)
React components can return just text (no wrapping nodes), as well as multiple nodes (React.Fragment).
For Vue, you get errors like ”Component template requires a root element, rather than just text.” and “Cannot use <template> as component root element because it may contain multiple nodes.” React supports this since 2017. For now, in Vue, we have to use a 3rd party library like vue-fragment. I heard that Vue 3 will support this and I am really looking forward to it.
Love your starter template! That was very similar to one I used (except with routing). I recently changed to http-vue-loader so I can write my templates in external files.
Vue 3 will fix all your qualms with v2 and should be entering Beta relatively soon. It has first class TS support (it's written in TS), fragments, portals, suspense, hooks and is smaller and faster👍
Thanks for your comment, I’m looking forward to it! 🤩
Regarding tooling, will I be able to rename a prop and have that rename propagate throughout my source tree when v3 comes out?
I consider this an absolute must before I can consider using it in serious projects because I do a lot of small refactoring.
Sometimes I name variables/props x/foo/tmp and rename it later when I have the main logic figured out, where I can actually be more thoughtful about naming things… and I don’t want to do that renaming manually.
To be honest, I have no idea. I don't generally rename props. I don't see an issue if you're using JSX for templating, but using the template syntax, I'm not sure. You can download the alpha and try ;)
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I use both React and Vue. Here are my thoughts:
When I build prototypes, I like to use Vue.
When I prototype, I use Vue without any build tooling (no vue-cli, no webpack, no dev server; just an HTML file; double-click, open, edit, refresh). I made a single-file template for me to kickstart new projects with it.
babel-standalone, but it doesn’t work with<script src="...">infile:///URLs without disabling web security in Chrome. htm also exists that lets me create virtual DOM nodes with tagged template literals, but my code wouldn’t be in normal JSX syntax anymore. I also tried hyperscript before. Having different syntaxes to represent the virtual DOM in different React projects added a lot of mental load. When I use React I prefer JSX and nothing else.I find Vue’s reactivity system and its two-way bindings for forms (
v-model) made me very productive. I just change the object (this.loading = true) and the UI updates. No need touseStateand do all the data-binding ceremony.useObserver(hooks),<Observer>(render props) orobserver(HOC) to make the component reactive. It’s not built in.Vue comes with a
:classhelper, which turns arrays and objects into a class string. e.g.:class="[ running ? 'bg-green-400' : 'bg-red-400', { 'opacity-50': disabled }]"classNamestrings by myself or use a third-party library such asclassnames. It’s not built in.Vue has enter and exit transitions as well as move animations (implementing the FLIP technique) built-in.
However, if I’m creating a project that I intend to maintain long-term, I would use React.
It has a first-class support by TypeScript (
"jsx": "react"). The JavaScript and TypeScript Language Service allows me to do large-scale automated refactoring. For example, in VS Code, I can rename a component’s prop, let’s say fromtitle(a very common name) topageTitle, and the editor would find every file that uses this component and automatically renames it. (Video demonstration)title) or manual refactoring (can be more time-consuming).React components can return just text (no wrapping nodes), as well as multiple nodes (
React.Fragment).<template>as component root element because it may contain multiple nodes.” React supports this since 2017. For now, in Vue, we have to use a 3rd party library like vue-fragment. I heard that Vue 3 will support this and I am really looking forward to it.Love your starter template! That was very similar to one I used (except with routing). I recently changed to http-vue-loader so I can write my templates in external files.
Vue 3 will fix all your qualms with v2 and should be entering Beta relatively soon. It has first class TS support (it's written in TS), fragments, portals, suspense, hooks and is smaller and faster👍
Thanks for your comment, I’m looking forward to it! 🤩
Regarding tooling, will I be able to rename a prop and have that rename propagate throughout my source tree when v3 comes out?
I consider this an absolute must before I can consider using it in serious projects because I do a lot of small refactoring.
Sometimes I name variables/props
x/foo/tmpand rename it later when I have the main logic figured out, where I can actually be more thoughtful about naming things… and I don’t want to do that renaming manually.To be honest, I have no idea. I don't generally rename props. I don't see an issue if you're using JSX for templating, but using the template syntax, I'm not sure. You can download the alpha and try ;)