JSFoo Coimbatore 2019

This talk shares our experience of breaking down the monolithic front-end to more manageable and smaller apps and modules.

It explains what all problems we were facing with the monolithic repo, and why we decided to have multi repo architecture for our frontend projects.

It then explains how we broke it down to modular repos progressively, the multi-repo architecture we followed, the build and deployment pipeline we created and the frontend-infra we are separating as a module.

And the talk also explains how we fine-tuned the cross repo local development and how we managed cross dependencies effectively. Will also give a preview of open source solution we created for better cross repo development in a dev environment.

Key takeaways

• Why you might need breaking your monolithic app into smaller modules.
• How to progressively break the monolithic app.
• What you will have to take care with multi repo architecture.
• How to fine-tune workflow for multi repo development.
• Better cross repo development in dev env with packagebind module. https://github.com/interviewstreet/packagebind

Outline

The need of breaking the monolithic frontend

• Reduce the app context.
• Separate deployment.
• Bottleneck for Innovation.

The process

• Breaking the mololith app to multiple apps and modules.
• Modules as node packages.
• Keeping the code style uniform.
• Publishing Modules.
• Automate deployment for modules.
• Frontend Infra as a module.

Fine-tuning the workflow

• Better local development.
• Managing cross dependencies.

Key learnings

Speaker bio

Sudhanshu work as Front-end Architect at HackerRank. He has a love for frontend and anything in JS. In HackerRank he is involved in system design, building infra, mentoring peoples and improving the frontend platform and team as a whole.
He is also an active open source contributor who likes building UI, modules, and tools and have open sourced few of them with 4.5M+ downloads on npm and 3.5 K stars on github.
He likes talking about JavaScript, React, performance, frontend tools, architecture and patterns.

Links

• Github: https://github.com/s-yadav
• Twitter: https://twitter.com/_syadav
• LinkedIn: https://www.linkedin.com/in/yadavsudhanshu/
• Recent talks
• Hacking JavasScript: https://docs.google.com/presentation/d/1RSfrjEQJRJqVR5JQETERxQMYPcJ1no3XY2cCfsyYi5s/edit?usp=sharing
• Mapping a Class Component to a Functional Component with hooks: https://slides.com/sudhanshuyadav/deck
• Evolution of async patterns: https://docs.google.com/presentation/d/1IDTIjy9BeDL6yb_whg9Z99NfrPTt7ZGefWwiRppyaJg/edit?usp=sharing

Slides

https://docs.google.com/presentation/d/13KZC9ijbiZP5KViAscQ7p-HXpi571Y2JWQeM6Kz5gro/edit?usp=sharing