Назад

React робить розробку дешевшою

html code

Джерело фото: https://goo.su/xnEb

Коли нам хочеться дізнатися про складні речі, але отримати пояснення простою мовою, на допомогу приходить науковець. Майже без використання понять Virtual DOM, «іммутабельність», «життєвий цикл компонента» та «детермінований рендеринг» розповідаємо, що таке React, як він з'явився і в чому його плюси для бізнесу та команди.

★ Що таке React?

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

Отже, якщо одна дія користувача на сайті повинна призводити до якихось змін, то відбуватимуться ці зміни за певними сценаріями — тими самими скриптами. Щоб розробка сайту з великою кількістю JavaScript-коду йшла швидше та зручніше для розробника, використовують React. Чим складніший сайт, тим більш примарний шанс зробити його без використання React та його основних конкурентів — фреймворків Angular та Vue.js.

★ У чому переваги додатків, написаних на React?

⊲ Знижується навантаження на сервер та час розробки

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

⊲ На React необов'язково розробляти весь сайт, якщо динамічні блоки займають лише малу частину

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

⊲ У порівнянні зі звичайними сайтами у сайтів на React чистіша архітектура

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

⊲ Якщо команди фронтенд та бекенд-розробки заздалегідь опишуть у документації формат отримання та відправлення даних

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

★ React та односторінкові додатки

Якщо навантаження знімається із сервера, то воно зростає на стороні користувача. Але статистика каже, що у клієнтських машин достатньо оперативної пам'яті для відтворення сторінок сайту на React у браузері. Однак, якщо потрібно отримати максимально швидкий відгук від інтерфейсу, використовують підхід SPA (Single Page Application). Його суть у тому, що весь сайт – це одна сторінка, яку React постійно перемальовує. Але не цілком.

Як зазвичай відбувається перехід зі сторінки на сторінку у простій програмі?

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

★ Які відомі сайти та додатки розроблені на React.js?

Мільярди людей щодня мають справу з результатами роботи React.js. Серед них:

  • ☆ Стрічка новин у Facebook
  • ☆ Більшість клієнтської сторони Instagram
  • ☆ Частково WhatsApp
  • ☆ Netflix
  • ☆ New York Times
  • ☆ Yahoo! Mail
  • ☆ Dropbox
  • ☆ Codecademy

Висновок

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

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

Джерело: https://goo.su/PtArxJ
Редактор: Аліна Берестень
Адміністратор: Дмитро Берестень