

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


Это не Кирилл
Привет.
Блин, забыл капец.
Можете меня из докладчиков убрать?
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-compat
module.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,071