Atdgen Workshop Starter Project
atdgen and how it automates the generation of encoders / decoders to make sure different parts of an application stay type safe. To do so, a small server-client app created with Node.js (via
bs-express) and ReasonReact is updated through a series of milestones.
bin: contains the
shared: contains the shared types between client and server
src_client: a ReasonReact app that will be used to visualize the obtained data in the browser
src_server: a server that uses
bs-express. It exposes an API endpoint (
/refdomains) that the ReasonReact app in
src_clientwill use to fetch data. It includes a file
refdomains.jsonwith some demo data that represents referring domains.
cd atdgen-workshop-starter # Can use npm too yarn install # Runs the bsb watcher to compile the code on change yarn start # In a separate terminal, start the API and static server yarn server
Now, open your browser in
http://localhost:8000/, you should see a table rendered.
Milestone 1: Use bs-json to encode/decode data
- Start the server by running
npm run server)
- Write encoders and decoders for
src_client/RefdomainsTable.reshow the data fetched on the UI
Milestone 2: Automate encoders & decoders generation with atdgen
Before starting, read the "2-minutes intro to atdgen" documentation.
bs-jsonfrom the package and
- Add the atdgen runtime as dependency:
yarn add @ahrefs/bs-atdgen-codec-runtime. This runtime is what will allow later to call functions like
Atdgen_codec_runtime.Decode.decodefrom the server and client.
- Replace RefDomains.re with a new
refdomains.atdfile, based on the types in
Refdomain.refrom milestone 1 (you can see the
examplesfolder for a reference).
- Use atdgen to generate the encoders and decoders automatically
node bin/atdgen.js -t shared/refdomains.atdto generate the types
node bin/atdgen.js -bs shared/refdomains.atdto generate the functions
- Use the generated
Refdomains_bsmodule to replace the calls to
Milestone 3: Keep code in sync through ATD generated types
date. You will have to use the "custom wrappers" feature from atdgen.
domain_ratingto be a variant, with three values:
Poor: if domain rating is < 33
Average: if domain rating is > 33 and < 66
Good: if domain rating is > 66
### Stretch goals
- Use atdgen to encode / decode the
- Wrap the decoding operations on the server with
Belt.Resulttypes and use atdgen to pass that information to the client
- Show colors for each of the three values of the variant