Please enable JavaScript.

Coggle requires JavaScript to display documents.

Frontend (client side) - Coggle Diagram

- - - - Рекомендуемая структура
        
        Рядом массив allIds с порядком элементов
        
        Ассоциативный массив сущностей по id byId (для ускорения доступа)
      - Normalizr
        
        Определение схемы
        
        Нормализация иерархической структуры посредством схемы
    - - Избавляет от необходимости обновлять каждую копию
        (н-р, изменяем имя автора, оно меняется у всех книг)
      - Автоматически актуализирует список при запросе конкретного элемента
  - - - Reducer - аргумент функции reduce: происходит свертка actions в state
      - Минусы
        
        Каждый mounted connected компонент сравнивает ссылки на наблюдаемую часть store при любом изменении store
        
        Нужно решение для устранения switch-case boilerplate
        
        Нужно решение для иммутабельного обновления вложенных структур (Immer, Immutable или Ramda)
        
        Нужно решение для мемоизации (reselect)
        
        Нужен Middleware для dispatch с асинхронной логикой
        
        Для использования Map или Set нужен Immutable
        
        Необходимо использовать провайдер для каждого хранилища
      - Для удобства часто пишут action creators
      - Middleware
        
        При подключении redux-thunk в dispatch помимо action можно передать thunk: (dispatch, getState) => { dispatch(...) }
        
        В redux-saga генераторы подписываются на интересующие actionType
      - Плюсы
        
        Удобная иммутабельная история состояний для time-travel debugging
    - - Оповещение автоматически определяемых наблюдателей
      - Под капотом
        
        Отписка, если observable не заинтересует наблюдателя при очередном проходе
        
        Декоратор над наблюдателем позволяет отследить факт его выполнения в момент чтения observable
        
        Прокси для перехвата обращений к observable
      - computed get поле
        
        Должно зависеть только от observable полей
        
        Точка кэширования (перерасчет при изменении зависимостей)
        
        Если нужны параметры, есть computedFn
      - Реакция
        
        Cайд-эффект при изменении observable
        
        Не должна менять другие observable, нужно использовать computed
        
        autorun наблюдает за всеми читаемыми свойствами и по умолчанию оповещает при инициализации
        
        onBecomeObserved/onBecomeUnobserved
      - actions
        
        Транзакция для избегания синхронной реакции на изменение каждого observable
        
        action.bound для захвата this
    - - Решение, устраняющее большинство минусов Redux
      - Slice
        
        const { actions, reducer } = createSlice({ initialState, reducers })
        
        slice подключается к store через slice.reducer
        
        reducers - объект синхронных методов от state
        
        Имя action == Имя reducer. Также решается проблема глобальной уникальности имени action
      - Мутабельный state (встроенный Immer)
      - redux-thunk работает из коробки
      - createApi - slice для удобной работы с сервером.
        Генерирует хук, возвращающий { data, error, isLoading }
- - - - С импортом из css-module нет конфликтов глобальных имен
      - Не подходит для динамических стилей (н-р, left: ...px)
    - - Имеет лучшие возможности по генерации стилей «на лету» в привычном синтаксисе
      - Не нужно учить препроцессор
      - Для часто меняющегося стиля рекомендуются Inline-стили
      - Поддержка css-селекторов
      - Генерация css-класса для стилевого объекта (общий для идентичных стилей)
      - Styled components для создания стилизованных html-компонентов (ИМХО, отвлекают от логических компонентов)
    - - Переменные
        
        Наследование
        
        Синтаксис для вложенных селекторов
        
        Функции
        
        Ассоциативные массивы
  - - - Блок - то, что можно вынести в компонент React/Angular
      - Элемент - то, что не существует в отрыве от блока
      - Решаемые проблемы?
- - - - Умные бизнес-компоненты
      - Публичный API в index.ts (импорт внутренностей запрещен)
      - Внутри каждого утилиты и сторы
    - - Зависимости между соседями внутри слоя из-за небольшого числа слоев (модуль в модуле, утилита в утилите)
      - Нет разграничения между абстрактным и бизнес-кодом
  - - - shared
        
        Переиспользуемые части
        
        Копирует структуру слоев внутри себя
      - Бизнес-слои
        
        entities - компоненты бизнес-сущностей, могут быть умными (н-р, карточка поста)
        
        features - компоненты бизнес-действий (н-р, лайк, репост)
        
        widgets - блоки, содержащие features и entities (н-р, пост)
      - Над слоем pages может быть слой взаимодействия страниц - processes (н-р, переход между формами)
      - app - слой приложения
    - - Любой элемент рассматривать как widget
      - Если какая-то часть виджета окажется востребованной в другом виджете, то она выводиться в отдельную feature
      - Аналогично выносим общие части на уровень ниже
    - - index.ts - api модуля с экспортами
      - /ui - view
      - /model - БЛ (сервисы, сторы и т.д.)
      - /lib - утилиты (отвязанные от бизнеса)
      - /api - взаимодействие с сервером
      - /config - конфиги