上記の「開発者向け技術最前線」をクリックして、「星」を選択
愛で13時21見
著者：Jingdongモール共有テクノロジー|出典：Jingdongモールの技術チームを
編集者：ココア
序文
JDFlutterモールが共有し、技術です - マルチ末端融合技術部門はすぐに既存のAndroid / iOSのプロジェクトに統合することができるクロスプラットフォームの開発フレームワークの新世代を立ち上げ、開発者は迅速JDFlutterプラットフォームの使用フラッター事業展開を行うことができます。JDFlutterプラットフォームはJingdongのスタイルのUIコンポーネントライブラリとネイティブAPIの富のほとんどを提供し、複雑なビジネスニーズを満たすことができます。JDFlutterとJDReact将来は一緒に双発JingdongはARESクロスエンドアプリケーション開発プラットフォームを形成します！
フラッタープロフィール
フラッターは、高性能、高忠実度のアプリケーション開発を可能にする、初のオープンソースのクロスプラットフォームソフトウェア開発キット（SDK）のAndroid、iOSの2つのプラットフォームのサポート、Googleの会社2018年2月27日リリースです。フラッター開発プラットフォームの開発者が容易に、かつスタイルUIの面で開発フレームワークのデフォルトの材質（Googleのようなスタイル）とCupertion（似たiOSのスタイル）2つのスタイルをサポートする独自のアプリケーションを実装することができますして、ユーザーエクスペリエンスは非常に近いですネイティブアプリケーション。上海で2018年9月19日を改善するために最適化した後、約7ヶ月、Googleは公式にその優れた性能のフラッターに基づいて、フラッターリリースプレビュー2の公式バージョン1.0に非常に近いリリース同社は、将来のアプリケーション開発の主流ツールになると期待されます。
類似して、HTMLよりも良いフラッターは、ネイティブ、Weexおよびその他のクロスプラットフォームソリューションを反応します。最終的にネイティブコンポーネントに生成されたコードをレンダリングJSX ReactNativeは、JSは、ネイティブJSBridgeとデータを通信します。フラッタは、底部が独立したレンダリングエンジン-Skiaであり、すべてのコンポーネントが、プラットフォームのウィジェットの構成要素から独立している、我々は最大限にクロスプラットフォーム経験の一貫性を確保することができ、完全に異なる設計です。
Jingdongは非常に成熟したクロスプラットフォームソリューションJDReactは中JDReactフラッターに右の開発プログラムを選択する方法を、既に存在していますか？何の動的更新要求がフラッターを選択することはできません。私たちは、それがオンラインビジネスパッケージのアップグレード、ホットフィックスおよびその他の動的状況更新、好みJDReactのために必要とされる場合と信じています。
現在、忙しい魚APP米国APPグループでは、我々は3つのフラッタプログラムを比較して、公に入手可能な情報に基づいて、一部のページフラッタにアクセスしようとしています：
統合とデバッグ
統合パッケージ1Flutter
新しいアプリケーションの開発のこの段階に、フラッターは公式フラッターが完了開発するツールを作成するためのスクリプトを作成して使用して、新世代のクロスプラットフォームソリューションとして、良い選択です。ほとんどの場合、我々は既存のAPPは、長い時間のためにオンラインだったに直面していますが、ページの新しいページまたはセクションの変換は、このケースでは、我々は完全なフラッターのためのフラッタモジュールを作成する必要があり、フラッタ開発を使用しようとする必要がありますページの開発、フラッターへの依存と、既存のAPPプロジェクトのホストとしてのモジュールを追加します。
フラッターは、アカウントに同僚の開発環境を取る必要はありません、我々はスクリプトが変更されているコンパイルします。
▲コンパイラ開発環境の設定
フラッターの開発者は、ローカルで完全な開発SDKを設定し、開発者がフラッターは、それがローカルのコード開発を設定する必要があり、このフラグR＆Dフラッタを開発することである場合は、このフラグは、セットされていないと発生しない場合は、jdFlutter.debugマークを増やす必要があります。このように、開発者は、フラッターは、既存のプロジェクトのコンパイルには影響しません行うことができます。コード管理にgitのサブモジュールのアプローチを使用してフラッタービジネスコード、アンドロイド、iOS搭載のプロジェクトは、フラッターのセットにのみ依存することができます。
▲gitリポジトリの管理
2JDFlutterの設計フレームワーク
▲JDFlutterチャート
底がグレー、降格の災害復旧、統計や他の機能を提供し、これらの機能は、アクセスのバックオフィスシステムを統一しています。
中央のコア開発キットの層：JDFlutter UIコンポーネントライブラリとしてJDFlutterコア・ウィジェット、スタイルとそうJingdongのは、設計仕様を満たすためには、今では上のボタン、チェックボックス、ダイアログ、魔術師、ロード、NavgationBar、テキスト、PullToRefreshとをサポートしています。フラッターは、UIコンポーネントライブラリの2つのスタイルの枠内に統合：1はGoogleのマテリアルデザインスタイルで、他は、Apple Cupertionデザインです。どちらのデザインが良く、スタイルの開発者は、ネイティブのページから変わらないのニーズを満たすことができます。Jingdongはクライアントに統合する場合しかし、これらのスタイルは、需要を満たすことができないので、我々は、適切な携帯電話Jingdongは（JingdongはAPP）UIコンポーネントライブラリ（継続的改善）を提供します。
ネットワークはJDNetwork、デバイス関連JDDevice、ページジャンプJDJumping、JDReporterが好き報告埋没JDMta、共有JDShare、例外を要求する：JDFlutterコア-LIBネイティブとDARTの間の通信のためのブリッジとして、我々のようなネイティブインタフェースを提供します。
最上層へのアクセス、統合されたサービスの開発を含み、アンドロイド/ iOSのクライアント統合が終了します。
提供コンポーネントライブラリとAPIデモ▲JDFlutter
3オープンJDReactネイティブAPI
フラッター前に、Jingdongは、非常に成熟し、安定したクロスプラットフォーム開発ソリューションJDReactてきました。JDReactフレームでは、すでにパッケージ化ネイティブAPIの多くは、ネイティブとJSの間でデータがJSBridgeを介して送信します。
多くのJingdongはアプリケーションのネイティブAPIアクセス機能とフラッターするには、次の方法があります。
公式チャンネルのプラットフォーム（によるhttps://Flutter.io/platform-channels/）書き込み、パッケージフラッターAPIを。
プラグイン合わせ方式、ネイティブAPIプラグインで書かれた各。
すべてのJDReactは、既存のネイティブAPIを再利用します。
ネイティブJDReactは現在、数百あるAPIを提供し、厳密なテストを受けています。あなたが最初の2つの方法に従えば、あなたは徐々にJDReactネイティブ容量をベンチマーク、作業負荷が大きくなりたい、と多くのテストが必要です。だから我々は、既存のJDReactネイティブAPIの、全ての再利用を最後のオプションを取った：元JDReactフレームワークは、以下の画像に変更された方法に統一されたインタフェースを定義することで、変換フレームワークのアーキテクチャ図を示しています。
▲JDFlutter多重JDReact APIフレームワーク
アダプタ層はネイティブネイティブコードは、ネイティブAPIダートに露出MethodChannelによってネイティブAPI JS、JDFlutterに露出JSBridgeによって対応するインターフェースフラッタ、JDReactで達成された反応します。後続の開発を容易にするために、我々は、サービスがそのネイティブ実装を有することなく、円滑に展開することができることを確実にするために、第二パッケージとJSダート側にありました。
4つの事業統合
異なる独自のビジネスを演奏、下請けのメカニズムに同じ部品libが再生されない、解決策は、すべての企業がネイティブ転送を解決するために一緒にパッケージされていることである - 現在、統合サービスパッケージと同様のJDReact分割パッケージをサポートしていませんフラッタ内部ルートナビゲーションロジックによって決定ルーティングジャンプパラメータ情報。
▲トラフィックルーティングおよびパラメータの受け渡し
ジャンプパラメータparamsは、各サービス・エントリに送信されている間、メイン入口main.dart、元の送信のプロトコルの変更を受け入れ、パラメータ解析のために、トラフィックルーティングを決定し、ルート分布。
▲統合されたビジネスディレクトリ
オンラインサービスパッケージの統合を達成するために、すべてのサービスコードは、libの下に配置されています。別の開発者の間で互いに独立して確保しながら、各事業は、libディレクトリに分けて管理され、その経営資源に関連した対応する画像は、独立して管理されています。フォルダ内の資産は公共の資源である、異なるサービスは、直接そのディレクトリ内のリソースを参照することができます。
5試運転
多くの開発者JDReact少しの友人が精通ではないかもしれないのAndroid / iOSのネイティブAPPのためのフロントエンド開発されています。以下に示すように、バックグラウンドでの私たちの開発とデバッグを容易にするために、JDFlutter MarsWorksデバッグ機能を追加します。
▲開発とデバッグIDE
フラッタ事業開発だけでフラッタ熱負荷を達成するために、「再読み込み」ボタンをクリックした後にコードを変更し、「デバッグの開始フラッター」束縛電話をクリックして、我々は電話で提供APKインストールパッケージ、コンピュータに接続されている携帯電話をインストールする必要があります。
将来は、我々は、IOSシミュレータのサポートを追加し、対応するページに直接エミュレータジャンプを開始するには、「デバッグの開始フラッター」をクリックします。
6Demoデモ
これはJingdongは、ページが以前JDReactが達成使用、出席のランキングページのJDFlutter変換を使用携帯電話です。形質転換後、ページの操作は非常に滑らかで、オリジナルに非常に近い全体的なユーザーエクスペリエンスは、区別することが難しかったネイティブまたはフラッターに実装されています。その後、徐々にJDFlutterを使用しようとするより多くのページ、場面があるでしょう。
▲JDFlutter出席のランキング
統計
ビジネスデータと異常データを含むオンライン統計データのJDFlutterは、異常データの側面が起こるどんなには、タイムリーな措置をとるべきです。
1つのビジネス統計
基本データDAU、UV、PV、およびその他のサービスは、主に以下のスキームは、統計のかもしれない、データサービスが含まれています。
▲統計
シナリオ1：埋葬ジャンプポイントの増加に元の入り口。
スキーム2：ページのフラッターがメインルート入口増加に埋葬。
シナリオ3：フラッタビジネスページに埋もれ増加。
上記の3つの方法は、統計ページのデータは、1玄関プログラムデータをカウントすることができ、劣化以外のトラフィックデータを数えることができるスキーム2は、スキーム3は、統計学的に、より正確なトラフィックデータとすることができ、より詳細な他のフィールドを提供することができますこのよう次のページに入るような背景から送信されたデータ、。
ビジネスにアクセスするための3つの方法のデータニーズ、JDFlutterフレームワークは、暗黙のうちにのみ率をダウングレードしません見ることができ、これらの二つのデータを分析するためのオプション1とオプションデータ統計の2二種類を、サポート、あなたはまた、スタートページJDFlutterケースを見ることができます追加を完了するために必要。
2つの異常データモニタリング
オンラインビジネスは様々な問題が発生します、異常な収集と分析が特に重要です。私たちは、分析の異常に以下の例外を収集します：
▲例外監視
背景には、より良いものをビジネスコードの問題を分析するために、例外を収集し、ジャンプはダーツコードの目標異常で行うことができたとき、私たちは、異常データの名称、およびパラメータ情報に事業に参加しました分析は、トラフィックの急増の異常な量ならば、我々はダウングレードされます。
ダウングレード災害復旧
▲JDFlutterサービス低下災害復旧マップ
前記災害プールバックグラウンドで配信劣化したデータを、含まれて劣化した状態のオンラインビジネスであって、それぞれ：JDFlutterサービス名を、対応するサービスJDReact、およびJDReact H5 URL劣化したサービスの名前を。分解プロセス：劣化した災害JDReactプールから対応するサービス名を削除し、それがサービスフラッターJDReactサービスをダウングレードするかどうかを判断することができます。
JDReactサービスが利用可能な場合、JDReact事業に格下げ
サービスが利用できないとJDReact H5格下げページがある場合は、H5ページに格下げ
サービスが利用できないと何JDReactのH5がページを格下げしていない場合は、JDFlutter統一エラーページ
何JDReactビジネスが存在しない場合は、ページH5、H5は、ページに追いやらをダウングレードして降格する必要があります
他の例は、統一された統一されたエラーページが表示されJDFlutter
降格災害復旧グラフの上のすべての可能な例外が含まれています。我々が最初にJDReactにダウングレードする理由は言及する価値がある：原因140よりも私たちの現在のJDReactの複数のサービスにアクセスするには、オンライン遭遇した問題を避けるために、これらのサービスセクションのJDFlutterの優先順位を使用しようとすることが、我々まず、それは唯一のサービスの正常な動作を保証することができ、元のJDReactページに格下げされ、ユーザーエクスペリエンスを保証することができます。
未来に目を向けます
現在JDReactマルチ統合プラットフォームは、まだメインJingdongはAPPクロスプラットフォーム開発プログラム、内部アクセスJDReact JingdongはのAppのダース、140回の以上のアクセスJDReactビジネスで、より多くのJDReactサービスへのアクセスがあるでしょう。JDFlutter第2のエンジンに、当社のクロスプラットフォームのアクセスとして、将来、新しいサービスへのアクセスを持っていきます、JDFlutterが達成使用して、より新しいシーンがあるでしょう。
今後は、JDFlutterにプラットフォームReactNativeフラッターツインエンジンの開発と戦うために、マルチ末端融合プラットフォームをクロスプラットフォーム開発プログラムのこの新世代を改善していきます。
参考文献：
用語集
JSX：構文は、ネイティブフォーマットを反応させています
JSBridgeは：ネイティブとJSの間でデータを渡すことjsbridge
Skia：フラッターのレンダリングエンジン
ウィジェット：フラッターコンポーネント
橋：ネイティブとフラッターの間の通信ブリッジがあります
下請メカニズム：別のビジネスは、それ自体を破壊していること、同じことがlibの一部に再生しません。
ネイティブAPIの容量：フラッターはJingdongはアプリケーションの容量がネイティブメソッドで呼び出すことができます
プラグインは：ネイティブフラッターダーツと通信するための方法である、methodchannelのがある
ENDの
テクノロジー業界の動向や前線のニュースレターの懸念、呉服メーカーを結集し、開発者向け技術最前線、優れたガイドの開発者の経験と成長です。
読み込み歴史
テンセントニュースフロントエンドのパフォーマンス監視の練習は、
ほぼリアルタイムのハイブリッドデバッグクロスプラットフォームのクライアントを知っている
技術の嵐の十年を経験している帝国運動の終焉の歴史を
格好良いバーのポイントに良いテキスト