AI Code Review + Refactoring

--- theme: seriph title: "AI Code Review + Refactoring" info: "Module A-REVIEW-001 - reviewing AI output, asking for rewrites, commit-first refactoring workflow" --- # AI Code Review + Refactoring "AI gave me this. Do I keep it?" --- # The Problem You ask AI to build a feature. It works. You submit it. But you can't explain how it works. - Uses patterns you haven't learned - Pulls in libraries you've never seen - Writes "clever" code that's hard to read This is **not** cheating. But it **is** a problem - because code you can't explain is code you can't fix. --- # The Review Move Every time AI gives you code, ask three questions: 1. **Do I understand every line?** 2. **Does it use only tools I've learned?** 3. **Does the approach fit my project?** If the answer to any of these is "no," you don't throw the code away. You **refactor** it. --- layout: center --- # Red Flag 1: Overcomplicated Patterns --- # When AI Gets Too Clever You ask: "Sum the prices in my cart array." AI gives you: ```js const total = cart.reduce((sum, item) => sum + item.price, 0); ``` This is valid JavaScript. But if you haven't learned `.reduce()`, you can't debug it when something breaks. --- # Ask for a Rewrite Prompt the AI: > "Rewrite this without `.reduce()`. Use a `for...of` loop instead." ```js let total = 0; for (const item of cart) { total += item.price; } ``` Same result. Every line is something you already know. --- # Another Example: Chained Methods AI gives you: ```js const names = students .filter(s => s.grade >= 90) .map(s => s.name) .sort(); ``` Your rewrite request: "Use a loop and an if statement instead." ```js const names = []; for (const s of students) { if (s.grade >= 90) { names.push(s.name); } } names.sort(); ``` Both are correct. The second one you can explain line by line. --- layout: center --- # Red Flag 2: Unknown Libraries --- # When AI Adds Dependencies You ask: "Fetch data from this API." AI gives you: ```js import axios from 'axios'; const response = await axios.get('https://api.example.com/data'); const data = response.data; ``` You've never installed or learned `axios`. What happens when it breaks? --- # Ask for Vanilla Alternatives > "Rewrite this using the built-in `fetch` API. No external libraries." ```js const response = await fetch('https://api.example.com/data'); const data = await response.json(); ``` `fetch` is built into every browser. No install, no dependency, no surprises. **Rule of thumb:** If you didn't `npm install` it yourself and don't know what it does, ask for a rewrite without it. --- # Red Flag 3: Wrong Pattern for Your Project You have a simple static site. AI generates: ```js const app = document.createElement('div'); app.id = 'app'; document.body.innerHTML = ''; document.body.appendChild(app); function render(state) { app.innerHTML = `<h1>${state.title}</h1>`; } ``` This is a mini-framework. Your project just needed to update one heading. ```js document.querySelector('h1').textContent = 'New Title'; ``` When AI over-architects, ask: "Simplify this. I just need to update the existing HTML element." --- # The Commit-First Refactoring Workflow Refactoring means changing how code is written without changing what it does. But sometimes a refactor **breaks** something. If you didn't save the working version first, you have nothing to go back to. **Git is your safety net.** --- # The Workflow: 4 Steps **Step 1:** AI gives you working code. Test it. It works. **Step 2:** Commit the working version. ``` git add script.js git commit -m "Add cart total feature (AI-generated)" ``` **Step 3:** Ask AI to simplify or rewrite. **Step 4:** Test the new version. If it works, commit again. ``` git commit -am "Refactor cart total to use for...of loop" ``` If the refactor breaks something, you can always go back: ``` git diff HEAD~1 ``` --- # Full Example: Before and After **Step 1 - AI gives you this (it works):** ```js const total = cart.reduce((sum, item) => sum + item.price, 0); document.querySelector('#total').textContent = `$${total.toFixed(2)}`; ``` **Step 2 - Commit it:** `git commit -am "Add cart total display"` **Step 3 - Ask AI:** "Rewrite without .reduce(). Use a for...of loop." **Step 4 - AI gives you this (test it, it works):** ```js let total = 0; for (const item of cart) { total += item.price; } document.querySelector('#total').textContent = `$${total.toFixed(2)}`; ``` **Commit again:** `git commit -am "Refactor total calculation to for...of"` --- # What If the Refactor Breaks? You committed the working version, so you have options: ``` git log --oneline ``` ``` a1b2c3d Refactor total calculation to for...of f4e5d6c Add cart total display <-- working version ``` To see what changed: ``` git diff f4e5d6c ``` To restore the working file: ``` git checkout f4e5d6c -- script.js ``` You never lose working code if you commit before you refactor. --- # The Prompts That Work When reviewing AI code, these prompts get reliable results: | Situation | Prompt | |---|---| | Unknown method | "Rewrite without `.reduce()`. Use a `for...of` loop." | | Unknown library | "Rewrite using only the built-in `fetch` API." | | Over-engineered | "Simplify this. I just need to update one element." | | Can't explain it | "Add a comment above each line explaining what it does." | | Want to compare | "Show me both versions side by side." | Always be specific about **what** you want changed and **what** to use instead. --- # Your Checklist Before submitting any AI-generated code: - [ ] I can explain every line to a classmate - [ ] It only uses tools and libraries covered in class - [ ] The approach matches my project's complexity - [ ] I committed the working version before refactoring - [ ] The refactored version still passes my tests If you can check all five, ship it. --- # Your Turn Open `review-practice.js` from the course website. It contains AI-generated code with at least one red flag (unknown library, overcomplicated pattern, or wrong approach). 1. Read the code line by line and identify the red flag 2. Write a prompt asking AI to rewrite it using only what you've learned in class 3. Test both versions in the browser 4. Save the original as `review-original.js` and your simplified version as `review-clean.js` 5. Commit both: `git add review-original.js review-clean.js && git commit -m "Review practice: original and refactored"` > AI tip: Tell AI what you do know ("I've learned `fetch`, `for...of` loops, and `querySelector`") so it stays within your skill set. --- # References - [MDN: fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) - [Git Basics: Recording Changes](https://git-scm.com/book/en/v2/Git-Basics-Recording-Changes-to-the-Repository) - [MDN: for...of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)