React vs Vue vs ...
Advantages to both:
Both update only items on the page that have changed - saves time and resources
Component based - forces you to reuse code and think about what you’re creating.
Routing and state management is separate
Official libraries for building mobile apps - only just added in vue and ionic have announced a react version recently (+1 for react here ionic is great! https://ionicframework.com/blog/announcing-ionic-react/)
Both performant - depending on how its configured
Both have command line setups
Syntax
Vue uses html templates with an option to use JSX. Standard HTML is easier for developers to get used to but JSX has some advantages.
React uses JSX which combines html and javascript.
JSX
JSX's purpose is to simplify the creation of React tree nodes with attributes. It lets you create JavaScript objects with HTML syntax. Lets developers build self-contained UI components with view-rendering instructions included
Business use
More companies are using React - hiring is easier
CSS
Vue allows you to have global css and scoped css - specific to that component.
React has more options https://medium.com/@dmitrynozhenko/9-ways-to-implement-css-in-react-js-ccea4d543aa3
Css modules: https://blog.pusher.com/css-modules-react/
Folder structure
https://mshossain.me/blog/structured-my-vue-project-for-scaling-large-vue-js-application/
Vue
Is a progressive framework. Because of its html templates it means its great to use to slowly convert an application.
Its a template model bound to data model - if the model is updated then the browsers html is updated. It reacts to model updates.
(For loops similar to Angular1…)
React
React was created for large-scale web projects. Overkill for small and simple apps but if the app is to grow it might be sensible to go with it.
Requires a lot of setup boilerplate code. The architecture pays off in the long run.
Doesn’t have official components for routing but there’s so much choice out there
Has corporate support, a large community, and an even bigger ecosystem.
You have to be comfortable with html in javascript.
CSS handling
Hooks in react vs ???
Data management - redux
Longevity
Upgradability
Testing
Authentication
Security
Both have cli tools for standard setup
Vue is very angular like -
<li v-for="page in totalPages" v-bind:class="{'page-item':true, 'active':(page === currentPage)}">
<a class="page-link" href="#">{{ page }}</a>
</li>Created on: 28th October, 2022
Last updated: 28th October, 2022
Tagged With: