Lesson learned after using Bazel

Who am I

  • Name: Jia Li
  • Company: Sylabs.io
  • Zone.js: Maintainer
  • Angular: Trusted Collaborator
  • @JiaLiPassion

Bazel

  • Bazel introduction
  • Bazel in typescript project

Bazel is Hub

Bazel benefit

  • Incremental
  • FullStack Build and test
  • Scalable with the cloud
  • Extensible

Current: Gulp.js

Gulp.js

  • Slow
  • Hard to debug and Maintain
  • ...

result = f(input)

pure functional builds

  • results only depends on inputs
  • no side effects
  • sandbox execution

Builds are Analyzable

  • All inputs declared
  • All outputs declared
  • Graph

Demo

// date.ts
export function formatDate(d: Date) {
  return `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}!!`;
}

// user.ts
import { formatDate } from './date';

/** Data object representing a User. */
export class User {
  constructor(readonly name: string, readonly birthday: Date) {}

  toString() {
    return `${this.name}, born on ${formatDate(this.birthday)}`;
  }
}

// birthday_card.ts
import { User } from './user';

/** Prints a birthday greeting for the given user to the console. */
export function printBirthdayGreeting(user: User) {
  console.log(`Happy birthday ${user.name}, ${user.birthday} is your day!`);
}

Bazel Build.bazel

ts_library(
    name = "date",
    srcs = ["date.ts"],
)

ts_library(
    name = "user",
    srcs = [
        "name_formatting.ts",
        "user.ts",
    ],
    deps = [":date"],
)

ts_library(
    name = "birthday_card",
    srcs = ["birthday.ts"],
    deps = [
        ":date",
        ":user",
    ],
)

Starlark

bazel query

Bazel file is a collection of rules, not actions

Demo update user.ts toString

Demo umd bundle

Use shelljs to test

The problems I met

  • More friendly error messages
  • File copy/mv is hard...
  • need more documentation

References