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