SlideShare a Scribd company logo
PUTTING THE PANTS ON JAVASCRIPT
HOW WE CREATED A MONOREPO FOR OUR WEBS
Painpoints of multiple projects
• Setup phase of every repo
• Different deployments
• Code rots in old projects -
no one wants to touch
them
• No code sharing
• Updating dependencies
web-tools
tvadmin
editor
web-client
web-lab
!
The motivation
• We have a server monorepo
using Pants
• Same structure for every project
• Simpler workflow when working
in multiple services at once
• Updating one dependency
deploys all services
• Single setup, code sharing etc...
all the servers
in one repo
"
Implementation
all the webs
in one repo
"
• Pants Node contrib module
Inspired by Pants
• DEPENDENCIES.js
• JS scripts for task running
• CI scripts for selective
deployment
QuizUp Web Monorepo
Implementation
all the webs
in one repo
"
• Pants Node contrib module
Inspired by Pants
• DEPENDENCIES.js
• JS scripts for task running
• CI scripts for selective
deployment
QuizUp Web Monorepo
Implementation
all the webs
in one repo
"
• Pants Node contrib module
Inspired by Pants
• DEPENDENCIES.js
• JS scripts for task running
• CI scripts for selective
deployment
QuizUp Web Monorepo
changedTargets.js
1. Creates dependency map of whole repo
2. Did service code change?
3. Did npm dependencies change?
4. Did shared code change?
QuizUp Web Monorepo
Benefits
• Consistent code style - shared ESLint, Stylelint and Flow
configs
• Greenkeeper - All projects up to date at all times
• Code is sharable by default
• No bootstrap phase - just write code
• All boilerplate code sharable in a single place
• Super easy onboarding, try one project -> know them all!
#
Questions?
@arnarths

More Related Content

PPTX
TypeScript Jump Start
PDF
Introduction of bootstrap in angular
PDF
VersaPay's Tools for Happyfficient Developers
PPTX
Microfrontends Monoreops & Trunkbased based
PPTX
ASP.NET Core - Phillosophies, Processes and Tooling
PPTX
NWJS. Web on desktop
PPTX
Intro to openfaas
PDF
OpenFaaS
TypeScript Jump Start
Introduction of bootstrap in angular
VersaPay's Tools for Happyfficient Developers
Microfrontends Monoreops & Trunkbased based
ASP.NET Core - Phillosophies, Processes and Tooling
NWJS. Web on desktop
Intro to openfaas
OpenFaaS

What's hot (20)

PPT
Hacking the way you work
PDF
Server Side React for WordPress by Muhammad Muhsin @ The JavaScript for WordP...
PPTX
Android component programming
PPT
Front-End Tools and Workflows
PDF
Angular meetup 2 2019-08-29
PDF
Blazor - The New Silverlight?
PDF
WebAssembly vs JavaScript: What is faster?
PPTX
Ruby on rails
PPTX
Building real time app by using asp.Net Core
PDF
Skinny Framework 1.0.0
PPTX
HelloGit
PPTX
Developing Cross-Platform Web Apps with ASP.NET Core1.0
PDF
Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo
PPTX
Cypress for Testing
PDF
Node.js with Express
PDF
Lessons in Open Source from the MongooseJS ODM
PDF
Stripe con 2021 UI stack
PPTX
Chat automation in a modern it environment
PDF
MongoDB MEAN Stack Webinar October 7, 2015
PPTX
Monoliths vs microservices
Hacking the way you work
Server Side React for WordPress by Muhammad Muhsin @ The JavaScript for WordP...
Android component programming
Front-End Tools and Workflows
Angular meetup 2 2019-08-29
Blazor - The New Silverlight?
WebAssembly vs JavaScript: What is faster?
Ruby on rails
Building real time app by using asp.Net Core
Skinny Framework 1.0.0
HelloGit
Developing Cross-Platform Web Apps with ASP.NET Core1.0
Shift Remote: JS - Javascript Build Tools: Past & Beyond - Shedrack Akintayo
Cypress for Testing
Node.js with Express
Lessons in Open Source from the MongooseJS ODM
Stripe con 2021 UI stack
Chat automation in a modern it environment
MongoDB MEAN Stack Webinar October 7, 2015
Monoliths vs microservices
Ad

Similar to QuizUp Web Monorepo (20)

PDF
Isomorphic WordPress Applications with NodeifyWP
PDF
Intro to Node.js
PPTX
Vagrant to-aws-flow
PPTX
Introduction to ASP.NET 5
PPTX
Build your next app with MvvmCross 6
PDF
An introduction to Node.js
PPTX
Top 10 frameworks of node js
PDF
🚀 Node.js Simplified – A Visual Guide for Beginners!
PPTX
WordPress Development Environments
PDF
You Got React.js in My PHP
PPTX
Les nouveautés ASP.NET 5 avec Visual Studio 2015
PPTX
Get acquainted with the new ASP.Net 5
PPTX
Building a REST API Microservice for the DevNet API Scavenger Hunt
PDF
Workflow driven development
PDF
Ivan Jovanovic - Micro Frontends - Codemotion Rome_2019
PDF
The MEAN Stack
PPTX
7 Habits of Highly Effective Jenkins Users
PPTX
Build software like a bag of marbles, not a castle of LEGO®
PPTX
Continuos integration with Jenkins for iOS | SuperSpeakers@CodeCamp Iasi, 2014
PPTX
Swagger - Making REST APIs friendlier
Isomorphic WordPress Applications with NodeifyWP
Intro to Node.js
Vagrant to-aws-flow
Introduction to ASP.NET 5
Build your next app with MvvmCross 6
An introduction to Node.js
Top 10 frameworks of node js
🚀 Node.js Simplified – A Visual Guide for Beginners!
WordPress Development Environments
You Got React.js in My PHP
Les nouveautés ASP.NET 5 avec Visual Studio 2015
Get acquainted with the new ASP.Net 5
Building a REST API Microservice for the DevNet API Scavenger Hunt
Workflow driven development
Ivan Jovanovic - Micro Frontends - Codemotion Rome_2019
The MEAN Stack
7 Habits of Highly Effective Jenkins Users
Build software like a bag of marbles, not a castle of LEGO®
Continuos integration with Jenkins for iOS | SuperSpeakers@CodeCamp Iasi, 2014
Swagger - Making REST APIs friendlier
Ad

Recently uploaded (20)

PPTX
Engineering Ethics, Safety and Environment [Autosaved] (1).pptx
PPTX
additive manufacturing of ss316l using mig welding
PPTX
Recipes for Real Time Voice AI WebRTC, SLMs and Open Source Software.pptx
PPTX
UNIT 4 Total Quality Management .pptx
PPTX
Lesson 3_Tessellation.pptx finite Mathematics
PPTX
UNIT-1 - COAL BASED THERMAL POWER PLANTS
DOCX
ASol_English-Language-Literature-Set-1-27-02-2023-converted.docx
PDF
Operating System & Kernel Study Guide-1 - converted.pdf
PDF
Well-logging-methods_new................
PPTX
bas. eng. economics group 4 presentation 1.pptx
PPTX
Strings in CPP - Strings in C++ are sequences of characters used to store and...
PDF
Model Code of Practice - Construction Work - 21102022 .pdf
PPTX
M Tech Sem 1 Civil Engineering Environmental Sciences.pptx
PPTX
web development for engineering and engineering
PDF
composite construction of structures.pdf
PPT
Project quality management in manufacturing
PDF
Mitigating Risks through Effective Management for Enhancing Organizational Pe...
PPT
Mechanical Engineering MATERIALS Selection
PPTX
MCN 401 KTU-2019-PPE KITS-MODULE 2.pptx
PDF
Evaluating the Democratization of the Turkish Armed Forces from a Normative P...
Engineering Ethics, Safety and Environment [Autosaved] (1).pptx
additive manufacturing of ss316l using mig welding
Recipes for Real Time Voice AI WebRTC, SLMs and Open Source Software.pptx
UNIT 4 Total Quality Management .pptx
Lesson 3_Tessellation.pptx finite Mathematics
UNIT-1 - COAL BASED THERMAL POWER PLANTS
ASol_English-Language-Literature-Set-1-27-02-2023-converted.docx
Operating System & Kernel Study Guide-1 - converted.pdf
Well-logging-methods_new................
bas. eng. economics group 4 presentation 1.pptx
Strings in CPP - Strings in C++ are sequences of characters used to store and...
Model Code of Practice - Construction Work - 21102022 .pdf
M Tech Sem 1 Civil Engineering Environmental Sciences.pptx
web development for engineering and engineering
composite construction of structures.pdf
Project quality management in manufacturing
Mitigating Risks through Effective Management for Enhancing Organizational Pe...
Mechanical Engineering MATERIALS Selection
MCN 401 KTU-2019-PPE KITS-MODULE 2.pptx
Evaluating the Democratization of the Turkish Armed Forces from a Normative P...

QuizUp Web Monorepo

  • 1. PUTTING THE PANTS ON JAVASCRIPT HOW WE CREATED A MONOREPO FOR OUR WEBS
  • 2. Painpoints of multiple projects • Setup phase of every repo • Different deployments • Code rots in old projects - no one wants to touch them • No code sharing • Updating dependencies web-tools tvadmin editor web-client web-lab !
  • 3. The motivation • We have a server monorepo using Pants • Same structure for every project • Simpler workflow when working in multiple services at once • Updating one dependency deploys all services • Single setup, code sharing etc... all the servers in one repo "
  • 4. Implementation all the webs in one repo " • Pants Node contrib module Inspired by Pants • DEPENDENCIES.js • JS scripts for task running • CI scripts for selective deployment
  • 6. Implementation all the webs in one repo " • Pants Node contrib module Inspired by Pants • DEPENDENCIES.js • JS scripts for task running • CI scripts for selective deployment
  • 8. Implementation all the webs in one repo " • Pants Node contrib module Inspired by Pants • DEPENDENCIES.js • JS scripts for task running • CI scripts for selective deployment
  • 10. changedTargets.js 1. Creates dependency map of whole repo 2. Did service code change? 3. Did npm dependencies change? 4. Did shared code change?
  • 12. Benefits • Consistent code style - shared ESLint, Stylelint and Flow configs • Greenkeeper - All projects up to date at all times • Code is sharable by default • No bootstrap phase - just write code • All boilerplate code sharable in a single place • Super easy onboarding, try one project -> know them all!