Justin Fagnani

@justinfagnani

Building something new... Previously at Google. Web maximalist. Web components. WebAssembly. Creator of Lit. Oakland.

464 Following2,018 Followers2,165 Posts

Bluesky

Is this your profile?Claim it and justinfagnani.dirty.social is yours.Claim profile

Justin Fagnani@justinfagnani· 4d

Working on the high-level description of Zena's type system...

Sound, static, & expressive type system

Zena is statically, strictly, and soundly typed from the ground up. Type safety
is guaranteed at compile time, and there are no runtime type errors.

Much of this is required for Zena to compile to efficient Wasm, but Zena goes
further to close common soundness holes:

- **Non-nullable references**: References are non-nullable by default. `null` is
added to types via standard unions.
- **No implicit type coercion**: Zena does not perform implicit type coercion
- **No unchecked casts**: Downcasts are checked at runtime. This ensures runtime
soundness.
- **No `any` type**: Because there is no Wasm GC `any` type, Zena doesn't
include it, and never has to automatically box primitive values. Zena
includes Wasm's `anyref` instead.
- **Restrictions on unions**: Union types cannot mix primitives, or contain
primitives and references, to ensure that types are always runtime
distinguishable. Unions cannot be cast to to keep casts a single runtime
operation.
- **Generics are reified**: `Array<Foo>` and `Array<Bar>` compile to different
types in Wasm, and type checks work with generics, like `is Array<Foo>`.
- **Guaranteed class initialization**: Zena adopts Dart-style initializer lists
so that `this` references never escape a constructor before being fully
initialized, so classes never lie about the types of their fields.

On top of this, Zena adds powerful and ergonomic type system features:

- **Nominal and structural typing**: Classes, interfaces, and mixins are
nominal, while records, tuples, and functions are structural.
- **Affine types**: `Own<>` and `Borrow<>` types provide compile-time
control over ownership and borrowing without complex lifetime annotations.
- **Distinct and opaque types**: `distinct` and `opaque` type aliases create
new nominal names for existing types to help avoid accidentally mixing
values that happen to share the same underlying type.
- **Extension classes**: Extension classes …

Justin Fagnani@justinfagnani· 5d

For example, here's the Zena syntax overview:

## TypeScript-inspired syntax

Zena's syntax is directly inspired by TypeScript, with familiar expressions,
functions, object literals (records in Zena), classes, type annotations, strings,
template literals, destructuring/spread, enums, imports/exports, and more nearly identical to TypeScript

This familiarity makes Zena code intuitive to read and write for humans and
AI tools alike, with virtually no ramp-up time for syntax.

However, Zena deliberately diverges from JavaScript to avoid historical baggage
and add ergonomic improvements:

- `var` is block scoped, `let` is immuatble.
- Pattern-matching `match` replaces `switch`.
- `if`, `match`, `try`, `throw`, `return`, `continue`, and `break` are
expressions.
- `if/let` and `while/let` allow local declarations, and
along with `for/let`, allow patterns in their conditions.
- Map literals with `{key1 => value1, key2 => value2}` syntax.
- No ternary operator so there's no ambiguity with optional chaining or
nullable type shorthand. Use `if` expressions instead.
- No `++` or `--` operators. Use `+=` and `-=` instead.
- Class accessors are grouped, forcing consistent types.
- Optional chaining doesn't require a `.`: `o?.x`, `o?()`, and `o?[k]` are all valid.
- `as` is used to rename destructured object properties, matching `import`.
This is more clear than `:` and resolves ambiguities with pattern matching.
- No `for-of` loops. `for-in` is the iterator protocol loop.
- `from 'path' import {...};` syntax.
- Semicolons are required.

This syntax evolution helps Zena be pleasant and consistent, while still being easy to adopt.

Justin Fagnani@justinfagnani· 19d

Removed the bootstrap TypeScript-based compiler from Zena today 🥳 Thanks TypeScript, you served us well!

A screenshot of a PR named "Delete the TypeScript compiler"

And stats:

531 changed files with 254 additions and 109524 deletions

Justin Fagnani@justinfagnani· Jul 23

With diagnostics, of course:

A code snippet showing a "Variable 'name' is never read" diagnostic.

Justin Fagnani@justinfagnani· Jul 23

Working on a Zena playground for the upcoming web site...

An online code playground for Zena, with a program running to produce "Hello, Zena Developers!"

Justin Fagnani@justinfagnani· Jun 27

Hey @developers.google.com Feedback is broken in Antigravity, and I don't see any other way to provide feedback on the broken feedback. I also don't see an Antigravity account here, but I sure as hell am not going to "join the conversation" on Twitter.

Justin Fagnani@justinfagnani· Jun 16

Holy shit that was good

Justin Fagnani@justinfagnani· Jun 16

I'm seeing Sylvan Esso tonight at pretty much the smallest venue I can imagine then playing at. Easily 20x smaller than I've seen them at before. Like a preschool gym!

Justin Fagnani@justinfagnani· May 11

Oh, so this is how it starts...

Justin Fagnani@justinfagnani· May 11

Parked in front of a very normal building last night.

Justin Fagnani@justinfagnani· May 10

Justin Fagnani@justinfagnani· May 7

This is one of the dumbest things I've ever seen. Bad teams should have a chance to get better. This destroys the pre-lotto value of picks, so the only thing bad teams have left is the ability to take on bad contracts - but that was usually done for picks! How are teams supposed to get better?

Justin Fagnani@justinfagnani· Apr 30

Working on a design for data oriented design within Zena. I think I have smthng that works based on "inline classes" - non-heap classes whose fields are always scalar replaced to locals. Then a struct-of-arrays wrapping class can hold state for the arrays and its index, but not pay any deref cost

Justin Fagnani@justinfagnani· Apr 21

Yep. It's fairly close and could switch in the future, but it's been relatively stable for years:

Justin Fagnani@justinfagnani· Apr 17

Justin Fagnani@justinfagnani· Apr 12

First diagnostics showing up in the Zena VS Code extension!

A screenshot of a type error in Zena code being highlighted in VS Code.

Justin Fagnani@justinfagnani· Apr 6

Awesome morning ballooning over Teotihuacán! 🎈

Justin Fagnani@justinfagnani· Apr 2

A small DX win in Zena: I chose `as` as the renaming operator for destructuring - so `{x as a}` instead of `{x : a}`. This frees up `{x : a}` for use as function parameter destructuring with an included type, instead of the `{x} : {x : String}` that you have to do in TypeScript. Nice and clean!

A screenshot with some code that says:

Instead of:

```typescript
({x, y}: {x: i32, y: i32}) => x;
```

You write:

```zena
({x: i32, y: i32}) => x;
```

Justin Fagnani@justinfagnani· Mar 31

Writing a self-hosted compiler is awesome, because as soon as you want a new feature to make writing the compiler easier, you can just change the language and then use it! My Zena AST was getting too verbose, so I added sealed and data classes (kind of like tagged unions) to make it more compact.

Justin Fagnani@justinfagnani· Mar 30

I believe it's plausible - there's mechanism & precedent. It'd be unbelievable if there _weren't_ a heat island effect. But 6.2 miles away? On the same magnitude as major cities? I really want to know how they control for other nearby development. This chart shows a clear time correlation, though:

Justin Fagnani@justinfagnani· Mar 23

I've been tightening up classes & fields in Zena. - Default immutable fields - `var` for mutable field - `#x` for private field - `var(#x) x` for public field with a private setter - Initializer lists: all non-nullable fields must be initialized - Constructor bodies see fully initialized `this`

An example of a Zena class with various public, private, mutable, and immutable fields, and constructor initialize lists.

Justin Fagnani@justinfagnani· Mar 18

Nice result in @zeroheight.com's 2026 Design Systems Report: report.zeroheight.com#your-tools Web components are the second-most used "framework" among the respondents. This makes sense: if you build web components you support all the frameworks. Otherwise, you'd probably only support React.

A chart showing responses for the question "What frameworks do you use?":

- React: 72%
- Web components: 36%
- Angular: 28%
- Vue: 18%
- Stencil: 7%
- Svelte: 4%

Justin Fagnani@justinfagnani· Mar 12

I just noticed that @lit.dev crossed the 5M downloads/week mark on npm! 🎉 That's more than 2x in the last year, and 6x in the last three years 🚀

A graph from npmtrends.com of lit downloads over the last 5 years, showing growth from 0 to 5,000,000

Justin Fagnani@justinfagnani· Mar 12

npm monorepo users: Update to npm v11.11.1 and add `install-strategy=linked` to your .npmrc Every workspace package and each installed package will get its own isolated set of dependencies, in its ow node_modules folder, symlinked into a repo-central store. docs.npmjs.com/cli/v9/comma...

An .npmrc file with install-strategy=linked

Justin Fagnani@justinfagnani· Feb 28

Few people know that Polymer was the first web framework* in space, powering the Crew Dragon Capsule UI! * library, actually. Polymer just makes web components.

Justin Fagnani@justinfagnani· Feb 13

Also, this Brian Eno quote has been really stuck in my head for weeks: "The great benefit of computer sequencers is that they remove the issue of skill, and replace it with the issue of judgement. ... the question then is, "Of all the things you can now do, which do you choose to do?""

The great benefit of computer sequencers is that they remove the issue of skill, and replace it with the issue of judgement.

With Cubase or Photoshop, anybody can actually do anything, and you can make stuff that sounds very much like stuff you’d hear on the radio, or looks very much like anything you see in magazines.

So the question becomes not whether you can do it or not, because any drudge can do it if they’re prepared to sit in front of the computer for a few days, the question then is, "Of all the things you can now do, which do you choose to do? "

--Brian Eno

Justin Fagnani@justinfagnani· Feb 5

This is incredible! That gap and proper outline behavior are just impossible today.

A breadcrumb UI where segments are chevron-shaped. There's a gap between segments, and the currently focused segment has a browser-drawn outline applied to it.

Justin Fagnani@justinfagnani· Feb 1

Here's a trickier example: export main = () => "hello"; That uses the String class, and since WASM doesn't have strings, we need to export functions to read the length and byes from strings. Output is still very small!

Justin Fagnani@justinfagnani· Jan 19

CSS corner-shape is awesome, but I wish there were some kind of `inset` option so that I could more easily make shapes like these, and actually get the borders to behave correctly. `inset` would invert the bevel, so it pointed inward instead of outward.

A breadcrumb component where the ends of the crumbs are darted to the right.

Justin Fagnani@justinfagnani· Jan 18

I really don't love the new feed icons. They're brighter than just about everything else on the page. Very distracting.