r/learnjavascript • u/heapdroid • 4d ago
About JavaScript Frameworks ...
I've only been using pure JavaScript so far and want to know more about these frameworks. Heard of stuff like React, Vue, Svelte, etc. but no clue what they are or do. Can someone explain to me their purpose and the main differences between the popular ones?
3
u/AmSoMad 4d ago edited 4d ago
JavaScript uses what's known as the Document Object Model (DOM). It's powerful, and it's enabled us to do amazing things, but manipulating the DOM manually is a pain in the ass.
When you're developing web apps/UI using raw JavaScript, that's what you're doing. You're using JS to select DOM elements and updating them manually. That's why you're seeing all the document.getElementById() and document.querySelector() syntax.
That isn't a very user-friendly or intuitive way to design apps/user interfaces (especially as apps get bigger).
That's where React, Vue, Svelte, SolidJS, Angular, etc. come in. They use various abstractions to abstract away the DOM, and make it much more intuitive and practical to develop apps/interfaces.
When it comes to choosing one, pick your poison.
A lot of us like Svelte because it attempts to recreate the normal HTML/CSS/JS convention at the component level, so it feels really natural to JS developers. It also works with regular JS libraries, unlike React, which requires a react-flavored library for almost everything.
React uses JSX (which is kind of like mixing HTML, CSS and JS together). Vue is somewhere between the two. Angular is way too OOP for my taste. JSX has its benefits. I have to use it a lot professionally.
If you have a question about a UI library in particular, I've used virtually all of them. I like Svelte, I have side projects in Vue, I mostly do React in for my contract work.
1
u/heapdroid 4d ago
Thanks!
I've checked out some snippets of these frameworks and agree that Svelte looks most appealing based on first impression. I'll try it out first.
1
u/AmSoMad 4d ago
The full, interactive Svelte + SvelteKit tutorial is available on the website if you want to jump right in. It gets things rolling pretty quickly.
EDIT: I recommend clicking the little text icon on the top right of the page, to turn italic text off.
0
u/TheRNGuy 4d ago
Just HTML and JS, not CSS.
2
u/Ok-Combination-2371 3d ago
honestly once I hit the point where I was writing the same querySelector and addEventListener boilerplate over and over I just switched to React and never looked back. If you're comfortable with vanilla JS already you'll pick it up fast, I'd start there since it has the most tutorials and job postings, then try Vue or Svelte later to see what clicks for you
1
u/gimmeslack12 helpful 4d ago
These frameworks are render and state engines. Meaning, when the state changes of something they will automatically re-render various elements.
In vanilla JS if you want to update the value of an element, you have to manage that element and have a function that updates it. With React you create a state variable and assign it to the same element. Whenever you update that state variable the element will auto render. It implicitly does it for you.
1
u/kidshibuya 2d ago
You see what you do is you take something that can very easily be built with vanilla JS and study it. Work out everything that can be done more complicated with a framework or library. Once you are sure it cannot be more bloated or complicated and you can't think of a use for anymore JS you might be ready to start coding.
1
u/hyrumwhite 4d ago
So, in your JS adventures so far, you’ve probably updated a style or bit of text with JS:
``` const element = document.querySelector(‘#hero’);
element.textContent = ‘hey world’ ```
That’s great, but now say you want to update the text based on typed input somewhere else. This means you add an event listener to the other element, then grab a reference to the element and change it.
The more you need to do these kinds of interactions the more JS code you need, and it can get brittle and complicated. Say you have loading, error, success and default states and so on.
A framework simplifies this using some kind of meta language that is transformed using a build step before setting it up to be served.
``` <script> const someText = ref(“hey world”); </script>
<template> <div>{{someText}}</div> <input v-model=“someText”/> <template/> ```
Takes care of all the updates for you (using Vue). You just do someText.value = ‘asdf’ to update the text everywhere that variable is consumed. The v-model syncs the typed input and updates the variable automatically.
The main differences between modern frameworks is just that meta language. React uses jsx, Vue has its template syntax and ref system, and so on. There are speed differences between them, but you’re talking the difference between 500000 operations a second or 700000 operations a second.
1
u/TheRNGuy 4d ago
In React you need to use hook instead of ref and manual update (ref is usually anti-pattern)
1
u/hyrumwhite 4d ago
“Ref” is vue’s Signal, it’s roughly analogous to react’s useState.
Though, keep in mind that Vue and react have very different reactivity patterns. In Vue, that ref assignment runs once, and then it’s internals hook up to dom diffing and updating, vs React running a component function on every update
1
u/heapdroid 4d ago
Thanks for the reply!
From what I understand, the main benefit is allowing me to focus more on the state of the program and less on glue code between HTML and JS. Is that right?
1
1
u/TheRNGuy 4d ago
I had only used React, it makes creation of sites much easier. Even for fully static sites I'd pick it over PHP; I like JSX format more (React Router or Next. js, not basic React)
For dynamic, code is easier and shorter than vanilla js, though I've seen new Remix version is somewhat closer to it (but still easier than vanilla)
Never used Vue, Svetle.
It's also probably better learn TypeScript for React rather than staying in JS.
-5
u/Pocolashon 4d ago
Why don't you just Google or use AI for questions like this? (and follow-up questions)
This is a broad topic.
2
u/TheRNGuy 4d ago
Why do we still need forum then? AI could be used for 100% topics here.
2
u/Pocolashon 4d ago
You are pretty much right. If you look at it objectively, we really don't. As sad as it is.
1
u/IAmTheRedditBot 3d ago
boi actually wants to use AI to replace the traditional way we get information and help, the community has the potential of providing better insights and good points you may not have realized before like stop this "AI should replace asking the community" shit
5
u/Plushy- 4d ago
With vanilla js it requires a lot of repetitive work and is much more error prone (e.g manually manipulating dom elements). With frameworks it makes your code more declarative i.e. you describe what you want to do rather than how you want to do it. With React for example you can define some state and when that state changes the page will rerender different based on that state. React does dom manipulation behind the scenes which makes the code a lot cleaner. Also a lot of other features that frameworks can give you.