Preact — идея на 5, реализация на 3

Preact — классный, но есть нюансы. Однажды я делал приложение, в котором был очень критичен перформанс. Попробовал внедрить в него Preact и получилось неплохо, но в итоге пришлось отказаться от этой идеи и добавить в бандл около 40кб.

Однажды я делал несколько веб-приложений, у пользователей которых было три необычные характеристики:

  • пользуются довольно дешевыми компьютерами/телефонами;
  • открывают по 50 вкладок с приложением;
  • сидят в нем по 8 часов в день.

Хотелось максимально снизить боль этим людям, в первую очередь не заставлять их грузить кучу JS, парсить и исполнять его. Для этого я решил заменить React на Preact. Получилось неплохо, но в итоге пришлось отказаться от этой идеи и добавить в бандл около 40кб.

Preact — аналог React, но очень маленький. Несмотря на (почти) полную совместимость API, размеры библиотек отличаются в 13 раз.

Почему не Svelt/Ember/Vue/WhatEverJS?

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

Preact — это классно

Я не верил, что Preact выполнит свои обещания — меньше кода, совместимый API. Но это оказалось правдой. Настроили алиасы и все заработало. Бандл уменьшился в два раза, TTI упал.

Забегая вперед, обратная миграция тоже не заняла много времени: выкинули Preact, убрали алисасы, исправили ошибки в типах и все снова работало.

Вообще, все хорошее об этом фреймоворке написано в документации — Small Size, Big Performance, Ecosystem Compatible. Все правда. Почти.

Preact — это не классно

Но мы все-таки отказались от Preact.

Во-первых, после месяца разработки оказалось, что экономия 40кб — это конечно круто, но не так значительно как месяц назад. Все приложение весило уже больше 300кб и снизить его размер было нельзя . 13% — это не 50%. А ведь размер приложения со временем будет только расти, и скорее всего, экономия будет становиться еще менее значительной.

Во-вторых, мы использовали TypeScript и хотели сохранить проверки типов по максимуму. Но, оказалось, что типы React и Preact не сходятся примерно в половине случаев. И в итоге, мы теряли подсказки IDE при использовании компонентов, теряли проверку типов на CI и страдали.

В-третьих, оказалось, что совместимость экосистемы — это небольшое лукавство. Большая часть React-библиотек правда совместима с Preact, но дьявол в деталях. Интеграция 5 процентов не-совместимых библиотек занимала кучу времени.

Кому подойдёт

Preact — классный. Но, на мой взгляд, если проект большой, и (или) написан на TypeScript, лучше взять React. С другой стороны, маленькие приложения — отличный кандидат на использование Preact.