React и legacy

Немного о себе

• Fullstack разработчик
• Начинал с PHP
• Фронтенд начал с Vue
• Потом React Native
• А потом просто React
• А потом еще и Angular
• Хобби - гитара 🎸

Ужасы Legacy

• Никто не знает, как это работает
• Сложно поддерживать
• Тяжело развивать продукт
• Невозможно тестировать
• Разработчики грустят

Что делать?

Паниковать

Полюбить лапшу
Смириться

Написать все с нуля

Новый код

• Модульность
• Стандарт кодирования
• Статические анализаторы
• Тестирование
• Изживать legacy

?

Web-компоненты

Инкапсуляция

Пример

• Модальное окно Bootstrap
• Возможность создать много таких окон
• Простой пример реактивности внутри модального окна
• Продемонстрировать возможность передачи свойств
• piterjs-modal

Custom Elements

• Native way
• Никаких библиотек
• Плохая поддержка браузерами
• Много кода

Angular

• SPA Framework
• Тяжело внедрить
• Zone already loaded

Angular Elements

• Плохая поддержка браузерами
• Размер 200-300 Kb
• Ivy должен помочь
• Нет Lifecycle
• Слабый тулинг

Vue

• Простой в освоении
• Размер 21 Kb
• Различные варианты интеграции
• new Vue({})

Vue Custom Element

• Размер 9 Kb
• Native API или Polyfill
• Lifecycle
• Lazy loading
• Vue Custom Element Bundler
• Vue.config.ignoredElements

Preact Habitat

• Самое красивое лого
• Маленький размер 4 Kb
• Идеальный старт для создания виджетов
• Самый простой API
• Нет фабрик
• Нет Lifecycle

React

• Лучшие подходы
• Размер в 30 Kb
• Вызов ReactDOM.render для каждого компонента
• Добавлять Providers, context и т.п. в каждый компонент

React Habitat

• Размер библиотеки 4 Kb
• Code-splitting
• Возможность создавать кастомные фабрики
• react-habitat-redux
• Proxy
• Различные типы props
• Lifecycle

Типы свойств

• data-props JSON-encoded
• data-prop-color
data-prop-title
  JSON-encoded
• data-n-prop numeric
• data-r-prop window variable

Что дальше?

Спасибо

Репозиторий

Вопросы