Якщо для створення веб-додатків ви обрали React, вам також будуть корисні інструменти стилізації, управління станом і тестування. Розповідаємо про них в нашій добірці.

UI фреймворки

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

Antd

Ant Design - це система з відкритим вихідним кодом для створення веб-додатків з набором крутих готових компонентів React. Згідно офіційній документації, перелік функцій виглядає наступним чином:

1. ресурси і інструменти для розробки;
2. підтримка десятків мов;
3. потужна детальна настройка теми.

Ось офіційний туторіал про те, як використовувати Ant Design. Цю систему проектування використовують для своїх продуктів Alibaba, Tencent і Baidu.

Material UI

Google представила Materail Design в 2014 році. Фреймворк оснащений сітковими макетами, гнучкою анімацією, різними аддонами і ефектами глибини. Основні функції з коробки включають в себе:

1. високу продуктивність;
2. розширюваність за допомогою плагінів;
3. використання CSS-in-JS, що працює в рантаймі і на стороні сервера.

Semantic UI

Semantic UI React є офіційною розробкою для React JS. Крім функцій, пропонованих офіційним інструментом, він має деякі додаткові функціональні можливості: декларативний API, аугментацію і автоматичний контроль стану.

Компанії Snapchat, Reviewable використовували даний фреймворк для створення своїх продуктів.

Стилізація

 Існують різні підходи до стилізації додатків, але ми зосередимося на двох основних варіантах:

1. Modular Stylesheets;
2. CSS-in-JS.

Обговоримо кожен з них.

Modular stylesheets

Не будучи офіційною специфікацією, CSS-модулі не реалізуються в браузерах. Це більше схоже на задачу, запущену на стадії складання проектів. Під час цього процесу імена класів і селектори модифікуються таким чином, що виникає свого роду локальна область видимості (щось на зразок простору імен).

Цей підхід спрямований на вирішення проблеми глобальної області видимості в CSS. Модулі гарантують, що всі стилі одного компонента знаходяться в одному місці і застосовуються тільки до цього конкретного блоку.

CSS-in-JS

JSS ( CSS-in-JS ) - це хитра фіча для роботи з CSS, що дозволяє використовувати JavaScript для опису стилів декларативним, безконфліктним і багаторазово використовуваним чином. Він може компілювати в браузері, на стороні сервера або під час збирання в Node.

Управління станом

У мережі часто дискутують як на тему управління станом в React, так і на тему інструменту, необхідного для роботи з React.js. Найбільш поширеними є Redux і MobX. Обговоримо їх плюси / мінуси і функціональні відмінності.

Redux

Redux - це інструмент, який дозволяє розробникам керувати даними і станом інтерфейсу в додатках JavaScript. Численні можливості Redux роблять його придатним інструментом для складних веб-продуктів.

Бібліотека добре працює з single-page applications (SPA), де динамічне зростання додатку може ускладнити управління станом.

Redux підпорядковується трьом основним принципом:

1. Single source of truth. Redux використовує тільки одне сховище для всього стану програми.
2. Стан доступний тільки для читання.
3. Зміни проводяться за допомогою функцій. Редьюсери - це функції, що обробляють дії і вносять зміни в стан.

MobX

MobX - це бібліотека, яка дозволяє управляти станом додатку. TFRP спрощує його і робить більш масштабованим.

Основними компонентами MobX є:

1. Стан. У ньому масиви, посилання і об'єкти розглядаються як осередки даних програми.
2. Derivations. Це такі значення, які автоматично обробляє стан додатку.
3. Реакції. В основному відповідають за операції введення-виведення і оновлення DOM. Мережеві запити повинні оброблятися своєчасно і автоматично.
4. Дії. Змінюють стан, а MobX контролює, щоб усі зміни оброблялися синхронно.

Бібліотека підтримує Node.js, React Native, Rhino і всі браузери (крім IE). Варто відзначити, що MobX - це не фреймворк. Він нічого не знає про те, як структурувати ваш код, обробляти і зберігати дані.

Тестування

Тестування виконується, коли розробникам необхідно перевірити функціональність, створену в рамках певних вимог. Основними складовими цього процесу є планування, створення, запуск тестів і аналіз отриманих результатів.

Тестування ПЗ включає в себе наступні етапи:

1. аналіз і планування;
2. розробка тестових сценаріїв;
3. оцінка критеріїв завершення випробувань;
4. написання звітів;
5. документація та код-рев'ю;
6. статичний аналіз.

Піраміда тестів

При виборі методу тестування додатків React зверніть увагу на піраміду тестування Agile. Це допоможе вам знайти найбільш підходящий метод.

піраміда тестування

Піраміда показує, що замість перевірки одним інтеграційним тестом можна використовувати безліч unit-snapshot тестів, а масу інтеграційних тести можна замінити одним ручним. На вершині піраміди ми маємо наскрізний тест (end-to-end) - ручне тестування всього софта.

Давайте обговоримо найбільш ефективні інструменти для тестування програми на React.

Jest

Jest - це бібліотека з відкритим вихідним кодом для модульного тестування коду JavaScript, випущена Facebook. 

Інструмент дає змогу писати тести з відповідними API, які швидко показують результати. Ваше завдання - просто визначити вхідні параметри і вихідні дані, які повинні бути отримані.

Cypress

Cypress - це інструмент з відкритим вихідним кодом, який використовується для автоматизованого UI і наскрізного тестування веб-додатків. 

Основним завданням Cypress є перевірка взаємодії клієнтських частин з сервером (end-to-end). Крім того, інструмент пропонує інтеграційні тести окремих компонентів сторінки.

У чому різниця між Jest і Cypress

Варто відзначити, що Jest застосовує Unit-тестування і бібліотеки інтеграційного тестування. З іншого боку, Cypress - приклад наскрізної тестової платформи (e2e). Це означає, що ви можете імітувати взаємодію користувача з додатком від початку до кінця. Він включає в себе всі кліки по сторінках, навігацію і так далі.

Jest складніше і вимагає навичок тестування. Однак у Cypress слабке крос-браузерне тестування, відсутні об'єкт сторінки, перемикання вкладок і підтримка iFrame.

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

Джерело перекладу