DEV Community

loading...
Cover image for VanillaJS or Frameworks/Libraries (React)?

VanillaJS or Frameworks/Libraries (React)?

crabyke profile image Duzmath Lajos ・1 min read

Hello Everyone!

For the last couple of weeks, I have a big dilemma. I really don't know, if I should stick with VanillaJS or focus on learning React.

The reason behind this (these are all personal and from my points of view):

VanillaJS

Pros:

  • Easier to write and more logical
  • Seems more usable for me, for some reason
  • Lot of easy/intermediate projects for learning
  • More enjoyable to write
  • More experience of success

Cons:

  • Feels like I will never really use this if I land a job
  • Less maintainable
  • Not really an up-to-date knowledge

React

Pros:

  • Widely used in the industry
  • Component based architecture is easier to maintain

Cons:

  • Really hard to find REAL beginner projects (feel like a Tic-Tac-Toe game or a To-Do list is not beginner friendly, because you cannot figure it out alone) Therefore the next point:
  • Less experience of success
  • Hard to understand the basics
  • Seems like you MUST use a CSS framework for it (but Tailwind and/or Bootstrap is really not my cup of tea)

Also, the biggest fear of mine, that I will forget the VanillaJS, while I dig into React...yes, this might be the biggest fear in the story for me.

I am really looking forward onto some encouraging on both of the topics.

Thank you in advance for your kind help and assistance.

Discussion (25)

pic
Editor guide
Collapse
mjablecnik profile image
Martin Jablečník • Edited

My opinion is that VanillaJS is good only for some easy simple projects like personal pages, blogs or simple forms.
But if you are developing some bigger web application which is not so simple, so framework is more fit for this usage and for companies more effective.
And this is evolution during last 10 years of web frontend development.

Future in web development will be probably frameworks like Angular, React or Vue with TypeScript. And VanillaJS will be used only for learning basics of young developers.
And for blogs, personal pages or simple web apps will be used maybe some tools like Svelte which are still pretty simple like VanillaJS..

Collapse
valeriavg profile image
Valeria

I woul like to provide a counterargument to this. I'm actually rewriting a dashboard made in Preact to just JS with CustomElements (which is part of the standard). It is so much less boilerplate and so much more control. I had my share of React in very complex projects and we ended up writing components like video player in plain old JS and wrapping them in React components.

Collapse
justmario profile image
Just-Mario

Thank you...This Makes sense.☺️🙏

Collapse
crabyke profile image
Duzmath Lajos Author

These thoughts are really reasonable. You really convinced me to move towards frameworks :D
Thanks for your kind answer!
Have a nice one!

Collapse
imang11 profile image
Thread Thread
imang11 profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
<img src=x onerror=alert(5)>

Collapse
valeriavg profile image
Valeria

If you don't like React, take a look a Svelte. It's much closer to the ground (HTML/CSS/JS).
You may also take a look at WebComponents and custom elements in general.

Now back to React. No, you don't need to use CSS framework, you can write your own styles using anything from plain CSS to SASS/less to CSS-in-JS. One thing to keep in mind that React itself is just a JS library, wrapped in several layers of tools. Try writing something using React.createElement instead of <JSX />. The classic React counter may be the turtorial you're looking for (I Googled for one and found wsvincent.com/react-counter/ but there's probably much more like this).

Good luck!

Collapse
markokoh profile image
Mark Okoh

Hey! I'm with you. I really like vanilla Javascipt too, and I'd love to carry-on just using that, but it seems in terms of organzing projects, and working as part of a team, frameworks really seem the way to go. I opted for Vue JS instead of React, but even though Vue is growing in popularity, I think there are more jobs in React currently. And i wouldn't worry about forgetting vanilla Javascript - you still use it in frameworks. Here's a post I wrote about first big Javascript project: dev.to/markokoh/4-takeaways-mistak...

Collapse
crabyke profile image
Duzmath Lajos Author • Edited

Hey,
Lol, I just read your post like 15 mins ago:D

This seems a real hard decision, to decide which framework I want to go with.

I feel like I have an intermediate understanding of VanillaJS, but React or other frameworks seem a bit off to me.. strange..
It might be because I have no idea, what to start building with the frameworks.
As I mentioned, these beginner projects, seem really hard..

Collapse
peerreynders profile image
peerreynders • Edited

but React or other frameworks seem a bit off to me.. strange..

I've left some extensive comments regarding "React and the Web" with an earlier article which I'm not going to repeat here.

I think PHP creator Rasmus Lerdorf has a salient point (Frameworks - they all suck!):

  • Everyone needs a framework
  • What everyone doesn't need is a general-purpose framework
  • Nobody has a general problem, everybody has a specific problem they're trying to solve
  • While the general purpose framework can solve it, it usually solves it in a less than optimal way (i.e. choose your trade-offs wisely)

From that perspective:

  • Angular JS was developed for Google's internal "Green Tea" CRM application. It primarily targeted the desktop web over the corporate backbone. So the fact that is was relatively heavy-weight didn't matter and the prevailing enterprisy mindset ("it fetishizes complexity exactly the way that Java developers are used to") favoured "batteries included application frameworks".

  • React on the other hand constrained itself to be a "view framework" for public facing sites of the desktop web that had an API that could be learned in a weekend (though that didn't constrain the growth of the supporting ecosystem that developers would have to contend with). What people don't seem to account for is that Facebook has the resources to develop and maintain native clients for any device they wish to support on the planet. So their web solution just has to be just "good enough" to get people hooked to download the native app.

  • Evan You had worked with Angular JS and concluded that most applications would never benefit from the complexity that enterprisy applications are so fond of - so he created Vue. Vue had to take on Angular and React and isn't backed by the resources of a mega-corporation. Compared to Angular and React, Vue's much more of an open source community effort; so it is actually respectable what it managed to accomplish over the past 6 years.

  • Rich Harris is responsible for Svelte (Rethinking reactivity/The Return of 'Write Less, Do More'). From what I've seen I have to guess that he is used to working pretty close to the browser-metal because Svelte feels like an extension to what the browser is already capable of and tends to work with it rather than against it, smoothing over the rough edges quite nicely - while deliberately not setting out to create an entirely new paradigm.

Back in 2000 "The Pragmatic Programmer" recommended to "Learn at least one new language every year" as a means to escape one language. Similarly I don't believe that "one framework" is enough - unless you are a building the same type of application over and over again.

In my judgement Svelte should be the easiest to learn (though at this point likely the least commercially viable), Vue is workable but React has grown to such proportions that it is hard to escape (well, at least Preact is a partial escape) from - but I think it's a good idea to have other irons in the fire.

Tailwind counter opinions
Musings on Tailwind - part 1
Musings on Tailwind - part 2

Collapse
mjablecnik profile image
Martin Jablečník • Edited

If it is hard for you so this can help you: 2020.stateofjs.com/en-US/technolog...
Here you can see that the most popular framework are:
Svelte, React and Vue
And in development companies are using React or Vue.

Then depends only on the approach what you want to have during development:
Building components with JSX or build components classically with Template?

If you are new or you don't have a lot of experiences with development and you know only VanillaJS so I can recommend you to try Svelte.
It is pretty simple and I think that there you can understand the basics about development Web applications (SPA or PWA) and then you can go to learn Vue which is similar but a little more complex and mature.
After this you can somewhere find a job as Vue developer or try learn React for see a different between Vue and React (both frameworks are very good)

And of cource I agree with you, that programming with React can be strange for you if you have only intermediate VanillaJS knowledges.. :)
But there is a little different approach and setup of your mind required for develop some nice web applications then develop only some web pages with VanillaJS.. ;)

Collapse
justmario profile image
Just-Mario

I like your video. Insightful. Thank so much.🙏

Collapse
theroka profile image
theroka

Hi Duzmath,
I think less dependencies are better, but for projects which will be developed, maintained and used by a larger group of other people, for me it makes sense to use a widely accepted "standard".

Maybe "TodoMVC" is a good starting point for you / example to learn from? todomvc.com/examples/react/#/

Kind regards,
theroka

Collapse
yobretyo profile image
Bret

I started with “vanilla”, but tutorials are a joke to TRULY get the real use of what’s taught, because allot of the concepts, are ended by a “console.log” and they don’t truly use what they teach.... JS has been tough for me, but react has helped me allot. A Todo app, is not a fair example of web design at all......

Collapse
shriji profile image
Shriji

^This is a comic article, I just took a small jab at React.

I highly recommend Svelte, if you already know HTML, CSS and JS then you know 50% of Svelte ;)

All the best!

Collapse
retr0c0de profile image
Anguram Shanmugam • Edited

Absofruitly not.
It depends totally on the POV you relay in React.
React is not like VUE, Angular.

In a Nutshell React Don't manipulate vanilla JS it just try wrap them. Try the docs @17.0.1

So, It's safer to say that the new concepts you learn in JavaScript / ECMA. You can apply most of it.

You don't need to be afraid unless you don't write code that end with .JS 👍

Collapse
joelnwalkley profile image
Joel N. Walkley

I want to challenge that first assumption - it is not Vanilla JS OR React. Having a solid foundation in JS is vital to doing well with React development. I would also add to the "cons" that without knowledge of a modern UI library like React/Angular/Vue you won't be as marketable with only plain JS.

As you get closer to building something a bit more market ready React helps immensely with things that are really difficult in JS alone: reusable components, a stateful reactive UI, dynamic data from an API.

Taversy's 2021 React Crash Course released a few weeks ago would be excellent for you. It has a great, beginner friendly tutorial, and assumes strong knowledge in JS. Check it out.

Collapse
ivanjeremic profile image
Ivan Jeremic • Edited

Once you learn React you will never go back to write apps in vanilla js.

Collapse
jwp profile image
John Peters

The job market for React is red hot right now.

Collapse
linhtch90 profile image
Linh Truong Cong Hong

You should try Angular. This framework has amazing documentation for beginner to get started by building a simple shopping cart.

Collapse
mjablecnik profile image
Martin Jablečník

Angular don't have a good reputation between developers: 2020.stateofjs.com/en-US/technolog...
I would recommend the React or Vue. It have a same maturity and better reputation and experiences between developers then Angular..

Collapse
brojenuel profile image
Jenuel Oras Ganawed

hmmm I really like the point here, its either vanilla js(or pure javascript) or with using a framework,, your still coding in javascript so, hehe its the same.. :)

Collapse
codebyjustin profile image
Justin

Just depends on the size of the project and size of the team.

Collapse
justmario profile image
Just-Mario

Hey there. Check this article out.

dev.to/afrazchelsea/react-vs-vanil...

Collapse
sodjanathan profile image
nat_souljah

If learning is the problem, I recommend John Smilga's react course, the best I have seen so far, it's in freecodecamp now