Найкращі вебсайти на React і те, як вони задовольняють потреби мільйонів користувачів
Настав час поглянути на справжні вебпродукти, створені на основі бібліотеки React. Деякими з них ви навіть можете користуватися щодня!
Отже, які назви вебсайтів на React здаються вам знайомими?
Почнімо, звісно, із сайту Facebook. Це першопроходець, який продемонстрував усі переваги React ще до того, як хтось бодай щось знав про цей фреймворк. Тепер вебсайт, створений за допомогою React, має зовсім не такий вигляд, як його початкова версія. Нам подобається редизайн і нові приголомшливі функції! Але, що ще важливіше, ми помітили, що швидкість завантаження сторінки зросла.
Щоб покращити Facebook.com, команда використала поєднання бібліотеки React і Relay — клієнта GraphQL для React. Інженери втілили принцип «якомога менше, якомога раніше».
Процес завантаження сторінки складається з трьох етапів:
- Коли ви оновлюєте сторінку Facebook, ключові елементи або каркас вебсторінки завантажуються миттєво.
- Після цього відображається вміст вебсторінки й ми отримуємо оновлену інформацію (наприклад, стрічку новин або список контактів онлайн).
- На етапі 3 користувач може взаємодіяти з вебсторінкою, натискати кнопки «Подобається» та «Поділитися», писати повідомлення тощо й отримувати миттєву відповідь від вебсайту.
Uber
Єдинороги — фанати React! Просто погляньте на вебсайт Uber: із загальною кількістю відвідувачів у 50 мільйонів, посідаючи перше місце в рейтингу наземного транспорту, цей вебсайт має забезпечувати неймовірно високий рівень користувацького досвіду. React тут відіграє важливу роль.
Команда інженерів Uber використовувала функції React від самого початку створення вебсайту. За його допомогою команда створила багато бібліотек із відкритим вихідним кодом (ви можете використовувати їх у своєму проєкті!). Найбільше вражають інструменти для візуалізації мап.
Крім того, Team Uber створила Base Web — дизайн-систему, що надає повторно використовувані компоненти для розробки інтерфейсу користувача. Вона побудована на основі React і дає змогу створювати інтерфейси користувача, незалежні від пристроїв. Команда каже, що її основні переваги — надійність, доступність і можливість налаштування, та заохочує використовувати систему в будь-якому вебпроєкті.
Netflix
Тепер компанія потокового відео Netflix є лідером галузі з доходом понад 20 мільярдів доларів у 2019 році. Компанія докладає титанічних зусиль, щоб надавати клієнтам очікуваний рівень обслуговування та якості. Але з чого все почалося?
У 2015 році команда використала бібліотеку React, щоб переробити інтерфейс користувача.
Такі стартапи, як Uber і Netflix, використовували React для створення високоякісного інтерфейсу користувача й… досягли небачених висот. З 2015 року вебсайт Netflix зазнав багатьох змін і оновлень, але React і досі залишається основним інструментом фронтенд-розробки. Високопродуктивні телевізійні інтерфейси користувача приваблюють користувачів і завойовують їхні серця. Простий, орієнтований на користувача інтерфейс полегшує авторизацію та вхід у систему, а інтуїтивно зрозумілий вебдизайн і зручна фільтрація допомагають відвідувачам знайти потрібне. Ці та багато інших функцій на базі React допомогли Netflix підірвати нішу потокового відео.
Airbnb
Ця всесвітньо відома платформа оренди житла для відпочинку також використовує React у фронтенді. Ви коли-небудь помічали, як швидко й плавно завантажуються елементи вебсторінки на екрані? Контент поділено на кілька блоків, і він оновлюється природно, без затримок і помилок.
Леланд Річардсон, один з інженерів Airbnb, описує переваги React двома простими фразами:
«Повторне використання/портативність: компоненти React надзвичайно зручні для повторного використання.
Можливість рефакторингу: React значно спрощує рефакторинг та ітеративне вдосконалення вашого коду».
Минуло багато часу відтоді, як Airbnb почала використовувати React. Але це був правильний вибір: платформа зростає й розширюється, а React тим часом не перестає вдосконалюватися. Кожна нова версія надає зручні функції для оновлення й обслуговування такого великого маркетплейсу P2P, як Airbnb.
Тим часом інженери Airbnb роблять свій внесок в екосистему React. Наприклад, вони представили корисну бібліотеку React Sketch.app для потреб розробників і дизайнерів.
Outlook.com
А ось іще один лідер ринку, який скористався потенціалом React для свого програмного вебпродукту. У 2017 році Microsoft представила Microsoft Outlook — інструмент для керування особистою інформацією. Він містить компоненти електронної пошти, календаря, контактів і завдань. Продукт доступний у веб- та мобільній версіях. Тут ми зосередимося саме на вебсайті.
У своєму блозі Microsoft розповідає про «…впровадження гнучкішого середовища веброзробки, яке забезпечує оновлену функцію пошуку, свіжіший вигляд із сучасним стилем спілкування та новий дизайн, що дає змогу швидше переглядати, читати й прикріплювати файли та фотографії. ”
Вгадайте, про яку технологію йдеться? Так, це React.
Dropbox
Dropbox, служба розміщення файлів, розповідає нам іншу історію. Їхня історія — про успішний, але складний перехід із CoffeeScript на виграшне поєднання Typescript і React.
Ще у 2012 році рішення було глючним. До кодової бази долучилося багато програмних інженерів. Однак лише деякі з них знали, що відбувається всередині сайту. Команда обрала Typescript, а пізніше, у 2016 році, почала редизайн із бібліотекою React. Вебсайт, створений за допомогою React і Typescript, показав чудові результати продуктивності.
Ви коли-небудь помічали, як швидко можна отримати доступ до попереднього перегляду будь-якого документа в Dropbox? Збираючи дані про файл, React аналізує кількість і розмір сторінок, будує каркас і візуалізує попередній перегляд, коли користувач прокручує сторінку вниз. Команда Dropbox використала поєднання React JS, інших інструментів JS і кількох методів оптимізації, щоб забезпечити «плавну роботу в усіх підтримуваних браузерах».
Codecademy
Платформа, яка надає курси з програмування й задовольняє потреби понад 25 мільйонів користувачів, використовує для свого інтерфейсу React. Вебсайт вирізняється привабливою графікою, плавними переходами між сторінками та контентом, що відіграє важливу роль у житті мільйонів людей.
Вебсайт орієнтований на користувача й має високу продуктивність. Але що ще Codecademy отримує від React як одного з провідних інструментів розробки?
Команда ділиться позитивними враженнями від створення анімації за допомогою React. Раніше ми згадували, що бібліотеки React корисні для дизайнерів. Тепер наголосимо: за допомогою React можна створювати красиві анімації для ваших вебсайтів, написавши зовсім небагато коду. Фреймворк React може допомогти вам як із бездоганним UX, так і з привабливим інтерфейсом користувача.
Skyscanner
Це наступний продукт у нашому списку найкращих вебсайтів на React.
Skyscanner стане вашим порятунком, якщо ви плануєте подорож із обмеженим бюджетом.
Skyscanner — це потужний вебрушій, переповнений актуальною інформацією про дешеві рейси по всьому світу. Дорогі рейси тут теж є — просто зайдіть і подивіться.
Щоб належно задовольнити потреби й здобути репутацію в туристичній індустрії, Skyscanner потрібен був відповідний технологічний стек. Фреймворк React увійшов до його складу.
У 2019 році вебсайт Skyscanner зазнав масштабного редизайну. Команда інженерів створила Backpack — цілу дизайн-систему. Вона побудована на компонентах React. Головна мета Backpack — створити узгоджений, бездоганний інтерфейс для всіх користувачів. Незалежно від того, з якої платформи люди заходять на Skyscanner, дизайн UI/UX і вигляд бренду бездоганні.
Trello
Майже десять років вебсистема керування завданнями працювала на платформі Backbone JS і Coffeescript. У 2009 році це був відносно потужний технологічний стек. Але час летить, як і інструменти JS. Тож команда вирішила перейти на більш динамічний стек.
Перед командою розробників стояли два важливі завдання.
Архітектуру, побудовану на Backbone JS, було складно підтримувати, і вона обмежувала можливості Trello;
Процедура кешування була незрозумілою й важкою для розуміння.
React і Typescript обрали як основні інструменти для розв’язання проблем. Пізніше до команди приєднався GraphQL. У результаті ми можемо насолоджуватися простотою використання вебсайту Trello, його продуманими компонентами та фантастичною адаптивністю.
Застосунки на основі React, або що ще можна створити за допомогою React?
Як ви, можливо, вже помітили, вище ми згадували такі слова, як «кросплатформний» і «незалежний від пристрою». Ці прикметники точно описують суть React: цей інструмент може перетворити будь-яку ідею стартапу на життєздатний програмний продукт для будь-якого пристрою й будь-якої платформи. Його можна використовувати як для розробки вебсайтів, так і для створення вебзастосунків:
Односторінкові застосунки (SPA)
Односторінковий застосунок — це вебсайт, що складається лише з однієї сторінки, яка не перезавантажується повністю під час взаємодії з користувачем. Змінюються лише окремі елементи або стани. Facebook — соціальна мережа, якій ми приділили стільки уваги в цій статті, — це односторінковий застосунок, створений за допомогою React.
Прогресивні вебзастосунки (PWA)
Прогресивний вебзастосунок, або PWA, — це вебсайт, який має вигляд і працює як нативний мобільний застосунок. Без жодного встановлення користувач може просто зайти на вебсайт і насолоджуватися нативним досвідом.
Twitter Lite — один із найбільших і найуспішніших PWA, написаних на React. Інженери Twitter мали цілком розумну мету: створити високопродуктивний продукт, який добре працює навіть за слабкого з’єднання. Вони виконали місію, і React їм дуже допоміг.
Якщо в майбутньому плануєте переходити на мобільні пристрої, React стане у пригоді. Завдяки багаторазово використовуваній кодовій базі він може суттєво скоротити час розробки. Створіть вебсайт на React уже зараз і повторно використайте частину коду, коли створюватимете кросплатформний мобільний застосунок у React Native. Так ви заощадите час, зусилля й гроші.
Подумайте про поєднання фреймворку інтерфейсу користувача React із Node.js на серверній частині. MERN — поєднання MongoDB, Express.js, ReactJS і Node.js — може стати ідеальним вибором для проєкту будь-якої складності. Багато брендів використовували цей набір технологій у своїх вебпродуктах.
Найкращі вебсайти на React: поштовх рухатися вперед
Коли обираєте найкращий інструмент для розробки вебсайтів, вам може спасти на думку фреймворк React. Фреймворк, створений інженерами Facebook, зарекомендував себе й привернув увагу великих брендів і молодих стартапів.
React — чудовий вибір для таких продуктів, як:
- Вебсайти соціальних мереж, як-от Facebook;
- Застосунки, що використовують геолокацію, як-от Uber та його продукти;
- Платформи P2P, як-от Airbnb;
- Продукти потокового відео, як-от Netflix;
- Системи керування завданнями, як-от Trello;
- Системи обміну файлами, як-от Dropbox;
- Вебсайти для керування особистою інформацією, як-от Outlook.com;
- Освітні онлайн-платформи, як-от Codecademy;
- Вебрушії, що збирають інформацію з інших онлайн-каналів, як-от Skyscanner тощо.
Численні відомі бренди переводять свої вебінтерфейси на React; безліч амбітних стартапів використовують його як злітну смугу для успішного старту. Усі ці приклади доводять потужність React і надихають спробувати його у своєму наступному проєкті.
Створіть свій застосунок із нуля або перепишіть наявне рішення — React у будь-якому разі стане у пригоді. Дійте як лідери й самі станьте лідерами.
