Розглядаємо Preact як альтернативу React

Preact – бібліотека, яка є імплементацією парадигми віртуальних компонентів DOM, так само як і React. Проте на відміну від React важить лише 3 кілобайти й може похизуватися більшою швидкістю роботи.

Чому саме Preact?

Preact – облегшена версія React. Можливо ви оберете цю бібліотеку, якщо вам подобається створювати інтерфейси з React, проте пріоритетом є швидкість роботи, наприклад при розробці мобільних веб-застосунків або PWA.

У будь-якому випадку, починаючи розробку нового проекту, або продовжуючи підтримку старого, Preact може стати вам у нагоді. Вивчаючи його, немає потреби наново «винаходити колесо», бо він має багато спільно з React. Деінде настільки багато, що можна просто використовувати код з пакетів React, задаючи їм аліаси, така можливість з'явилася завдяки preact-compat.

Плюси та мінуси

Попри сумісність, React і Preact мають багато відмінностей.

Підсумовуючи можна виділити три пункти:

• Функціонал і API: Preact включає тільки частину React API, але не всю доступну функціональність.
• Розмір: Preact набагато легший за React.
• Продуктивність: Preact швидший.

Кожна бібліотека має свої сильні та слабкі сторони, і тільки ви вирішуєте яку бібліотеку ліпше використати у вашому випадку. У цій частині я намагатимуся перерахувати всі позитивні та негативні моменти обох бібліотек.

Плюси Preact:

• Легкий (займає 3КВ після архівації) і швидший за React (тести можна знайти тут). Ви також можете запустити тести продуктивності у власному браузері.

• Preact сумісний з React, і має такий самий ES6 API. Це робить його легшим для сприйняття і впровадження на ваших проектах.

• Має хорошу документацію і багато прикладів на офіційному сайті.

• Має потужну офіційну CLI для створення нових проектів без налаштування Webpack i Babel.

• Багато функцій вже реалізовано в React.

• Має власні фічі, які відсутні у React. Наприклад, Linked State.

Мінуси Preact:

• Підтримує тільки функціональні компоненти без станів і використовує ES6 оголошення класів, тому не має createClass.
• Немає підтрмки context.
• Відсутня підтримка React propTypes.
• Менша спільнота.

Плюси React:

• React підтримує односторонню прив'язку даних.
• Його підтримує та використовує Facebook.
• Хороша документація, приклади, посібники — на офіційному сайті та в мережі.
• Велика спільнота.
• Має офіційний інструмент для відлагодження у вигляді розширення для Chrome.
• Має функцію швидкого створення проекту.
• У нього добре спроектований і комплексний код.

Мінуси React:

• React важить більше ніж Preact( 136КВ у мініфікованому стані, або 42КВ у заархівованому).
• Він повільніший за Preact.
• Внаслідок складної структури коду, для розробників-початківців стає проблематично робити свій внесок.

Знайомство з Preact CLI

Preact CLI – інструмент командного рядка, він робить створення нового проекту доволі легким, позбавляє необхідності знайомитися з тонкощами конфігурації.

Відкрийте термінал й запустіть наступний код:

npm i -g preact-cli@latest

Встановивши останню версію Preact CLI, Node.js, npm на машину, ви можете створити власний проект:

preact create my-app

Або так, якщо кортить створити застосунок інтерактивно:

prect init

Потім відкрийте директорію проекту у терміналі й запустіть наступний код:

npm start

Ця команда запустить локальний сервер. І нарешті, після завершення роботи над проектом ви можете зібрати його у продакшн-версію.

npm run build

Структура застосунку

Після встановлення Preact CLI й створення нового застосунку необхідно зрозуміти як були згенеровані файли:

Інтерпретатор CLI створює наступну структуру каталогу:

├── node_modules
├── package.json
├── package-lock.json
└── src
    ├── assets
    ├── components
    │   ├── app.js
    │   └── header
    ├── index.js
    ├── lib
    ├── manifest.json
    ├── routes
    │   ├── home
    │   └── profile
    └── style
        └── index.css

Тека components містить Preact компоненти. Директорія routes містить компоненти сторінок, які використовуються для кожного маршруту застосунку. Ви можете використати теку lib для будь-якої бібліотеки. style містить CSS стилі. assests використовується для іконок і графіки.

Зверніть увагу на файл manifest.json, який є інтерпретацією package.json, але для PWA. Дякуючи Preact CLI ви можете мати ідеальний PWA з коробки.

Тож, якщо ви відкриєте ваш проект package.json, ви побачите, що головний вхід в застосунок – src/index.js.

Вміст файлу:

import './style';
import App from './components/app';

export default App;

Як ви можете бачити index.js імпортує стилі та App компонент з ./components/app**, і тоді просто експортує його за замовчуванням.

Подивимось, що всередині ./components/app:

import { h, Component } from 'preact';
import { Router } from 'preact-router';

import Header from './header';
import Home from '../routes/home';
import Profile from '../routes/profile';

export default class App extends Component {
    handleRoute = e => {
        this.currentUrl = e.url;
    };

    render() {
        return (
            <div id="app">
                <Header />
                <Router onChange={this.handleRoute}>
                    <Home path="/" />
                    <Profile path="/profile/" user="me" />
                    <Profile path="/profile/:user" />
                </Router>
            </div>
        );
    }
}

Цей файл віддає клас App який спадкує клас Component імпортований з пакета preact. Кожен компонент preact вимагає успадкування класу Component.

App містить метод render, який повертає декілька HTML елементів і Preact компонентів, які відображають інтерфейс користувача.

Всередині елементу <div> ми маємо два Preact компоненти, Header, який рендерить шапку застосунку, і компонент Router.

Preact Router подібний до останньої версії React Router. Ви просто обертаєте елемент у тег роутеру<Router> і визначаєте атрибут path для кожного компоненту. Потім роутер буде рендерити компонент, як тільки його path буде збігатися з URL браузеру.

Варто зазначити, що Preact Router дуже простий, проте на відміну від React Router, не підтримує розширені функції, такі як вкладені маршрути та композиції елементів. Якщо вам потрібні ці функції, вам слід використовувати React Router v3 з preact-compat, або ще краще використовувати останній React Router 4, він не потребує будь-якого рівня сумісності, оскільки він працює безпосередньо з Preact.

Приклад:

Рівень сумісності Preact

Модуль preact-compat дозволяє розробникам перемикатися з React на Preact без зміни імпорту з React і ReactDOM на Preact або використовувати пакети React у Preact.

Використання preact-compat стає можливим після встановлення його за допомогою npm:

npm i -S preact preact-compat

Потім налаштуйте вашу систему на перенаправлення імпортів з react або react-dom на preact-compat. Наприклад, у цьому випадку для Webpack вам необхідно додати наступний конфігураційний файл до webpack.config.js:

{
  "resolve": {
    "alias": {
      "react": "preact-compat",
      "react-dom": "preact-compat"
    }
  }
}