Так хороший React Native?

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

І так по порядку, я Full-stack розробник. Використовую останній стандарт javascript на фронетнде і бэкенде. Досвіду розробки мобільних додатків немає, але є 5 років досвіду розробки проектів на високонавантажених node.js, asp.net mvc. Випробувати React Native я вирішив при створенні простого мобільного додатку — клієнта LessPass для Android.

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

Вигляд головного екрана
Верстка головного екрана
Верстка в React Native схожа на те що зараз є в інтернеті. З основних вимог — знання flexbox оскільки на нім заснований grid мобільного додатку. Для того щоб використовувати у своєму додаток красиві компоненти необхідно поставитиReact Native Elements. Відмінності від звичайної браузерною верстки існують, нехай не значні, але вони є, наприклад, іноді у елемента немає властивостей які очікуєш у нього побачити. Немає звичних дівов і спанов. Часто доводиться читати React Native Components Guide щоб зрозуміти що від чого успадковується і які фічі є в конкретній платформі. Мінуси невеликі, з ними можна миритися.

Приклад верстки на React Native:

<View style={styles.inputView}> 
<FormInput
inputStyle={styles.inputStyle}
placeholder={'Site'}
keyboardType={'url'}
underlineColorAndroid = 'transparent'
onChangeText={(value) => this.setState({...this.state, site: value})}
value={this.state.site}
/> 
</View>

Бізнес логіка
Бізнес логіка мого програми полягала рівно з однієї функції — підрахунок пароля по заданим значенням (адреса сайту, логін і майстер пароль). Більш того, ця функція вже була реалізована в node.js бібліотеці lesspass. Я вирішив зробити звичний
npm install lesspass
. Бібліотека не запрацювала, оскільки для її роботи потрібні базові класи node.js такі, як Buffer та Stream. У голову відразу прийшов browserify, який вміє робити браузерні версії бібліотек потребують node.js. Але в React Native неможливо його використання. У підсумку я переписав функцію використавши cryptojs для шифрування взамін cryptobrowserify з-за цього суттєво впала продуктивність генерування пароля (60 секунд проти 100 мс).

Ключовий момент у цій історії наступний — ви не можете використовувати написані мільйони бібліотек в React Native. Так, існує ймовірність що вони запрацюють, але вона мала, і не варто на це розраховувати. Що ж робити якщо потрібна бібліотека не запускається? Спробувати знайти бібліотеку яка не використовує node.js у себе всередині. Якщо ж такої бібліотеки немає або її продуктивність вас не влаштовує, то необхідно написати native компонент для платформи під яку ви розробляєте. Написання native компонентів, на мою думку, перекреслює всі плюси React Native для програміста незнайомого з мобільного розробкою.

Налагодження
Процес налагодження в React Native зроблено чудово. Багато Android розробники мріють про hot-reloading який вже є в React Native. Все чітко і зрозуміло, відмінностей від звичайної браузерною налагодження javascript практично немає. Порадувало наявність perfomance tools.

Інше
Загальне відчуття від бібліотек для React Native у мене негативне. За невеликим винятком, усі вони дуже молоді і нестабільні. Установка будь-якої з них має на увазі під собою правку Android Build файлів. Наприклад, я так і не знайшов адекватної бібліотеки для завдання splash-screen. Бібліотека для створення share-menu не працює в останній версії React Native.

Підсумки і висновки
На мою думку, React Native не годиться в його поточному стані для розробки мобільних додатків. Основний фактор — відсутність якісних бібліотек та дитячі хвороби самого React Native. Якщо вам необхідно написати складний і швидкий мобільний додаток використовуйте native інструменти платформи, якщо ж програма проста і не вимагає складних взаємодій з платформою — використовуйте Cordova. Саме Cordova і була обрана як основна технологія для мобільного додатку LessPass. Створення такого додатка зайняло 30 хвилин, продуктивність прийнятна.

→ Вихідний код мого додатки на React Native ви можете знайти на GitHub

Спасибі за увагу, в коментарях поділіться своїм досвідом розробки додатків на React Native з посиланнями на готові проекти.
Джерело: Хабрахабр

0 коментарів

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