From b406604c4ab9735f223c9755dbdc49eaceeee700 Mon Sep 17 00:00:00 2001 From: Zach Gollwitzer Date: Fri, 6 Jan 2023 08:31:06 -0500 Subject: [PATCH] Update README --- README.md | 15 +++++++++++++-- REFACTOR_NOTES.md | 6 +++--- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 99e3c6c..98d11e7 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@ -This repository contains the refactored code for a subscriber project. The original project repository [can be found here](https://github.com/ivan00stojanovic/TickyToey). +# Tic Tac Toe Subscriber Refactor -Please see [this YouTube video]() for a full walkthrough of this repository. +**Did you know??** + +There's a YouTube video I made about this repository. [You should watch it.]() ## Quickstart @@ -10,3 +12,12 @@ There are four examples in this repository that show how the `/original` project 2. Vanilla TypeScript Refactor - this is the Vanilla Refactor reproduced using TypeScript with an additional compile step (required to compile the TypeScript to JavaScript that can run in the browser) 3. Alpine.js Refactor - this shows how we can use a lightweight framework like Alpine.js to reduce the boilerplate needed 4. React Refactor - this shows a React implementation of the project, which is a much more _declarative_ approach than the vanilla implementations, which are mostly _imperative_. See my post on [declarative vs. imperative programming](https://www.zachgollwitzer.com/posts/imperative-programming). + +## Attribution + +All the code in the `/original` directory is from [this repository](https://github.com/ivan00stojanovic/TickyToey) and was created by: + +- [@Ivan00Sto](https://twitter.com/Ivan00sto) +- [@megfdev](https://twitter.com/megfdev) + +Thanks for your submission!! diff --git a/REFACTOR_NOTES.md b/REFACTOR_NOTES.md index 6797521..f2ff26c 100644 --- a/REFACTOR_NOTES.md +++ b/REFACTOR_NOTES.md @@ -44,18 +44,18 @@ In larger web applications, keeping client and DB state in-sync is important and In this Tic Tac Toe game, instead synchronizing our client state to a database, we will be syncing it to `localStorage`, which will act as our DB. -For some foundational concepts on state management, the Redux documentation provides some great overviews of _why_ we need to manage state and some best practices for managing state in an application. While some could argue Redux has fallen out of favor in the past few years (React has its own way of managing state), it still has some great documentation and is a great place to learn from. +For some foundational concepts on state management, the Redux documentation provides some great overviews of [_why_ we need to manage state](https://redux.js.org/understanding/thinking-in-redux/motivation) and some [best practices for managing state](https://redux.js.org/style-guide/#priority-a-rules-essential) in an application. While some could argue Redux has fallen out of favor in the past few years (React has its own way of managing state), it still has some great documentation and is a great place to learn from. ### Tic Tac Toe State Design -There are many ways to approach this, but in efforts to replicate the existing subscriber code provided in the `/original` folder, I have identified a few pieces of state that we will need to keep track of. +There are many ways to approach this, but in efforts to replicate the existing subscriber code provided in the [/original](https://github.com/zachgoll/subscriber-refactor-1/tree/main/original) folder, I have identified a few pieces of state that we will need to keep track of. - Game - keeps track of the currently active game state - Statistics - keeps track of past games and keeps records of each player As you will see in the types below, `Scoreboard` can be _derived_ from a list of `Game` results, so we call this "derived state". When designing your state objects, it is usually best-practice to avoid storing "derived state", which will become more clear after reading through the example applications I have built. -Below is a brief outline of our "Game State". I am using TypeScript types to demonstrate, but the game on the `main` branch is written in vanilla JS and will not include these typings explicitly. +Below is a brief outline of our "Game State". I am using TypeScript types to demonstrate, but the game on the `main` branch is written in vanilla JS and will not include these typings explicitly. If you want to see an implementation in TypeScript, visit the `typescript` branch. ```ts // Below are supporting types (not actual state)