From a developer who has apps using both, in production.
I’ve been building apps for five years now but I’ve dabbled in Single Page Applications (SPAs), only in 2016, when I had to build a dashboard for my app startup Pollen Chat.
Recently I released a new app Kiven Aa, for that I’ve used React. The web based service is live and many people have started using it. So that makes me technically eligible (though, I don’t consider myself an advanced user of either tools, by any means) to write about my thoughts regarding what worked best and what not, in either framework.
Polymer: +1 for Ready-made components
Polymer comes with quite a lot of ready-made web-components based components, which you can readily use in your projects. You don’t have to write everything from Scratch. In React, I wrote every single component from scratch. I know that there are components, designed by the community, for React as well but I did not really feel the need to use a third party component.
React: +1 for Simplicity
React is easy to pick up and being productive from the get-go. There are just two-three things you have to learn and you are well on your way. That’s also a reason, I didn’t feel like consuming any third party component, for my react based app. I was in total control of my app.
On the other hand, while using Polymer, I was clueless about most of the boilerplate and Starter kit code and why am I doing something. To be honest, I’ve devoted more time in learning Polymer than React. Still, I would say that I understand React better.
React: +1 for one-way data-binding / Polymer: -1 for two-way binding
Since I learnt Polymer first and that was my first encounter with data-bindings, as seen in modern web apps, two-way data-binding was a whole new dimension, in a great way. I felt so great while mutating the state of my components, by just changing a JavaScript property. No direct DOM manipulation whatsoever. Heck yeah!
But! the idea that you can mutate the bindings from both the parent and the child, actually gives you nightmares, while debugging, if you are not careful enough.Often times, I was confused about the data flows and abrupt states, my components were in, due to the fact that I was mutating the binding from the parents and the children, based on my own logic. It was total chaos. OK! not total, but that’s how I felt, many a times.
Enter React, along with its ideologies of props and states. Data flows only one way, i.e. from the parent to the child. Children don’t mutate the data passed onto them by the parent. Awesome. State is a internal property of the component and is solely responsible for managing it. No more confusing data flows between parent and child. Sweet!
Polymer: +1 for Material Design
Polymer embraces the Material ideology, which is quite natural, as it is produced by the same company, which pioneered Material Design. But, from a developer point of view, it comes quite handy when the ready-made elements, provided by Polymer are beautifully crafted. Projects made with Polymer look quite good and are very accessible, due to Polymer elements following Material Design Ideology very strictly.
On the other hand, React provides you with nothing, more than vanilla CSS, if you know how to use that properly.
I will be using more React in the future, due to two primary reasons. First one is the one-way data flow architecture and the other one is the future promises of React Native (Update 1st Jan, 2018: I’ve launched a new React Native app, Pollen Chat). The context switching is very costly, in-case of developers. Using React for both web and mobile, will greatly reduce that.
So, that’s it for today. I’ll keep updating this post with more updated content, based on my day to day learning.
If you liked this post, kindly recommend it to your network and follow me for more posts like this. You should also subscribe to my YouTube channel, if you like developing digital things.
Facebook|Twitter|YouTube
Till next time…