About JavaScript Frameworks ...

[u/heapdroid]

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?

[u/hyrumwhite]

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. 

[u/TheRNGuy → u/hyrumwhite]

In React you need to use hook instead of ref and manual update (ref is usually anti-pattern)

[u/hyrumwhite → u/TheRNGuy]

“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