ビッグフロントエンドいますか？
簡単に言えば、大型のフロントエンドは、アンドロイド、iOSの、ウェブ、ウォッチなど、すべてのフロントエンドの総称であり、ユーザーに最も近い層は、UI層であるので、上の、そして統一、それは大規模なフロントエンドです。最大の特徴はまた、すべてのプラットフォームに適用され、大規模なフロントエンドの開発ということで、開発者は心配するAPP AndroidとiOSモードとして行う必要はありません。大規模なWebフロントエンドのWebサイトの使用を開発するだけでなく、モバイルアプリケーションやモバイルエンド側のWebアプリケーションを開発することができないだけで、統一の時代です。
なぜ大きなフロントエンドの外観？
ノードの存在に起因するが、エンジニアはそれは前端と後端を分離そうすることを、フロントエンドと直接実行するプログラムの後端に頼る必要はありません。だから、サービスは一つだけを記述する必要がありますが、ユーザー指向の製品はこのような多くのウェブサイトで、Androidのクライアント、iOSのクライアントおよび小型マイクロチャネルプログラムかもしれときに、新しい製品を開発するとき。各プラットフォームで使用されるテクノロジ・スタックが異なるため、コードは再利用するので、人材や物的資源の浪費することはできません。したがって、この痛みのポイントに対処するいかなる技術がありませんか？大型のフロントエンドされて入ってきた、実際には、クロスプラットフォーム技術で、大規模なフロントエンドクロスプラットフォーム技術の主な核心である、滑らかで、開発者が唯一のテクノロジー・スタックを必要とする上、各プラットフォームの違いは、複数のプラットフォーム用に開発することができますクライアント。
クロスプラットフォームプログラムプロフィール
現在主流クロスプラットフォームソリューション：コルドバ/ PhoneGapの、等、ネイティブ、Weex、小さなマイクロチャネル・プログラム、PWAとフラッタを反応させ、その原理に従って、4つのカテゴリに分けることができます。
- H5 +ネイティブ（コルドバ、イオン、マイクロチャネル・アプレット）
- JavaScript開発+ネイティブレンダリング（ネイティブ、Weex、高速なアプリケーションと反応）
- 自绘UI+原生(Flutter)
- 強化されたWebアプリケーション（PWA）
次に、4クロスプラットフォーム・ソリューションの簡単な紹介。
H5 +ネイティブの複合用途開発
このモデルはまた、ハイブリッド開発として知られ、多くのアプリケーションは、共通のマイクロチャネル、淘宝網、米国のグループ、iQIYI他のよく知られたモバイルアプリケーションを開発するために、このモデルを使用しています。などDcloud、AppCan、Inoic、のように、基本的に参照コルドバ混合開発フレームワークから導出され、使用する開発者のための開発プラットフォームにハイブリッドモデルを使用している企業も多くあります。
そのようなフレームワークの主な原理は、動的にコンテンツニーズがネイティブページ負荷制御のWebView（アンドロイド）またはWKWebView（IOS）により負荷に、H5によって達成APPの部分を変更することで、H5部ので、脂肪バージョンなしにいつでも変更することができますH5コードのみ開発した後に必要な、一方で、動的なニーズを解決するために、また、開発コストを低減することができる、AndroidとiOSの2つのプラットフォームを実行することができます、我々は複合用途開発のためのこのH5 +ネイティブ開発モデルを呼び出します。APPが開発したハイブリッドモデルは、我々はハイブリッドアプリケーションやハイブリッドAPPを呼び出します。
ネイティブ開発プラットフォームは、H5コードがWebViewの中で実行されているすべての機能を、混合開発を、アクセスすることができ、およびWebViewのは、ほとんどのように、基本的にはまだ限られた権限を持つサンドボックスでJavaScriptを実行しているブラウザのカーネルであるため、システムにアクセスする機能は、ファイルシステムにアクセスすることができない場合、あなたは、Bluetoothを使用するというようにすることはできません、ではありません。H5機能を実現することができないためにそう、私たちは、ネイティブ実行する必要があります。ハイブリッドフレームは、通常、APIのシステム容量にアクセスするためのネイティブコードの数に予め実装され、その後、JavaScriptのコールのWebViewにさらされるので、WebViewのはJavaScriptとネイティブAPIとの間で通信するためのブリッジとなっている、ことを、責任JavaScriptとネイティブでありますメッセージとメッセージを届ける間のコール転送は、メッセージの形式と意味を定義する標準的なプロトコルを、従わなければならない、我々はWebViewのに依存しているJavaScriptとネイティブ間の通信に使用し、メッセージングプロトコルを達成していますWebViewのJavaScriptの橋と呼ばれるツールが、それはまた、混合開発フレームワークのコアであり、JsBridgeを言及しました。
動的なコンテンツはH5、ウェブテクノロジ・スタックの使用を開発することができ、かつ豊かな地域資源であることをハイブリッドアプリケーションの利点、欠点は、複雑なユーザインタフェースやアニメーション、WebViewのクマの責任のためのパフォーマンスの低下です。
ネイティブレンダリングJavaScript開発+
こうしたオープンソースのフレームワークの代表的なものは、主のFacebookのネイティブ、アリWeexは、もちろん、ピカソ米国のグループの売上高はありませんし、最新の高速なアプリケーション反応します。
道のネイティブレンダリング+ JavaScript開発の主な利点として、以下のとおりです。
- Web開発テクノロジー・スタック、迅速な巨大なコミュニティ、比較的低い開発コストの使用。
- ネイティブレンダリング性能を比較したH5は、多くのことを改善します。
- ダイナミックは、より良いホット・アップデートをサポートしています。
次のようにもちろん、欠点があります。
- レンダリングは、ドラッグとして、いくつかのシーンでは、JavaScriptとネイティブを必要とする場合カトンため、頻繁にコミュニケーションをもたらすことができるとのコミュニケーション。
- JavaScriptは、JIT、AOTコードの実行効率と依然としてギャップの実装を必要とスクリプト言語です。
+レンダリングがネイティブコントロールを依存しているため、さまざまなコントロールは、別のプラットフォームを維持する必要がある、とするとき、システムのアップデート、コミュニティの制御が遅れることがあり、また、制御システムは、そのネイティブUI・システムの制限、例えば、アンドロイドで、ジェスチャーになります競合曖昧さ回避ルールは、ネストされたコントロールを記述するためにさまざまな人々を使用した、固定されており、ジェスチャーの競合が非常に困難になります。
リアクトネイティブ
ネイティブ（RNと呼ばれる）、Facebookは2015年4月におけるクロスプラットフォームのモバイルアプリケーション開発フレームワークのオープンソースで反応し、Facebookは以前、オープンソースJSフレームワークは、ネイティブモバイルアプリケーションプラットフォームで派生した製品を反応させるのである、現在のiOSとAndroidプラットフォームをサポートしています。モバイルアプリケーションを開発するためのJavascript HTML JSXに似た言語、およびCSSを使用してRN、そして少しの学習とWebフロントエンドの開発と技術者を持つため、使い慣れたモバイルアプリケーションの開発のフィールドを入力することができます。
ネイティブの設計原理と一貫性を反応させる反応し、仮想DOMは、最終的には、ブラウザのDOMツリーにマッピングされます、そしてRN仮想DOMは、JavaScriptCoreにおけるによってネイティブコントロールツリーにマッピングされて反応します。
JavaScriptCoreにおけるはJavaScriptインタープリタである、それはでネイティブに反応して二つの主要な役割があります。
- JavaScriptが動作環境を提供します。
- それだけで、実際には、iOSの、多くのJsBridge実装はJavaScriptCoreにおける基づいていますJavaScriptとコミュニケーション、役割のネイティブアプリケーションブリッジとJsBridgeの間にあります。
RNは、2段階のプロセスの仮想DOMネイティブコントロールにマッピングされます。
- レイアウトをメッセージング、仮想DOMレイアウトネイティブに情報を送信します
- レイアウト情報に基づいて対応するネイティブ制御によるネイティブレンダリング制御ツリー
ネイティブレンダリングネイティブコントロールに反応するので、単に複数のプラットフォーム上で使用することができますコードを維持するために、ネイティブのWeb開発技術スタックで反応させながら、そのパフォーマンスは、はるかに優れたアプリケーションH5を混合よりもなります。
Weex
Weexアリババは2016年終わり、クロスプラットフォームのモバイル開発フレームワーク、アイデアや原則にリリースされ、同様のネイティブ反応して、最大の違いは、構文レベルであり、開発フレームワークとしてネイティブReact.jsの使用を反応し、開発Weex使用Vue.jsとしてフレームワーク。VUEとJavaScriptフレームワークを反応させるのは、フィールドの最もホットなフロントエンドと呼ばれ、使用および機能の容易さは、淘宝網のWeexも広く使用されている、非常に強力です。
高速アプリケーション
高速アプリケーションでは、Huawei社は、キビ、OPPO、Meizuのおよび他の9つの主要な国内の主流の携帯電話会社が一緒にマイクロチャネルアプレットに対して目的とした軽量なアプリケーション標準を開発することです。また、ネイティブとWeexを反応させるために比較される2つの違いがあり、ネイティブコントロールのレンダリング、JavaScriptを使用して言語の発達であります：
- アプレットが今、原則として、VueのをVueの文法開発（mpvue）を使用することができます言及する価値がある、などの高速アプリケーション自体は、Vueのをサポートしたり、ネイティブのJavaScript開発を使用して文法、その開発フレームワークとマイクロチャネルアプレットを反応しません構文はまた、高速アプリケーションに移植することができます。
- ネイティブおよびWeexレンダリング/レイアウトエンジンがフレームに組み込まれて反応する、各パッケージは、APP、かさばるインストールパッケージを必要とし、高速なレンダリングアプリケーション/レイアウトエンジンは、ROMに統合され、アプリケーションの必要性はパッケージングされません、高速なアプリケーションパフォーマンスを実現するために同じ時間で急速に分布を確実にするために、なぜ、ある小さなインストールパッケージ、。
自绘UI+原生
あなたは、異なるプラットフォームUIの一貫性を実現することができるようにUIを描画するために、異なるプラットフォームに統一されたインタフェースを実現するためにエンジンをレンダリングすることにより、システムは、ネイティブコントロールには依存しません。自己塗装エンジンクロスプラットフォームUIの問題を解決することを注意し、それが他のシステムを呼び出す機能を必要とする場合は、まだネイティブ開発に関与する必要があります。次のようにこのプラットフォーム技術の利点は次のとおりです。
- 高性能;近い性能とネイティブコントロールにエンジンからの絵画は、UIシステムのAPIを描画する直接呼び出しているため。
- 柔軟、コンポーネントライブラリメンテナンスが容易、高忠実度のUIの外観と一貫性;ネイティブUIレンダラは依存コントロールではないとして、コードは保守が容易であるので、異なるプラットフォームの制御に別々のコンポーネントライブラリを維持する必要はありません。コンポーネントライブラリとして同じコードセット、同じレンダリングエンジンであるので、ディスプレイの外観は、異なるプラットフォーム上で高い再現性と一貫性を達成することができ、部品;彼らはネイティブコントロールに依存しないので、他に、ネイティブのレイアウトシステムを限定されるものではなく、このレイアウトは非常に柔軟になります。
短所：
- 不十分なダイナミックを、UIレンダリングのパフォーマンスを確保するために、自己塗装UIシステムは、一般的に、動的にコードを発行したようにアプリケーションの公開後、いない言語の開発のためのフレームワークとしてのJavaScript（JIT）を使用して、ハイブリッドおよびRNたもののように、その配布パッケージのコンパイルAOTモードに適用されます。
ときめきます
フラッターは、Googleのオープンソースおよびモバイルアプリケーション開発フレームワーク、クロスプラットフォーム、高忠実度、高パフォーマンスのシリーズです。アプリ開発者は、ダート言語、iOSとAndroidのプラットフォーム上で実行するコードのセットで開発することができます。フラッターは、コンポーネント、インターフェースの豊富なセットを提供し、開発者はすぐにフラッター用ネイティブ拡張を追加することができます。
フラッターどちらのWebViewは、オペレーティングシステムのネイティブコントロールを使用しないでください。その代わり、フラッターは、ウィジェットを描画するために、独自の高性能レンダリングエンジンを使用しています。これは、AndroidとiOSのUI上の一貫性を確保するだけでなく、高いメンテナンスコストをもたらしたネイティブコントロールと制限への依存を避けるために。
その2Dレンダリングエンジンとしてフラッター使用Skiaは、グーグルSkiaは、2Dグラフィックスライブラリであるフォントが含まれ、座標変換、ビットマップは、高性能かつコンパクトな性能であり、Skiaは、クロスプラットフォームであり、そして非常に提供しますフレンドリーなAPI、現在、Google ChromeブラウザとAndroidは、そのグラフィックスエンジンとしてSkiaを使用している、Androidシステムのためには、Skiaを構築されている、ことを言及する価値がある、フラッターので、不要になったAPK（Androidアプリケーションのインストールパッケージ）を、パッケージ化するときAPKにSkiaが、Skia iOSのシステムが構築されていないので、IPAを構築するには、また、なぜAndroidのフラッターAPPインストールパッケージの小さなインストールパッケージiOSの主な理由よりもSkia、一緒にパッケージ化する必要があります。
フラッターにも欠点がある。しかし、それは動的更新はコードとホットを発行してサポートしていません。
WEIGHT（プログレスWebアプリケーション）
PWAは、上記のクロスプラットフォーム開発の特定の種類に属していない、それは概念があり、PWAは、基本的にWebアプリケーションが、また持っているいくつかの機能のネイティブアプリケーションは、そのようなオフライン機能、ローカルキャッシュ、およびプッシュ通知、などといくつかの新技術を使用していますネイティブアプリのような利点とネイティブアプリのWebアプリケーションのルックスを持ちます。フロントエンドの技術スタックのPWAフルに活用、それは携帯電話やブラウザをサポートする必要があり、現在、同様PWAを使用することができます以上11.3 iOS搭載の携帯電話を運ぶよう、Google PlayのサービスServiceWorkerのAndroid携帯電話をサポートしています。そのため、国内の携帯電話メーカーとブラウザベンダーの問題の団結のため、国のPWAの開発は非常に良いではありませんが、外国ではなく、これらの問題を持っています。
大型フロントエンドトレンド
大型のフロントエンドのモバイル開発は、Webフロントエンドの開発動向となりますだけでなく、それが技術動向表示装置端末の今後の展開になります。大型のフロントエンド端子は、Webページを開発するだけでなく、より多くの開発、エンジニアリングや他の作業を行います。大型のフロントエンドエンジニアは、すべての端に開発者を得ることができるようになります。論争のフルスタックのエンジニアと比較すると、それはより実現可能です。しかし同時に開発者には、そのようなネイティブのiOSやAndroidの開発技術を習得する必要があるHTML、CSS、JSおよびその他のフロントエンド開発者の知識を学ぶためのネイティブのフロントエンドの開発者として多くのテクノロジー・スタック、となり、その後、一般的な見クロスプラットフォーム技術、よりよい家族の大きなフロントエンドに統合するための唯一の方法。
