🥸 О мифе сеньорского кода и чистоте разработки

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

На самом деле, в каждой компании, и даже в твоем Пет-проекте, код похож. Компоненты они и в Африке компоненты. Научиться писать качественный код можно просто, следуя базовым принципам и простой логике, без мифических сеньорских стандартов.

Чем отличается код в больших компаниях от твоего небольшого проекта? В маленьком проекте меньше сущностей, проще структура, и поддерживать его легче. А вот в крупном проекте добавляются интеграции, компоненты, обработка ошибок, загрузчики и множество других деталей, которые усложняют работу над ним. За счёт этого код в больших компаниях выглядит более «загруженным» и сложным.

💡 Главные навыки, которые необходимы в реальной разработке, — это умение читать чужой код, разбираться в проекте и подстраиваться под командные требования.

Если хочется увидеть пример чистого кода, посмотри обучающее видео хорошего блогера, где он за час пишет ToDo-приложение. Это действительно хороший, простой код. Но как только начнется расширение функционала, появятся новые сложности, и писать чистый код станет гораздо труднее.

Я часто общаюсь с разработчиками из разных компаний, и многие, видя код в YeaHub, отмечают, что у нас он чище, чем в некоторых крупных корпорациях, таких как Сбер или Газпром. В погоне за релизом, мы немного испортили код, но после релиза начнем рефакторинг

Вот основные принципы хорошего кода:

✏️ Декомпозиция: разбивайте код на более мелкие, логичные части. Это упрощает понимание, отладку и позволяет использовать код повторно.

✏️ Разделяйте ответственность: каждая функция, компонент или модуль должны выполнять одну конкретную задачу. Это делает код более предсказуемым и простым в поддержке.

✏️ Избегайте дублирования кода: если встречаете повторяющиеся блоки, вынесите их в отдельные функции или компоненты. Это упростит изменения и уменьшит количество ошибок.

✏️ Логически определяйте блоки кода и сущности: структурируйте код так, чтобы каждая его часть занималась своей ролью. Например, обработку данных выделяйте отдельно от их отображения.

✏️ Создавайте компоненты для переиспользования: разрабатывайте компоненты так, чтобы их можно было использовать в разных частях приложения. Это уменьшит дублирование и улучшит масштабируемость.

✏️ Делайте компоненты модифицируемыми: при разработке учитывайте возможность добавления новой функциональности без изменения уже существующего кода. Это упростит поддержку и добавление новых фич.

✏️ Избегайте жесткой связанности модулей: минимизируйте зависимости между модулями. Если один компонент сильно зависит от другого, это усложнит поддержку и тестирование. Используйте инъекцию зависимостей и интерфейсы для уменьшения связанности.

💡 В 80% случаев хороший код — это не паттерны, а простая логика и внимание к деталям.

#frontend #react #senior

👩‍💻 Подключение компонента с помощью connect

Хотя хуки являются современным способом работы с Redux, вы также можете использовать метод connect из библиотеки react-redux для подключения компонентов к Redux. Это более старый способ, но он по-прежнему широко используется и имеет свои преимущества.

// Компонент
const TodoList = ({ todos, addTodo, removeTodo }) => {
    // some logic
    return ();
};

// Определяем, какие данные из Redux store передать компоненту
const mapStateToProps = (state) => ({
    todos: state.todos.todos,
});

// Определяем, какие действия передать компоненту
const mapDispatchToProps = {
    addTodo,
    removeTodo,
};

// Подключаем компонент к Redux
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

Делаю сейчас курс по Redux + Redux Toolkit + RTK Query и вспомнил, как раньше подключались компоненты. Блин, выглядит круто. Может снова так делать.😅

Кто помнит? Олды есть?

#redux #react

👩‍💻 Принципы Redux

Redux основывается на нескольких ключевых принципах, которые помогают организовать и управлять состоянием приложения.

🔒 Единое хранилище (Single Source of Truth)

В Redux есть только одно общее хранилище, которое содержит все состояние приложения. Это облегчает управление состоянием и делает его предсказуемым.

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

const initialState = {
    todos: [],
    user: null,
};

// Всё состояние хранится в одном объекте
const state = {
    todos: ['Задача 1', 'Задача 2'],
    user: { name: 'Иван', age: 30 },
};

👀 Состояние только для чтения (Read-Only State)

Единственным способом изменения состояния является отправка действия (action). Это гарантирует, что изменения состояния происходят только через определенные точки (actions), что делает их предсказуемыми.

Когда состояние приложения меняется, это происходит только через отправку действий. Это делает все изменения явными и отслеживаемыми.

// Действие для добавления задачи
const addTodo = (text) => ({
    type: 'ADD_TODO',
    payload: text,
});

// Изменение состояния только через действие
store.dispatch(addTodo('Новая задача'));

✨ Чистые функции редюсеры (Pure Functions)

Редюсеры должны быть чистыми функциями. Это значит, что для одинаковых входных данных они всегда должны возвращать одинаковый результат, и они не должны изменять свои входные данные.

Чистые функции делают состояние предсказуемым и упрощают отладку. Они не имеют побочных эффектов и не влияют на внешние состояния.

const todoReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'ADD_TODO':
            return {
                ...state,
                todos: [...state.todos, action.payload],
            };
        default:
            return state; // Возвращаем новое состояние, не изменяя текущее
    }
};

⬇️ Однонаправленный поток данных (Unidirectional Data Flow)

Поток данных в Redux всегда односторонний. Это означает, что данные передаются от состояния к представлению, и изменения состояния происходят только через действия.

Однонаправленный поток данных упрощает понимание, как данные перемещаются в приложении. Он делает отладку проще, поскольку вы всегда знаете, откуда приходят данные и как они изменяются.

// Пример потока данных
const mapStateToProps = (state) => ({
    todos: state.todos,
});

// Компонент получает данные
const TodoList = ({ todos }) => (
    <ul>
        {todos.map((todo, index) => (
            <li key={index}>{todo}</li>
        ))}
    </ul>
);

// Связываем компонент с Redux
export default connect(mapStateToProps)(TodoList);

#redux #frontend #react #flux

🔼 Почему важно использовать lazy-loading

Lazy-loading (ленивая загрузка) — это способ загружать ресурсы (изображения, компоненты) только тогда, когда они нужны. Это улучшает скорость загрузки страницы, снижает нагрузку на сервер и экономит трафик.

⚠️ Проблема

При загрузке страницы браузер загружает все ресурсы сразу, даже те, которые пользователь не видит. Это увеличивает время загрузки и может ухудшить пользовательский опыт.

✔️ Решение

Lazy-loading изображений
Современный HTML позволяет указать атрибут loading="lazy":

<img src="example.jpg" alt="Описание" loading="lazy" />

Это простой и поддерживаемый способ ленивой загрузки.

Lazy-loading компонентов в React
В React можно использовать React.lazy и Suspense:

import React, { Suspense } from 'react';

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <div>
      <h1>Главная страница</h1>
      <Suspense fallback={<div>Загрузка...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

Компонент HeavyComponent загрузится только тогда, когда он понадобится.

💎 Преимущества
- Ускоряет загрузку страницы.
- Снижает объем передаваемых данных.
- Улучшает производительность и SEO.

Используйте lazy-loading, чтобы сделать ваши проекты быстрее и удобнее для пользователей.

#lazy #react #optimization

👩‍💻 5 продвинутых паттернов в React

Каждый разработчик хочет писать универсальный, чистый код, который не будет повторяться, будет оптимизированным и легкомасштабируемым. В этом видео мы разберем 5 продвинутых паттернов и подходов в React

- Slot Pattern (Component Injection)
- Render Prop
- Proxy Component
- Function as a Child
- Compound Components

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

#frontend #react #patterns

👩‍💻 Принципы SOLID в React

Принципы SOLID помогают строить приложения, которые проще развивать и поддерживать в долгосрочной перспективе. Они помогают выстроить архитектуру с учетом будущих расширений и изменений. Изучив эти принципы, вы научитесь думать на шаг вперед, проектируя гибкие и масштабируемые системы.

- Single Responsibility Principle (Принцип единственной ответственности)
- Open/Closed Principle (Принцип открытости/закрытости)
- Liskov Substitution Principle (Принцип Барбары Лисков)
- Interface Segregation Principle (Принцип разделения интерфейса)
- Dependency Inversion Principle (Принцип инверсии зависимостей)

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

🔗 Репозиторий

#react #solid #frontend

👩‍💻 Принципы ООП в React.

В этом видео разберем основные принципы ООП — инкапсуляцию, наследование, полиморфизм и абстракцию — и покажем, как они работают в React. Узнаем, что такое Render Props, Component Injection, композиция и декомпозиция, и применим их в функциональных компонентах, Custom Hooks и HOCs.

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

🔗 Репозиторий

#frontend #react #ооп

👩‍💻 Продвинутый React

Выпущено три видео по паттернам и принципам программирования:

📹 5 продвинутых паттернов в React – изучаем ключевые подходы и паттерны в разработке React-приложений: Render Props, Slot Pattern (Component Injection), Proxy Component, Function as a Child, Compound Components.

📹 Принципы SOLID в React – учимся создавать переиспользуемые компоненты, используя SOLID-принципы. Разбираем, как правильно декомпозировать код и проектировать архитектуру с учетом лучших практик.

📹 Принципы ООП в React – закрепляем понимание объектно-ориентированного программирования, разбираем, откуда берутся паттерны и подходы, и как они помогают в разработке.

💡 Для чего это нужно?

Формирование архитектурного мышления важно уже на этапе обучения. Понимание принципов и подходов к разработке помогает писать более чистый, масштабируемый код. Чем раньше вы начнете разбираться в паттернах, тем быстрее сможете применять их в своих проектах и развивать свои навыки.

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

#frontend #react #solid #oop