Code Specs & Refactoring
With this project you won't be building anything new. Instead you'll be studying and replicating a project we already wrote. There are two main reasons for doing this:
- Learning to effectively read source code, and to understand it at a high level.
This skill is necessary for reading documentation, collaborating, testing, learning new libraries, debugging, ... basically everything. Without this skill you will always be struggling uphill. - To understand the practical relationship between implementation and behavior.
Each time you study and replicate a step in our code, your implementation will not be identical to ours. You might use different DOM accessors or structure your control flow differently. But no matter how you implement your functions, your application will have the same behavior and specifications as ours. This is called refactoring.
Take your time on this project, the better you understand these two points the easier the next project will be.
Index
Learning Objectives
- Application = User Interactions + Data.
- "Code" isn't anywhere in that definition.
- An application is it's behavior, not it's implementation
- Using specs to study and replicate an application
- Refactoring: Changing the source without breaking the behavior
Specifications
- Fork+clone this repository and clear the README so you can use it for notes.
- Follow the instructions in the README on our account (since you cleared it on your clone). We recommend filling out all of the files in place on your cloned copy. You must reuse our HTML (exactly as it is, no changes allowed). You will be rewriting the JS file for each folder. Once you have replicated each version you can move on to the next step: improving the application's architecture.
- The code provided does not have proper separation of concerns like you learned about in CleanCalc (UI/logic separation). Refactor TicTacToe6 into the 3-layered handler/logic architecture you learned in cleancalc.
- Add some logic to see who won.
- Create an empty repository on your account and build it into full repo with 8+ version releases (7 for the versions provided, and 1+ for your refactor into logic/handler architecture). Be sure to have a full & polished repository with documentation, tests, and a live demo. The simplest way to do this will be to create a new directory on your computer, and for each version in TicTacToe:
- Copy paste everything for that version (original code, specs, your code, html, ..) into the new repository.
- Add, commit, tag. Push to your repository
- Delete everything, and repeat.
- Finishing touches: Add some tests for the logic, put a live demo, link the code & demo to your portfolio, fill out the readme, ... Make it complete and pretty.
Resources
Tictactoe Videos:
Demo Repositories:
- (Not exactly the same project, but good examples of clean repos)
- TicTacToe Repo
- CleanCalc Repo
Interacting with Code:
- Writing Clean Code
- What is an App?
- What is Refactoring?. This answer connects refactoring to testing. We'll explore this relationship in the next series of projects.
- Navigating Codebase
- When Understanding Means Rewriting
- Novice & Experts Reading Code
- Reverse Engineering
Extra Practice
Explore the projects on microjs.com. Open the ones that interest you and try to replicate them using the method from this project.