Server disaster & code base change 💀
by Omar FarookThis was a painful part in our story. Our product crashed and we suddenly realized our code base and infrastructure couldn't handle the user growth or our future plans.
We were very ambitious about what we were going to build. Things like an infinite canvas with full featured video editor. Imagine editing video on Figma! 🤯
All of those plans had to be postponed big time as our entire code base and infrastructure had to be re-written. 😠The hardest part was telling our new investors.
The app was so slow during this process we lost tonnes of MRR users and had lots of complaints.
Technical side: we essentially had to move to Google Kubernetes and shift our front-end code base from Vue JS to React.
-
5
In hindsight, did the change from vuejs to react really matter? It seems that you swapped one frontend to another, were scalability seemed to have been the underlying issue. Solving that with a scalable solution like k8s should have already been sufficient. Care to explain this choice?
Thanks for sharing so much of your failures, these are by far the best lessons for oneself and others, even though they are painful.
-
1
Thanks! Of course happy to share this stuff to help us all learn.
The scalability was to do with our infrastructure, we needed to move from our old dedicated server with OVH to cloud based. So Google Kubernetes was the way forwards to solve that.
VueJS to React was mroe to do with features. It was the safest option for the features we were building. Remember we have to use HTML5 Canvas libraries to build design tools, so the front-end code framework that interacts with that is super important to build custom features. And many competitors that were able to really customize Canvas libraries to their needs were using React. VueJS had a lot of bottlenecks when it came to customization.
-
1
Also, why is there a server performance issue for a front-end heavy application?
-
1
Our CTO @fahadnabbasi can answer that in detail, but I think that it's still backend heavy with all the file saving scenarios.
-
-
1
VueJS to React was mroe to do with features
What are some examples of such limitations? As far as I'm aware, they are both pretty similar in performance and the way you write code.
-
1
Again @fahadnabbasi can answer that in detail, but as mentioned the move was purely to introduce a lot of custom code that would allow us to build the features on the HTML5 Canvas library we were using.
-
3
@XCS and @luceos there were a number of reasons behind the switch, the most important switch was the backend Kubernetes and yes it has nothing to do with frontend frameworks . Initially we were not on cloud (funds etc issues) but then we got a lot more users so we decided to switch to the cloud infrastructure as our dedicated server was not able to handle the load.
For the frontend, as @OmarGlorify mentioned in his other article, we kept on adding features on top of our initial application(which was scalable able enough for our current needs and some more features).
We were fine with it as the Google Cloud fixed our users scalability issues.Then we came up with infinite canvas approach, video editing tool, smart shapes/blocks, batch processing and some more cool frontend features. The client side performance also became a key factor as canvas uses a lot of processing on client's machine.
The old vueJS application structure was not good enough to handle all these features while keeping the client end performance good so we had to restructure the app in a way it will handle all these new features as well as future features.We could keep using VueJS and restructure the frontend app but one of the problems we faced was finding good VueJS developers who can work with us long term and are good in canvas as well.
We decided to rewrite the application in reactJS instead of VueJS, so this decision of switching to reactJS was mainly because we can find good reactJS resources quite easily and community support is much more powerful and active in case of react.
-
-
-
-
1
React is fire, yo
-
1
I had the same question. It would be great if you can go into detail on that one. Thanks for sharing!
-
-
1
Hope those changes are for the better!
-
1
Well our latest build works are efficient as Figma, so I think we're going in the right direction ;)
-