Знакомство с Preact – Небольшой и быстрой React альтернативой
Preact – это JavaScript библиотека, которая позиционирует себя как быстрая (3кб) альтернатива React с такой же ES6 API. Как постоянный пользователь React, я всегда хотел опробовать Preact и посмотреть, что он может предложить, а также увидеть разницу между этими двумя библиотеками.
В этой статье мы познакомимся с Preact, его основными концепциями и разберемся в отличиях между Preact и React.
Знакомство с Preact
Как я и сказал выше, Preact – это альтернатива React весом в 3кб, разработанная Джейсоном Миллером и его помощниками. Preact был разработан с целью создания JavaScript фреймворка маленького размера, но предлагающего все те же функции, что и React.
Он весит всего 3кб, а это значит, что вам больше не придется волноваться о том, что ваша JavaScript библиотека/фреймворк займет много места в общем весе приложения.
Preact быстр, но не только из-за веса. Это одна из самых быстрых DOM библиотек из всех существующих благодаря простой и предсказуемой реализации diff.
Ключевые качества и цели Preact:
- Производительность: быстрый и эффективный;
- Размер: весит крайне мало;
- Эффективность: эффективно использует память;
- Понятность: разобраться в этой библиотеке можно за несколько часов;
- Совместимость: Preact стремится к тому, чтобы быть максимально совместимым с React API. preact-compat пытается достичь максимальной совместимости. О нем мы поговорим позже.
Preact отлично работает во всех браузерах, но с IE7 и IE8, конечно же, могут возникнуть проблемы. К тому же у Preact есть большое сообщество с огромным количеством плагинов, и многие компании начинают переключаться на эту JS библиотеку.
На данный момент Preact используют такие компании как Lyft, Housing.com и m.uber.com. Команда разрабчиков Uber недавно написала статью о том, как Preact был использован для создания мобильной версии Uber, и насколько сильно он улучшил производительность приложения за счет минимального веса.
Отличие Preact от React
Этим вопросом озадачиваются все React разработчики. React – это устоявшаяся и популярная библиотека, которая весит около 45кб. Так зачем кому-то разрабатывать на Preact?
Preact не является ограниченной версией React. Они отличаются. Многие из этих отличий тривиальны и могут быть полностью убраны с помощью preact-compat, который ложится тонким слоем поверх Preact, и за счет которого достигается 100% совместимости с React.
Размер файла
Для начала, размер файлов разительно отлчичается. 3кб Preact против 45кб React. Это потому, что Preact не включает в себя каждую функцию React, чтобы оставаться небольших размеров.
class против className
При использовании React, если вы хотите добавить класс к <div> элементу, то вам придется написать нечто подобное:
# React код <div className="class-here">Содержимое блока</div>
В Preact вы просто можете использовать class для CSS классов. className также поддерживается.
# Preact код <div class="class-here">Содержимое блока</div>
render( )
В Preact this.props и this.state переходят в render(). Что это означает? Посмотрите на пример ниже.
// Preact код
class SomeClassName extends Component {
constructor () {
super();
this.state = {
message: ''
};
}
render(props, state) {
return (
<div>
<p>{state.message}</p>
</div>
)
}
}
// React код
class SomeClassName extends Component {
constructor () {
super();
this.state = {
message: ''
};
}
render() {
return (
<div>
<p>{this.state.message}</p>
</div>
)
}
}
Как видите, мы можем делать код чище убирая this. Если вам хочется пойти еще дальше, то вы можете использовать деструкцию. Например:
class SomeClassName extends Component {
constructor () {
super();
this.state = {
message: ''
};
}
render(props, {message}) {
return (
<div>
<p>{message}</p>
</div>
)
}
}
Отсутствие PropTypes
Не все используют PropTypes, так что их нет в Preact. Если они вам все-таки понадобились, то вы можете добавить их вручную с помощью preact-compat.
Использования preact-compat для совместимости Preact и React
В Preact есть пакет preact-compat, который работает как прослойка для совместимости двух библиотек, которая также делает проще переход от React к Preact. Он помогает продолжать писать React/ReactDOM без изменения в рабочем процессе и дает возможность использовать все возможные npm модули.
Так как добавить preact-compat в существующий React код?
01. Установите preact-compat с помощью npm.
npm i preact-compat
02. Следующий шаг – это добавление alias к preact-compat. Это можно сделать добавив следующую resolve.alias конфигурацию к вашему webpack.config.js:
{
"resolve": {
"alias": {
"react": "preact-compat",
"react-dom": "preact-compat"
}
}
}
Начало работы с Preact
Preact API и его использование очень похожи на React, но есть несколько важных отличий, о которых нужно знать разработчикам.
Чтобы их продемонстрировать я разработал небольшое простое приложение с помощью Dribbble API, которое показывает последние разработки. Само приложение можно посмотреть здесь, а исходный код в Github.
Сейчас я расскажу о нескольких ключевых отличиях в разработке на Preact.
Для создания приложения на Preact нам понадобится Preact CLI – это проект от разработчиков Preact, который помогает новичкам быстрее разобраться с библиотекой. Preact CLI дает возможность генерировать веб приложения с такими функциями как:
- Авто-генерируемые Service Workers для оффлайн кэширования, работающие на sw-precache.
- Автоматическое разделение кода на маршруты.
- PRPL шаблон для быстрой загрузки.
- Поддержка CSS модулей, LESS, SASS, Stylus.
- Автоматическое тестирование приложений, помощники в исправлении багов.
- Пре-рендеринг/рендеринг на серверной стороне.
Инструмент preact-cli поможет в написании Preact кода. Установить preact-cli можно с помощью следующей команды:
npm install -g preact-cli
Как только CLI успешно установится, создайте новое приложение, вбив в терминал следующую команду. preactdribbble – это название приложения. Вы можете назвать его как хотите, при этом перед ним может не быть префикса preact.
preact create preactdribbble
Это создаст новую папку с названием preactdribble, в которой будут все файлы, необходимые для создания приложения. Откройте эту папку и давайте запустим приложение:
# start a live-reload/HMR dev server: npm start
Эта команда запустит сервер Hot Module Reloading(HMR) по одному из адресов:
- http://0.0.0.0:8080
- http://localhost:8080
Я не буду углубляться во все детали создания приложения, но я покажу разницу в разработке приложений с Preact.
Использование hyperscript
import { h, Component } from 'preact';
‘h’ – это функция, которая превращает JSX код в виртуальные DOM элементы. Это более обобщенная версия React.createElement.
Использование preact-router
// src/components/header/index.js
import { h, Component } from 'preact';
// Link используется для создания ссылок
import { Link } from 'preact-router/match';
import style from './style';
export default class Header extends Component {
render() {
return (
<header class={style.header}>
<h1>PreactDribbble</h1>
<nav>
<Link activeClassName={style.active} href="/">Home</Link>
</nav>
</header>
);
}
}
preact-router создает <router /> компонент, который рендерит своих потомков, когда URL совпадает с их path. Он также автоматически добавляет <a /> элементы в router.
В блоке кода выше мы импортировали Link из preact-router/match. <Link> – это обычная ссылка, но она автоматически добавляет и удаляет classname “active” в зависимости от того, совпадает ли действительный URL.
Link компонент использует традиционный href атрибут в отличие от React, который использует атрибут to.
Использование (props, state) как аргументов в методе render()
// src/routes/home/index.js
render(props, { shots }) {
return (
<div class={style.home}>
<div class="container">
<div class="row">
{shots.map((item, i) => (
<div class="col-xs-12 col-sm-6 col-md-4" key={i}>
<div class={style.box}>
<a href={item.html_url} target="_blank" class={style.title}>
<img src={item.images.hidpi || item.images.normal || item.images.teaser} />
</a>
<a href={item.html_url} target="_blank" class={style.title}>{item.title}</a>
<div class={style.userprofile}>
<img src={item.user.avatar_url} />
<a target="_blank" href={item.user.html_url}>
{item.user.name}
</a>
</div>
</div>
</div>
))}
</div>
</div>
</div>
);
}
В render функции мы пользуемся преимуществами функции Preact, которые позволяют использовать shots.map вместо this.state.shots.map. В блоке кода выше данные из Dribbble используются для создания интерфейса приложения.
Создание шаблонов
preact-cli инструмент не работает с index.html файлом. Это может стать проблемой, если нужно отредактировать или добавить код в index.html. В документации есть раздел, названный templates. Шаблон используется для обработки страниц. Базовый шаблон можно посмотреть здесь. Нам нужно создать template.html внутри папки src, а затем использовать команду ниже, чтобы информировать Preact о том, что мы хотим использовать шаблон.
preact watch --template src/template.html
Вот и все. Это все новые вещи, которые увидит обычный пользователь React. Preact использует тот же API что и React, те же методы жизненного цикла и ту же мотодологию. Если вам комфортно разрабатывать на React, то вы готовы использовать Preact прямо сейчас!
Так Preact или React?
Ответ на этот вопрос зависит от ситуации. Компромисс перехода на Preact от React заключается в том, что вам, скорее всего, придется попрощаться с некоторыми функциями или по крайней мере вам придется добавить и настроить некоторые функции React вручную (preact-compat). Примером этого является, например, Unit Testing.
React использует утилиту для тестирования, которая называется Enzyme. Юнит тестинг возможен и в Preact, но с некоторыми ограничениями.
React может быть использован для разработки сложных приложений, в который постоянно меняется информация. У него невероятная экосистема. Существует множество версий React на разные случаи, а также он имеет поддержку растущего сообщества.
Как я сказал выше, все зависит от ситуации. Если вы хотите создать небольшое приложение, которое хорошо будет выполнять одну функцию, то Preact может стать именно тем, что вам нужно.
React может быть использован для более серьезных вещей. Нет смысла создавать приложение на Preact, импортируя при этом 10-15 модулей для совместимости. Я думаю, в этом случае лучше сразу программировать на React.
Ресурсы для дальнейшего изучения
- Сайт Preact
- Установка и работа с Preact на egghead.io
- Джейсон Миллер рассказывает о Preact.
Перевод статьи Introduction to Preact — a smaller, faster React alternative