"How to Use Bazel to Manage Monorepos: The Grammarly Front-End Team’s Experience", Oleksii Levzhynskyi
0 likes537 views
At some point, we reached the limit of the existing build process in the Grammarly Editor monorepo. Build tools required too much time to support, and each new package increased build time and made dependency management harder. To move further, we had to rethink the architecture of the build process. Our solution: We switched to Bazel. In this talk, I will share our findings and how we made the architecture of the build process scalable and predictable.
![Example project: simplified version of OnlineEditor
1. [TODO] build app with webpack
2. [TODO] tests
3. [TODO] dev-server for app
30](https://image.slidesharecdn.com/howtousebazeltomanagemonoreposthegrammarlyfront-endteamsexperience-211129112329/85/How-to-Use-Bazel-to-Manage-Monorepos-The-Grammarly-Front-End-Team-s-Experience-Oleksii-Levzhynskyi-30-320.jpg)
![Example project: simplified version of OnlineEditor
1. [DONE] build app with webpack
2. [DONE] tests
3. [TODO] dev-server for app
40](https://image.slidesharecdn.com/howtousebazeltomanagemonoreposthegrammarlyfront-endteamsexperience-211129112329/85/How-to-Use-Bazel-to-Manage-Monorepos-The-Grammarly-Front-End-Team-s-Experience-Oleksii-Levzhynskyi-40-320.jpg)
![Example project: simplified version of OnlineEditor
1. [DONE] build app with webpack
2. [DONE] tests
3. [DONE] dev-server for app
47](https://image.slidesharecdn.com/howtousebazeltomanagemonoreposthegrammarlyfront-endteamsexperience-211129112329/85/How-to-Use-Bazel-to-Manage-Monorepos-The-Grammarly-Front-End-Team-s-Experience-Oleksii-Levzhynskyi-47-320.jpg)
![[NDC16] Effective Git](https://cdn.slidesharecdn.com/ss_thumbnails/effectivegit-160428075751-thumbnail.jpg?width=560&fit=bounds)
![[Golang] 以 Mobile App 工程師視角，帶你進入 Golang 的世界 (Introduction of GoLang)](https://cdn.slidesharecdn.com/ss_thumbnails/introductionofgolang-230426113308-b649ee14-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (20)
Similar to "How to Use Bazel to Manage Monorepos: The Grammarly Front-End Team’s Experience", Oleksii Levzhynskyi (20)
Ad
More from Fwdays (20)
![[QUICK TALK] "Why Some Teams Grow Better Under Pressure", Oleksandr Marchenko...](https://cdn.slidesharecdn.com/ss_thumbnails/softskillsfwdays25-250317080651-1a2cccb1-thumbnail.jpg?width=560&fit=bounds)
![[QUICK TALK] "How to study to acquire a skill, not a certificate?", Uliana Du...](https://cdn.slidesharecdn.com/ss_thumbnails/ulianadutchakhowtostudytoacquireaskillnotacertificate-250317080232-421f309c-thumbnail.jpg?width=560&fit=bounds)
![[QUICK TALK] "Coaching 101: How to Identify and Develop Your Leadership Quali...](https://cdn.slidesharecdn.com/ss_thumbnails/softskillsfwdays25ilonalesko-250317075721-cb56ed6c-thumbnail.jpg?width=560&fit=bounds)
Ad
Recently uploaded (20)
"How to Use Bazel to Manage Monorepos: The Grammarly Front-End Team’s Experience", Oleksii Levzhynskyi
- 1. 1
- 2. ● Tech Lead, Software Engineer ● The Grammarly Editor ● Grammarly browser extension (past) ● @grammarly/focal contributor Oleksii Levzhynskyi
- 4. 2. The limitations that we've faced Agenda 4 1. Why use monorepo? 3. Short intro to Bazel 4. Almost real-world example of webapp with Bazel 5. Results and conclusions
- 6. @g/utils @g/textarea @g/editor @g/webapp Why use monorepo? 6
- 7. Alarm!! Vulnerability in tests dependency!!! @g/utils @g/textarea @g/editor @g/webapp Why use monorepo? 7
- 8. Alarm!! Vulnerability in tests dependency!!! @g/utils @g/textarea @g/editor @g/webapp Why use monorepo? 8
- 9. 1 2 3 Why use monorepo? All changes in one MR One place for all configs No need to repeat configuration or project setup (CI/CD, pull request config, dev config, so on) No abandoned packages No long chains of MR to update one line
- 10. Monorepo v1: yarn workspaces + wsrun 10
- 11. Monorepo v1: CI Build Deploy to stagings Verify Reports (danger, custom e2e reporter) units linters e2e 11
- 12. Monorepo v1: CI Build Deploy to stagings Verify Reports (danger, custom e2e reporter) units linters e2e integration performance a11y business metrics 12
- 13. Monorepo v1: Dependency management dep1 (tsc) dep2 (rollup) dep12 (tsc) dep3 (webpack) webapp_1 webapp_2 13
- 14. .segnahc elif rof gnihctaW 14
- 15. 15
- 16. Monorepo v1: No caching/smart rebuilds for affected changes 16 Build on CI was ~50 minutes even for “isolated” packages (Ex: scripts for release or e2e tests)
- 17. New packages should not affect average build time (ideally) Build only things that matter build tools as a dependency Remote execution The new Architecture Not only JS
- 18. 18 utils build:esm build:cjs specs licenses core-functions build:esm build:cjs specs licenses webapp build:esm build:cjs specs licenses app for modern browsers Build only things that matter!
- 19. Custom scripts yarn workspaces/lerna Microsoft rush Existing tools Bazel
- 20. Bazel is a mature framework with huge community and stable architecture 20
- 22. Bazel intro
- 23. Basics: commands 23 bazel build bazel run bazel test
- 24. Basics: pure builds; the “unix philosophy” Sources Output_1 Build Output_1 web app Build 24
- 25. Basics: macros and starlark language 25
- 27. Build-specific configs - package.json - tsconfig.cjs.json - tsconfig.esm.json - webpack.config.js Integration with IDE - package.json - tsconfig.json BUILD.bazel as a source of truth 27 BUILD.bazel
- 29. Example project
- 30. Example project: simplified version of OnlineEditor 1. [TODO] build app with webpack 2. [TODO] tests 3. [TODO] dev-server for app 30
- 35. Tests with jest (official example) 35 tools/jest/index.bzl
- 36. Tests with jest (official example) 36 tools/jest/index.bzl
- 38. 38 yarn bazel test //...
- 39. Build tool as a dependency 39 tools/webpack/index.bzl packages/webapp/BUILD.bazel
- 40. Example project: simplified version of OnlineEditor 1. [DONE] build app with webpack 2. [DONE] tests 3. [TODO] dev-server for app 40
- 43. ibazel run //packages/webapp:serve 43 + webpack plugin to avoid watch conflicts
- 45. incremental build with webpack Super fast with Bazel “worker mode” protocol 45 webpack dev build serve files (es-dev-server or similar)
- 46. Real world results: ○ time of the cold build on CI: wasn’t really changed ○ time of the hot build on CI: 2 minutes, was 10 minutes (5 times as fast!) ○ time of the hot start locally: 5 seconds, was 4 minutes (~50 times as fast!) ○ dependency builds automatically without additional code changes ○ no packages with broken scripts in packages.json 46
- 47. Example project: simplified version of OnlineEditor 1. [DONE] build app with webpack 2. [DONE] tests 3. [DONE] dev-server for app 47
- 48. 48 + typescript build for “utils” package https://github.com/oleksiilevzhynskyi/bazel-web-monorepo
- 49. It’s scalable! It’s fast! It works! 49
- 50. Not like other front-end build tools It’s a challenge to wrap some front-end tools into Bazel as they use “conventions over configuration” approach Challenges The learning curve is high
- 51. Need caching When to use it? 51 Huge monorepos with complex dependency chain Some parts should be build on specific env
- 52. Thank you 52
- 53. 53 devua.club //uncomment BASIC Programming stream Grammarly Engineering Digest: Sign Up Here
- 54. Join us at Grammarly 54