tic-tac-toe
About
This project aims to decouple the core logic from the UI logic, enabling the consumption of the same core logic across various web UI frameworks such as Vue.js, React.js, and Svelte. Moreover, this approach can be extended not only to different UI frameworks but also to various platforms like browser extensions, VS Code extensions, desktop applications, and mobile applications.
Benefits:
-
Separation of Concerns: Since core logic is isolated from UI logic, transitioning between UI frameworks (e.g., from React to Vue) or upgrading within the same framework becomes seamless.
-
Code Reusability: The core logic can be shared across different platforms, facilitating development for web, mobile, browser extensions, VS Code extensions, etc.
Influences:
This project draws inspiration from Lachlan Miller's concept of Functional Core, Imperative Shell and Uncle Bob's clean architecture.
Technologies Used:
- Monorepo (pnpm workspace)
- Test Driven Development
- Jest for Unit Testing
- Cypress for End-to-End Testing
- Prettier for Code Formatting
- ESLint for Static Code Checking
- PlantUML for Documentation
Project Structure:
-
core: Contains the core logic implemented using object-oriented programming. Future plans include implementing a functional programming approach under
@tic-tac-toe/core/fp
. -
web-test: An end-to-end testing project using Cypress. Framework-independent as long as UI projects use the same data-test attributes.
-
web-vanilla: A UI project without using any framework.
-
web-vue-3: A UI project using Vue.js.
Project Setup
Installing Dependencies
# At root folder
pnpm install
- Running Tests
# At root folder
pnpm run test
- Viewing PlantUML Diagram (VS Code)
Install the PlantUML extension, and follow the requirements section for further instructions. Once installed, open any
.puml
file, right-click on the code, and select "Preview Current Diagram" (Alt + D).
core
- Run jest with watch mode:
pnpm run test:watch
web-vanilla
- Run development server:
pnpm run dev
- Run end-to-end tests:
pnpm run test
web-vue-3
- Run development server:
pnpm run dev
- Run end-to-end tests:
pnpm run test
How to contribute
- Improve README file 😆
- Improve the
game.check()
algorithm - Add support different UI frameworks
How to add new App
- Create new project folder under apps
- Ensure to change the name inside
package.json
with@tic-tac-toe
prefix (refer to otherpackage.json
files) - Start developing the new package.
Note: This project is using pnpm.
How create new app using vite and link core package
-
Navigate to
apps
folder -
Run following command and follow the instructions:
pnpm create vite
- Navigate to newly created project
- Open
package.json
file and renamename
property and append@tic-tac-toe
to the current name.
# example
{
"name": "@tic-tac-toe/web-react",
...
}
- Add test script to your
package.json
file:
{
"name": "@tic-tac-toe/web-react",
"version": "0.0.0",
"scripts": {
...
"test": "concurrently -k -s first \"pnpm run build && pnpm run serve --port 5000\" \"cd ../web-test && pnpm run cypress:run --config baseUrl=http://localhost:5000,video=false\""
},
...
}
- Link core package to the newly created app
pnpm link @tic-tac-toe/core
- Start development