Щоб React «заграв»: 9 інструментів розробки

  • 3 мая, 14:16
  • 4276
  • 0

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

UI фреймворки

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

Antd

Щоб React «заграв»: 9 інструментів розробки

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 використовували даний фреймворк для створення своїх продуктів.

Щоб React «заграв»: 9 інструментів розробки

Стилізація

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

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

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

Modular stylesheets

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

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

CSS-in-JS

Щоб React «заграв»: 9 інструментів розробки

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. Зміни проводяться за допомогою функцій. Редьюсери - це функції, що обробляють дії і вносять зміни в стан.

Щоб React «заграв»: 9 інструментів розробки

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. Це допоможе вам знайти найбільш підходящий метод.

Щоб React «заграв»: 9 інструментів розробки

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

Піраміда показує, що замість перевірки одним інтеграційним тестом можна використовувати безліч 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.

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

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


0 комментариев
Сортировка:
Добавить комментарий