JSFoo Pune 2019

Migrating the front-end for an existing SaaS product is a challenge in itself but migrating all the front-ends of an enterprise SaaS suite is another beast altogether.

At Cloudnaut Technologies while building the tech for EasyWeb Group, one of UK’s leading HR and Recruitment solutions provider, this was exactly the challenge we ended up tackling. After close to 3 years in production, we decided to move all of our AngularJS powered front-end apps and front-facing plugins to Vue.js in an existing complex, microservices architecture.

This talk is intended for people who are interested in knowing how such tectonic shifts are undertaken and delivered in an enterprise SaaS suite ecosystem while ensuring seamless transitions for end users.

Outline

This talk would mostly focus on how a rewrite spanning across several systems of the product suite was planned and executed. How the fact that most of these front-facing systems use common microservices makes the task even more complex when the rewrite has to be done in a phased manner.

###1. Introductions

• Cloudnaut Technologies - who we are, what we do
• EasyWeb Suite - A brief description of the product suite, the architecture & apps that were rewritten.

###2. Legacy

• AngularJS era - How AngularJS helped us build large scale apps rapidly
• Evolution of the ecosystem - How the apps evolved and grew, pushing AngularJS to limits
• Need for rewrite - Performance, enhancements and being ready for the future

###3. Plan

• Picking the framework - Angular, React or Vue (We love Vue)
• Hello Vue - How we rewrote a core front-facing plugin in Vue.js to test drive Vue.js before making the final call
• The blueprint - How we planned for a phased rewrite of all front-end apps & plugins, simultaneous updates to the existing apps and ensuring all microservices play nicely with both the old and the new systems

###4. Execution

• End of an era - Letting go of AngularJS, learning the Vue way
• By the power of Vue - How Vue.js helped us in building apps bigger, better and a lot simpler than before
• Legacy updates - Its a mess
• Rolling them out - Powering the entire product suite with Vue, one app at a time

###5. Lessons learned

• Think forward - Requirements evolve, sometimes mutate
• Estimating for a new framework - Here be dragons
• Evolving ecosystem - Catching up with dependencies
• Fruits of the labour - Better code, easier maintenance, rapid development & happy developers

###6. Conclusion

• Review - How the rewrite was received
• Vuetiful Vue - Why we love it
• Fin

Speaker bio

I am Hemant Rai, Front end lead at Cloudnaut Technologies. During my 7 years as a developer I’ve worked across the dev stack and have been focusing on the front-end for more than 3 years now. I started as a PHP developer working mostly on the back-end but switched to the JS stack around 4 years ago. On the front-end, I started with angularJS and have been building Vue.js apps for almost 2 years now.

Links

• https://medium.com/@Hemantisme/moving-from-angular-to-vue-a-vuetiful-journey-c29842ab2039

Slides

https://docs.google.com/presentation/d/1Q6QhoHm7-lJhRCngHglktQbn2KA-fdrIlPf3cP3c8Ro/edit?usp=sharing