Skip to content

Commit

Permalink
Update README
Browse files Browse the repository at this point in the history
  • Loading branch information
zachgoll committed Jan 6, 2023
1 parent 723ac38 commit b406604
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 5 deletions.
15 changes: 13 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -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!!
6 changes: 3 additions & 3 deletions REFACTOR_NOTES.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down

0 comments on commit b406604

Please sign in to comment.