Як у нас вийшов нативний модуль до React Native

Якщо ви ще не знайомі з ReactJS або React Native, то дуже рекомендуємо ознайомитися, ці фреймворки вже зараз роблять значний вплив на те, куди рухається світ розробки мобільних і веб-додатків. Наша стаття про те, як дати можливість веб-розробнику робити програми для iOS з аудіо/відео дзвінками та іншими принадами платформи voximplant. Створення нативних модулів для React Native — це настільки велика тема, що про неї можна писати нескінченно і матеріалів про неї у мережі поки ще катастрофічно мало. Ми при створенні модуля спиралися на ряд готових прикладів з github, які дуже допомогли не закопатися з цим на століття.



Що таке React Native

Підозрюю, що переважна більшість читачів хабра про це знає. Але на всякий случа: це фреймворк від Facebook, який дозволяє створювати native iOS програми на javascript, при цьому для створення користувальницького інтерфейсу використовується не HTML, а ReactJS. Який, у свою чергу, створює «рідні» віджети операційної системи замість HTML DOM. Більш того, автори обіцяють в майбутньому зробити те ж саме і для Android.

Що таке Native Modules

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

“Sometimes an app needs access to platform API, and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or C++ code without having to reimplement it in JavaScript, or write some high performance, multi-threaded code such as for image processing, a database, or any number of advanced extensions."


Це саме наш випадок, у нас в клієнтському SDK voximplant є безліч штук, які будуть нормально працювати тільки якщо написані на досить низькому рівні: відео/аудіо кодеки, webrtc, srtp, ws та інші страшні слова. А розробникам React Native додатків це все не дуже цікаво, вони хочуть мати справу з зрозумілим високорівневим javascript API, так як всі їх додаток це практиески суцільний javascript/jsx. Упаковка низькорівневого коду в модуль React Native дозволяє розробникам зосередитися на розробці програм і не турбуватися про магії під капотом.

Архітектура нативного модуля

Нативний модуль може містити код на c/c++, objective-c і на javascript. У низькорівневий код ми винесли мережеве взаємодія з нашим хмарою (c, c++, libwebrtc і невелика купка бібліотек мелочки) і відображення відео (objective-c). У високорівневий javascript код пішла обгортка роботи з хмарою і два React віджета: один для попереднього власного відео і другий для перегляду відео співрозмовника:



Технічно поділ на низькорівневий і високорівневий код відбувається наступним чином: ви створюєте objective-c клас, успадкований від наданого React'го класу RCTBridgeModule. Використовуючи максросы виду RCT_EXPORT_METHOD ви ставите точки взаємодії з javascript коду, у той час як в objective-c коді можна взаємодіяти з операційною системою, c/c++ бібліотеками, створювати «рідні» iOS віджети і робити інші потрібні і корисні речі.

Готовий нативний модуль можна поширювати різними способами, найпростіший — це зібрати исходники у вигляді .npm пакету і опублікувати його в репозиторії. В такому випадку для додавання модуля в свій проект досить зробити «npm install», додати .xcodeproj і зібрану бібліотеку (тому що користувачі ну явно не хочуть збирати у себе libwebrtc з патчами — то ще задоволення) і зібрати свій проект.

Функціонал

У нашому випадку все просто — функціонал модуля повинен повторювати функціонал voximplant mobile sdk, тобто підтримувати як аудіо, так і відео дзвінки через платформу, давати можливість вмикати/вимикати гучний динамік, мікрофон, міняти камеру і т. д. загалом, ніяк не обмежувати розробника з-за того, що він обрав шлях воїна react native.

Використання модуля в React Native додатку

Інсталяція модуля виглядає досить просто, в директорії проекту виконуємо:

npm install react-native-voximplant@latest --save


Після цього відкриваємо свій проект в Xcode, в навігаторі проекту натискаємо правою кнопкою Add Files to, переходимо у node_modules/react-native-voximplant і вибираємо VoxImplant.xcodeproj.

Далі в навігаторі проекту Xcode вибираємо проект, перемикаємося на закладку «Build Phases» і в розділі «Link Binary with Libraries» вказуємо GLKit.framework, libc++.dylib, libvoximplant.a та react-native-voximplant/VoxImplantSDK/libVoxImplantSDK.a

В закладці «Build Settings» перевіряємо, що вибрано 'All' (а не 'Basic'), знаходимо Header Search Paths і удостовериваемся, що там є $(SRCROOT)/../react-native/React та $(SRCROOT)/../../React і обидва позначені як «recursive».

Ось і все, далі пишемо свій додаток, яке використовує підключений модуль:

трохи коду
var VoxImplant = require('react-native-voximplant');

// Adding SDK event listener
RCTDeviceEventEmitter.addListener(
'ConnectionSuccessful',
() => {
console.log('Connection successful');
}
);

...

componentDidMount: function() {
VoxImplant.SDK.connect(); 
VoxImplant.SDK.setCameraResolution(320,240);
},

...

makeCall: function() {
VoxImplant.SDK.createCall(number, settings_video, null, function(callId) {
currentCallId = callId; 
VoxImplant.SDK.startCall(callId); 
});
},

...



Щоб спростити завдання ознайомлення з модулем ми зробили демо-додаток, який можна взяти з github і зібрати, дотримуючись інструкцій на сторінці. У результаті виходить:



Висновок

Багато критикують React Native, говорячи про продуктивність javascript щодо «рідного» коду. Насправді ж такі технології дозволяють поєднати найкраще з обох світів: високорівневий і лаконічний javascript використовується для коду логіки додатка, в той час як низькорівневий код на c/c + + /objective-c використовується для бібліотек і критичних по швидкості ділянок логіки. Такий підхід дозволяє рівномірно розмазувати складність частинами програми, уникаючи її скупчування в одному місці — що часто веде до переусложненному і неподдерживаемому кодом.

Питання, коментарі, критика? Ми традиційно готові спілкуватися.

Джерело: Хабрахабр

0 коментарів

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