

Александр Сушко
стажер


Это не Кирилл
Привет.
Блин, забыл капец.
Можете меня из докладчиков убрать?
22 августа, 22:54

Александр Сушко
Эмм, а что так? Программа уже составлена.

Это не Кирилл
Не вывожу подготовиться нормально :-)

Александр Сушко
Ну ты жук...
быстрая и компактная альтернатива Реакту
история одного разочарования

3 Кб
~18 Кб со слоем совместимости
preact-compat
в gzip, конечно
Основные преимущества
1. API и компоненты как у Реакта
2. Слой совместимости с Реактом
3. Свой, более быстрый, алгоритм сравнения DOM
Это в дополнение к малому весу
Лирическое отступление



О — оптимизация

+
=
| react-lite |
Inferno |
Preact |
|---|---|---|
| 28,2 Кб | 25,2 Кб | 8,4 Кб |
| 11 Кб |
9,5 Кб | 3,6 Кб |
| − | + | + |
| − | + | + |
| ± | + | + |
| минифиц. |
| gzip |
| server rendering |
| react-dev-tool |
| совместимость с React |
IE9+

preact
preact
preact
preact
preact
preact
preact
preact
preact
preact
preact
preact

Автор
Джейсон Миллер
более легче
быстрее
лучше
В Преакте нет
1. PropTypes
2. React.Children
3. Synthetic Events
Всё можно вернуть, подключив preact-compat
«Preact: Into the void 0»
JSConf EU 2017
Мне было интересно, как устроен Реакт.
Пока я в нём разбирался,
я написал Преакт»
«
Главные цели
1. Быстрый рендеринг
2. Малый размер библиотеки
3. Грамотное использование ресурсов
Минусы
1. Неподробная документация
2. Плохой "Get Started"
3. Совместимый, да не совсем
| React + ReactDOM |
preact-compat |
|---|---|
| 142 Кб | 19,8 Кб |
| 43,2 Кб |
7,7 Кб |
| минифиц. |
| gzip |
yarn add preact preact-compatmodule.exports = {
...
resolve: {
alias: {
"react": "preact-compat",
"react-dom": "preact-compat"
}
}
};Раз...
Два...
ToDo React


Moira 2.0

Сравнение размеров бандлов Мойры
| React |
Preact | |
|---|---|---|
| минифиц. | 492 кб | 371 Кб |
| gzip | 142 Кб | 105 Кб |
Сравнение времени первого рендеринга
| React |
Preact | |
|---|---|---|
| 500 комп. |
0,23 с | 0,10 c |
| 5000 комп. | 0,64 c | 0,60 c |
Сравнение времени повторного рендеринга
| React |
Preact | |
|---|---|---|
| 500 комп. |
1,46 c | 1,24 c |
| 5000 комп. | 3,47 c | 3,67 c |
0,22 c
Выигрыш в скорости повторного рендеринга
1,24 c
Общее время повторного рендеринга
Разочарование

?
Примеры успеха с Преакт


В итоге
1. Преакт стоит попробовать.
2. Преакт не панацея
3. Помните о нативных способах
Александр Сушко
Спасибо за внимание
стажер
младший фронтенд-разработчик
preact − react = ?
preact
By Alexander Sushko
preact
preact: история одного разочарования
- 1,167