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

стажер

Это не Кирилл

Привет.

Блин, забыл капец.

Можете меня из докладчиков убрать?

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: история одного разочарования

  • 896