むしろ、これは私がどのように新しいフレームワークに切り替えたかについての別の話です）
資料は究極の真実を意味するものではありません。ここでは、私が自分で選択したソリューションのみを説明します。これらのソリューションは、React＆React Native開発の豊富なバックグラウンドを持っているため、実際のプロジェクトに適用するのが最も簡単でした。
環境
まず、いわば文脈について説明します。小さな（約15画面）クロスプラットフォームモバイルアプリケーションを作成するという命令が出ました。当然、習慣から、私はReactNativeでそれを始めました。2週間で、アプリケーションは約80％実装されました。
週末に、調査の結果が記載されたSurfonHabréの別の記事を読みました。そして、考えが来ました、なぜ試してみませんか？新しいフレームワークですでに書かれていることを繰り返すことはできますか？これを試して週末を過ごすことにしました。その結果、次の週に、以前の80％だけでなく、残りの20％も書き直されました。開発時間が半分以上短縮されました！
長所
まず第一に、利点はレイアウトの速度です。スクリーンは非常に速くリベットします。線形グラデーション、svg、gif-ほとんどすべてすぐに使用できます。重複するコンポーネント（位置：絶対）-まったく問題ありません。React Nativeで痛みを引き起こしたものはすべて、指でクリックするだけで実行できます。アニメーションは一般的におとぎ話です！常にアニメーション化されたコンポーネントを備えた同じ画面は、Flutterで費やされる時間が数分の1になりました。
マイナス
2つの具体的な欠点があります。1つ目はドキュメントです。ロシア語ではほとんどありません。公式英語はあまりよく構成されていません、はい、それは多くの有用なコード例を提供しますが、アプリケーションの一般的なアーキテクチャから賢明なことを理解することは困難です。
2番目の欠点はパッケージです。そこにはまだ完全な混乱があります。あなたが欲しいもののために本当に良いパッケージを選ぶことは簡単な仕事ではありません。ある機能が機能しない場所、別の場所。選択には多くの時間が費やされます。オプションとして-自分で何かを追加しますが、これは私がそれに慣れたときです）
経験：フック
私のReactの知り合いは、通常のクラスが登場したばかりの時代にまでさかのぼります。今、私はフックなしで彼を想像することはできず、すでにクラスを忘れています。 flutterには、使い慣れたフックをプロジェクトに組み込むことができる素晴らしいflutter_hooksライブラリがあります。私にとっては、StatefulWidgetを完全に置き換えました。多くのフックがあり、独自に作成できますが、ほとんどの場合、useEffect、useState、useMemoizedが私のコードで使用されています。アニメーションの場合は、AnimationControllerを使用します。
これは最善の解決策ではないかもしれませんが（コメントで短所について読む準備ができています）、Reactの背景を新しいフレームワークで使用することができます。コードを使って例をあげる理由すらわかりません。すべてのReact開発者は、これを「私たちの父」として知っています。
経験：州の管理
かつて、私はredux、mobx、さらにはstoreonなどのエキゾチックなものを使用する必要がありました。それ（redux / mobx）もFlutterの下にあるようですが、率直に言って、私はそれをマスターしていませんでした）。私の意見では、Reactにあったものと比較して、すべてが複雑すぎます。もちろん、もっと時間をかけてそれを理解することはできますが、なぜ、私がより良い解決策を見つけたのか：riverpod。
ライブラリレミRousselet、著者のflutter_hooks -きれいに自然に彼らは仕事の両方）。実際、これは変更されたプロバイダーです。runAppに追加するだけです（ProviderScope（...））他のすべてをラッパーし、任意のウィジェットからアクセスできるアプリケーション全体のグローバルスコープを取得します。これは、書き込みに十分であるuseProvider（providerNameで）のビルド方法でHookWidget、我々は指定されたプロバイダから利用可能なデータを持っています。
ライブラリには多くのプロバイダーオプションがありますが、最も基本的なのはChangeNotifyProviderとStateNotifyProviderです。すべてのビジネスロジックをウィジェットから安全に削除して、これらのプロバイダーに転送できます。さらに、それらは互いに完全に組み合わされており、一方から他方のメソッドおよびデータにアクセスすることは難しくありません。
パターンはreduxアヒルに非常に似ています私個人としては、Reactの世界で最も近いアプローチになっています。「アヒル」だけが小さいです。ここで覚えておくべき主なことは、実際に変更されたウィジェットは再描画されるため、1つの大きなプロバイダーよりも異なるウィジェットで使用される多くの小さなプロバイダーを用意する方がよいということです。
失望：ウェブ
モバイルアプリケーションの開発で（私自身にとって）圧倒的な成功を収めた後、私は他の自尊心のあるフルスタックと同様に、Flutter forwebに触れることにしました。繰り返しますが、実際に機能する企業アプリケーションの1つを書き直します。
もちろん、フラッターWebはまだベータ版であり、以下で説明するすべてが特にベータ版に適用されます。このリリースで、多くのことがより良い方向に変わることを本当に望んでいます。それにもかかわらず、フラッターはここで私を失望させた。
Flutter Webについて最初に知っておく必要があるのは、Webサイトではなく、アプリケーションです。それら。モバイルと同じように書く必要があります。すべてのウィジェットは同じです。コードでサードパーティのJSを使用することはできません。dart：jsを介してのみアクセスしてください。ダーツ経由でもhtmlにアクセス：html..。これにより、Webの世界ですでに行われているほとんどすべてのことが一度に遮断されます。css + jsのどこかにすでに実装されているクールなアニメーションが必要な場合は、フラッターにアナログを作成するか、dart：jsを使用する必要があります。これは必ずしも簡単ではありません。既製のJS / cssライブラリを苦痛なく使用することは不可能です。
2番目のマイナスは再びパッケージです！pub.devにありますが、そのほとんどはWeb、android、およびiosの両方をサポートするものとしてマークされており、実際、どちらか一方が通常は機能します。それら。完全にクロスプラットフォームのコードを作成することはできません。
Webパッケージは通常、対応するjsのラッパーです。しかし、ほとんどの場合、彼らは彼らが包んでいるパッケージのバージョンに追いついていない。
例：
タスクは、MSを介して認証を行い、ユーザーデータを受信することです。
古き良きJSでは、すべてが簡単です：テイクmsalとマイクロソフト/ microsoft-graph-client-そして結果をお楽しみください。
Flutterでmsal_flutterを見つけ、接続します...そしてWebパッケージがサポートしていないことがわかりました。さて、msal_jsが見つかりました-これは通常のmsalのラッパーなので、古き良きスクリプトタグを介してindex.htmlに含める必要があります。ただし、msalがすでに1.4.2に更新されている場合、このパッケージは最大1.3.0をサポートします。
まあ、まあ、私たちは悲しみで半分のトークンを手に入れました、ユーザーデータはどうですか？パッケージmicrosoft_graphがあります-それに関するドキュメントはありません。必要な方法を見つけるには、パッケージコードに移動して、そこをざっと見る必要があります。そして最終的に、タスクを操作するために実装されているのはそのうちの2つだけであることがわかります。別のmsgraphを探す-一般的に唯一の方法がサポートするように！
幸いなことに、プロトコル自体はそれほど複雑ではなく、ライブラリを作成せずに作業する必要があるときに、独自の何かをすばやく作成できます）
環境
3番目の最大の欠点は、環境を設定できないことです。Flutter Webは、ブラウザーまたはWebサーバーとして実行されます。コマンドラインパラメータを使用して実行するポートを設定することはできます（これもあまり便利ではありません。設定はどこにありますか？！）しかし、自己署名証明書を使用してhttpsとして実行するにはどうすればよいですか？同時に、ホットロードが機能し、デバッグや通常は機能する他のチップが機能するようにしますか？こんにちは！みんな、2k20は終わります、そしてあなたはまだhttpを持っていますか？本当に？！
結論
間違いなく、Flutterは、クロスプラットフォームのモバイル開発のフレームワークとして、ReactNativeをあらゆる面で細かく切り刻んでいます。私は満足しています、顧客も喜んでいます-他に何が必要ですか？
しかし、Webアプリケーションを作成するためのツールとして、それはまだ湿っていて面倒です。サードパーティのjsパッケージを数秒で接続した場合は、ここで数日間ラッパーを作成するか、Flutterで独自のアナログを作成します。
PS
記事の冒頭から忘れてしまった方のために、もう一度繰り返します。私が説明した適用された解決策と結論は、Flutterで1週間のバックグラウンドを持ち、Reactで3年のバックグラウンドを持つ人の結論です。ですから、彼らを究極の真実と見なさないでください。私はコメントで私が間違ったことを第一人者と話し合う準備ができています。