React Native：クロスプラットフォーム開発のもう1つの特効薬？

気付かれずに起こる革命があります。 Facebook開発者がReact Nativeフレームワークをリリースしたとき、誰も橋や電信を捕らえませんでした。 モバイルアプリケーションのクロスプラットフォーム開発への新しいアプローチは、最も貴重なもの、つまりネイティブプログラマの頭脳をキャプチャすることに成功しました。 ウラジミール・イワノフに、React Nativeの中心的なアイデア、その利点、見通し、欠点について話してもらいました。







Vladimirは6年以上Androidを開発しており、iOSおよびWindows Phone向けのアプリケーションの作成経験があります。 過去1年間、彼はReact Nativeに夢中になり、EPAM Systemsでクロスプラットフォームのコード文化を促進し始めました。



-なぜプラットフォームコードが好きではないのですか？ ネイティブ開発にはどのような欠点がありますか？



Vladimir Ivanov：すべてのプラットフォームにモバイルアプリケーションが必要だと顧客が言うとき、Android、iOS、およびWindowsが根本的に異なることを理解していません。 ソフトウェア開発者は、2つまたは3つのプラットフォームで同じコード、同じビジネスロジックを繰り返す必要があります。



プラットフォーム自体にもさまざまな種類があります。 iOSのiPhoneには、バージョン、機能、画面サイズのオプションがあります。 また、Androidでは壊滅的な割合に達します。2.3以降のバージョンだけでなく、膨大な数のデバイスもサポートする必要があります。 これにより、ネイティブ開発が面倒な作業になります。



例を挙げましょう。 GithubにFlick Feed React Native教育プロジェクトがあります。 2つのモバイルプラットフォームで合計約100行のコードがあります。 また、AndroidのBitBucketにも同様のプロジェクトがあり、数年前にそれを行いました。 コードの地獄があり、さらに桁違いにあり、これはただの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>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これはフィードからの1つの要素のレイアウトで、36行あり、ロジックはありません。 また、アクティビティを調べる必要があります。ビューを探して値を入れるコードがあります。 それでも、要素に対して膨らませる必要があります。



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>); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

- モバイル開発用の便利なクロスプラットフォームフレームワークを作成しようとする試みは、数年間続いています。 明確なリーダーも「銀の弾丸」も登場していません。 なんで？



Vladimir Ivanov： AndroidとiOSの登場以来、コード共有の問題を解決しようとする多くの解決策があります。 これらは、PhoneGap、Titaniumなどです。

私の実務では、人々はそのようなフレームワークをビジネスのアイデアをテストするためだけに使用していると思います。 彼らは、アプリケーションが本当に機能していることを理解することを可能にし、それを使用するのが便利であり、ビジネスのアイデアは普通です。 すべてがそうであれば、ネイティブ開発ではすべてが通常どおりに新たに行われます。



これらのフレームワークは、本質的にWebViewと、このWebViewでスピンするものをhtml + css + jsで記述する機能を提供します。 したがって、このソリューションが提供できるアプリケーション自体の品質であるユーザーエクスペリエンスは最良ではないことを理解しています。 プラットフォーム自体が提供するものではありません。



-React Nativeは他のフレームワークとどう違うのですか？



Vladimir Ivanov： React Nativeは、WebViewがないので優れています。 ネイティブのAndroid、iOS、およびユニバーサルWindowsユーザーインターフェイスコンポーネントを使用します。 この実装により、プラットフォームの能力を最大限に活用できます。インターフェイスの速度は低下せず、ネイティブに見えます。これは、高品質のUXを意味します。



React Nativeは、ReactJSから生まれました。ReactJSは、Facebook開発者が従来のWeb開発ツールを使用してアプリケーションをサポートすることに抵抗があったために出現しました。 ReactJSの機能は、中間のJSX言語がHTMLでレンダリングできるようにするレンダラーレイヤーの存在です。これは、ブラウザーによって既に認識されています。



ある時点で、Facebookのメンバーは、モバイルアプリケーションに対してまったく同じアプローチを使用できることに気付きました。 Reactアーキテクチャーは、JSXをネイティブプラットフォームコンポーネントに変えるネイティブレンダラーを追加しました。 したがって、彼らはReact Nativeを進化的に受け取りました。最初は異常なフレームワークを作成するというタスクを自分自身で設定するのではなく、自然な方法でそれに到達します。







-React Nativeには、仮想DOMなどがあります。 これは、アプリケーション開発を高速化する本当にクールなソリューションですか？



ウラジミール・イワノフ： Reactは、そのコンポーネントの主な職業が状態を表示するだけであるように構築されています。 コンポーネントが持っているrender（）メソッドはStateを見て、それに基づいてコンテンツを描画します。 状態が変更されると、Reactはコンポーネントのツリー全体を再作成します。 このツリーは仮想DOMと呼ばれます。



つまり、状態が変わったら、ページ全体を再描画する必要があります。 しかし、これはパフォーマンスの点で悪いです。 Reactは何をしますか？ 仮想DOMのコンポーネントの古いツリーと新しいツリーをメモリに保存し、差を計算して、それだけを実際のDOMに適用します。 仮想DOMでは完全な再描画が行われますが、実際の再描画では部分的な再描画のみです。 レンダリングは非常に迅速に行われ、コードは簡単に記述されます。



-React Nativeとネイティブ開発で使用される要素はどのように関連していますか？



ウラジミール・イワノフ：一部の要素はネイティブのものに似ています。 たとえば、テキスト入力。 しかし、React Nativeの利点は、ニーズに合わせて独自のコンポーネントを作成できることです。 React Nativeのネイティブツールのラッパーをいつでも作成でき、クロスプラットフォームアプリケーションがあることをJavaScriptで想定し続けることができます。

プッシュ通知など、多くのことがこの方法で機能します。 Android用のJavaコード、iOS用のObjective-Cに実装されているソリューションがあります。 次に、このNPMモジュールがプロジェクトに接続され、プッシュ通知用のJavaScriptインターフェースがあります。 低プラットフォームのものにアクセスする必要がある場合は、いつでも提供できます。



-React Nativeの短所は何ですか？



Vladimir Ivanov：さまざまなプラットフォームに厳しいインターフェイス要件があり、バージョンによって大きく異なる場合は、UIのかなりの部分を複製する必要があります。

ただし、ビジネスロジックはクロスプラットフォームのままにすることができます。 つまり、状態に外部ストレージを使用し、React Nativeに適切なアーキテクチャを作成しても、多くの労力を節約できます。



もちろん、React-Nativeは若いテクノロジーであり、「ジャム」なしではできないことを忘れないでください。 たとえば、大きな「ジャム」はナビゲーションです。 RNはナビゲーションの再設計の4つの段階（Navigator、NavigatorIOS、NavigationExperimentalなど）を既に通過しているという事実にもかかわらず、まともな解決策はありません。 彼らは次のナビゲーションは確かに良いものになると約束していますが、ご存知のように、3年が期待されています。







-React Nativeを使い始めるために何を学ぶ必要がありますか？



Vladimir Ivanov：まず、開発者はJavaScriptとそのES6標準を知る必要があります。 Babelは、React.createClassとBoilerplateの残りの部分をどこにでも書かないように、すべての力を必要とします。 したがって、ES6を勉強することをお勧めします。



そして、他のすべてのことで、人は十分に早く知り合いになります。 1か月以内に、資料を読んで、インターネットでいっぱいのトレーニングコースを聞いた後、多かれ少なかれ通常のUIをすぐに作り始めることができます。



もちろん、外部の状態、フォームの検証、React Nativeでのコンテキストの使用など、複雑なトピックがあります。 これらのことについては、 Mobius 2017でお話ししますので、ぜひお越しください。



React Nativeを学習したい人は、Facebookの「はじめに」を読んでください。 Udemyのコースもお勧めします 。 また、Reactを扱う指導者に注目する価値があります。 Dan Abramovのtwitterをお勧めします。彼はReact Nativeについてたくさん書いています。



もちろん、モバイルアプリケーションに触れたことのない地域から来た場合、独自のSDKのインストール、エミュレーターの引き上げ、SDKのギガバイトの出力に関するこの探求を行う必要があり、これは多かれ少なかれ手動プロセスであるという事実にはまったく悲しみがあります。 その結果、モバイル開発の専門知識が必要になります。そうでなければ、開始する必要さえありません。 しかし、ほんの1週間前、React Confで、彼らはReact Nativeのcreate-react-appの類似物、 create-react-native-appを導入しました。 モバイル開発者にとって、これはもちろんショックです。アプリケーションのないモバイルアプリケーションのようなものです。 しかし、最初はこれが理想的なオプションです。スクリプトがすべてを構成し、レイズします。SDKをダウンロードする必要はなく、電話でアプリケーションをすぐに見ることができます。









-React Nativeに惹かれているのはなぜですか？



Vladimir Ivanov：開発者としてのすごい効果は、モバイルアプリケーション、UIの開発アプローチがまったく異なるという事実から私を守ってきました。 Android、iOSでは、命令型プログラミングに直面しています。つまり、「やあ、やって、ボタンを隠して、ここで点滅」-UIコマンドに何をすべきかを与えます。 また、React Nativeでは、アプローチがまったく異なります。それに切り替えるには、頭を少し壊す必要があります。 これは開発モデルの完全な変更であり、嬉しく思いました。



これらのツールは本当に優れているため、近い将来、業界全体がこれらのツールに移行し始めると思います。 さらに、React Nativeはクールなコミュニティが活発に形成されているオープンソースソリューションです。 ここで、UberEatsは製品でReact Nativeを使用する方法を公開し、次のように書いています。

---

ウラジミール・イワノフは、2017年4月21〜22日にサンクトペテルブルクで開催されるメビウス会議で、 「React Native：Survival Lessons」というレポートで、React Nativeで本格的な商業プロジェクトを作成する方法について話します。