Плюси і мінуси ReactJS і React Native

1. Що таке React? Коротка історія за бібліотекою
2. Плюси ReactJS
3. 2. Дозвіл на повторне використання Компоненти React значно економить час
4. 3. Однонаправлений потік даних в ReactJS забезпечує стабільний код
5. 4. Бібліотека з відкритим вихідним кодом Facebook: постійно розвивається і відкрита для спільноти
6. 5. Redux: зручний контейнер
7. 6. Набір інструментів Wide React і Redux
8. Мінуси ReactJS
9. 2. Погана документація
10. 3. "HTML в моєму JavaScript!" - JSX як бар'єр
11. 4. Додаткові клопоти SEO
12. ReactJS і React Native: яка різниця?
13. Плюси React Native
14. 1. React Native використовує JavaScript - швидку і популярну мову програмування
15. 2. Рідні елементи управління та рідні модулі в React Native підвищують продуктивність
16. 3. React Native містить усі функції ReactJS, спрямовані на поліпшення інтерфейсу користувача
17. Мінуси React Native
18. 2. Експертиза для рідних модулів
19. 3. Компоненти третіх сторін
20. 4. Відставання оновлення SDK
21. 5. Нестабільність, проблеми сумісності та помилки
22. ReactJS та React Native Apps

Час читання: 13 хвилин

ReactJS і React Native - це нові технології для веб- і мобільних розробок, впроваджені Facebook. Проект було розпочато Йорданом Уолке, інженером програмного забезпечення Facebook, у 2011 році. Для спрощення процесу розробки та створення більш комфортного користувальницького досвіду, він вирішив створити бібліотеку, яка дозволить створити веб-інтерфейс з JavaScript.

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

Що таке React

Плюси ReactJS

Мінуси ReactJS

ReactJS і React Native

Плюси React Native

Мінуси React Native

Приклади прикладів реагування

Що таке React? Коротка історія за бібліотекою

Перед розробкою ReactJS Facebook зіткнувся з великою задачею користувача - створенням динамічного інтерфейсу користувача з високою продуктивністю. Наприклад, інженери хотіли, щоб оновлення новин відбувалося одночасно з людьми, які використовують чат.

Щоб досягти цього, Facebook повинен був оптимізувати сам процес розробки, і Джордан Вальк вирішив зробити це за допомогою JavaScript. Він запропонував поставити XHP, синтаксис розмітки Facebook, в систему координат JS. Ідея здавалася неможливою, але в 2011 році його команда випустила бібліотеку ReactJS на основі симбіозу JavaScript і XHP. Тоді Facebook зрозумів, що ReactJS працює швидше, ніж будь-яка інша реалізація такого роду.

Що таке ReactJS? ReactJS - це бібліотека JavaScript, яка поєднує в собі швидкість JavaScript і використовує новий спосіб візуалізації веб-сторінок, роблячи їх дуже динамічними і реагуючими на вхід користувача. Продукт суттєво змінив підхід до розробки у Facebook. Після цього бібліотека була випущена як з відкритим вихідним кодом Інструмент JavaScript у 2013 році вона стала надзвичайно популярною завдяки революційному підходу до програмування інтерфейсів користувача, що встановлюють довготривалі конкуренція між React і Angular , інший популярний інструмент веб-розробки.

Через два роки ця ж група інженерів випустила React Native, гібридну основу для розробки мобільних додатків для iOS і Android . Інструмент базувався на тих самих принципах, що і ReactJS, і незабаром був прийнятий інженерною спільнотою та компаніями, які дотримуються мобільна перша стратегія .

Як працює React Native? React Native поєднує розробку власних програм з розробкою інтерфейсу JavaScript. Хоча обчислювально важкі функції можуть бути реалізовані за допомогою власних модулів для iOS і Android, решта коду можуть бути написані за допомогою JavaScript і спільно використовуватися між платформами. На відміну від крос-платформенних інструментів PhoneGap і Cordova, React Native не використовує WebView, мобільний движок, який переносить код. Замість цього він надає доступ до власних мобільних контролерів, що дозволяє досягти зовнішнього вигляду програм і додатків.

Отже, давайте уважніше розглянемо плюси та мінуси ReactJS як основний продукт. Тоді ми розглянемо, як React Native відрізняється, і які переваги та недоліки він успадковує від ReactJS.

Плюси ReactJS

1. Віртуальний DOM в ReactJS покращує роботу користувачів, а розробник працює швидше

DOM (об'єктна модель документа) - це логічна структура документів у форматах HTML, XHTML або XML. Описуючи це неспецифічними термінами, це договір про перегляд входів і виходів даних, який має деревоподібну форму. Веб-браузери використовують двигуни макета для перетворення або розбору представлення HTML-синтаксису в об'єктну модель документа, яку ми можемо бачити в браузерах.

Дерево HTML DOM об'єктів
Джерело: W3Schools

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

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

Реальні та віртуальні DOM

Це робить оновлення дуже швидкими, дозволяючи створювати динамічний інтерфейс користувача. Ми можемо помітити, що він пише в чаті на Facebook і бачить одночасне оновлення каналу новин. Більш того, в ReactJS розробникам не доведеться прив'язувати DOM до функціональних можливостей у передньому кінці, оскільки до нього вже підключені елементи React.

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

2. Дозвіл на повторне використання Компоненти React значно економить час

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

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

Керування оновленнями легко для розробників, тому що всі компоненти ReactJS є ізольованими, а зміни в них не впливають на інших. Це дозволяє повторно використовувати компоненти, які самі по собі не створюють змін, щоб зробити програмування більш точним, ергономічним і зручним для розробників. Перевірити цей посібник від Алекса Григоряна від WalmartLabs про те, як досягти ефективного повторного використання коду з ReactJS.

3. Однонаправлений потік даних в ReactJS забезпечує стабільний код

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

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

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

4. Бібліотека з відкритим вихідним кодом Facebook: постійно розвивається і відкрита для спільноти

ReactJS був одним з перших проектів, пов'язаних з JavaScript, випущених як відкритий вихідний код Facebook. Це означає, що ReactJS використовує всі переваги вільного доступу - багато корисних додатків і додаткових інструментів від розробників поза компанією. Піт Хант на Facebook говорить, що принаймні дві основні функції - дозування та обрізка - були створені розробниками, які помітили проект на GitHub. Зараз ReactJS 5-е місце в Trending на GitHub з понад 111 000 зірок. Причому, їх більше 1200 з відкритим вихідним кодом учасники роботи з бібліотекою.

5. Redux: зручний контейнер

Перш ніж написати сердитий коментар про те, що Redux є рамко-агностиком, і ви з задоволенням можете використовувати його з Angular або Vue, і що це не виключно для React взагалі, зверніть увагу, що ми знаємо це. Проте, тут варто згадати Redux просто тому, що інструмент вважається інструментом обов'язкового навчання кожного React-інженера, який застосовується в 60 відсотків програм React. Так, ви можете використовувати Redux з Angular, але ймовірність розробника React, що знає Redux, набагато вище, ніж знання Angular. І ви знайдете більше підтримки спільноти для вирішення кривої навчання React Redux. Отже, чому це добре?

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

Інтерфейси майстра та деталі мають спільні дані, але перехід до найближчого предка цих двох компонентів може бути високим у дереві

Приклад: Марк Еріксон і Софія Шумейкер на fullstackreact.com

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

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

6. Набір інструментів Wide React і Redux

І React, і Redux мають пристойний набір відповідних інструментів, які полегшують життя розробника. Наприклад, Інструменти для розробників розширення для Chrome і подібне для Firefox дозволяють вивчати ієрархії компонентів у віртуальному DOM і редагувати стани і властивості. Крім того, можна перевірити Реакція зору що візуалізує стан і опори дерев; Вибрати DevTools що допомагає при налагодженні та візуалізації Відновити , бібліотека селектора для Redux. Redux DevTools Profiler Monitor дозволяє профілювати дії в добре ... Chrome DevTools. І є багато інших, щоб спробувати .

Мінуси ReactJS

1. Високі темпи розвитку

Цей недолік вдало описаний розробниками Майкла Джексона та Райана Флоренса на Сучасній павутині: “У випадку, якщо ви не помітили, що ми ведемо тут автомобіль з двома плоскими шинами, капот просто полетів перед лобовим склом, і у нас є Середовище постійно змінюється, і розробники повинні регулярно вивчати нові способи здійснення речей. Все розвивається, і деякі розробники не впевнені в тому, що йдуть в ногу з такими темпами.

2. Погана документація

Проблема з документацією повертається до постійних випусків нових інструментів. Різні та нові бібліотеки, такі як Redux та Reflux, обіцяють прискорити роботу бібліотеки або поліпшити всю екосистему React. Наприкінці, розробники борються з інтеграцією цих інструментів з ReactJS. Деякі члени спільноти вважають, що технології React оновлюються і прискорюються настільки швидко, що немає часу для написання належних інструкцій. Щоб вирішити це, розробники пишуть власну документацію для конкретних інструментів, які вони використовують у поточних проектах.

3. "HTML в моєму JavaScript!" - JSX як бар'єр

ReactJS використовує JSX . Це розширення синтаксису, яке дозволяє змішувати HTML з JavaScript. JSX має свої переваги (наприклад, захищаючи код від ін'єкцій), але деякі члени спільноти розробників вважають JSX серйозним недоліком. Розробники і дизайнери скаржаться на складність JSX і, як наслідок, на круту криву навчання.

4. Додаткові клопоти SEO

Були побоювання, що Google та інші пошукові системи не можуть індексувати або погано індексувати динамічні веб-сторінки за допомогою рендеринга на стороні клієнта. Ці занепокоєння не були повністю перевірені і є розв'язування матеріалів навколо. Сам Google підтверджено ще в 2014 році їхні сканери здатні читати динамічний вміст. Отже, ми не скажемо, що ваша програма ReactJS не буде індексована компанією Google. Зрештою, це 2018 рік.

Тим не менш, ви все одно повинні зробити деякі тестування, щоб переконатися, що ваша програма робить приятель з Google, оскільки були проблеми повідомляється деяких користувачів. Спеціалісти SEO рекомендують запускати ваші програми React Отримати як Google Інструмент для кращого вивчення того, як сканери відчувають їх.

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

ReactJS і React Native: яка різниця?

Через два роки після релізу ReactJS у Facebook створено React Native. Хоча бібліотека ReactJS розроблена для створення веб-інтерфейсів, React Native - це гібридна структура розробки додатків для iOS і Android, яка дозволяє повторне використання до 95 відсотків коду, залишаючи решту проектуванню специфічні для платформи інтерфейси .

Всі технічні відмінності між ними викликані цілями платформи.

• Хоча ReactJS використовує віртуальний DOM для візуалізації коду браузера, React Native використовує рідні API як мост для перетворення компонентів на мобільний. Наприклад, для компонентів Android він використовує Java API і викликає API Objective-C для рендеринга в iOS.
• У React Native не використовується HTML. Отже, якщо ви раніше працювали з ReactJS, вам доведеться ознайомитися з синтаксисом React Native. Наприклад, він використовує <Text> замість <p> і <View> замість <div>.
• Оскільки React Native не використовує CSS, стандартні CSS-функції, такі як анімація, запускаються з спеціальними API-інтерфейсами React Native.

Плюси React Native

Зараз React Native Framework - це одне з найшвидших і найбільш ефективних середовищ розробка мобільних додатків . Це аналогічно ReactJS, і ось що ви повинні знати з точки зору мобільних пристроїв:

1. React Native використовує JavaScript - швидку і популярну мову програмування

Повторюємо - JavaScript залишається однією з найшвидших і широко використовуваних мов програмування. Як ми обговорювали в нашій статті плюси і мінуси повноцінної розробки JavaScript 55,4% розробників використовують JavaScript відповідно до щорічний огляд переповнення Stack . Зрілість спільноти JS дозволяє фахівцям швидко вивчати мову та постійно просуватися в роботі з нею. Таким чином, ви, як правило, зможете швидко знайти розробника React Native для вашого проекту.

Крім того, React Native використовує і поєднує в собі основні переваги JavaScript і ReactJS. Через поширення коду JS інженери можуть працювати швидше і ефективніше, оскільки після кожного оновлення їм не потрібно перезапускати розроблену програму, щоб побачити зміни; вони можуть просто оновити сторінку перегляду.

У деяких випадках оновлення після запуску можна виконувати швидше. Наприклад, Apple дозволяє змінити поведінку програм на основі JavaScript у режимі реального часу без необхідного циклу рецензування.

2. Рідні елементи управління та рідні модулі в React Native підвищують продуктивність

React Native відтворює деякі компоненти коду з рідними API, на відміну від інших крос-платформних фреймворків, таких як PhoneGap, які передають код через WebView, мобільний движок. Хоча підхід WebView значно знижує продуктивність, React Native спілкується з націленими компонентами для iOS або Android і безпосередньо і незалежно надає код рідним API. Роблячи це, React використовує окремий потік з інтерфейсу користувача, що також збільшує оцінку продуктивності.

WebView рендеринг проти реагування нативного рендеринга

Важливу роль відіграють рідні модулі . В даний час React надає набір рідних модулів, написаних в Objective-C і Java out-of-the-box. Ці модулі не можуть бути повторно використані на двох платформах, але вони спрямовані на підвищення продуктивності у важких операціях, таких як редагування зображень або відтворення відео. В основному, ваша команда може застосовувати існуючі модулі або, якщо вони мають досвід Java і Objective-C, самі пишуть власні модулі. Оскільки спільнота React зростає, деякі речі вже доступні. Решту кодової бази можна повторно використовувати. Наприклад, Facebook Ads Manager має 87% коду на Android і iOS.

Крім того, React Native надає прості інструменти налагодження та обміну повідомленнями про помилки. Наприклад, подібно до веб-програмування, фахівці можуть використовувати інструменти розробника Chrome або Safari, які обидва знають.

3. React Native містить усі функції ReactJS, спрямовані на поліпшення інтерфейсу користувача

React Native використовує ReactJS як бібліотеку JavaScript, тому має всі свої переваги. Щоб створити програму React Native на різних платформах, розробникам не потрібно знати мову рідної платформи. Вони повинні добре володіти JavaScript і добре знати синтаксис React. Але, як уже згадувалося, вони можуть легко додавати рідні компоненти до коду.

Також зберігається потік даних вниз , тому основні компоненти можна редагувати без впливу на дочірні компоненти. Це робить розробку інтерфейсу плавним, одночасно позитивно впливаючи на досвід користувачів. Програми виглядають і відчувають себе рідними.

Мінуси React Native

1. Документація

На жаль, React Native успадковує головний недолік ReactJS. Громада є молодою, тому наявна документація є бідною, особливо для інтеграції з додатковими інструментами.

2. Експертиза для рідних модулів

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

Однак, до певної міри, це може звести нанівець точки крос-платформенного розвитку, оскільки вам все ще потрібні деякі інженери (Objective-C, Java або обидві) в резерві. Так що, можливо, вам не потрібно мати React Native для створення наступного мобільного Photoshop. Але, якщо ви не націлені на грубі дії, що вимагають виконання завдань, досвіду JS достатньо.

3. Компоненти третіх сторін

Тим не менш, React Native має ряд рідних модулів для iOS і Android, але кількість сторонніх компонентів все ще обмежена. І ми не можемо точно знати, що модулі, створені спільнотою, будуть підтримуватися наступними випусками цієї системи. Це залишається недоліком, оскільки React Native не пропонує широкий спектр можливих функцій, які розробники можуть захотіти реалізувати в своїх програмах.

4. Відставання оновлення SDK

React Native часто перетягує ноги, коли iOS або Android оновлюють свої SDK. Команда React Native має інтегрувати бібліотеку кодів з новим програмним забезпеченням. І незважаючи на те, що вони працюють досить швидко, вони не можуть оновлювати кожну частину API. Тому повна синхронізація між React Native і новими SDK часто займає занадто багато часу.

Щоб дізнатися більше про те, як структуру порівнюють з іншими крос-платформними інструментами, подумайте про перевірку нашої спеціальної статті: Хамарин проти Реакції Native vs Ionic .

5. Нестабільність, проблеми сумісності та помилки

У цьому розділі варто виділити велику кількість проблем, про які повідомляють розробники, після вирішення проблем React Native, а іноді просто просять "Хто-небудь може сказати мені, якщо серйозні розробки додатків можливо на React Native?" Ми не пішли б так далеко (перевірте деякі помітні RN-програми нижче). Але ось лише короткий перелік проблем, з якими стикаються інженери під час роботи з React Native:

• Гарячі перезавантаження
• Несумісність між бібліотеками спільноти та різними версіями React Native
• Питання емулятора
• Проблеми з реакційно-навігацією
• Необхідність часто перевстановлювати пакунки
• Різні інші помилки

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

ReactJS та React Native Apps

Компанії, які вже прийняли ReactJS або React Native, зробили це з різних причин. Ось найбільш помітні усиновители, крім самого Facebook.

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

Netflix . Netflix, який прийняв ReactJS в 2015 році, тепер використовує його разом з Gibbon, шаром рендеринга. Тоді Netflix вибрала React завдяки однобічній моделі потоку даних і декларативному підходу до програмування.

Airbnb . Компанія вирішила перейти на ReactJS завдяки можливості повторного використання компонентів, дуже простому кодуванню коду та повторному використанню. Тепер вона використовується у внутрішніх структурах мобільного додатка та веб-сторінки компанії.

Bloomberg . Інтернет-журнал вибрав React Native при розробці свого мобільного додатка. Їх посаду на Технологія в Bloomberg У блозі йдеться про те, що це «перший інструмент, який дійсно виправдовує розробку віртуальних програм для різних платформ».

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

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

Ця посада є частиною нашої серії «Добре і погано». Докладніше про плюси і мінуси найпопулярніших технологій див. Інші статті з серії:

Добре і погане розвитку Java

Добре і погано з розвитку мобільного Xamarin

Добре і погано розробку повного стека JavaScript

Добре і погано з розвитку веб-додатків Node.js

Добре і погано з швидкої мови програмування

Добре і погано програмування .NET Framework

Хороший і поганий інструмент автоматизації тестування Selenium

Добре і погане розвитку Android App