Основные концепции

This content is not available in your language yet.

Понятия вводимые в ED могут отличаться от вашего видиния!

Правда в том, что нет “правильного определения”.

Мы стараемся что бы понятия которые мы вводим, корилировали с общепринятыми. Но наша главная задача, создать единую не противоречивую систему.

Для тех кто знает DDD, мы создаём ubiquitous language в ограниченном контексте ED

Отдавайте себе отчёт, понятия вводимые ED базово созданы только для использования в ED.

Абстракция

Самый важный термин всей архитектуры. Всё что мы с вами будем делать, это создавать абстракции, переносить код между абстракциями, выстраивать связи между абстракциями.

Звучит сложно но на самом деле абстракция - это любой способ спрятать код, сложность любую информацию, за название и публичный интерфейс.

Суть абстракции, что вы можете понять что внутри даже не читая содержимого

// Переменная это абстракция
const userList = [];

// Названия переменной достаточно что бы предположить что там
userList.map((user) => user);

// Функция это абстракция
function createUser(name: string): Promise<User> {
  // ... Много строк сложного кода
}

// Вызывая эту функцию мы знаем что она создаст юзера и вернёт его, даже не читая исходников
const user = await createUser("Evgeny");

// Класс это абстракция
class Board {
  addCard(title: string) {
    // ... Много строк сложного кода
  }
  removeCard(id: string) {
    // ... Много строк сложного кода
  }
  renderHTML(): string {
    // ... Много строк сложного кода
  }
}
// Когда мы используем этот класс, мы понимаем что вызов методов добавит на доску карточки.
// А вызов renderHTML вернёт html этой борды даже не читая исходников
const board = new Board();
board.addCard("Card 1");
board.removeCard("Card 1");
document.body.innerHTML = board.renderHTML();

// Файл это абстракция
// Просто названия файла нам достаточно что бы предположить, что там
import {} from "./use-user-list";

// Папка это абстракция
// Благодаря названию папки мы знаем,
// что UserCard - компонент
import { UserCard } from "./components/user-card";

Важно: не все абстракции выражены в коде

Концепции, термины, паттерны - это всё абстракции

// По названию мы понимаем что это компонент
// Значит:
//  - Там можно использовать хуки
//  - Оттуда нужно вернуть jsx
//  - В теле не должно быть side эффектов
function UserComponent() {}

С помощью абстракций мы можем из небольшого колличества кода, получать много информации

Более подробно об этом можно почитать тут Абстракция

Кошелёк миллера

Окей, разобрались что такое абстракция, но зачем это нам?

Фишка в том, что мозг человека думает абстракциями. Не символами, не словами, не строками кода, а абстракциями.

Подробнее об этом тут Нейрофизиология сложности кода

И у этого мышления есть важное ограничение, которое и лежит в основе сложности кода.

Одновременно мы можем думать только о 7+-2 абстракциях. (Обычно около 4x)

Это правило называется кошелёк миллера

Попытайтесь понять 2 куска кода:

const maxSubArray = (nums) => {
  let maxSub = nums[0];
  let curSum = 0;
  for (let i = 0; i < nums.length; i++) {
    if (curSum < 0) {
      curSum = 0;
    }
    curSum += nums[i];
    maxSub = Math.max(maxSub, curSum);
  }
  return maxSub;
};

const user = {
  id: 1,
  name: "Alex Johnson",
  email: "alex@example.com",
  avatar: "https://i.pravatar.cc/150?img=3",
  role: "Software Engineer",
  bio: "Full-stack developer specializing in React & Node",
  location: "San Francisco, CA",
  joined: "2022-03-15",
  followers: 1243,
  following: 562,
};

Почему первый понять значительно сложнее чем второй хотя и там и там 11 строк кода?

В первом случае мы работаем с большим колличеством абстракций одновременно: цикл, Math.max, условия maxSub, curSum Кода мало а кошель переполнен.

А во втором случае одновременных абстракций мало - пользователь, объявление объекта