Анонс React Native



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

Що таке React Native?

Отже, давайте розберемося що таке React Native і для яких цілей інженери facebook винайшли цю технологію. Але перед цим, я хочу вас спитати, що ви думаєте щодо Apache Cordova? Повільно? Плавний UI — міф? Краще використовувати WebView з обв'язкою на JS? Так-так, так воно і було до анонсу React Native. Уявіть собі, що протягом двох найближчих місяців відбудеться реліз гібридної системи від facebook на основі React.js та взаємодії з рідними елементами iOS / Android систем (тобто не створювати WebView, як це робить PhoneGap, але використовувати вбудовані компоненти, які надають вищезазначені платформи). Такий підхід дозволить розробникам, які вже знайомим з React.js у схожій манері розробляти рідні додатки. React Native не використовує ні браузера, ні WebView — тільки JavaScript API поверх нативних компонентів. Дозвольте пояснити як це працює: ви пишете JavaScript код (імхо, швидше за все це буде JSX код), і він працює з нативними компонентами операційної системи, під яку ви розробляєте, тим самим переносячи переваги і зручності використання React.js з браузера в мобільні додатки. На відміну від того ж PhoneGap, який при виникненні нативного події блокує потік і передає управління на JS-код, чекаючи його інструкцій (власне, лаги ви можете спостерігати саме з-за цього), React Native виконує JS в окремому фоновому потоці, взаємодіючи з головним потоком асинхронно, тобто в потоці JS збирається ряд команд до головного потоку і в певний момент часу, відправляється згрупований запит (batch-запит), тим самим ніяк не блокуючи головний потік виконання програми (як це працює в життя можна подивитися тут або завантажити додаток facebook groups, яка скоро з'явиться в AppStore).

Як щодо стилів?

Тут треба відразу сказати, що facebook не зупинився на використанні HTML-like синтаксису в JS(X) файлах, наступним рішенням було використовувати CSS-об'єктну позначення (на кшталт тієї, що можна використовувати в браузерах) у рамках мобільних додатків. Це дає ряд незаперечних переваг, наприклад ви можете знаходити кількісні властивості елементів (таких, як колір, товщина, розмір тощо) прямо на льоту в ході виконання програми і инкапсулировать стилі на рівні з вашими компонентами. Виглядає це так:

var styles = {
textStyle: {
color: 'yellow',
fontSize: 14
}
};

React.render(<span style={styles.textStyle}>Test</span>, document.body);


Відповідно, у момент компіляції програми, span буде трансльований у Text для iOS і аналогічний компонент на Android (так само для всіх підтримуваних тегів, список яких буде тут опублікований на момент публічного релізу технології).

На завершення огляду хочу сказати, що ідеєю React Native не є підтримка ідеології «Write once, run anywhere» (Одного разу написавши код, ви можете використовувати його на всіх платформах), але «Learn once, write anywhere» (Навчившись одного разу, ви можете писати для будь-якої платформи).

У статті використовувалися матеріали та інформація з відео:


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

0 коментарів

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