# 04 - M1.3 Revision Sheet & Interview Q&A

This document summarizes key concepts, build commands, and 10 interview-style questions for **Milestone 1.3**.

---

## 1. Quick Revision Summary

- **What We Built:** Widget build pipeline using Vanilla JavaScript, Node.js, npm, and `esbuild`.
- **Primary Deliverable:** Single browser-executable IIFE bundle at `widget/dist/widget.js`.
- **Test Harness:** `widget/demo.html` loading `./dist/widget.js`.
- **Git Strategy:** `node_modules/` ignored via `.gitignore`. `dist/` artifacts can be generated reproducibly via `npm run build`.

---

## 2. Essential Commands Reference

```bash
# 1. Navigate to widget directory
cd widget

# 2. Install dependencies (esbuild)
npm install

# 3. Build bundle for production
npm run build

# 4. Start watch mode during development
npm run watch

# 5. Verify backend tests still pass
cd ../backend
.\venv\Scripts\python.exe -m pytest
```

---

## 3. 10 Interview-Style Questions & Concise Answers

#### Q1: Why did we choose Vanilla JavaScript over React for the widget?
**Answer:** Vanilla JS eliminates heavy framework dependencies (reducing bundle size by hundreds of kilobytes), loads instantly, and prevents framework version conflicts on customer websites.

#### Q2: What is the purpose of `esbuild` in this project?
**Answer:** `esbuild` is a high-speed JavaScript bundler that compiles `src/widget.js` and its modules into a single, browser-optimized file (`dist/widget.js`).

#### Q3: What does the `--format=iife` flag mean in esbuild?
**Answer:** It wraps the compiled output in an Immediately Invoked Function Expression `(() => { ... })()`, allowing the script to execute automatically when loaded via `<script src="..."></script>`.

#### Q4: Why is IIFE scope isolation critical for a third-party chat widget?
**Answer:** IIFE prevents widget variables from leaking into or polluting the host website's global `window` scope, protecting against naming collisions and script interference.

#### Q5: What is the difference between `src/` and `dist/` directories?
**Answer:** `src/` contains uncompiled developer source code. `dist/` contains the compiled, bundled artifact generated by build tools for browser distribution.

#### Q6: What is the difference between `devDependencies` and regular `dependencies` in `package.json`?
**Answer:** `devDependencies` (like `esbuild`) are tools needed only during development/building. `dependencies` are libraries required at runtime by end users.

#### Q7: How does `npm run watch` improve developer workflow?
**Answer:** It runs `esbuild` in continuous watch mode, instantly re-compiling `dist/widget.js` whenever source files in `src/` are modified and saved.

#### Q8: What does `demo.html` prove in Milestone 1.3?
**Answer:** It acts as a local test bed to prove that `dist/widget.js` can be loaded via a standard script tag and executed successfully by a browser engine.

#### Q9: Why should `node_modules/` be included in `.gitignore`?
**Answer:** `node_modules/` contains thousands of downloaded package files. Ignoring it keeps version control repositories lean; dependencies are easily restored using `npm install` from `package.json`.

#### Q10: Did M1.3 introduce any backend changes or break M1.1/M1.2?
**Answer:** No. M1.3 is strictly focused on frontend build tooling. All existing FastAPI endpoints, MongoDB models, CORS middleware, and pytest suites continue to function without modification.