UI фреймворки
Фреймворки дозволяють пришвидшити та спростити процес створення додатку, вирішують проблему синхронізації внутрішнього стану та користувацького інтерфейсу.
Antd
Ant Design – це система з відкритим вихідним кодом для створення веб-додатків з набором крутих готових компонентів React. Згідно офіційної документації, перелік виглядає наступним чином:
- ресурси та інструменти для розробки;
- підтримка десятків мов;
- потужні детальні налаштування теми.
Ось офіційний туторіал про те, як використовувати Ant Design.
Цю систему проектування для своїх продуктів використовують Alibaba, Tencent и Baidu.
Material UI
Google представила Materail Design у 2014 році. Фреймворк Material-UI обладнаний сітковими макетами, гнучкою анімацією, різними аддонами та ефектами глибини. Основні функції з коробки містять в собі:
- високу продуктивність;
- можливість розширення за допомогою плагінів;
- використання CSS-in-JS, що працює у рантаймі та на серверному боці.
Semantic UI
Semantic UI React є офіційною розробкою для ReactJS від команди Semantic UI. Окрім функцій, які пропонуються офіційним інструментом, він має кілька додаткових функціональних можливостей: декларативний API, аугментацію та автоматичний контроль стану.
Компании Snapchat, Reviewable використовували даний фреймворк для створення своїх продуктів.
Стилізація
Нині розробникам ReactJS потрібен складний ланцюжок інструментів для написання вражаючого CSS-коду. Існують різноманітні підходи до стилізації додатків, але я зосереджусь на двох основних варіантах:
- Modular Stylesheets;
- 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 підпорядковується трьом основним принципам:
- Single source of truth. Redux використовує тільки одне сховище для всього стану додатку.
- Стан доступний лише для читання.
- Зміни виконуються за допомогою функцій. Ред’юсери – це функції, які обробляють дії та вносять зміни до стану.
MobX
MobX – це бібліотека, яка дозволяє управляти станом додатку. TFRP спрощує його і робить більш масштабованим.
Основними компонентами MobX є:
- Стан. У ньому масиви, посилання та об’єкти розглядаються як комірки даних додатку.
- Derivations. Це такі значення, які автоматично обробляють стан додатку.
- Реакції. Здебільшого відповідають за операції введення-виведення та оновлення DOM. Мережеві запити повинні оброблятися своєчасно та автоматично.
- Дії. Змінюють стан, а MobX контролює, щоб усі зміни оброблялись синхронно.
Бібліотека підтримує Node.js, React Native, Rhino та всі браузери (крім IE). Варто відмітити, що MobX – це не фреймворк. Він нічого не знає про те, як структурувати ваш код, обробляти та зберігати дані.
Тестування
Тестування виконується тоді, коли розробникам необхідно перевірити функціональність, що створена в межах певних вимог. Основними складовими цього процесу є планування, створення, запуск тестів і аналіз отриманих результатів.
Тестування ПЗ містить в собі наступні етапи:
- аналіз і планування;
- розробка тестових сценаріїв;
- оцінка критеріїв завершення випробувань;
- написання звітів;
- документація та код-ревью;
- статичний аналіз.
Піраміда тестів
Під час вибору метода тестування додатків React зверніть увагу на піраміду тестування Agile. Це допоможе вам знайти найбільш підходящий метод.
Піраміда показує, що замість перевірки одним інтеграційним тестом можна використовувати чисельні unit-snapshot тести, а масу інтеграційних тестів можна замінити одним ручним. На вершині піраміди ми маємо наскрізний тест (end-to-end) – ручне тестування всього софта.
Давайте обговоримо найефективніші інструменти для тестування додатків на React.
Jest
Jest – це бібліотека з відкритим вихідним кодом для модульного тестування коду JavaScript, яку випустили спеціалісти Facebook. Інструмент має понад 1000 учасників, понад 30000 зірок і близько 4700 форків на GitHub.
Інструмент дає можливість писати тести з підходящими API які швидко показують результати. Ваша задача – просто визначити вхідні параметри та вихідні дані, які мають бути отримані.
Cypress
Cypress – це інструмент з відкритим вихідним кодом, який використовується для автоматизованого UI та наскрізного тестування веб-додатків. Він має 19000 зірок і понад 1100 форків на GitHub.
Основною задачею Cypress є перевірка взаємодії клієнтських частин з сервером (end-to-end). Крім того, інструмент пропонує інтеграційні тести окремих компонентів сторінки.
Різниця між Jest і Cypress
Варто відмітити, що Jest використовує Unit-тестування та бібліотеки інтеграційного тестування. З іншого боку, Cypress – приклад наскрізної тестової платформи (e2e). Це означає, що ви можете імітувати взаємодію користувача з додатком від початку до кінця. Він містить в собі всі кліки по сторінкам, навігацію тощо.
Jest більш складний і вимагає навичок тестування. Однак у Cypress слабеньке крос-браузерне тестування, відсутні об’єкт сторінки, перемикання вкладок та підтримка iFrame.
Вибір потрібного інструменту залежить від ваших навичок програмування, вимог до проекту та особистих уподобань. Ви можете обрати гібридний підхід і використати одразу кілька інструментів.
Заключення
Я вважаю, що дані практики будуть корисними для розробки додатків React, створення складних і продуктів, які повинні масштабуватись.
Фреймворки користувацького інтерфейсу, інструменти CSS, бібліотеки управління станом і тестування, які ми з вами розглянули, зроблять процес розробки плавним і простим
