Why another build tool...

What is Bazel...

How to get started...

JavaScript build ecosystem is broken...

@ManekiNekko

Build time Number of files...

∝

It takes a long time to rebuild...

@ManekiNekko

"It builds on my machine" syndrome.

@ManekiNekko

Wassim Chegham

Microsoft

Senior Developer Advocate

@manekinekko

@wassimchegham

https://wassim.dev

hexa.run

xLayers.dev

nitr.ooo

ngx.tools

catsify.app

THANK YOU!

GitHub Sponsors

Santosh Yadav

santoshyadav.dev

Ayoub Youb

youbayoub.com

Lucas JAHIER

jahier.dev

@ManekiNekko

Supercharge your builds...

BAZEL does not replace your favorite build tools.

It gives them superpowers!

@ManekiNekko

BAZEL Benefits...

Incremental

Deterministic

Hermetic

Composable

Industrial grade

@ManekiNekko

Universally Polyglot...

Android, C & C++, C#, Go, Groovy, Java, JavaScript, OCaml, C, Proto Buffers, Python, Rust, Sass, Scala, Shell, TypeScript, etc...

@ManekiNekko

Who's using BAZEL?

@ManekiNekko

Bazel basic concepts...

Just what you need to know to get started

@ManekiNekko

Concept #1: file

Defines, loads and setups all the dependencies (external repositories).

WORKSPACE

@rules_nodejs// on master and ⬢ v14.1.0
➜ find ./ -iname "WORKSPACE"
.//WORKSPACE
.//examples/angular/WORKSPACE
.//examples/kotlin/WORKSPACE
.//examples/angular_view_engine/WORKSPACE
.//examples/nestjs/WORKSPACE
.//packages/labs/src/WORKSPACE
.//packages/typescript/src/WORKSPACE
.//packages/karma/src/WORKSPACE
.//packages/rollup/src/WORKSPACE
.//packages/terser/src/WORKSPACE
.//packages/jasmine/src/WORKSPACE
.//packages/protractor/src/WORKSPACE
.//e2e/jasmine/WORKSPACE
...

@ManekiNekko

Concept #1: Workspace

A package defines a set of instructions about how to build, test and run the current package.

@ManekiNekko

Concept #2: package

The primary unit of code organization in a workspace. A folder containing a file named

BUILD.bazel

@ManekiNekko

Concept #2:

BUILD.bazel

@rules_nodejs// on master and ⬢ v13.7.0
➜ find ./ -iname "BUILD.bazel"
./internal/BUILD.bazel
./internal/linker/test/BUILD.bazel
./internal/linker/BUILD.bazel
./internal/pkg_npm/test/BUILD.bazel
./internal/pkg_npm/BUILD.bazel
./internal/golden_file_test/BUILD.bazel
./internal/providers/BUILD.bazel
./internal/js_library/BUILD.bazel
./internal/common/test/BUILD.bazel
./internal/common/BUILD.bazel
./internal/bazel_integration_test/BUILD.bazel
./internal/node/test/lib1/BUILD.bazel
./internal/node/test/BUILD.bazel
...

package(default_visibility = ["//visibility:public"])
load("@io_bazel_rules_rust//rust:rust.bzl", "rust_binary")
load("@io_bazel_rules_rust//wasm_bindgen:wasm_bindgen.bzl", "rust_wasm_bindgen")

rust_binary(
    name = "hello_world_rust",
    srcs = ["main.rs"],
    edition = "2018",
    deps = [
        "@io_bazel_rules_rust//wasm_bindgen/raze:wasm_bindgen"
    ]   
)

rust_wasm_bindgen(
    name = "hello_world_bindgen",
    wasm_file = ":hello_world_rust",
    bindgen_flags = ["--nodejs"]
)

@ManekiNekko

Concept #2: Package content

Keep packages as fine-grained as possible to improve parallelism!

@ManekiNekko

Concept #2: Package PRO TIP

The relationship between inputs and outputs, and the steps to build the outputs.

@ManekiNekko

Concept #3: Rule

@ManekiNekko

Concept #3: Rule example

# //src/lib/shorten/BUILD.bazel

ts_library(
    name = "shorten",
    srcs = ["shorten.ts"],
    module_name = "@bazel/shorten",
    module_root = "shorten",
    deps = [
        "//some/dep",
        "@npm//other/dep",
    ],
)

# Output: 
# - shorten.d.ts
# - shorten.js

Concept #3: Rules Composition

@ManekiNekko

ts_library()

rollup_bundle()

@angular/core/**/*.ts

./core.js

./core.d.ts

./bundles/core.umd.js

@ManekiNekko

Concept #4: Actions

action(x)=y

tsc -p tsconfig.json ...

ts_library()

ACTION

Concept #5: Execution Graph

@ManekiNekko

Concept #6: Cache Graph

ACTION

@ManekiNekko

Concept #6: Cache Graph

SHA1

@ManekiNekko

Concept #6: Cache Graph

SHA1

@ManekiNekko

Concept #6: Cache Graph

SHA1

@ManekiNekko

Local Cache & Execution

code

local BAZEL's cache

local BAZEL execution

@ManekiNekko

code

Remote BAZEL's cache

remote BAZEL execution

Dynamic BAZEL execution

Remote Cache* & Execution*

* Needs to be configured separately! (read more)

@ManekiNekko

Remote Cache with Azure

@ManekiNekko

az group create --name bazel-cache --location eastus
az vm create \                                                                                    
   --resource-group bazel-cache \
   --name bazelCache \
   --image UbuntuLTS \
   --admin-username bazel \
   --generate-ssh-keys
az vm open-port --port 80 \
   --resource-group bazel-cache \
   --name bazelCache

ssh bazel@ip 

sudo apt-get install -y nginx nginx-extras
sudo mkdir /cache
sudo chmod 0777 -R /cache

bazel build //... --remote_cache=http://ip/cache/

GitHub: https://github.com/manekinekko/catsify

Demo: catsify.app

@ManekiNekko

Azure Static Web Apps CI/CD 🔥

@ManekiNekko

Try Bazel today!

Read the QuickStart

@ManekiNekko

 npm init @bazel my_workspace

This was an intro to BAZEL. Check my other talk for an in-depth explanation!

@ManekiNekko

bazel.build

try Azure Static Web Apps (free)

catsify source code

bazelbuild/rules_nodejs

build Azure Functions with Bazel

All cartoons used in this deck are under the Adobe Stock Standard License terms. Read more: https://stock.adobe.com/license-terms

Resources

dev.to/wassimchegham

dev.to/angular

dev.to/bazel

wassim.dev

@manekinekko

Super Charge Your Builds With Bazel (NgVikings 2020)

By Wassim Chegham

Super Charge Your Builds With Bazel (NgVikings 2020)

This is a short introduction to Bazel, the orchestration build and test tool. We will cover the concepts of Bazel such as Workspaces, Packages, and Labels, as well as writing custom rules. We will demo how to build a WASM code written in Rust and deploy it on Azure Functions.

3,766

Wassim Chegham PRO

Senior Developer Advocate @Microsoft ★ Angular contributor ★ Bazel contributor ★ GDE @Google ★ creator of @itsjustangular / hueaction.dev / ngx.tools / xlayers.dev / angular.run / thundr.dev