An introduction angular cli 8 with bazel

1. Angular CLI with Bazel

2. UI/UX Designer / Frontend Developer
Muhammad Afif A. H
@afifalfiano8 @afifalfianoafifalfiano
Follow me on:

3. “BAZEL DOESN’T REPLACE
YOUR FAVORIT BUILD
TOOLS. IT GIVES THEM
SUPERPOWERS!”
WASSIM CHEGHAM
https://www.youtube.com/watch?v=iD2OdL3HKkE
Supercharge your builds with Bazel by Wassim Chegham

4. Re-build time is proportional to
what you changed
Incremental
01
We can cache build results
based on their inputs
Deterministic
02
Allows features like remote
execution, parallelization
Hermetic03
Why Bazel?
Googlers have beat on this thing
in every way
Industrial Grade
04
Builds Android, iOS, web, backends,
cloud services, and more
Universal
05

5. 01
Who is using Bazel?

6. What is Bazel?
Bazel builds software from source code organized
in a directory called a workspace. Source files in
the workspace are organized in a nested hierarchy
of packages, where each package is a directory
that contains a set of related source files and one
BUILD file. The BUILD file specifies what software
outputs can be built from the source.

7. Core Concept (Workspace)
A workspace is a directory on
your filesystem that contains
the source files for the
software you want to build, as
well as symbolic links to
directories that contain the
build outputs

8. Core Concept (Repositories)
Code is organized in repositories.
The directory containing the
WORKSPACE file is the root of the
main repository, also called @.
Other, (external) repositories are
defined in the WORKSPACE file
using workspace rules.

9. Core Concept (Packages)
The primary unit of code organization in a repository is the package. A
package is a collection of related files and a specification of the
dependencies among them.

10. Core Concept (Rules)
A rule specifies the relationship
between inputs and outputs,
and the steps to build the
outputs. Rules can be of one of
many different kinds or classes,
which produce compiled
executables and libraries, test
executables and other
supported outputs as described
in the Build Encyclopedia.

11. Core Concept (BUILD files)
By definition, every package contains
a BUILD file, which is a short program.
BUILD files are evaluated using an
imperative language, Starlark. They
are interpreted as a sequential list of
statements.

12. Core Concept (Labels)
All targets belong to exactly one package. The name of a target is called
its label, and a typical label in canonical form looks like this:

13. How does Bazel work?
Loads the BUILD files relevant to the target.
Loads
Analyzes the inputs and their dependencies, applies the
specified build rules, and produces an action graph.
Analyzes
Executes the build actions on the inputs until the final
build outputs are produced.
Executes
01
02
03
01
02
03
Since all previous build work is cached, Bazel can identify and reuse
cached artifacts and only rebuild or retest what’s changed.

14. How to use Bazel?
01
02
03
01
02
03
Existing Project New Project
Make sure we have installed angular-cli and bazel globally

15. Customize Bazel
Bazel is zero configuration. We need to run this command to customize the
configuration bazel.

16. Customize Bazel
Before After

17. Bazel Query
Bazel’s query language to trace dependencies in your code.

18. Bazel Query
Prodserver Devserver

19. External Angular Module
To use an external module angular we need to edit angular-metadata.tsconfig.json and BUILD.bazel
angular-metadata.tsconfig.json BUILD.bazel

20. Third Party Library
To use a third party library we need to create require.config.js file and edit BUILD.bazel
require.config.js BUILD.bazel

21. DEMO
https://github.com/afifalfiano/load-test-bazel
Run the command:
npm install && npm run build && bazel run //src:devserver

22. References
• https://blog.ninja-squad.com/2019/05/14/build-your-angular-application-
with-bazel/
• http://slack.bazel.build/
• https://bazel.build/
• https://github.com/bazelbuild/rules_nodejs/tree/master/examples
• https://medium.com/tokopedia-engineering/how-tokopedia-achieved-100
0-faster-ios-build-time-7664b2d8ae5
• https://www.youtube.com/watch?v=iD2OdL3HKkE - Supercharge your
builds with Bazel by Wassim Chegham

23. THANK YOU