Below is a interview with the Front End developers of the VePanel team talking about the story of how and why they implemented React.js into their project. The transcript is edited for readability. Video of the full raw interview can be found here.
Bartosz: I'm Bartosz Staryga. I work as a Front End Developer for Ve Interactive. I work for the VePanel team. We're responsible for changing the way our Apps are presented on our client's website. We're currently changing from the Overlay approach of our previous VeApps, into the more Widget like approach of Panel.
Florian: I'm Florian Barbare. I work as a Front End Developer, on the same team as Bartosz.
Ramesh: I'm Ramesh Anandakrishnan. I work as a Front End Developer on the VePanel project, same as Florian and Bartosz. I'm pretty new to the team, being here for three months now.
Florian: VePanel is a container for Apps, known as Components. It's a wrapper that allows us to build Components to be placed on a Client's website. It uses the same Apps we were using before on our Overlay system, but presented in a whole new exciting way in Panel.
You can just Google 'How to React', read a couple tutorials and you're already set up. -Bartosz
Bartosz: When Ramesh joined the team, we had to explain to him how all the stuff worked. We found it was a lot of explaining, and realised the system has gotten overly complex over the time of developing it.
Ramesh: We sat down and tried to simplify the solution. We looked into multiple libraries and frameworks that can help us simplify what we were doing, React being one of the options. There was a huge influence factor that Facebook was using React. We looked at Angular as well, but Angular version 1 was pretty much in the final stages of being a current technology, and Angular 2 was still in beta mode, so we didn't consider Angular seriously. We wanted to see how easy it was to use React on our project. Over a matter of days, we were able to get the our framework set up in React.
Bartosz: Having introduced React into the project, this process became much easier. Since Ramesh knows how React works, he could easily read the code by himself and follow the structure. Introducing new components and new parts became much easier.
In a matter of days, we had the first pull request. -Ramesh
Ramesh: We work with a Spanish team called ToroRosso. Initially, before we introduced the React Panel to them, they had trainings session with Florian to explain how the whole repo works. They came back with a lot of questions. After we implemented things with React, we had another meeting with them, spending a couple hours explaining how the new Panel with React worked, and they completely understood. In a matter of days, we had the first pull request from them. That's a drastic change from them spending a whole week trying to understand how the old repo worked, to spending a couple hours understanding how the new Panel on React worked. It was a lot easier for everybody to grasp. One of the things we lacked in the previous repo was documentation. With React, everything is very well documented. If you need help, you can just post a question on StackOverflow, and you'll get a response for it.
So far, it was the best decision. -Florian
Florian: So far, it was the best decision. We've managed to reduce the complexity of our system. At the beginning, we were generating static HTML server side which was served as-is. We're now able to get rid of this server, making the whole system much easier to understand and much easier to deploy, which is pretty useful. It allows us to do much faster deployments from what was a few projects, to now only one project.
They most likely already have the files cached from visiting another of our client's website. -Bartosz
Ramesh: We were concerned with the React file size, but later we understood that React is used by Facebook, so React will have likely been cached anyway. The only thing that's required is a unique JSON file.
One deployment, and all the customers are instantly updated. We can do that in minutes. -Florian
Florian: We have all customers working on the same version of the HTML that references the URL to the React file. What we do is just change the URL on the HTML in the repo, do one deployment, and all the customers are instantly updated on the new React.js URL. We can do that in minutes. This is the benefit of having our deployment much simpler now.
Bartosz: And let's face it, if the Facebook servers go down, the whole internet will be down.
Florian: We removed versioning when we built Panel. We were tired of having to update the version of the client side our clients were using individually. We just wanted to get rid of it, so we moved Panel to a completely different repo from the versioned client side and Apps, and we started doing it versionless. We were a bit worried in the beginning that we would have some problems and would have to go back to versioning, but right now, we have good confidence in our project. We've put tools in place, we have all the unit tests, we have integration tests, we have acceptance tests, we have as much as possible to make sure when we deploy something, we won't break anything.
Bartosz: At the end of the day, it's easier for us to roll back a version if something actually breaks stuff on a versionless system, than to update a few thousand clients to a different version.
Florian: It depends how we approach it. Most of the time we work with feature toggles, so we can test our features on the live environment on a few clients. Once we're sure it's going to work for all clients, we roll it out for everybody.
Florian: Yes! That is our answer!
Ramesh: We would recommend React, but I think one of the important things we actually did was to sit down, Spike it out, and to get the things working first before we present it to the Higher Ups. Having a working example paid off. I definitely recommend people try out React for their projects to see how it would help them out or how it will simplify their process.
Bartosz: We strongly suggest for people to be innovative, look for new technologies, and to try them out in the projects they're working on. I was sceptical going with React, and now I think it was the best choice we made.