Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Boxed: bringing algebraic types to TypeScript
Search
Matthias Le Brun
March 27, 2024
Technology
0
97
Boxed: bringing algebraic types to TypeScript
Matthias Le Brun
March 27, 2024
Tweet
Share
More Decks by Matthias Le Brun
See All by Matthias Le Brun
(why the hell did I) build a GraphQL client for the browser
bloodyowl
0
78
leveraging (algebraic data) types to make your UI rock @ jsheroes
bloodyowl
0
280
Leveraging (algebraic data) types to make your UI rock solid
bloodyowl
0
390
La drôle d'histoire de JavaScript
bloodyowl
0
350
Healthy Code Collaboration
bloodyowl
0
270
Simplify your UI management with (algebraic data) types
bloodyowl
0
800
Simplify your UI management with (algebraic data) types
bloodyowl
1
520
Migrating a large Reason+React codebase to hooks
bloodyowl
0
540
Third Party Hell (BestOfWeb)
bloodyowl
0
610
Other Decks in Technology
See All in Technology
AIコーディング新時代を生き残るための試行錯誤 / AI Coding Survival Guide
tomohisa
9
12k
生成AIをテストプロセスに活用し"よう"としている話 #jasstnano
makky_tyuyan
0
140
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
12k
讓測試不再 BB! 從 BDD 到 CI/CD, 不靠人力也能 MVP
line_developers_tw
PRO
0
120
白金鉱業Meetup_Vol.19_PoCはデモで語れ!顧客の本音とインサイトを引き出すソリューション構築
brainpadpr
2
270
Autonomous Database サービス・アップデート (FY25)
oracle4engineer
PRO
2
760
技術職じゃない私がVibe Codingで感じた、AGIが身近になる未来
blueb
0
120
産業機械をElixirで制御する
kikuyuta
0
160
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
Grafana MCP serverでなんかし隊 / Try Grafana MCP server
kohbis
0
330
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
7.2k
エンジニア採用から始まる技術広報と組織づくり/202506lt
nishiuma
8
1.6k
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
Side Projects
sachag
454
42k
We Have a Design System, Now What?
morganepeng
52
7.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Statistics for Hackers
jakevdp
799
220k
Code Reviewing Like a Champion
maltzj
524
40k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Navigating Team Friction
lara
186
15k
Transcript
Boxed
Matthias Le Brun @bloodyowl lead engineering manager chief shitpost office
the easiest way to provide banking features (accounts, payments, cards…) we're hiring! @
None
None
None
None
PREVIOUSLY ON Matthias tries to convert people to FP
Algebraic Data Types yay
type State = { data?: Data; error?: Error; };
type State = { data?: Data; error?: Error; }; type
Result<Data> = | Ok<Data> | Error<Error>; error data ERROR NULL NULL DATA NULL NULL ERROR DATA
{ data: null; error: null; };
type Result<Data> = | Ok<Data> | Error<Error>;
type State = { data?: Data; error?: Error; }; type
Result<Data> = | Ok<Data> | Error<Error>; state ERROR DATA
API response API response
API response API response
type State = { data?: Data; error?: Error; }; type
Result<Data> = | Ok<Data> | Error<Error>; 2 2 1 1 4 2 x = + =
Algebra it's just basic math™
+ x
quiz 157 x 8341 = ?
quiz 999 + 1 = ?
union types
monads functors
functor
monad
[1, 2, 3].map(x => x * 2) // [2, 4,
6] [1, 2, 3].flatMap(x => [x, x * 2]) // [1, 2, 2, 4, 3, 6]
map: <A, B>(T<A>, (a: A) => B) => T<B>: flatMap:
<A, B>(T<A>, (a: A) => T<B>) => T<B>;
None
null & undefined are bad
errors aren't always exceptions
promises were made the wrong way in JS
promises were made the wrong way in JS
promises were made the wrong way in JS
promises were made the wrong way in JS
THAT WAS Matthias tries to convert people to FP NOW
LET'S TALK ABOUT BOXED
✨ new job ✨ 2022
«we use TypeScript»
None
let's look at the ecosystem™
fp-ts
pipe( token, TaskEither.bindW("user", getTokenFromUser), TaskEither.bindW("project", getProject), TaskEither.chainW(getMembership), ) no autocomplete
on current value
pipe( token, TaskEither.bindW("user", getTokenFromUser), TaskEither.bindW("project", getProject), TaskEither.chainW(getMembership), x => {}
) need to inspect argument for type
pipe( token, TaskEither.bindW("user", getTokenFromUser), TaskEither.bindW("project", getProject), TaskEither.chainW(getMembership), x => {}
) need to inspect argument for type not a good DX
export declare const chainFirstTaskK: <A, B>(f: (a: A) = >
T.Task<B>) = > <E>(first: TaskEither<E, A>) = > TaskEither<E, A> ah just what I was looking for
we've looked at the ecosystem™
«let's try to make these types work with a good
DX in a structurally typed language» — me, allegedly drunk
structural typing
class Some<A> {} class None {} const value: Some<string> =
new None();
what we need → good DX → interop with ts-pattern
→ fast
what we needed → chaining API → autocomplete → less
imports
1st iteration: naive wanted the types to be opaque but
safe
1st iteration: naive discriminator in TS (aka poor man's nominal
types)
1st iteration: naive and we're storing the state in the
class instance
None
1st iteration: naive wanted the types to be opaque but
safe
1st iteration: naive wanted the types to be opaque but
safe
2nd iteration: anger
2nd iteration: anger
2nd iteration: anger
2nd iteration: anger
3rd iteration: make it fast
initial release
initial release
type Option<A> = Some<A> | None;
type Result<A, E> = Ok<A> | Error<E>;
type AsyncData<A> = | NotAsked | Loading | Done<A>;
Future<A>; better promises™ cancellable monadic leaves error state to Result
const parsed = input != null ? parseInput(input) : undefined;
const transformed = parsed != null ? transform(parsed) : undefined; const printed = transformed != null ? print(transformed) : undefined; const value = printed != null ? prettify(printed) : "fallback"; input .map(parseInput) .flatMap(transform) .map(print) .map(prettify) .getWithDefault("fallback");
user-testing
None
insights people need human-written docs → we doubled down on
examples & added search
insights don't try to replicate another language → give good
defaults for TS
Result< Data, ServerError > Result< A, ServerError | FinalizeError >
insights people are familiar with just a few data types
→ reduce confusion
insights people can be docs-first or type-first → experience needs
to be good for both
insights readability matters → chaining API was the way to
go
insights mapping on existing JS knowledge helps → if it
exists, name it the same way
insights pipe() syntax had impact on the runtime → expressiveness
is important
4th iteration implement the feedback rename some methods update some
defaults
5th iteration: what the actual fu
5th iteration: what the actual fu
recently fix the errors
recently improved perf by 2x to 10x
recently improved perf by 2x to 10x blazing fast certi
fi ed™ ⚡
Boxed → github.com/swan-io/boxed → swan-io.github.io/boxed
None
$ yarn add @swan-io/boxed
Matthias Le Brun @bloodyowl we're still hiring thank you! 🙏