JSFoo Coimbatore 2019

On building faster, performant and secure web applications

Participate

Breaking the Monolithic Front-end (A HackerRank's case study)

Submitted by Sudhanshu Yadav (@sudhanshuyadav) on Saturday, 20 April 2019


Preview video

Technical level: Intermediate

View proposal in schedule

Abstract

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

Slides

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

Preview video

https://youtu.be/SkN6Z8dtVd0

Comments

Login with Twitter or Google to leave a comment