フラッター【0】

Flutterとは何ですか？

FlutterはGoogleのモバイルクロスプラットフォームUIフレームワークであり、iOSとAndroidで高品質のネイティブユーザーインターフェースをすばやく構築できます。Flutterは既存のコードで機能します。世界中で、Flutterはますます多くの開発者や組織によって使用されており、Flutterは完全に無料でオープンソースです。簡単に言うと、Flutterはフレームワーク、コントロール、一部のツールを含むモバイルアプリケーションSDKです。一連のコードを使用してAndroidアプリケーションとiOSアプリケーションを同時に構築でき、パフォーマンスはネイティブアプリケーションと同じパフォーマンスに達することができます。。

モバイルクロスプラットフォームフレームワーク

ここに画像の説明を挿入
従来のネイティブ開発では、AndroidとiOSの2つの開発チームが一般的に維持されています。バージョンが繰り返されると、人件費とテストコストの両方が増加します。これは私たちの通常のAndroidプログラマーにとっては深くないかもしれません、あるいは私たちはこれを気にしません。しかし、会社の観点からすると、コードのセットを作成できれば、androidapkとiosipaを直接開発できます。つまり、このコードのセットを開発および保守するチームがあれば十分ですか？人件費の面では、それは私がより少なく支払うようにすることができます。開発の観点からは、一連のコードを使用して、再利用、テスト、およびUIスタイルの統一を完了することもできます。

早くも2008年には、「PhoneGap」と呼ばれるフレームワークが賞を受賞し、Androidプラットフォームのサポートを開始しました。ここで、一般的に「Cordova」を指すPhoneGapについて話します。これは、PhoneGapからApacheに提供されたオープンソースプロジェクトであり、PhoneGapから抽出されたコアコードであり、PhoneGapを駆動するコアエンジンです。2つは共通のソースコードコンポーネントを維持し、名前とパッケージ名のみが異なります。PhoneGapは、HTML、CSS、JavaScriptを使用してクロスプラットフォーム開発を完了するテクノロジーです。当時、PhoneGapはネイティブパフォーマンスに近いと主張していました。ただし、その動作原理はWebViewに基づいており、JavaInterfaceを使用してネイティブコードとの対話を完了します。このツールをWebViewJavaScript Bridge（JsBridge）と呼びます。

この方法は、クロスプラットフォームおよび動的更新のニーズを十分に解決できます。ただし、Android WebViewのレンダリング効率が非常に低いことは誰もが知っています。同時に、JavaScriptはインタープリター型言語であるため、コンパイルする必要はありません。実行時に解釈および実行されるため、JavaScriptの実行パフォーマンスが低すぎます。同時に、Android独自の問題により、WebViewを使用する過程で消費されたメモリは、不要なときにリサイクルできません。これにより、使用可能なメモリがますます少なくなり、最終的にはOOMになります。したがって、Flutterのようなフレームワークの出現は避けられません。RNなどの既存のクロスプラットフォームフレームワークはJSに基づいています。JSの実行パフォーマンスのため、クロスプラットフォームアプリケーションのパフォーマンスはボトルネックを突破することができませんでした。FlutterはデバッグでJITコンパイルを使用し、ホットリロードをサポートしているため、開発効率が向上します。リリースでは、AOTを使用してマシンコードを直接コンパイルすると、パフォーマンスが向上します。デザインの観点から、Flutterは非常に豊富なウィジェットコンポーネントを提供します。これにより、AndroidまたはIOSスタイルのUI効果を簡単に実現できます。

フラッターアドバンテージ

ページが変更されるたびにホットリロードするため、手動で更新する必要はなく、自動的に更新できます。つまり、開発中のホットリロードのサポートです。

Unified UI
Flutterは、マテリアルデザイン（Android用）とクパチーノ（iOS用）の豊富な組み込みUIコンポーネントを提供するため、多くのデバイスでどのように異なるかを心配する必要はありません。

フラッターアーキテクチャ

ここに画像の説明を挿入

Flutterのアーキテクチャは、主にフレームワーク、エンジン、エンベッダーの3つのレイヤーに分かれています。

1.フレームワークは、マテリアルデザインスタイルのウィジェット、クパチーノ（iOS用）スタイルのウィジェット、テキスト/画像/ボタン、その他の基本的なウィジェット、レンダリング、アニメーション、ジェスチャーなどを含むダーツを使用して実装されます。この部分のコアコードは次のとおりです。flutterウェアハウスの下のflutterパッケージ、およびsky_engineウェアハウスの下のio、async、uiなどのパッケージ（dart：uiライブラリはFlutterフレームワークとエンジン間のインターフェイスを提供します）。
2.エンジンは、主にSkia、Dart、Textを含むC ++で実装されています。Skiaは、オープンソースの2次元グラフィックライブラリであるC ++ 2Dグラフィックエンジンであり、GPUを呼び出してレンダリングを完了し、さまざまなソフトウェアおよびハードウェアプラットフォームに適した共通のAPIを提供します。

3.埋め込みは埋め込みレイヤーです。つまり、Flutterをさまざまなプラットフォームに埋め込みます。ここで行われる主な作業には、サーフェス設定、スレッド設定、およびプラグインのレンダリングが含まれます。このことから、Flutterのプラットフォーム関連のレイヤーは非常に低く、プラットフォーム（iOSなど）はキャンバスのみを提供し、残りのレンダリング関連のロジックはすべてFlutter内にあるため、クロスエンドが良好であることがわかります。一貫性。

Dart言語の紹介

Flutterは、開発フレームワークおよびウィジェット言語としてDartを使用しています。プログラミングの経験、特にJavaまたはJavascriptの知識がある場合は、Dartの習得が非常に簡単であることがわかります。Flutter中国語のWebサイトには、Dartをすばやく習得するのに役立つDart言語リソースのリストがまとめられています。お役に立てば幸いです。

Flutterはdart言語を使用し、開発フェーズでJITモードを採用します。これにより、すべての変更のコンパイルが回避され、開発時間が大幅に節約さ
れます。AOTベースのリリースパッケージlutterは、リリース時にAOTを介して効率的なARMコードを生成できます。アプリケーションのパフォーマンスを確保します。

高速でスムーズなユーザーエクスペリエンスを実現するには、定期的な一時停止なしに各アニメーションフレームで大量のコードを実行できる必要があります。そうしないと、フレームがドロップします。

シングルスレッド：
ロックは不要で、データの競合や可変状態の同期はなく、ロックによるスレッドコンテキストの切り替えやストールのパフォーマンスの低下はありません。

ガベージコレクション
UIフレームワークで一般的に見られる多数のウィジェットオブジェクトの作成と破棄用に特別に最適化された、多世代のロックフリーガベージコレクター。

FlutterとRNの利点は、
RNがブリッジを介してJavaScriptを介してネイティブに渡され、ネイティブの描画が完了することです。ブリッジのコストは高く、頻繁なクロスブリッジ呼び出しが必要であり、ストールなどのパフォーマンスの問題が発生します。

FlutterはDVM（dart仮想マシン）を使用してブリッジの相互作用を減らし、ネイティブ開発と同様に、実行時にこれらのコンパイル済みネイティブコードを直接実行します。仲介者として機能するためにブリッジは必要ありません。

FlutterとReact-NativeやWeexのような動的フレームワークの違いは何ですか？

React-NativeとWeexのコアはJavascriptを介して開発されており、実行にはJavascriptインタープリターが必要であり、UIはネイティブコントロールを介してレンダリングされます。Flutterは、WebViewもオペレーティングシステムのネイティブコントロールも使用しないため、モバイルアプリケーションの構築に使用される他のほとんどのフレームワークとは異なります。代わりに、Flutterは独自の高性能レンダリングエンジンを使用してウィジェットを描画します。Flutterは、C、C ++、Dart、およびSkia（2Dレンダリングエンジン）を使用して構築されています。IOSでは、FlutterエンジンのC / C ++コードはLLVMを使用してコンパイルされ、DartコードはAOTによってネイティブコードにコンパイルされ、Flutterアプリケーションはネイティブ命令セットを使用して実行されます（インタープリターは関与しません）。Androidでは、FlutterエンジンのC / C ++コードはAndroidのNDKでコンパイルされます。DartコードはすべてAOTによってローカルコードにコンパイルされます。Flutterアプリケーションは引き続きネイティブ命令セットを使用して実行されます（インタープリターは含まれません）。したがって、Flutterはネイティブアプリと同じパフォーマンスを実現できます。

同時に、Flutterは独自のウィジェットのセットを提供します。これらのウィジェットは、Flutterのフレームワークとエンジンによって管理およびレンダリングされます。Flutterウィジェットのカタログを閲覧できます。ネイティブコントロールが適用されない理由は、Flutterが最終結果がより高品質になることを望んでいるためです。Flutterがネイティブシステムウィジェットを使用する場合、Flutterアプリケーションの品質とパフォーマンスはこれらのウィジェットの品質によって制限されます。たとえば、Androidには、ジェスチャーの競合を明確にするためのハードコードされたジェスチャーと固定ルールのセットがあります。Flutterでは、ジェスチャシステムの第1レベルの参加者である独自のジェスチャレコグナイザを作成できます。さらに、異なる人々によって書かれた2つの小さなツールは、ジェスチャーの競合と曖昧さの解消を調整できます。

FlutterはwebpackやAndroidの「インスタントラン」のような「ホットリロード」をサポートしていますか？

はい、Flutterはホットリロードをサポートしています。これは、更新されたソースコードファイルを実行中のDart VM（仮想マシン）に挿入することで機能します。これには、新しいクラスの追加だけでなく、既存のクラスへのメソッドとフィールドの追加、および既存の関数の変更も含まれます。詳細については、Flutter HotReloadを参照してください。

プログラマー/開発者にとって、Flutterを使用するにはどのような経験が必要ですか？

Flutterは、オブジェクト指向の概念（クラス、メソッド、変数など）および命令型プログラミングの概念（ループ、条件など）に精通しているプログラマーにとっては簡単に始めることができます。モバイル開発の経験がなくても、Flutterを学習して使用できます。プログラミングの経験がほとんどない人が、プロトタイピングやアプリケーション開発のためにFlutterを学び、使用しているのを見てきました。