base on Effect beginner workshop delivered at Effect Days 2024 # Effect Beginner/Intermediate Workshop By Ethan Niser Follow me on [Twitter](https://twitter.com/ethanniser) and [YouTube](https://www.youtube.com/@ethanniser) ## USEFUL LINKS - [Effect API Docs](https://effect-ts.github.io/effect/) - [Effect Docs](https://effect.website/) - [Effect Source](https://github.com/Effect-TS/effect) - [Effect Discord](https://discord.gg/effect-ts) ## REQUIREMENTS: ### A way to run typescript Node (with ts-node or tsx) or Bun https://nodejs.org/en ```bash npm i -g tsx ``` I'm using bun just because its over twice as fast to run typescript than with `tsx` or `ts-node` If you want to also use bun you can install it at https://bun.sh/docs/installation ### Install JS Dependecies ```bash npm i yarn i pnpm i bun i ``` ### An editor that supports LSP Hovering to see types, autocompletion, and go-to-definition are gonna be pretty useful. I'll be using VSCode, but you can use any editor that supports LSP. ## How this project is broken up ### Slides The slides are available online at [https://effect-workshop-slides.vercel.app](https://effect-workshop-slides.vercel.app) But, if you wish to run the slides locally: ```bash cd slides bun run dev ``` ### **All of the content is in the `src` folder** Each part has its own folder. Within those folders you find these folders: #### `snippets` This contains typescript files that have code examples and comment explanations for individual concepts. I will go through these files in the workshop. Free free to follow along and read the comments. #### `exercises` This contains typescript files that define some practice exercises for individual concepts. They define test cases that you can check by just running the file. _Solutions are located in the `solutions` folder_ #### `project` For parts 2 and 3, we will be rewriting a non-effect application to effect. The project folder contains the non-effect application, and is where if you want to follow along, you can modify the code to use effect. ##### `AFTER_THE_WORKSHOP.md` To reinforce your learning, I've provided some ideas for how to expand each project when you get home. Try them out on your own, and if you need help feel free to @ me in the Effect discord- I'd love to see how people approach each problem. #### `breakpoints` For parts 2 & 3, 'breakpoints' defines each of the steps we will take to refactor the non-effect application to effect. Each file is a folder. All changes between steps are described in the `changes.md` file. If you get lost, you can always copy whatever 'breakpoint' you are on to the `project` folder and continue from there. ### `pad.ts` Stands for 'scratchpad'. Pretty useful for just trying out some code that doesn't necessarily belong anywhere. ```bash bun run pad ``` ## Running Files Every file is prefixed with a number. I have defined a bun of scripts so you don't have to type out the whole file name / path. They follow this pattern: ``` part = 1 | 2 | 3 | 4 section = s (snippets) | e (exercises) | p (project) | b (breakpoints) fileOrFolderNumber = (if folder will run index.ts) bun run part-section-fileOrFolderNumber ``` For example, to run the first snippet in part 1: ```bash bun run 1-s-1 ``` To run the first exercise in part 2: ```bash bun run 2-e-1 ``` To run the part 3 project: ```bash bun run 3-p ``` ## Cheat Sheet For quick reference or for review feel free to read [CHEATSHEET.md](./CHEATSHEET.md) ## VSCode Snippets ```json { "Gen Function $": { "prefix": "gg", "body": ["function* (_) {\n\t$0\n}"], "description": "Generator function with _ input" }, "Gen Function $ (wrapped)": { "prefix": "egg", "body": ["Effect.gen(function* (_) {\n\t$0\n})"], "description": "Generator function with _ input" }, "Gen Yield $": { "prefix": "yy", "body": ["yield* _($0)"], "description": "Yield generator calling _()" }, "Gen Yield $ (const)": { "prefix": "cyy", "body": ["const $1 = yield* _($0)"], "description": "Yield generator calling _()" } } ``` ", Assign "at most 3 tags" to the expected json: {"id":"9723","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"