{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/using-a-tool-vs-knowing-how-a-tool-works-internally","result":{"data":{"markdownRemark":{"excerpt":"My thoughts about using a tool vs. understanding how a tool works internally. Before we start let me tell you that this post isn't about…","html":"

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

\n

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?\"\nAlso note that i'm not an Vuejs expert.

\n

Here's an important thing,

\n

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

\n

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

\n

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.

\n
\n

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

\n

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

\n

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.

\n

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

\n

Well Vuejs parses the template in 3 stages.

\n
    \n
  1. Compilation stage.
    2. \n
  2. Optimization stage.
    3. \n
  3. CodeGen stage.
    4. \n
\n

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).

\n

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)

\n

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

\n

Now, let's talk about React.

\n

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

\n

Well in case of react, the internals are far far more simpler than Vuejs.\nand 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.

\n

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

\n

basically ->

\n
<p>hello</p> \n// converts to\nReact.createElement(\"p\", null, \"hello\");
\n

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

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

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

\n

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

\n\n

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

\n
let arr = ['one','two', 'three'];\n\nReact.createElement(\n  'div',\n  null,\n  arr.map(v => React.createElement('p', null, v))\n)
\n
\n

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

\n

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

\n

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

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

People like Vuejs because of its simplicity.\nI 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.

\n

But React is much more simpler to understand.

\n
\n

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.

\n

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

","timeToRead":3,"id":"4a6ab33f-02b6-5902-bf2e-a570110eb889","frontmatter":{"date":"May 27, 2020","title":"Using a tool vs. knowing how a tool works internally"}}},"pageContext":{"slug":"/blog/using-a-tool-vs-knowing-how-a-tool-works-internally"}},"staticQueryHashes":["1033876704","3435786681","550521386"]}