ru:https://highload.today/blogs/pochemu-reklama-sygrala-s-react-native-zluyu-shutku-preimushhestva-i-nedostatki-frejmvorka/ ua:https://highload.today/uk/blogs/chomu-reklama-zigrala-z-react-native-zlij-zhart-perevagi-ta-nedoliki-frejmvorku/
logo
Інструменти      27/10/2022

Чому реклама зіграла з React Native злий жарт: переваги та недоліки фреймворку

Віталій Рєзцов BLOG

iOS Developer в NIX

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

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

Для початку розповім коротку історію виникнення React Native. Це дасть вам змогу зрозуміти, чому фреймворк був створений саме так, як ми бачимо. Пройдемося по принципам його роботи, перевагам і недолікам. Окремо я згадаю міфи про React Native, поширені серед розробників, аналітиків та замовників.

Facebook взялися за розробку ще у 2010 році…

За рік стартовий проєкт перетворився на FaxJS, а згодом трансформувався у React та став опенсорсним. Навіщо взагалі знадобився React?

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

На початку 2010-х Facebook захотів ґрунтовно вийти на ринок мобільних застосунків. Спершу компанія обрала для цього HTML5 та WebView.

Пізніше у своїх інтерв’ю Марк Цукерберг назвав це рішення найгіршим за роки існування Facebook.

Під час використання WebView виникло чимало проблем:

  • Відсутні кіборд API. Це суттєва перешкода для розробки.
  • Немає коректного способу хендліну тачів та жестів. У WebView бракувало коду для обробки мультижестів. Будь-які onClick-події повільніші, ніж нативні події.
  • Онлайн курс з промт інжинірингу та ефективної роботи з ШІ від Powercode academy.
    Курс-інтенсив для отримання навичок роботи з ChatGPT та іншими інструментами ШІ для професійних та особистих задач, котрі допоможуть як новачку, так і професіоналу.
    Записатися на курс
  • Відсутнє керування зображеннями. На відміну від браузерів, у мобільних браузерах кеш не давав змоги дізнатися, чи завантажене зображення.

Розробники переконалися, що їм потрібно мати нативні застосунки. Це могло б гарантувати гарний досвід користувачів.

Однак Native мав декілька критичних для Facebook недоліків:

  • Невисока швидкість ітераційного процесу розробки. У Facebook були веброзробники, які бачать апдейти від деплоя до деплоя. Це не займає багато часу. У мобільній розробці є такий важливий елемент процесу, як рев’ю до стору. Тому для веброзробника це виглядало як уповільнення створення продукту.
  • Імперативний підхід до кодингу. Детальніше про це я поясню нижче, в описі переваг React Native.
  • Кожна платформа має свою код-базу. В Android вона одна, в iOS — інша. Це знову ж таки ускладнює процес розробки.

У результаті девелопери Джордан Волкер та Крістофер Чедо реалізували можливість генерації нативних UI-елементів із JS-черги. Це стало передумовою створення React Native. У 2013 році на хакатоні у Facebook розробники показали першу версію. Дебют повноцінного React Native відбувся 2015 року. За кілька місяців його вже підтримували iOS, Android, Windows Mobile та Tizen.

Learn Once, Write Anywhere — стало гаслом React Native. Так почали привертати увагу веброзробників по всьому світу до мобайл-розробки.

React Native — це кросплатформовий фреймворк. Той, хто добре ним володіє, може писати застосунки під різні платформи. Хоча й тут є деякі обмеження, про які розповім далі.

Англійська для IT від Englishdom.
В межах курсу можна освоїти ключові ІТ-теми та почати без проблем говорити з іноземними колегами.
Дійзнайтеся більше

Як влаштований React Native

Він подібний до React, але замість вебкомпонентів використовує нативні. Дехто може подумати, раз знаєш React, то розберешся і з React Native. Проте недостатньо знатися на першому, аби вільно програмувати на React Native. Тож заглиблюємось далі…

React Native складається з таких компонентів:

  • Yoga framework
  • JavaScript Virtual Machine
  • Native ModulesBridge

Yoga framework

Yoga framework — це кросплатформовий UI-двигун, написаний на С++. Його головна задача — стандартизувати UI, щоб незалежно від платформи, код був однаковий.

Завдяки цьому UI в React Native повністю нативний. Уся система працює на флексбоксах. Утім, цей двигун не імплементує весь функціонал CSS Flexbox. Наприклад, у ньому відсутні non-layout властивості, які відповідають за колір.

Хоча Yoga є частиною React Native, вона може існувати та використовуватися й окремо. Із цим допоможе YogaKit для нативної розробки. Детальніше раджу почитати за цим посиланням.

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

Курс Frontend від Mate academy.
Frontend розробник може легко створити сторінки вебсайту чи вебдодаток. Тому після курсу ви станете затребуваним фахівцем у сфері, що розвивається.
Інформація про курс

JavaScript Virtual Machine

У різних статтях про React Native можна зустріти безліч назв цього компонента: JavaScript Virtual Machine, JSVM, JavaScript Engine, JavaScripCore. Він обробляє JS-код, завдяки чому вдається запускати його на різних платформах.

Але є один нюанс. JavaScripCore також є двигуном для браузера Safari. В iOS-застосунках з причин безпеки JavaScripCore не відпрацьовує JIT-компіляцію (Just-in-Time). Так відбувається, тому що Apple не дозволяє запускати будь-які third-party процеси, які виконують динамічний код.

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

Bridge

Цей елемент є чи не стратегічним об’єктом в React Native. Я люблю жартувати, що Bridge — як інь та ян або Альфа та Омега всього фреймворку. Він дозволяє нівелювати перепони — між нативною та JS-частиною коду.

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

Щоб зрозуміти принципи роботи Bridge, погляньмо на схему. Тут зображено базовий рівень без додаткових інтерпретацій:

  • Bridge є таким собі містком, по якому файли JSON ходять із JS-черги до нативної.
  • У потоці JS Thread працює JSVM, якраз JavaScript Runtime.
  • З іншої сторони в поточній реалізації React Native є три черги: Main Thread, Shadow Thread та Native Modules.
  • Бізнес англійська від Englishdom.
    Тут навчають за методикою Кембриджу, завдяки якій англійську вивчили понад 1 мільярд людей. Саме вона використовується в найкращих навчальних закладах світу, і саме за нею створені курси.
    Інформація про курс
  • Main Thread є головним потоком, у якому виконується код, пов’язаний з UI-частиною.
  • Shadow Thread є місцем розташування Yoga framework. Тут відбуваються калькуляції лейауту та передача параметрів до основної черги, де й проходить рендеринг.
  • Native Modules можуть створювати свої черги за необхідності.

Через асинхронність і двоспрямованість Bridge є як сильною, так і слабкою стороною поточної архітектури React Native. До певного моменту це дозволяє тримати непоганий перфоманс. А якщо ж змінити комунікацію з асинхронної на синхронну, то будуть блокуватися навіть незначні операції, які потребують зворотного зв’язку.

Наприклад, при натисканні на кнопку потік буде блокуватися, доки не отримає колбек з UI-частини у JS для подальшої обробки. В цьому й полягає компромісна геніальність рішення з Bridge.

Пропоную розібрати ще одну схему. На ній зображено три блоки: Native, Bridge та JavaScript. Це те ж саме, але з іншою інтерпретацією.

Уявімо, що користувач натискає на екран гаджету. В нативному блоці створюється івент, який перетворюється на певний payload та потрапляє до Bridge. Той зі свого боку відправляє payload до JS-частини. Вона це все процесить, щоб потім викликати певні методи всередині JS-коду. В результаті запускається зворотній процес, який призводить до оновлення UI. В обох напрямках все проходить через Bridge.

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

На наступній ілюстрації — типовий JSON, що ходить через «місток».

Хочу відзначити один важливий момент. Поточна архітектура React Native є… застарілою. Так, ще 2018 року було оголошено про перебудову фреймворку. Нова версія вийшла на початку 2022-го, але поки що сирувата для продакшену. Її можна всіляко випробовувати в тестовому режимі та на pet-проєктах. Попередня архітектура працює згідно наступної схеми:

Зверніть увагу на Bridge з його двоспрямованими стрілками. Так позначено поєднання нативної та JS-частини коду.

А тут вже наведено нову архітектуру, над якою розробники працювали 4 роки. Є декілька змін і головна — немає Bridge! Його місце посідає JavaScript Interface.

Це абстрактний лейер для JavaScript Runtime. Якщо ви знайомі зі Swift або TypeScript, то JSI можна сприйняти як звичайний протокол. При його реалізації нативні об’єкти будуть доступні з JS-коду.

Наприклад, якщо у вас є UI View, доступ до цього нативного компоненту матимете без жодних мостів. При цьому механізм працює в рантаймі. Тобто глобальний скоуп JavaScript зберігатиме посилання на нативний елемент, і ви зможете викликати методи напряму з JS-коду.

Курс English For Tech course від Enlgish4IT.
Лише 7 тижнів по 20-30 хвилин щоденного навчання допоможуть вам подолати комунікативні бар'єри. Отримайте знижку 10% за промокодом ITCENG.
Дійзнайтеся більше

Переваги React Native

Декларативний UI

Напевно кожен, хто працював з React Native або Swift UI, погодиться: це зручний підхід до написання UI. Для прикладу наведу фрагмент із мого тестового проєкту. Це звичайний Login-скін: з двома текст-філдами та кнопками Login і SignUp. Фрагмент має невелику кількість коду. При цьому немає вказівки, як створювати ці елементи чи як вони між собою пов’язані. Тобто я не прописую це кодом, що економить зусилля та час.

Hot Reloading

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

Code push

Цей хмарний сервіс дозволяє розгортати оновлення застосунків безпосередньо на пристроях користувачів без проходження рев’ю. Щоправда, це виправдано лише при змінах у JS-коді. При оновленні нативного коду рев’ю все ж буде потрібним. Також можна зробити rollback до попередньої версії.

Stories & Storybook

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

Велика спільнота користувачів React Native

На сьогодні це найпопулярніший гітхабний репоз — у нього 105 000 зірочок! Фактично розвиток React Native тримається саме на цій спільноті.

Недоліки React Native

Залежність від спільноти

Ком’юніті є як перевагою, так і недоліком цього фреймворку. Адже його розвиток досить хаотичний. Я неодноразово зустрічав круті UI-бібліотеки, які не можна було використовувати, бо що їх останнє оновлення було декілька років тому. Такі моменти сильно пригнічують розробника.

Це досі бета-версія

Значне обмеження, що не дозволяє цілком бути впевненим у React Native. Фреймворк не має єдиного центру розробки, який би тримав процес під контролем. Facebook виконує певний апрув до змін і часом пропонує покращення.

Необхідність втручання в нативний код

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

Онлайн-курс Pyton від Powercode academy.
Опануйте PYTHON з нуля та майте проект у своєму портфоліо вже через 4 місяця.
Приєднатися

Перфоманс

Продуктивність React Native на достатньому рівні. Однак зі специфічними задачами можуть виникнути проблеми. У мене вже був досвід проєктів зі складною обробкою відео, де React Native зовсім не впорався.

Міфи про React Native

Facebook та Instagram написані на React Native

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

Насправді розробники Facebook та Instagram колись створили на React Native лише окремі модулі. Вони й досі є в застосунках, але це React Native, інтегрований у нативне середовище.

Веброзробники швидко опанують React Native

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

В такі моменти розробники розуміють: React Native дуже відрізняється від React.

Звісно, знання React допоможуть відносно швидко навчитися писати UI під React Native. Та все інше доведеться вивчати з нуля.

Два застосунки за ціною одного

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

Крутий інструмент для MVP

Створити MVP за допомогою React Native — чому б ні? Поспішу вас застерегти. При розробці прототипу має бути детальний роадмап застосунку з переліком запланованого функціоналу. Якщо такого списку немає, згодом можуть додатись фічі, які проблематично реалізувати через React Native. Доведеться витрачати багато часу, щоб усе виправити. Маю надію, що з новою архітектурою фреймворку ця ситуація зміниться.

Безумовно React Native — чудовий інструмент, але для певних завдань. Ви можете забивати цвях викруткою, але навіщо, коли є молоток? Ви досягнете цілі, проте будете страждати в процесі. Результат не виправдає очікувань. Так само з React Native. Вивчайте та практикуйте його можливості. Знання дають розуміння, де доцільніше використовувати фреймворк.

Курс Розмовної англійської від Englishdom.
Після цього курсу ви зможете спілкуватись з іноземцями і цікаво розкажете про себе.
Приєднатися

Щодо питання у заголовку статті, то тут цікава ситуація. З одного боку, маркетинговий хід привернув уваги до React Native. Довкола нього сформувалась потужна спільнота розробників, яка дала поштовх для розвитку фреймворку. З іншого ж — маркетинг зіграв злий жарт із React Native. З’явилося чимало міфів, які заважають правильно розуміти можливості інструмента. А хитрість заголовку полягає в тому, що він не дає альтернативи та обмежує вибір лише до протиставних думок. Хоча є й третя відповідь: висновки робіть самі 😉

Якщо ви знайшли помилку, будь ласка, виділіть фрагмент тексту та натисніть Ctrl+Enter.

Курс Розмовної англійської від Englishdom.
Після цього курсу ви зможете спілкуватись з іноземцями і цікаво розкажете про себе.
Приєднатися

Цей матеріал – не редакційний, це – особиста думка його автора. Редакція може не поділяти цю думку.

Топ-5 найпопулярніших блогерів березня

PHP Developer в ScrumLaunch
Всего просмотровВсього переглядів
2229
#1
Всего просмотровВсього переглядів
2229
Founder at Shallwe, Python Software Engineer (Django/React)
Всего просмотровВсього переглядів
111
#2
Всего просмотровВсього переглядів
111
Career Consultant в GoIT
Всего просмотровВсього переглядів
93
#3
Всего просмотровВсього переглядів
93
CEO & Founder в Trustee
Всего просмотровВсього переглядів
92
#4
Всего просмотровВсього переглядів
92
Рейтинг блогерів

Найбільш обговорювані статті

Топ текстів

Ваша жалоба отправлена модератору

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: