#code #solid #react

Паттерны проектирования

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

ОСНОВНЫЕ КАТЕГОРИИ ПАТТЕРНОВ:

Порождающие: Отвечают за оптимальное создание объектов. Примеры: Одиночка (Singleton), Фабричный метод (Factory Method), Прототип (Prototype).

Структурные: Занимаются компоновкой объектов. Примеры: Адаптер (Adapter), Декоратор (Decorator), Фасад (Facade).

Поведенческие: Описывают взаимодействие между объектами. Примеры: Наблюдатель (Observer), Стратегия (Strategy), Команда (Command).

ЗАЧЕМ ОНИ НУЖНЫ?

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

Для изучения:
https://refactoring.guru/ru/design-patterns/catalog

#facts #tutorial #programming #DesignPatterns #development

Про принцип единственной ответственности

#solid #spr #live #react

🤦 возьмите ребят, начинающих прогеров

Крутой канал о программировании. Качественные, интересные видео. Почти каждое видео я смотрю👌🏻

https://youtube.com/@AlekOS

Open/Closed Principle

Принцип открытости-закрытости (Open/Closed Principle, OCP) в контексте React подразумевает, что компоненты должны быть открыты для расширения, НО закрыты для модификации. Это означает, что мы можем добавлять новые функциональности, не изменяя существующий код, что уменьшает риск ошибок и увеличивает масштабируемость.

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

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

#обучающийПост #react #solid

#code #solid #react

Сегодня задумался, знаете о чём? О том, насколько существующие сервисы и приложения недоработаны и сколько ещё предстоит работы разработчикам.

Почему это происходит? Потому что компании устраивают гонку, часто забывая о существующем коде, чтобы писать новый. На рефакторинг времени нет. Вы не представляете, какой хаос творится в больших компаниях. Знакомые и друзья рассказывают, как их нанимают в крупные компании и ставят на легаси проекты, оставляя там тухнуть. Да, за большую зарплату, но на таких проектах ты быстро выгораешь.

Что даст нам ИИ? Возможность ускорить разработку. Например, у бизнеса стоит выбор: отправить программиста на 3 месяца делать новую фичу, которая принесёт деньги, или на 3 месяца отправить на рефакторинг УЖЕ РАБОЧЕГО КОДА, КОТОРЫЙ СПРАВЛЯЕТСЯ С ЗАДАЧЕЙ. Очевидно - новая фича. НО что если с ИИ ты будешь рефакторить код не 3 месяца, а 1.5? И фичу новую писать тоже 1.5 месяца. Это меняет дело. Плюс, с ИИ можно отправить джуна на рефакторинг, пусть практикуется, ковыряется.

Я всё это к тому, что какой же ужасный Ростелеком 🥲 Древний чат, отвечают раз в 30 минут, нет нормальной поддержки.
И есть МТС, который решает твои проблемы за 5 минут. Кончился трафик? Напиши - добавят бесплатно. Произошло списание средств? Напиши - вернут.

15к просмотров и 1к лукосов💪

Принцип открытости-закрытости

#solid #live #react #ocp

😆👍
А потом сын на собеседовании:

- "Ну я разрабатываю сложные системы, пишу чистый код, могу с нуля настроить конфиги"
- "Ага, мы знаем"

Liskov Substitution Principle

Принцип подстановки Барбары Лисков (Liskov Substitution Principle, LSP) в контексте React подразумевает, что объекты в программе должны быть заменяемыми на экземпляры их подтипов, не изменяя корректности выполнения программы. В контексте компонентов, это означает, что дочерние компоненты должны дополнять, а не изменять поведение родительских компонентов.

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

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

#обучающийПост #react #solid

ProductWithReviews расширяет функциональность ProductDetails, но не модифицирует его.

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

#code #react #solid

Полезная теория

Кеширование

Кеширование — это процесс хранения копий данных в кеше. Эти данные могут включать результаты сложных вычислений, запросов к базам данных или часто запрашиваемые файлы. Когда данные запрашиваются, система сначала проверяет, есть ли их копия в кеше. Если копия найдена (это называется "попадание в кеш" или "cache hit"), данные извлекаются из кеша, что быстрее, чем из основного хранилища. Если копия не найдена (это называется "промах кеша" или "cache miss"), данные извлекаются из основного хранилища и, возможно, сохраняются в кеше для будущих запросов.

Веб-браузеры кешируют часто посещаемые веб-страницы, изображения и другие ресурсы, чтобы ускорить загрузку страниц.

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

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

Типы кеша:

LRU (Least Recently Used): Удаляет наименее недавно использованные элементы при необходимости освободить место для новых данных.

FIFO (First In, First Out): Удаляет данные в порядке их поступления.

LFU (Least Frequently Used): Удаляет наименее часто используемые элементы.

#cache #facts #tutorial

<!DOCTYPE html>

Этот элемент служит для указания типа документа (DTD, Document Type Definition) веб-страницы. Он должен идти первым в HTML-документе, перед тегом <html>. <!DOCTYPE html> не является HTML-тегом; это инструкция для веб-браузера о том, какой версией HTML или XHTML следует интерпретировать веб-страницу.

Если говорить о <!DOCTYPE html>, то он ассоциирован с HTML5. Его наличие гарантирует, что веб-страница будет отображаться в стандартном режиме, а не в квиркс-режиме (quirks mode), который может вызвать некорректное отображение страницы из-за совместимости с устаревшими версиями HTML.

Использование <!DOCTYPE html> улучшает совместимость веб-страницы с различными браузерами и обеспечивает корректное отображение элементов и стилей на странице.

#обучающийПост #html

Специфичность селекторов CSS

Специфичность селектора (еще называют весом) это свойство определяющее приоритет стилевого правила, то есть то, какой стиль будет применен к HTML элементу в итоге.

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

#обучающийПост #css

Открыл для себя новый формат. Прикольно получается видео. 😌

Далее вас ждёт курс по router и redux. Ещё js и верстка. Думаю такую вот базу выкатить до нового года✅