6 рекомендацій з розробки масштабованих React-проєктів

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

1. Раціонально розподіляйте дані між локальним і глобальним станом

React - це бібліотека, яка відповідає за управління інтерфейсом користувача на основі поточного стану програми. Завдання програміста полягає в тому, щоб раціонально організувати роботу зі станом. Деякі розробники вважають за краще зберігати всі наявні в їхньому розпорядженні дані в сховищі Redux. Це дає їм можливість організувати централізовану обробку всіх даних програми.

Але, розмірковуючи про те, які дані повинні бути включені до складу стану програми, варто подумати про те, чи потрібно передавати дію системі управління станом тільки для того, щоб, наприклад, відкрити просте меню, що випадає. Те ж саме стосується, і, скажімо, даних, що вводяться користувачем у форму зворотного зв'язку. Чи потрібно всім частинам застосунку знати про те, що введено в таку форму? Якщо говорити про те, що вводять в форму, то такі дані зазвичай обробляються застосунком протягом досить коротких проміжків часу. При цьому вони використовуються лише тим компонентом, який відповідає за виведення форми на екран.

Замість того щоб використовувати сховище Redux для зберігання всього того, з чим працює застосунок, краще зберігати деякі дані в локальному стані компонентів. Це дозволить уникнути занадто складної архітектури застосунку.

Розмірковуючи про те, де саме потрібно зберігати деякі дані, варто задати собі наступні питання :

• Чи потрібен доступ до цих даних в різних частинах програми?
• Чи потрібна можливість формування чогось нового на основі цих даних?
• Чи використовуються одні й ті ж дані в різних компонентах?
• Чи цінна  для вас можливість відновити стан застосунку, в який входять ці дані, відновивши його до виду, в якому він був в певний момент часу (тобто - чи цікава вам можливістю рухатися по маршруту виконання коду в зворотному напрямку)?
• Чи плануєте ви кешувати ці дані (тобто - користуватися існуючим станом, якщо воно вже є у застосунку, а не виконувати його повторне завантаження)?
• Чи потрібно зберігати ці дані при гарячому перезавантаженні компонентів (в ході цього процесу внутрішній стан компонентів може бути втрачено)?

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

2. Вивчіть способи тестування і покривайте проєкти тестами з самого початку роботи

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

На початку роботи над проєктом, коли його кодова база ще порівняно невелика, дуже легко прийняти рішення про те, що писати тести для нього не потрібно. Якщо в застосунку є п'ять-десять компонентів, то створення автоматизованих тестів виглядає як майже безглузде рутинне завдання. Але якщо проєкт доросте до розмірів, що перевищують 50 компонентів, і при цьому в ньому буде безліч компонентів вищого порядку, його ручне тестування може зайняти цілий робочий день. І навіть при такому підході в ньому можуть залишитися помилки, яких ніхто не помітить.

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

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

3. Застосовуйте додаткові інструменти, які допомажуть вам в масштабуванні

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

• Prettier і ESLint сприяє написанню однакового коду програмістами, що входять до складу команди. Ці інструменти допомагають зменшити кількість синтаксичних та інших помилок в коді. Користь проєктам приносить і використання допоміжних бібліотек начебто React Router , date-fns , react-hook-form .
• Оснащення проєкту підтримкою TypeScript і сховищем Redux може бути відкладено до того моменту, коли застосунок виявиться схильним до помилок типізації, і коли різним частинам програми знадобиться працювати з одними і тими ж даними. Постійне використання одних і тих самих даних в різних місцях програми говорить про те, що ці дані варто зберігати в глобальному стані.
• У реалізації особливої ​​системи управління станом застосунку з самого початку роботи над ним немає необхідності через те, що вбудовані механізми React з управління станом добре вирішують своє завдання, знімаючи з програміста зайве навантаження.
• Використання Bit дозволяє організувати роботу з компонентами, представленими у вигляді незалежних будівельних блоків програми. Це означає, що тестувати і візуалізувати компоненти можна буде в ізоляції. Такий підхід до роботи з компонентами полегшує їх підтримку і багаторазове використання.
• Для створення нових React-застосунків замість create-react-app можна скористатися відповідними інструментами Next.js .

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

4. Приділіть увагу файлової структурі проєкту

Одна з кращих порад з розробки масштабованих React-застосунків, яку мені довелося почути, полягає в тому, що правильна організація файлів проєкту і їх розумне іменування допомагають прискорити роботу. Деякі розробники часто, в якості головного файлу в папках, що зберігаються в директорії components, використовують index.js.

Файли різних компонентів називаються однаково

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

import Button from '../components/Button';

Але що якщо відкрити файли таких компонентів в редакторі?

import Button from '../components/Button/Button';

Як же бути в цій ситуації? Моя команда, наприклад, прийшла до наступного висновку: в папці компонента знаходиться файл з кодом, ім'я якого відповідає імені компонента, а поруч з ним знаходиться index.js, який експортує компонент.

Файл з кодом компонента і index.js, що експортує компонент

Ми, крім того, поміщаємо в директорію компонентів CSS-файли і файли модульних тестів. При такому підході кожна директорія компонента містить все те, що має відношення до відповідного компоненту.

Самодостатній компонент

5. Створіть бібліотеку компонентів

Приступити до створення бібліотеки компонентів краще на ранніх етапах роботи над проєктом, не чекаючи його розростання. Компоненти, в процесі роботи над ними, можна оформляти у вигляді автономних блоків, що підходять для багаторазового використання. Бібліотеку компонентів можна створити за допомогою Bit, або користуючись ресурсом bit.dev , або розгорнувши систему у себе.

6. Відокремлюйте логіку компонентів від них самих, використовуючи хуки

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

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

Застосунок для підрахунку очок в баскетбольному матчі

Якщо подивитися код цього застосунку, то виявиться, що в файлах HomeTeam.js і AwayTeam.js використовується одна і та сама логіка для роботи з лічильником. У такій ситуації, коли для управління інтерфейсом використовується один і той самий код, можна відокремити цей код від компонента і помістити в окремий файл.

Тут я виділив код зберігання стану лічильника і логіки збільшення лічильника в окремий файл util.js. Цей файл імпортується в компоненти.

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

Підсумки

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

Вибираючи інструменти і методи, що використовуються при розробці проєктів, варто з ними експериментувати. Це дозволить вам вибрати саме те, що піде на користь вашому React-застосунку. Сподіваюся, що поради, якими я сьогодні з вами поділився, вам знадобляться.

Які інструменти і методи розробки ви використовуєте при створенні React-проєктів?

Джерело ENG: blog.bitsrc.io