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

Jul 2019

1 Mon

2 Tue

3 Wed

4 Thu

5 Fri 09:00 AM – 05:15 PM IST

6 Sat

7 Sun

Make a submission

Accepting submissions till 22 Apr 2019, 11:59 PM

IT Block, Dr. G R Damodaran College of Science, Coimbatore

##About JSFoo Coimbatore##

JSFoo Coimbatore is a single-day conference with talks, Birds of Feather (BOF) sessions and speaker connect sessions. The conference will be held on Friday, 5 July, at Dr.G.R.Damodaran College of Science, Coimbatore.

JSFoo Coimbatore features talks on:

How to secure your web applications by identifying vulnerabilities.
Leveraging Web Application Vulnerabilities for Resourceful Intelligence Gathering.
Case studies of performance improvements and using the modular approach to building front-ends.
Node.js and good engineering practices such as logging, debugging and integrating security into your applications.
WebSDK: switching between service providers on the fly.

Speakers from Hotstar, Uber, HackerRank, Chained Ventures, Tezify, Appsecco, Gramener, and Centre for Internet and Society (CIS) will present case studies and experiential talks which will help JavaScript, full stack and front-end engineers among partcipants to build faster, secure and performant we applications.

##JSFoo Coimbatore 2019 sponsors:

#Gold Sponsor

#Bronze Sponsor

#Community Sponsor

#Venue Partner

For inquiries on tickets and sponsorships, call the JSFoo Coimbatore team on 7676332020 or write to us on info@hasgeek.com

Hosted by

JSFoo

JSFoo is a forum for discussing UI engineering; fullstack development; web applications engineering, performance, security and design; accessibility; and latest developments in #JavaScript. Follow JSFoo on Twitter more

All submissions

Previous Next

This submission has been added to the schedule

Session video

Submission video

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

Submitted Apr 21, 2019

Technical level: Intermediate

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.