DEV Community

React vs Plain JS

Rick Delpo on April 17, 2022

This piece is not meant to be a rant about React but rather just some observations. I hope that writing this does not make me unpopular. I do welco...
Collapse
 
getsetgopi profile image
GP

There is absolutely nothing wrong in getting things done without all the bells and whistles (Webpack, Node, Babel, React, compilers etc.,) and just by Vanilla JavaScript. You need React only when you want to break your page into individual component(s)(separate js file) and render them on demand, reuse component by passing new value, avoid DOM re-rendering, have control on the components, code splitting, depend on state rather than variables etc.,

React is just 40%, rest all the business logic you write is JavaScript.

Collapse
 
rickdelpo1 profile image
Rick Delpo

Hey thanks for the reassurance. I guess one of my concerns also is that rendering separate JS files vs html files would impact my SEO endeavor. Also I don't like NODE JS, importing hundreds of files for any project makes me feel lost.

Collapse
 
karladampilag profile image
Karla Dampilag

It seems the whole summary of your bullet points is that, for your needs, plain JavaScript is enough. That's fine, tbh. Using React when you don't need it for an application is overkill. When you find yourself starting to struggle doing so many manual things in the front-end with JS, that's a good time to maybe consider introducing React, to make your life easier. But if you don't feel like you ever get to that point in your use cases, then plain JS is fine and there's really nothing wrong with that. React shines when developing complex front-end applications. When not working on such applications, one won't really appreciate React. At that point, React won't be worth the extra configurations and additional learning curve. It's at the complex front-end applications when benefit is way greater than the additional set-up work.

Collapse
 
rickdelpo1 profile image
Rick Delpo

Hey thanks Karla, for the time u put into responding. I was 20 years stuck in a corporate silo doing SQL and, no joke, just started exploring the front-end in 2019. Because I am a data person I guess I am not needing that much from my JS as u point out. I only really want a Fetch API and some JS array methods to render data in JSON. So now I feel much better after ur explanation. Thanks again, u made my day !!

Collapse
 
rickdelpo1 profile image
Rick Delpo

Please someone explain my point #11 in plain English as I am researching and still don't get it. Thanks.

Also, a plain English on SSR would be helpful too

Collapse
 
efpage profile image
Eckehard

Maybe you try out my DML "framework". It does all the job without learning React and is blazing fast. Uses vanilla JS only, no frameworks, no depenencies. Just a new way of thinking.

The homepage was created using DML too, fairly simple set up

Collapse
 
rickdelpo1 profile image
Rick Delpo

Hey thanks for suggesting this new framework. But I notice that we need to import a library which is 68kb almost as big as the jquery library. I use plain vanilla js because I don't want to slow down my load time using libraries. Plain JS means no libraries. PS, my JS needs are not that big anyway so I avoid all the extra fluff and also I never use NodeJS either. However, Your point is well made, avoid the complexity of React unless they require it on the job or in school.

Collapse
 
efpage profile image
Eckehard

Minified it is only 25 kB, but it´s pretty much all you need. Check out the homepage to see, if it is slow in any way, this was completely built with DML. As you do not import *ny HTML, you do not have this: "render HTML and then wait for JS to be loaded" delay.

If you like to see the bare metal, please check out the html-free-desk-calculator-app, which uses the same approach, but no library at all. This implements the main routines and has only 61 lines of code... You will find the result here

Collapse
 
efpage profile image
Eckehard

React.js: The Documentary is absolute enlighting. There have been good reasons to create react, as managing large teams was not easy this times. But this does not mean, React is the perfect fit for every family homepage...

Collapse
 
gmartigny profile image
Guillaume Martigny

Hi Rick,
Today, there's a lot of frontend frameworks and React maybe not what click for you. You should try others and see what they have to offer.
Personally, I don't like React that much. But I'm in love with Vue.js and Svelte offer some really interesting features.

Collapse
 
rickdelpo1 profile image
Rick Delpo

Thanks for the good advice. I will start researching Vue vs React for starters

Collapse
 
leob profile image
leob

Haha refreshing, why does this post have only one or two likes ... ?

Collapse
 
elvisvan profile image
Elvis Van

why did u not like react router?

Collapse
 
rickdelpo1 profile image
Rick Delpo

Hey..thanks for reading, my reason for not liking React Router is not related to React but rather to SEO. I think the concept of a single page app is great but by rendering this way we forgo the organic clicks from multiple pages that get an SEO ranking because Google search console favors rich content from external html pages that relate to specific topics. I have 3 high ranking pages but if I used React Router Google Search would have missed all three.

Collapse
 
efpage profile image
Eckehard

Are you sure about SEO? I thougth Google will read this pages too now.

Thread Thread
 
rickdelpo1 profile image
Rick Delpo

Yes, great strides have been made via server side rendering in react where on page load the html is injected directly into the html div tag. But I believe u still need to use a single page app for this with react router. My point for seo was that i had 3 chances to rank using 3 all html pages vs 1 single page app. I would rather have 3 ranking pages vs only 1. PS, I am not an expert in SEO, only using my common sense here. Thanks for engaging in the conversation.