Building Large Angular Applications with Bazel - Angular Toronto

Introduction to building Angular applications with Bazel, and how it's improved our workflow and development experience at Evertz Microsystems

Transcript

1. Building Large* Angular Applications with bazel Matt Mackay Evertz Microsystems
2. @MattMackay Build and Developer Infrastructure Technical Lead Evertz Microsystems
3. ~ 10 components ~ 100 components ~ 1000 components ~ 2000 components
4. ~ 1500 components ~ 4500 typescript files ~ 200 engineering team
5. What is bazel? Why would we use it?
6. No way to easily test changes across the entire stack Required tools vary between projects, onboarding and setup time is high Dependencies between parts of the codebase are completely unknown Round trip times are too high, feedback to developer is not quick enough
7. tl;dr “my build is slow” - UI Development Team
8. Incremental - Rebuild time is proportional to what you changed Deterministic - Can cache build results based on their inputs Hermetic - Enabling remote execution, more aggressive parallelization Composable - Bazel plugins are like Unix pipes, output of one is the input to another Universal - Not just for Angular. Builds backends, other frontend libraries, Android... {Fast, Correct} - Choose two
9. Angular CLI opt-in preview https://angular.io/guide/bazel
10. Builders API @angular/ bazel @angular-devkit/ build-angular tsc (Typescript) Webpack Rollup ngc (Angular Compiler)
11. Devserver (Go) ngc tsc sass
12. playout graphics Devserver (Go) graphing users ... timeline editor ... ... ... ... form ... ... form.component.ts form.module.ts form.component.html
13. ├── graphics │ ├── BUILD │ ├── _graphics.theme.scss │ ├── editor │ │ ├── BUILD │ │ ├── _editor.theme.scss │ │ ├── editor.component.html │ │ ├── editor.component.scss │ │ ├── editor.component.spec.ts │ │ ├── editor.component.ts │ │ └── editor.module.ts │ ├── form │ │ ├── BUILD │ │ ├── form.component.html │ │ ├── form.component.scss │ │ ├── form.component.spec.ts │ │ ├── form.component.ts │ │ └── form.module.ts
14. BUILD Files
15. bazel build //graphics/form
16. BUILD Files
17. bazel test //graphics/form:test
18. Bazel Query https://docs.bazel.build/versions/master/query-how-to.html
20. Remote caching allows build and test results to be shared across clients Remote execution allows build and test actions to be fanned out across remote CPUs
21. Cache Results
22. Devserver Migration Path Tests Production https://youtu.be/UwuRGpVpmbo Bazel Migration Patterns, Alex Eagle & Greg Magolan
23. ~80% time decrease on tests
24. Dependencies between parts of the codebase are completely unknown Bazel query can show how parts of the codebase are connected Round trip times are too high, feedback to developer is not quick enough Only rebuild and tests the parts of the codebase that has changed
25. Required tools vary between projects, onboarding and setup time is high Bazel can handle many different languages and fetch required dependencies Bazel downloads required tools (NodeJS, npm etc)
26. Those bazel builds are really making a difference on the build times - where the majority of the tests have already been performed. It’s like 1-2 mins tops Freaking yeah David Taylor, Mediator UI Technical Lead, Evertz Microsystems
27. Getting started with Bazel and Angular https://angular.io/guide/bazel Bazel documentation https://bazel.build rules_nodejs https://github.com/bazelbuild/rules_nodejs bzlgen - generating BUILD files for Angular, Typescript and more https://github.com/evertz/bzlgen Bazel migration patterns https://youtu.be/UwuRGpVpmbo Thank you