React Native: Очередная «серебряная пуля» для кросплатформенной разработки?

Есть революции, которые происходят незаметно. Когда разработчики Facebook выпустили фреймворк React Native, никто не захватывал мосты и телеграфы. Новому подходу к кроссплатформенной разработке мобильных приложений удалось взять в плен самое ценное – мозги ^[1] нативных программистов. Рассказать о центральной идее React Native, его преимуществах, перспективах и недостатках мы попросили Владимира Иванова.

^[2]

Владимир более 6 лет занимается разработкой под Android, обладает опытом создания приложений под iOS и Windows Phone. Последний год он увлекся React Native и начал двигать культуру кроссплатформенного кода в EPAM Systems.

— За что Вы не любите платформенный код? Какие недостатки видите в нативной разработке?

Владимир Иванов: Когда заказчик говорит, что хочет мобильное приложение под все платформы, он не понимает, что Android, iOS и Windows — это принципиально разные вещи. Разработчикам программного обеспечения приходится повторять один и тот же код, одну и ту же бизнес-логику на двух или трех платформах.

Сами платформы тоже имеют многообразие. В iPhone на iOS могут быть варианты по версиям, возможностям, по размеру экрана. А в Android это достигает катастрофических масштабов: нужно поддерживать не только версии, начиная с 2.3, но и огромное количество устройств. Это превращает нативную разработку в довольно утомительное занятие.

Приведу пример. У меня на Github лежит образовательный проект Flick Feed на React Native ^[3]. Там порядка 100 строчек кода суммарно для двух мобильных платформ.  И есть подобный проект на BitBucket на Android ^[4], который я делал несколько лет назад. Там кода до чертиков, на порядок больше, и это только приложение под Android! Вот смотрите:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:background="#FFF"
              android:orientation="horizontal"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent">

    <ImageView
            android:id="@+id/thumb"
            android:adjustViewBounds="true"
            android:layout_margin="10dip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    <LinearLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

        <TextView
                android:id="@+id/published"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                style="@style/common"/>

        <TextView
                android:id="@+id/desc"
                android:ellipsize="end"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                style="@style/common"/>
    </LinearLayout>

</LinearLayout>

Это верстка одного элемента из фида, здесь 36 строк, и нет логики. Нужно еще посмотреть в Activity, там будет код, который ищет вьюхи, ставит в них значения. Еще inflate нужно для элемента написать.

Этот же элемент в RN занимает 21 строку, причем логика установки значений уже есть, а inflate вообще не нужен, смотрите

import React from 'react';
import { View, Image, Text } from 'react-native';

export default ({ flickrItem }) => {

    return (
        <View style={{ flexDirection: 'column', padding: 8, borderWidth: 2, borderColor: 'black', margin: 8 }}>
            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                <Text>{flickrItem.title}</Text>
                <Text>{flickrItem.date}</Text>
            </View>
            <Image source={{
                    uri: flickrItem.url
                }}
               style={{
                   marginTop: 16,
                   width: 200,
                   height: 200
               }}/>
        </View>);
}

— Попытки создать удобный кросс-платформенный фреймворк для мобильной разработки идут уже несколько лет. Ни явного лидера, ни «серебряной пули» так и не появилось. Почему?

Владимир Иванов: С момента появления Android и iOS существует приличное количество решений, которые пытаются решить проблему шаринга кода. Это PhoneGap, Titanium и другие.
Я вижу в своей практике, что люди используют такие фреймворки только для проверки бизнес-идеи. Они позволяют понять, что приложение действительно может быть рабочим, им удобно пользоваться, бизнес-идея нормальная. Если все так, то дальше все делается заново по-нормальному в нативной разработке.

Эти фреймворки по сути предоставляют WebView и возможность написать на html + css + js то, что будет в этом WebView крутиться. Соответственно, вы понимаете, что качество самих приложений, User Experience, которое это решение может предложить, не самое лучшее. Точно не то, что вам может дать сама платформа.

— Чем React Native отличается от других фреймворков?

Владимир Иванов: React Native лучше тем, что у вас нет никакого WebView. Он использует родные компоненты пользовательского интерфейса Android, iOS и Universal Windows. Такая реализация позволяет раскрыть всю мощь платформ: интерфейс не тормозит и выглядит нативно, что предполагает качественный UХ.

React Native вырос из ReactJS, который в свою очередь появился потому, что разработчикам Facebook было не очень удобно в традиционных средствах веб-разработки поддерживать свои приложения. Особенность ReactJS — наличие слоя рендерера, позволяющего промежуточный язык JSX отрендерить в HTML, который уже воспринимается браузером.

В какой-то момент ребята из Facebook поняли, что для своих мобильных приложений они могут использовать точно такой же подход. Архитектура React позволила добавить нативный рендерер, который превращает JSX в нативные компоненты платформы. Таким образом, они эволюционным путем получили React Native, не ставя себе изначально задачу создания какого-то необычного фреймворка, а придя к нему естественным путем.

— В React Native есть такая штука, как виртуальный DOM. Это и правда классное решение, которое ускоряет разработку приложений?

Владимир Иванов: React построен таким образом, что главное занятие его компонентов — только отобразить состояние. Метод render(), который есть у компонента, смотрит в State и рисует содержимое на его основе. Когда State меняется, React пересоздает целиком дерево своих компонентов. Вот это дерево называется виртуальным DOM.

То есть когда у вас меняется состояние, необходимо перерисовывать всю страницу заново. Но это плохо с точки зрения перформанса. Что делает React? Он в своей памяти хранит старое и новое дерево компонентов виртуального DOM, вычисляет разницу и на реальном DOM применяет только ее. В виртуальном DOM происходит полная перерисовка, а в реальном — только частичная. Рендеринг происходит очень быстро, а код пишется просто.

— Как соотносятся элементы, которые используются в React Native и в нативной разработке?

Владимир Иванов: Некоторые элементы похожи на нативные. Например, текстовый ввод. Но мощь React Native в том, что вы можете создать собственные компоненты под свои нужды. Вы всегда можете написать обертку над нативными средствами для своего React Native и продолжать в JavaScript считать, что у вас кросс-платформенное приложение.
Очень много вещей так и работают, например, Push-нотификации. Существует решение, которое имплементируется в Java-код для Android, в Objective-C для iOS. Дальше этот NPM-модуль подключается к вашему проекту, и у вас появляется JavaScript-интерфейс для Push-нотификаций. Если нужен доступ к низкоплатформенным вещам, вы всегда сможете их обеспечить.

— Какие недостатки есть у React Native?

Владимир Иванов: Если у вас есть строгие требования к интерфейсу для разных платформ, и он сильно отличается в разных версиях, вам придется дублировать значительную часть UI.
Но бизнес-логику вы все равно сможете оставить кросс-платформенной. То есть, используя какие-то внешние хранилища для стейта и создав правильную архитектуру для React Native, вы все равно сэкономите большое количество усилий.
Конечно, не стоит забывать, что React-Native — технология молодая и без «косяков» не обойтись. Например, крупный такой «косяк» — навигация. Несмотря на то, что RN прошел уже 4 стадии переделки навигации (Navigator, NavigatorIOS, NavigationExperimental, … ), пристойного решения так и нет. Обещают, что следующая навигация уж точно будет хорошей, но, как известно, обещанного ждут три года.

— Что надо изучить, чтобы начать работать с React Native?

Владимир Иванов: Разработчику в первую очередь нужно знать JavaScript и его стандарт ES6. Вся мощь Babel нужна, чтобы не писать везде React.createClass и остальной Boilerplate. Поэтому рекомендую изучить ES6.

А со всем остальным человек знакомится достаточно быстро. В течение месяца, прочитав материалы и прослушав обучающие курсы, которых полно в интернете, можно быстро начать верстать более-менее нормальный UI.

Конечно, есть сложные темы — внешний State, валидация форм, использование контекста в React Native. Про эти вещи я расскажу на Mobius 2017 ^[5], так что можно прийти послушать.
Желающим изучить React Native нужно читать Getting Started от Facebook ^[6]. Также рекомендую курс на Udemy ^[7]. Кроме того, стоит следить за гуру, которые занимаются React. Я рекомендую твиттер Дэна Абрамова ^[8], он достаточно много пишет про React Native.

Конечно, есть целая печалька в том, что если вы приходите из области, в которой мобильных приложений ни разу не касались, то вам нужно проходить этот квест про установку родных сдк, поднимать эмуляторы, выкачивать гигабайты сдк, и это все более-менее ручной процесс. В итоге вам все равно нужна экспертиза по мобильной разработке, иначе даже не начать. Но буквально неделю назад на React Conf представили аналог create-react-app для React Native: create-react-native-app ^[9]. Для мобильного разработчика это конечно шок: как, мобильное приложение без приложения! Но для старта это пожалуй идеальный вариант: скрипт вам все сам настроит и поднимет, никаких сдк качать не надо, приложение можно сразу увидеть на телефоне.

— Чем вас так увлек React Native?

Владимир Иванов: Как разработчика, вау-эффект меня накрыл от того, что подход к разработке мобильного приложения, UI целиком другой. В Android, iOS вы сталкиваетесь с императивным программированием, то есть «Эй ты, сделай это, скрой кнопочку, вот здесь помигай» — ты отдаешь команды UI, что ему делать. А в React Native подход совсем другой, нужно немножко поломать себе мозг ^[1], чтобы на него перейти. Это полная смена модели разработки, она меня приятно шокировала.

Я думаю, вся индустрия начнет в ближайшее время мигрировать на эти инструменты, потому что они реально хорошие. Тем более, что React Native – это опенсорсное решение, вокруг которого активно формируется крутое сообщество. Вот UberEats опубликовали, как они использовали React Native в своих продуктах ^[10], они и пишут: не беремся утверждать, что пуля серебряная, но нам отлично подошла.

Автор: JUG.ru Group

Источник ^[11]