loading...
Cover image for Using a tool vs. knowing how a tool works internally.

Using a tool vs. knowing how a tool works internally.

anuraghazra profile image Anurag Hazra ・3 min read

My thoughts about using a tool vs. understanding how a tool works internally.

Photo by Todd Quackenbush on Unsplash

Before we start let me tell you that this post isn't about which tool is better vue or react, my intentions are to express my thoughts about "Using a tool vs knowing how it works" & "If the tool is easier to work with, does that means it's easier to understand how it works?"
Also note that i'm not an Vuejs expert.

Here's an important thing,

People say react is hard but it's not, they think it's hard because they don't know how it works.

People say redux is hard but it's not, they think it's hard because they don't know how it works,

People say Vue is amazing and easy to use (of course it is) but most people don't know how it works internally, but still they love it and find it easier than react.


The point to be noted here is that Vuejs is magic, and Reactjs is JavaScript just plain simple JavaScript.

Most people find react hard because they lack the fundamental understanding of the language (js).

But they don't find vuejs hard because vue does magical stuff to abstract away all the things which you have to do in order to get the app running.

Now if I ask someone
"How does vuejs works"
"How vuejs handles the template"
"How v-if v-for works?"

Well Vuejs parses the template in 3 stages.

  1. Compilation stage.
  2. Optimization stage.
  3. CodeGen stage.

Vuejs firstly parses the template and creates an AST representation of the template and parses all the directives, elements, tags, childrens, and then it runs the second stage of optimization stage where it sets a "static" flag on the nodes which are not gonna be dynamic, and then finally it generates a render function (an hierarchical representation of VirtualDOM).

Vue needs to hide these implementations away from the end users in order to make it a breeze to work with. (which is in my opinion is amazing)

But knowing how vuejs internally works requires knowledge of AST, compilation, optimization, codegen etc etc. which in my opinion is not an easy task.
And we haven't even talk about Reactivity in vuejs.

Now, let's talk about React.

If I ask someone
"How react works?"
"How conditional rendering works?"

Well in case of react, the internals are far far more simpler than Vuejs.
and yes modern react uses JSX compilation but you need to know how React.createElement works not how compilation works in order to understand how react works.

React has a React.createElement method which takes 3 parameters (tagName, props, childrens) in order to create a virtual dom node.

basically ->

<p>hello</p> 
// converts to
React.createElement("p", null, "hello");

Now with this simple factory function we can compose the whole virtual dom tree like this

React.createElement(
  'div', 
  null,
  React.createElement('p', null, "hello")
)

After composing the dom tree ReactDOM.render will recursively mount the vdom to the actual dom.

And that's basically it. and the cool thing is because Reactjs is just plain simple javascript it answers all the questions like

  • How conditional rendering works.
  • How loops will be handled.

Because React.createElement is just a function call you can just pass an array of childrens

let arr = ['one','two', 'three'];

React.createElement(
  'div',
  null,
  arr.map(v => React.createElement('p', null, v))
)

In my opinion for an average person to understand "How React works" is far easier than "How Vue works"

Because in case of vue you need to know about compilers, AST, optimizers, codegeneration.
but to understand React you just need to understand how vdom (for vue too) works and how recursion works.

Now i know some people might disagree but its just my personal opinions.

  1. React is javascript.
  2. Vue is magic (not magic, CS actually).
  3. Vue is easier to work with.
  4. React is easier to understand.

People like Vuejs because of its simplicity.
I heard from lot of Vuejs devs that React is hard, and they say that because vuejs is easier to work with and does all the magic as i said earlier.

But React is much more simpler to understand.


The point of this whole post is not about "React is better" or "Vue is better" it's about as a developer we should know how our tools works because knowing that is beneficial.

"Don't just use it, understand how it works"

Posted on May 26 by:

anuraghazra profile

Anurag Hazra

@anuraghazra

javascript lover, reactjs enthusiastic, gatsbyjs fanboi. Also Canvas, Web Interactivity, Physics Simulations, P5js, UI Design. #CreativeCoding

Discussion

markdown guide
 

well I find svelte simpler but that doesn't change the company's standard of using frontend tools like react,cue,angular. I would sAY to the reader, pick one and stick to it.both vue and react do the same thing. I prefer react.

 

Yup, but point of this post isn't about to pick one and stick to it, my point is that whatever tool you use just know how it works at a fundamental level. Not just frontend framework I'm talking about all the tools.

 

Vue indeed covers a different use case than React. Eventually we all have to look deeper inside a framework to understand how it works. The thing is: sometimes you don't have the time. Sometimes you just want things to work. This is a recurrent discussion in the Dev/CS/Programming community: Ubuntu vs Arch, C/C++ vs Python, React vs Vue vs Angular.
Some things are easier to understand than others. But maybe, just maybe, I don't want to understand. Maybe I just want a good UX. Maybe I just want it to work "out of the box".
If you'd like to understand this point better, there's a documentary about Vue.js on YouTube.

I like Vue a lot. I also like React a lot. But after 1 week of learning React, I realized I'd have to learn a ton of other libs, and then I just dropped it for the meantime. So yeah, React is easier to understand, but I'm not a Logic/Theory of Computing/Compilers and have been using Vue at work for a year or so without problems since day 1. I've been using React on the side for 3-4 months and am still stuck on the "hooks vs classes" discussion, which I'd appreciate if you showed me a tutorial for.

In any case, I like your point very much, but the truth is: we gotta work. And most of the times, you don't have nor have the time to understand how something works. The framework devs will do it for you, which is the whole point in products.

 
 

Do we really need to know how computer actually converts each pixels to binary and doing millions of tasks at the same time? or is it okay if we only know, computer does something (magic?) to convert to binary and show us the pixel.

 

It depends upon the person's interest too. not everyone is into that low level stuff, but you can't disagree that those who knows how "computer actually converts each pixels to binary and doing millions of tasks at the same time" have better insights.

For example:

  • If You are a Graphics programmer?
    You have to understand how computer rasterization works and rendering works

  • If you are a hardware engineer
    You have to understand how does a logic gate in a microchip work, behavior of a transistors, how electrons move through a circuit

  • And If you are a frontEnd developer
    It would be probably be helpful to understand how all these tools works internally

Of course we don't need to understand everything (no one know how universe works, but everyone is trying)
but having a basic understanding of how the tool works internally, can be beneficial.

 

Agree.

I'm in a stage now where I don't know both Vue or React. (I only know jQuery now)

Can you show some examples (may be in a next article) showing how same stuff can be achieved via Vue.js & React? and possibly explain why React is better? Because after reading Vue js Docs, I was confident of trying it, but after react docs, its not.

I have seen several articles, tutorials & videos of both react & vue js to choose one.

I have an upcoming project where lot of DOM manipulation happening (like drag & drop builder) So your Guidance is appreciated.

~Surjith

There are lots and lots of good articles online and resources to learn.

Well i would suggest not picking up any lib/framework at start, and just go with javascript, and before learning any framework/lib deeper understanding of javascript & ES6 is good to have otherwise you will find yourself struggling with simple tasks.

"Vue js Docs, I was confident of trying it, but after react docs, its not." well this line justifies my point of the post, if you read it carefully. vuejs is easier to work with but reactjs is simple to understand.

Either way i would suggest learning ES6 Concepts like Arrow Functions, Promises, async/await, destructuring, higher order array methods etc etc.

"and possibly explain why React is better?" well i did not said React is better than Vue in the post nor i said Vue is better than React. Choose whatever suites the project and whatever you feel comfortable with.

Sure, I'm learning ES6 now. Just today i wrote something about it here:
dev.to/surjithctly/my-first-es6-te...

Neat! nice post.
yeah keep learning. :D

 

your core statement is right, you have to understand the tool to be able to use it best. But the comparison between Vue and React is a bit misleading. Vue and Angular offer you the possibility to create a whole web application with one click. But React can't do that. You have to use the right tool for the right problem. If you can only use a hammer, all problems look like nails. Therefore, if you focus and specialize on only one tool, you will often not be able to solve all problems or only with a lot of force

 

Right. but in the post i did not mentioned anything about "use the right tool for the right problem" or "how to solve a problem" nor i said anything related to "use vue" or "use react"

and also i did not compare the two in depth, my point is all about "UNDERSTANDING THE TOOL"

Probably it was my mistake that i choose Vue & React as an example because when people see something about "Vue / React" people tend to go into discussion of "Which one is better" & "Why someone would use one or other" but my post isn't about which one is better nor which one solves my problems best.

My sole intention was to show how both tool works internally & and it is beneficial to understand the inner workings of a tool. :D

 

Yep, that is precisely why I like React too.

 

Me too.

I like Vue it's nice.
But I LOVE react.