
How I converted my React app to VanillaJS - bubble_boi
https://hackernoon.com/how-i-converted-my-react-app-to-vanillajs-and-whether-or-not-it-was-a-terrible-idea-4b14b1b2faff#.xg39346tl
======
oelmekki
This is a very sane exercice to do, while obviously not something to recommend
for production code - but I guess it's not the point.

We often take our tools for granted, without thinking about how they were
designed. Doing such exercice allows both to get insights into the possible
solutions for a problem one of our tools solves (allowing us to understand our
tools better), and also is proper training for architecturing our own tools.

Thanks for sharing your discoveries.

~~~
Semiapies
And thanks for presenting it as an exploration and not the, "I am a _real_
carpenter, so I don't use a hammer, I just pound in nails with my dick!"
inanity a lot of these articles are.

------
tjallingt
Interesting read, although the shtick got a bit old near the end. I really
wonder how this compares to inferno.js as that has some real optimisation
magic to make it super small and super fast while also being, close to,
compatible with React.

------
ieatkittens
Nice work. Enjoyed the step by step process. Want to do something similar, but
in an Elm style.

A fun read as well.

------
tomcam
Can someone explain this interesting snippet?

    
    
      const h1 = () => makeElement(`h1`);

~~~
teniutza
It Uses "fat arrow" functions (lambdas) to define function. It is "equivalent"
(there are several differences here, like "const" and the context of the
function) to:

    
    
       var h1 = function() {
         return makeElement(`h1`);
       }
    

_Edited to reflect the valid point brought up in the comments_

~~~
drdaeman
Not really an equivalent, because "this" would be different - unlike with
function(){}, there is no automatic this-context binding with arrows, so just
switching to a fancier syntax in existing code may break things.

Also, no "arguments" (there are ...rest parameters that allow for variadic
functions).

~~~
divbit
> no automatic this-context binding with arrows,

I thought the arrows were now binding to surrounding context? (e.g.
[https://babeljs.io/blog/2015/06/07/react-on-
es6-plus](https://babeljs.io/blog/2015/06/07/react-on-es6-plus))

------
jmkni
This post reminds me of the book, _Build your own AngularJS_

It's a little old now, but still worth a read.

[https://teropa.info/build-your-own-angular/](https://teropa.info/build-your-
own-angular/)

------
nenadg
Creating frameworks by reversing the works of others is something I'd call
art. I really enjoyed your article, and I'll surely use some of it for a
personal framework that I'm currently writing.

Great work.

------
kelvin0
TL;DR : Even though ReactJS (or any other JS framework) is 'heavy', Web Devs
still need them to be able to code in a sane way for real world products.

~~~
vladimir-y
Correct. Self made framework is a good thing for pet projects and in terms of
education. But if you work in a team on the long-term project it's better to
use standard tools since there will be a need to expand the team and it's
better new members are already aware of the used tools/frameworks.

------
pitaj
More like, "How I wrote my own framework in VanillaJS"

~~~
k__
Doesn't code automatically look like a framework when you structure it?

~~~
hwh
You can e.g. hide that fact within a DSL!

------
drivingmenuts
I guess I'm NOT the only person not sold on React/Angular. Unfortunately, all
the companies hiring in my area are. :(

~~~
yoz-y
At the end of the article the author admits that while this is a worthy
exercise and might sometimes be useful, using a framework such as react does
have a lot of benefits.

------
fleetfox
"replacement" \- not even close.

