Tic-Tac-Toe
I wanted to try out Svelte and SolidJS, so I made tic-tac-toe in both libraries. I also made it in React so I could compare all 3 options.
Conclusions:
- React is React. I am pretty comfortable with it since I have used it so much, but I am not the biggest fan of its rendering pattern. Rerunning all component code on every remount is not great for performance (in comparison to Solid and Svelte), and it can cause a lot of confusion for people new to React.
- Solid is a little bit confusing at times, and its control flow components are a bit annoying to use in comparison to React and Svelte's alternatives. It took me a while to figure out how to use a store to update a nested array.
- Svelte is pretty awesome. I am a fan. It has fine-grained updates, and you can write less code to get the same result. It is basically just HTML/CSS/JS with the bells and whistles of modern frameworks/libraries like React but with better performance.
How to Run
- Clone the git repository
- Change directories into the folder where you cloned the repository.
- Run
yarn install
- Run the command associated with the app you want to run:
- For React, run
yarn workspace tic-tac-toe-react dev
- For Solid, run
yarn workspace tic-tac-toe-solid dev
- For Svelte, run
yarn workspace tic-tac-toe-svelte dev
- Go to http://localhost:5173/