Не так давно в Калифронии прошла конференция по 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» (Научившись однажды, вы можете писать для любой платформы).
В статье использовались материалы и информация из видео:
- React.js Conf 2015 Keynote — Introducing React Native (Введение в React Native)
- React.js Conf 2015 Keynote 2 — A Deep Dive into React Native (Глубокое погружение в React Native)
Автор: xamd
