О себе

  • Сам себя не похвалишь…

О себе

  • пишу на Реакте с v0.13.0 (март 2015)
  • разрабатываю в developers.sber.ru
  • выступал в Питере, Минске, Киеве, Москве на Web Standards Days, MODXpo, HolyJS, PiterCSS, Podlodka Crew, SPB Frontend, FrontendNight, IT Global Meetup, ProIT Fest…
  • открывал бар для разработчиков in💯gramm в Питере (RIP с началом пандемии)

Про что доклад?

Не про …

  • JSX Control Statements
  • методологию компонентного подхода
  • пересказ документации, историю успеха, рекламу моего «убийцы React»
  • «React — плохо, лучше используйте Мозг (здесь могла быть ваша реклама)»

Про что доклад?




декларативность и её связь с JSX

про Developer eXperience

«Сделай красиво!»

— Базара зиро…

HTML + CSS + JavaScript

JSX + Hooks = 🫀

Что такое шаблон?

Шаблон == функция, принимающая на вход данные (аргументы) и возвращающая строку
Все шаблоны — функции.
Но не все функции — шаблоны.
JSX — декларативные функции, но не декларативные шаблоны.
Перефразируя теорему «о бесконечных обезьянах»:

“ Что будет, если PHP-разработчиков заставить писать UI на JavaScript?

— Получится React

Императивный шаблон

Декларативный шаблон

  • Пошаговые инструкции
  • Описание конечного результата
  • Контроль над процессом
  • Контроль над результатом
  • Изменение состояния системы
  • Нет прямого управления состоянием
  • Детальный алгоритм
  • Краткость, наглядность

Признаки императивной разметки

  • наличие if-else / switch-case-состояний

Признаки императивной разметки

  • наличие if-else / switch-case-состояний

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

— Code Complexity: A Complete Guide

Признаки императивной разметки

  • наличие if-else / switch-case-состояний
  • порядок декларации == порядок результата

Декларативность или императивность

  • MoscowJS 22 «Шаблонизация, как дедушка завещал»

  • Medium.com «Правильная шаблонизация»

Классовые React-компоненты

Классовые React-компоненты

Классовые React-компоненты

🪦

R.I.P.

Составные компоненты

Составные компоненты

Material UI (MUI) , Ant Design , Chakra UI , Headless UI , Semantic UI React , Reach UI (теперь React ARIA)…

Составные компоненты

Паттерн render props

Паттерн FaCC

Базовые понятия

Паттерн FaCC

Паттерн FaCC

Расширяем шаблон

  • ✅ replace
  • ✅ prepend / append
  • 🤔 extend

Паттерн FaCC

Работа с React.Children

  • only(children)
  • count(children)
  • forEach(children, fn, thisArg?)
  • toArray(children)
  • map(children, fn, thisArg?)

Паттерн FaCC

Паттерн FaCC

Паттерн FaCC

Недостатки

  • сложно
  • чужеродно
  • неконтролируемо
  • можно «наделать делов» c extend

Паттерн FaCC

Преимущества

  1. Single responsibility — модули меньше
  2. Open Closed — модули расширяемы
  3. Liskov Substitution — правильное наследование
  4. Interface Segragation — интрефейсы разделены
  5. Dependency Inversion — шаблоны абстрактны
  6. 100 % TypeScript

Выводы

Выводы

Шаблонизация — ≈80% кода React-проекта
  • уменьшение объём кода
  • уменьшение «сложности» (complexity)
  • повышение «читаемости»
  • облегчение поддержки (и рефакторинга)

Вопросы?

github.com/Realetive/lecture-declarative-jsx-with-facc-moscowjs