Front-end: Angular vs React vs Vue
Introduction
Hello guys,
I have been reading and experimenting quite a bit with the new and more popular tools available for developing SPAs.
I believe that I ended up coming to some conclusions that might be quite useful to those who are where I was a few months ago: trying to understand the basics and deciding which framework/library is the one that will solve my needs the better. So, let’s jump into it!
I have a solid experience in developing big data SPAs in ES6 and jQuery.
I wanted to switch to the new paradigm of module + component + central state management + view library/framework.
After a deep research I ended up reducing my options to Angular2 vs React (I knew about Vue.js afterward. More on this later on.)
I did not like Angular
- Steep learning curve.
- Too much ceremony for a single developer (not a team).
- I knew nothing about this modern tools, and with Angular, my deep understanding of Javascript would not help me understand what was going on under the hood of the framework.
- Setup up was also very magical at my beginnings with Webpack, npm and/or whatever tools you would choose to put all angular stuff together.
- Too much DSL (Domain Specific Language) to my likings.
I did like React
- I got into it really fast just using (at the beginning) a <script> tag with the React.js library.
- As React is a view library, there was little to no ceremony. I could continue doing things as right or wrong as I was doing them before.
- My deep understanding of Javascript would naturally make me understand the whole way the tool is working under the hood.
- Very small API.
I started my new project on React.js
So I started developing my new SPA product with React.js.
To manage the central state I chose “Baobab” because, again, Redux solutions had too much ceremony for my actual needs.
Everything went super well. No fights against React.js. With the help of the “Thinking in React” document and the many resources the big community has, I got very fast into important concepts as: Abstraction and code reuse by Components, Intelligent and dumb components, one-way data binding, component internal state, etc.
Performance issues arised
When my application started to grow, some performance issues arised because I was unnecessarily re-rendering costly things on actions. So I had to start controlling what had to be re-rendered. React.js API offers methods like “shouldCompnentUpdate” to deal with that.
From a technical and engineering point of view, dealing with this render logic was exciting. But on the other hand, I was spending time in logic not related to my application and I did not like that.
So, once more, I started reading many articles related to this point and, by accident, I read something about Vue.js.
I switched to Vue.js
Vue.js succeeded to attract my attention because one did not need to care so much about handling the rendering logic. So I started digging a bit more and finding that the library was taking care of many other little things that, in my React ecosystem, I was handing by additional libraries (switching css classes on conditions comes to my mind).
Having my react background, it took me one weekend to feel comfortable redoing my SPA on Vue.js. I have been working for 10 days know and everything is a breeze. Lot fewer lines of code in comparison to React and lot more readable at the same time, without sacrificing any power (Vue.js offers you functional rendering too.)
Also, my SPA is now developed to the same point it was on React.js when I started having render performance issues and Vue.js is just cutting through render like nothing, very fast overall.
Last but not least, with Vue.js, you only need to put a <script> tag with the library in your actual project and you are ready to go. The library does not force you into any kind of language that needs transpiling unlike Angular or React (TypeScript and JSX respectively).
My conclusions for now
1) Angular2: Only interesting if you are going to work in team (enterprises) or are looking for a front-end developer job in some nice company.
2) React: React is incredible. Great philosophy. Solid as a rock. Amazing teacher,. You will really learn how to think about things and have a solid understanding of what is going on and why. Also, super big community, with lots of useful libraries to work with (took me 1min to npm a simple <draggable/> React Component to make a div draggable. I could not even find one for Vue.js, I used good old jQuery UI instead.)
3) Vue2.0: I am continuing this path for now. I see in Vue.js many advantages to solving problems that my React.js teacher taught me how to understand (and solve, but with more work). The only things I fear are: lack of community tools to solve simple things that I could be forced to solve by hand myself, and lack of big software company behind (i don’t really know what the risks of these are.)
So this is it for now guys. I actually find these new Javascript Universe, concepts and opinions very interesting and fun. I hope I could clarify and bait you into it.
As WordPress said, “code is poetry”.
Salutations!