React в браузерах і на мобільних платформах



Цей пост написаний з виступу Григорія Петрова з компанії VoxImplant на партнерської конференції «1С-Бітрікс».

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

За останні кілька років індустрія створення програмного забезпечення розвивається просто шаленими темпами. І особливо добре це видно на прикладі близьких нам веб-технологій, до яких відносяться всі продукти «1С-Бітрікс». І одним з напрямків розвитку є перенесення на мобільні платформи, з впровадженням адаптивної верстки і багато чого іншого хорошого і цікавого. Технології змінюють один одного приблизно раз на три місяці. Тут я розповім про використання технології React, яка зараз представлена в двох іпостасях: React.js і React Native.

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

Отже, у Facebook створили React.js — технологію, яка була покликана вирішити проблему з чатом. Зробити це передбачалося за допомогою трьох чарівних фіч:

  • По-перше, зміна інтерфейсу без перемальовування. Як ви знаєте, інтерфейс у Facebook досить розлогий. Там багато всяких каналів і віконець, чат може з'являтися в трьох різних місцях. У адмінської панелі багато різноманітних розділів. І все це скрол, з'являється і зникає, вискакують нотифікації і лайки.

    Але в браузерів є одна маленька проблема. Вони були розроблені багато років тому, щоб відображати простеньку сторінку: текст, заголовок, виділений текст. Як і HTML, браузери зовсім не були призначені для відображення складних інтерфейсів кшталт Facebook. Наприклад, якщо користувач, що набирає в чаті, перемикається на новинну стрічку, а потім назад на чат, то пропадуть фокус і поточна позиція набору.

    React дозволяє перемальовувати інтерфейс маленькими шматочками, не чіпаючи ті частини HTML-сторінки, для яких це критично. Тому чат в сучасному Facebook може оновлюватися окремо, як і новинна стрічка, не заважає спокійно продовжувати набирати своє повідомлення.
  • По-друге, у інженерів Facebook була така мрія. Точніше, цю мрію поділяють всі розробники за останні 30 років: зробити так, щоб можна було один раз запрограмувати кнопку для чату, а потім використовувати її скрізь, у всіх своїх програмах. Тому автори React сказали: «Ок. Ми робимо React таким чином, що ви один раз дизайните вікно чату, а потім вставляєте його скрізь, де хочете. І у вас все буде працювати». Не працює, звичайно, але спроба дуже і дуже хороша.
  • Нарешті, останнє, що зробили інженери Facebook — це контроль станів. Коли ви робите велику, складну систему рівня «Бітрікс24», то у вас мільйон якихось кнопочок, важелів, pop-ap'ів, віконець. Все це стрибає, скрол, працює. Тому елементи програми можуть мати дуже багато станів: чат поскролен туди, чат поскролен сюди, є повідомлення або їх немає, залягання користувач або не залягання. Чим більша система, тим більше цих станів, тим більше виникає несподіваних комбінацій. І в результаті програма може вести себе досить дивно. Наприклад, як чат Facebook. У React використовується функціональна парадигма: він дозволяє робити маленькі компоненти, даємо на вхід певний стан, на підставі якого вони і працюють.
Коли яка-небудь компанія розробляє нову технологію, то не знає, злетить ця технологія чи ні. Або злетить лише частина цієї технології? Зазвичай вгадати не виходить. Facebook спочатку випробував React на чаті, їм сподобалося, після чого код React був відкритий спільноти розробників. Маркетологи і інженери компанії робили наголос на швидкість роботи новинки, що забезпечується перемальовуванням маленьких шматочків сторінок. Але як показала практика, це властивість виявилася мало кому потрібно.

Зате програмістам найбільше припало до смаку те, що інтерфейс збирається з невеликих компонентів. До React веб-програмування являло собою «приготування локшини», коли розробляють систему з величезного HTML і вдвічі більше великого CSS, приправлену горами JavaScript.

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

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

React Native
Все це час Facebook сидів у засідці. І через два роки після випуску своєї розробки вони заявили: «Знаєте, нам так сподобався React.js, що тепер ми будемо робити на ньому також і мобільні додатки». І викотили React.js для iPhone, а ще через півроку — для Android.

Це було несподівано. Як можна технологію для створення веб-інтерфейсу, та ще на JavaScript, використовувати на мобільних платформах? Facebook підійшов до цього з вигадкою, використавши напрацювання проекту Appcelerator Titanium. Він створювався кілька років тому, але не знайшов великої популярності. Зате всі відразу стали користуватися React Native.

Що таке React Native? Коли ми робимо веб-сайт з користувальницьким інтерфейсом, то все досить просто. У нас є HTML, DIV, INPUT, BUTTON. Є дизайнер, який розфарбовує їх у всілякі забавні кольору, і ми всім цим користуємося.

Але при створенні програми для мобільних платформ у нас є окремо Android і iOS, в яких купа свого користувача інтерфейсу. Кнопки, input'и і drawer на Android працюють не зовсім так, як на iPhone. Тому, коли ви створюєте мобільний додаток, то можете піти іншим шляхом: впровадити в додаток шматочок браузера і малювати звичний HTML.

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

Є і третій шлях: можна для кожної платформи робити свій власний інтерфейс, використовуючи «рідні», нативні елементи. Так робилося ще в Appcelerator Titanium за багато років до появи React Native. Власне, слово Native в назві як би має на увазі, що мобільний додаток, що використовує React, буде використовувати кнопки, текстові поля, input'и і всі інші елементи, характерні для даної операційної системи.

Переваги React
Працює все це дуже просто. Універсальне додаток, яке повинно працювати як веб-сторінка на Android і iPhone, складається з JavaScript-коду. Він відповідає за бізнес-логіку: що має робити додаток, коли користувач натиснув кнопку «Купити», як відображати елементи програми, і т. д. Цей код однаковий для всіх платформ. А код, що відповідає за користувальницький інтерфейс, що робить React, — різний для кожної з платформ.



React дозволяє робити програма на JavaScript, всередині якого створюються віджети синтаксис XML. Виглядає це приблизно ось так.

Браузер iOS Android
Загальний код на JS Загальний код на JS Загальний код на JS
<HоrizontalLayout>
<ProgressBar/>
</HоrizontalLayout>
<TаbBarIOS>
<TabBarIOS.Item/>
</TаbBarIOS>
<DrаwerLayoutAndroid>
<ProgressBarAndroid/>
</DrаwerLayoutAndroid>
Коли ви робите веб-додаток, то у вас є свої віджети, наприклад, DIV, INPUT, BUTTON. При створенні Android-додатки віджети будуть зовсім іншими: Android Button, Drawer'и, Activity. Для додатки під iPhone у вас буде третій набір віджетів.

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

Багато компаній, намагаючись «продати» засіб кроссплатформної розробки, зазвичай розповідають історії з серії «Подивіться, як чудово! Ми зробили текст «Hello, world!», поле введення, кнопочку, і воно абсолютно однаково виглядає під двадцятьма платформами, і все працює».

Але на практиці мало кому потрібно робити настільки примітивні програми. Зазвичай програми створюються для того, щоб заробляти гроші і вирішувати бізнес-задачі, так що вони виходять набагато складніше. Іноді дуже-дуже складніше. Тому доречно буде запитати: «Хлопці, ок. А якщо ми спробуємо зробити додаток, де буде 50 кнопок, сотні input'ів і два десятки віконець, як це поведеться?».

На відміну від інших кросплатформених рішень, React поведе себе добре. По-перше, є дуже велика кількість компонентів для вебу. Якщо ви використовуєте React.js для створення програми і хочете, щоб воно функціонувало як веб-сторінка, то можете використовувати готові набори блоків. Наприклад, зараз дуже популярний Google Material Design. Ви просто берете горизонтальний і вертикальний layout'и, кнопки, поля введення, і все це виглядає так само красиво, як Bootstrap, але при цьому не треба нічого верстати. Немов збираєте цеглинки Lego.

Величезна кількість компаній і ентузіастів, постійно створюють нові бібліотеки і інтерфейси для React Native. Наприклад, у Facebook на GitHub є невеликий набір для створення додатків, які повинні працювати на Android і iOS. В пошуковиках ви відразу знайдете карти, біллінг, бази даних, сітки, величезна кількість портованих компонентів. Правда, частина з них не працює, але це open source, дуже перспективні технології.

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

Недоліки
Звичайно, не все так райдужно. Крім безлічі переваг, у React.js і React Native є і трохи недоліків.

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

Ще один недолік полягає в тому, що при використанні React для веба він вам не дає взагалі нічого. Ось DIV и, верстайте самі. Для мобільних платформ з коробки доступно близько трьох десятків віджетів, хоча у кожній з них набагато більше елементів користувальницького інтерфейсу, під сотню. І якщо ви хочете використовувати щось крім маленького стандартного набору, то доведеться або йти на GitHub і набиратися ідей, або писати самостійно на низкоуровневом мовою начебто Java або Objective-C.

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

React і Angular
В інтернеті багато статей, в яких порівнюють ці дві технології. Angular — це великий повноцінний framework, заточений для створення веб-сайтів. Зараз роблять спроби перенести Angular на мобільні платформи, як і React Native, але це поки експерименти.

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

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

Висновки
React.js і React Native — це дуже хороші технології, якщо ви хочете швидко зробити прототип. Швидко — це кілька днів. Якщо пощастить, і розробник вже навчився користуватися стеком — кілька годин. Якщо ж ви хочете робити щось серйозне на замовлення або для продажу, на чому хочете заробляти гроші, то доведеться попрацювати, тому що технології ще трохи сируваті. Ними треба навчитися користуватися і іноді лагодити спливаючі косяки.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.