Structuring an application

1function fetchTodos(url) {2  console.log("fetch " + url);3  return [{ id: 1, title: "Read architecture", done: false }];4}5 6function startTodoPage() {7  const todos = fetchTodos("/todos.json");8  app.innerHTML = "";9  for (const todo of todos) {10    const item = document.createElement("li");11    item.textContent = todo.title;12    app.append(item);13  }14 15  form.addEventListener("submit", (event) => {16    event.preventDefault();17    const title = input.value.trim();18    if (title.length < 3) {19      error.textContent = "Use at least 3 characters";20      return;21    }22    const next = { id: Date.now(), title, done: false };23    todos.push(next);24    localStorage.setItem("todos", JSON.stringify(todos));25    app.insertAdjacentHTML("beforeend", "<li>" + next.title + "</li>");26  });27 28  console.log(app.textContent.trim());29}30 31startTodoPage();

1function normalizeTitle(raw) {2  const title = raw.trim();3  if (title.length < 3) throw new Error("Use at least 3 characters");4  return title;5}6 7function createTodoStore(storage) {8  return {9    load() {10      return JSON.parse(storage.getItem("todos") ?? "[]");11    },12    save(todos) {13      storage.setItem("todos", JSON.stringify(todos));14    },15  };16}17 18function renderTodoList(root, todos) {19  const list = document.createElement("ul");20  for (const todo of todos) {21    const item = document.createElement("li");22    item.textContent = todo.title;23    list.append(item);24  }25  root.replaceChildren(list);26}27 28const fakeStorage = {29  value: "[]",30  getItem() { return this.value; },31  setItem(_key, value) { this.value = value; },32};33const todos = [{ id: 1, title: normalizeTitle("  Write tests  "), done: false }];34const store = createTodoStore(fakeStorage);35store.save(todos);36renderTodoList(app, todos);37console.log(JSON.parse(fakeStorage.value)[0].title);38console.log(app.textContent.trim());

1function createTodoModel(initial = []) {2  const todos = [...initial];3  return {4    all() { return [...todos]; },5    add(title) {6      const clean = title.trim();7      if (clean.length < 3) throw new Error("Use at least 3 characters");8      todos.push({ id: todos.length + 1, title: clean, done: false });9    },10  };11}12 13function createTodoView(root) {14  root.innerHTML = '<form><input aria-label="Todo"><button>Add</button></form><ul></ul>';15  const form = root.querySelector("form");16  const input = root.querySelector("input");17  const list = root.querySelector("ul");18  return {19    onAdd(handler) {20      form.addEventListener("submit", (event) => {21        event.preventDefault();22        handler(input.value);23        input.value = "";24      });25    },26    render(todos) {27      list.replaceChildren(...todos.map((todo) => {28        const item = document.createElement("li");29        item.textContent = todo.title;30        return item;31      }));32    },33  };34}35 36function createTodoController(model, view) {37  const refresh = () => view.render(model.all());38  view.onAdd((title) => { model.add(title); refresh(); });39  refresh();40  return { add(title) { model.add(title); refresh(); } };41}42 43const controller = createTodoController(44  createTodoModel(),45  createTodoView(document.querySelector("#mvc-demo")),46);47controller.add("Review architecture");48console.log(document.querySelector("#mvc-demo li").textContent);

1function observableState(initial) {2  let state = initial;3  const listeners = new Set();4  return {5    get() { return state; },6    set(updater) {7      state = updater(state);8      listeners.forEach((listener) => listener(state));9    },10    subscribe(listener) {11      listeners.add(listener);12      listener(state);13      return () => listeners.delete(listener);14    },15  };16}17 18function createTodoViewModel(storage) {19  const todos = observableState(storage.load());20  return {21    todos,22    newTitle: "",23    setTitle(value) { this.newTitle = value; },24    addTodo() {25      const title = this.newTitle.trim();26      if (title.length < 3) return;27      todos.set((items) => [...items, { id: items.length + 1, title, done: false }]);28      storage.save(todos.get());29      this.newTitle = "";30    },31  };32}33 34function bindTodoView(root, viewModel) {35  root.innerHTML = '<input aria-label="Todo"><button>Add</button><ul></ul>';36  const input = root.querySelector("input");37  const button = root.querySelector("button");38  const list = root.querySelector("ul");39  input.addEventListener("input", () => viewModel.setTitle(input.value));40  button.addEventListener("click", () => {41    viewModel.addTodo();42    input.value = viewModel.newTitle;43  });44  viewModel.todos.subscribe((todos) => {45    list.replaceChildren(...todos.map((todo) => {46      const item = document.createElement("li");47      item.textContent = todo.title;48      return item;49    }));50  });51}52 53const memoryStorage = { load: () => [], save: (todos) => console.log("saved:" + todos.length) };54const vm = createTodoViewModel(memoryStorage);55bindTodoView(document.querySelector("#mvvm-demo"), vm);56vm.setTitle("Review architecture");57vm.addTodo();58console.log(document.querySelector("#mvvm-demo li").textContent);

1function TodoItem({ todo }) {2  return "<li>" + (todo.done ? "Done: " : "Todo: ") + todo.title + "</li>";3}4 5function TodoList({ todos }) {6  return "<ul>" + todos.map((todo) => TodoItem({ todo })).join("") + "</ul>";7}8 9function render(component, props, root) {10  root.innerHTML = component(props);11}12 13let todos = [{ id: 1, title: "Draft lesson", done: false }];14render(TodoList, { todos }, document.querySelector("#component-demo"));15todos = todos.map((todo) => todo.id === 1 ? { ...todo, done: true } : todo);16render(TodoList, { todos }, document.querySelector("#component-demo"));17console.log(document.querySelector("#component-demo").textContent.trim());

1function createContainer(registry) {2  const cache = new Map();3  const container = {4    get(name) {5      if (!cache.has(name)) cache.set(name, registry[name](container));6      return cache.get(name);7    },8  };9  return container;10}11 12const container = createContainer({13  storage: () => {14    const data = { todos: "[]" };15    return { get: (key) => data[key], set: (key, value) => { data[key] = value; } };16  },17  todos: ({ get }) => ({18    all: () => JSON.parse(get("storage").get("todos")),19    add(title) {20      const todos = [...this.all(), { id: "container-1", title }];21      get("storage").set("todos", JSON.stringify(todos));22      return todos.at(-1);23    },24  }),25});26console.log(container.get("todos").add("Container aside").title);27console.log(container.get("todos") === container.get("todos"));

1function addTodoMixed(raw, storage, list) {2  const title = raw.trim();3  if (title.length < 3) throw new Error("Use at least 3 characters");4  storage.saved = title;5  list.push(title);6}7 8function normalizeTodoTitle(raw) {9  const title = raw.trim();10  if (title.length < 3) throw new Error("Use at least 3 characters");11  return title;12}13function saveTodo(storage, todo) { storage.saved = todo.title; }14function renderTodo(list, todo) { list.push(todo.title); }15 16const storage = {};17const list = [];18const todo = { title: normalizeTodoTitle("  Learn SOLID  ") };19saveTodo(storage, todo);20renderTodo(list, todo);21console.log(storage.saved);22console.log(list.join(", "));

1const discountStrategies = {2  none: (total) => total,3  tenPercent: (total) => total * 0.9,4  fiveOff: (total) => Math.max(0, total - 5),5};6 7function totalAfterDiscount(total, strategy) {8  return strategy(total).toFixed(2);9}10 11console.log(totalAfterDiscount(10, discountStrategies.tenPercent));12console.log(totalAfterDiscount(10, discountStrategies.fiveOff));

1class Rectangle {2  setSize(width, height) { this.width = width; this.height = height; }3  area() { return this.width * this.height; }4}5 6class Square extends Rectangle {7  setSize(width) { this.width = width; this.height = width; }8}9 10function areaAfterResize(shape) {11  shape.setSize(4, 5);12  return shape.area();13}14 15console.log(areaAfterResize(new Rectangle()));16console.log(areaAfterResize(new Square()));17 18const square = (size) => ({ area: () => size * size });19console.log(square(5).area());

1function sendReceipt({ mailer }, address) {2  mailer.send(address, "Receipt");3}4 5function loadPreference(settingsStore) {6  return settingsStore.get("theme") ?? "system";7}8 9const fakeMailer = { sent: [], send(to, text) { this.sent.push(to + ":" + text); } };10sendReceipt({ mailer: fakeMailer }, "ada@example.com");11console.log(fakeMailer.sent[0]);12console.log(loadPreference({ get: () => "dark" }));

1function createFactoryBuilderStrategyAdapter(value) {2  return { execute: () => value.trim().toUpperCase() };3}4 5const directTitle = (value) => value.trim().toUpperCase();6console.log(directTitle("  ship it  "));7console.log(createFactoryBuilderStrategyAdapter("  ship it  ").execute());

src/
  features/
    todos/
      TodoList.js
      todoModel.js
      todoRepository.js
    settings/
      SettingsPanel.js
  shared/
    dom.js
    storage.js

src/
  components/
    TodoList.js
    SettingsPanel.js
  models/
    todoModel.js
  services/
    todoRepository.js

1// todoModel.js2import { renderTodo } from "./todoView.js"; // model now knows the view3export function addTodo(title) {4  const todo = { title };5  renderTodo(todo);6  return todo;7}8 9// todoView.js10import { addTodo } from "./todoModel.js"; // view now knows the model11button.addEventListener("click", () => addTodo(input.value));