クロスプラットフォームフレームワークの開発者エクスペリエンスの比較

クロスプラットフォームのモバイルアプリ開発では、1つのテクノロジースタックでiOSやAndroidなどの複数のプラットフォーム向けのモバイルアプリケーションを構築できます。

つまり、プラットフォームごとに専用の母国語を使用して記述されたアプリの複数のバージョンを作成する代わりに、コードを1回記述して、一度に複数のプラットフォームにデプロイできます。

開発者の経験とは何ですか？

開発者エクスペリエンス（DXと略記）は、開発者がクライアントライブラリ、SDK、フレームワーク、オープンソースコード、ツール、API、テクノロジー、またはその他のサービスを使用するときのエクスペリエンスを表します。

DXは、ユーザーエクスペリエンス（UX）デザインからのいくつかのアイデアと哲学を共有しています。

これはどのように違いを生むのでしょうか？

単一のターミナルコマンドでWebアプリをデプロイする機会は、同じ結果を達成するための長い指示のリストに従うのではなく、より優れた開発者エクスペリエンスとして認識できるものを示しています。

DXは、開発者がツールを使用してそれに固執するように駆り立てる潜在的な要因の1つです。

この投稿では、開発者にとって本当に重要な4つの要素に基づいて、いくつかの人気のあるクロスプラットフォームモバイルフレームワークのDXを比較しています。

• 設定
• ドキュメンテーション
• ホットリロード
• デバッグ

私たちの比較では、5つのクロスプラットフォームフレームワークに焦点を当てます。

• リアクトネイティブ
• フラッター
• Xamarin
• イオン
• NativeScript

入門

フレームワークのセットアップが第一印象です。簡単に始めることが、フレームワークのワークフローに関してDXに最初に影響を与えるものです。

ここでは、Android StudioやXCodeのセットアップを無視して、さまざまなモバイルフレームワークのセットアッププロセスを比較します。これは、基本的にすべてのフレームワークにとって必須の手順だからです。

React Native：Expoを使用すると、ReactNativeを非常に簡単に開始できます。

NodeJSとExpoをインストールした後は、入力するコマンドが1つだけで、準備が整います（Android StudioまたはXcodeをインストールせずに、Expoアプリがインストールされたデバイスがあることを前提としています）。開始テンプレートには、開発者をガイドするのに役立つ美しくシンプルなインターフェイスが付属しています。

RNコマンドラインツールを使用して、ExpoなしでReactNativeアプリを起動することもできます。この方法を使用してRNアプリを実行するのは、それほど手間がかかりません。CLIツールは、開発者が最初の画面アプリをすぐに入手するのに役立ちます。

RNの使用を開始するには、RNを既存のネイティブアプリに統合する必要がある場合、またはツリー外のプラットフォーム用に構築する必要がある場合にのみ注意が必要です。ただし、これは高度な方法と見なされるため、この比較では考慮しないでください。

React Nativeは宿題をうまくやっているのでreact-native doctor、コンピューターのセットアップを確認するのに役立つパッケージもリリースしました。

Flutter：Flutter SDKをインストールするのは、コンピューターにパッケージをインストールするのと同じくらい簡単です。彼らのガイドは、従うのが簡単な4つの簡単なステップを示しています。これがあなたの側で少しバグがあるとしても、Flutterはあなたをカバーしてくれます。

彼らはDXを大事にすることでよく知られています。彼らはCLIに呼び出されるツールを統合しflutter doctorて、フレームワークのツールチェーンで何がうまく機能していて何がうまく機能しないかについての情報を取得できるようにしました。

より良いDXを提供するには、Flutterツールもコードエディターで構成する必要があります。これは、セットアップのいくつかの追加手順を説明します。これらの手順はオプションですが、インターネット上で最高のFlutterレビューを達成するのに役立ちました。

Flutterのすべてが「すぐに使える」と感じます。Flutter SDKに同梱されているパッケージのみを使用して、より複雑なアプリを簡単に構築できます。

Xamarin：Visual Studio IDEに慣れているC＃開発者の場合、Xamarinのインストールは確かに公園を散歩しているように見えます。ただし、Visual Studioがない場合は、VS2019のインストールとXamarinツールが面倒になる可能性があります。

Xamarinをインストールすると、Visual Studio GettingStartedGUIを使用してアプリを起動できます。ここでは、モバイルアプリを選択し、提供されているテンプレート（マスター詳細、タブ付き、シェル、空白）から開始テンプレートを選択します。次に、プラットフォームを選択し、[続行]をクリックして、初期化されるのを待ちます。

Ionic：v1以降、Ionicは常に非常に簡単に使い始めることができます。現在、v5を使用しており、さらに簡単になっています。

これは3つのステップでionic start myApp <template-name>行われます。IonicwithNodeをインストールし、（空白、タブ、サイドメニューの3つのテンプレートが提供されている）のプロンプトを実行して実行し、最後に。を使用してアプリを実行しionic serveます。

ここでは、デフォルトのアプリがモバイルWebサイトのようにブラウザで提供されますが、これはビルド後のアプリの外観とほぼ同じです。

また、Ionicにはv5があります。これは、1つのコマンドライン命令だけで上記と同じ結果を得るのに役立つ、美しく直感的な起動ウィザードです。

NativeScript：開始するには、クイックセットアップとフルセットアップの2つの方法があります。クイックセットアッププロセスは、React Native with Expoに似ています。物理デバイスにアプリをダウンロードすると、React Nativeがリンクを介して開発端末に接続し、アプリの作業を開始できます（Android StudioまたはXCodeをインストールせずに） 。

フレームワークをインストールするためにOSの端末とうまく機能するリンクを提供するため、フルセットアップも簡単です。さらに、Flutterと同様に、次のコマンドでアクセスできるドクターツールがありますtns doctor。これは、コンピューターのセットアップを確認します。

注：
ほとんどのクイックセットアップには、ワークフローにいくつかの制限があることに注意してください。たとえば、一部のネイティブプラグインへのアクセスが制限され、単体テストが不可能な場合があり（NativeScriptの場合）、一部のリソース（スプラッシュ画面、アイコン）にアクセスできません。

ドキュメンテーション

開発者なら誰でも、ツールのマニュアルを使いやすくすることで、ツールに夢中になることがあることを認めることができます。

React Native：最近、React Nativeのドキュメントにいくつかの大きな改善が加えられましたが、React Native開発者は、ブログ投稿、オンラインチュートリアル、コースなどのリソースから高度なトピックに触れる傾向があります。

これは、中級から上級レベルまでのReact Nativeトピックが、コアAPIによって提案されたものよりもはるかに多くの（状態管理、ナビゲーション、アニメーションなど）を要求するという事実に関連しているようです。

Flutter：Flutterのドキュメントは、5つのフレームワークの中で最も愛されている必要があります。彼らは、誰もがそれらを通り抜けるのを助けるために組織化された情報でそれを氾濫させました。単純なコマンドから、短い有益なビデオやウィジェットクラスを含むクックブックに至るまで、Flutterのドキュメントは非常によく提示されています。ウィジェットのクラス参照APIは、ウィジェットの各ソースコードから簡単にアクセスできることを述べましたか？

Xamarin：Xamarin開発者は、ドキュメントが「フル」であると言っています。これは本当です。Xamarinには、5つのドキュメントのうち、フレームワークのトピックに関する洞察が必要なときにいつでも戻ってくるドキュメントの1つがあります。

ドキュメントの資料だけで、初心者から上級者までかなりうまく行くことができます。そのナビゲーションは本当に直感的で、トピックとユースケースに関する未解決の問題への短いチュートリアルとリンクが含まれています。

Ionic：Ionicが彼らのドキュメントに驚くべき仕事をしていることは明らかです。メジャーアップデートのたびに、Webサイト全体が変更され、ユーザーエクスペリエンスが向上します。

Ionicを使用する開発者のほとんどは、必要なコンポーネントを簡単に検索、検索、統合できると感じています。

NativeScript：NativeScriptの1つは、宣伝するものよりもはるかに優れていることです。NativeScriptのドキュメントは非常に基本的です。フレームワークの能力を活用することがいかに簡単であるかを開発者に示すために、より多くのガイドが必要です。

さらに、初心者から熟練者に移行しようとすると、NativeScriptのドキュメントには、フレームワークで実際に実行できることの明確な例がいくつか欠けていると感じます。ほとんどの場合、開発者はいくつかの基本的な概念を理解するためにGitHubの問題を経験する必要があります。

ホットリロード

これは、モバイルクロスプラットフォームフレームワークの中でホットなトピックであり、モバイル開発の時間効率の良い部分と呼ばれることもあります。

React Native：長い間、ホットリロードは開発者をこのクロスプラットフォームソリューションから遠ざける弱点の1つでした。ただし、React Native 0.61で、彼らはFast Refreshを発表しました。これは、正確にはホットリロードではありませんが、RN開発者も満足させます。

高速リフレッシュの素晴らしい点は、最新のReact（関数コンポーネントとフック）を完全にサポートし、エラーを適切に処理することです。

Flutter：Flutterのホットリロード機能は操作するのが楽しいです。非常に優れているため、フラッターは、作業中にアプリをリロードする3つの異なる方法、ホットリロード、ホットリスタート、およびフルリスタートを提供します。

ドキュメントで非常によく説明され、解決されているいくつかの警告がありますが、これらはこの機能が開発者にとってFlutterのベストセールスポイントの1つであることを妨げるものではありません。

Xamarin：他の4つのフレームワークと同様に、Xamarinのホットリロードはそのままで機能します。さらに設定しなくても、ファイルを保存して更新をトリガーできます。Xamarinのホットリロードは、一度に複数のプラットフォームで機能し、復元力のあるリロードと呼ばれる原則を使用します。

Xamarinのホットリロードにはいくつかの問題もあります。イベントハンドラー、カスタムコントロール、ページコードビハインド、追加のクラスなど、C＃コードをリロードできません。また、ホットリロードセッション中にファイルを変更することはできません。この変更を表示するには、アプリを再構築して再デプロイし、ホットリロードを再度有効にする必要があります

Ionic：Ionicアプリは2つの異なるアプローチを使用して開発できるため、Ionicでのライブリロードは2つの方法で表示できます。ブラウザを使用してアプリをコーディングして結果を表示するか、電話をコンピュータに接続してそこから評価できるようにすることができます。それでも、Ionicには完全なホットリロード機能があり、選択したアプローチに関係なく、アプリを効率的に開発するのに役立ちます。

NativeScript：ネイティブスクリプト5.3以降、VSCodeからのデバッグ、スタイリング編集、JavaScript編集、さらにはファイル編集をサポートする素晴らしいHMR –ホットモジュール置換機能を公式にサポートしています。

開始時に実行されるLiveSync機能を使用するrun or debug on deviceと、Ionicの場合と同様に、アプリに変更を加えて、接続されているすべてのデバイスとエミュレーターにリアルタイムで適用されたものを確認できます。

デバッグツール

開発者は、「デバッグは、そもそもコードを書くよりも2倍難しい」と言うことがあります。これは私たちの仕事の中で最も難しい部分の1つと見なすことができるので、なぜツールがそれを難し​​くする必要があるのでしょうか。

ツールはハイブリッドであるだけでなく、常にネイティブに互換性があるとは限らないため、モバイルクロスプラットフォームのデバッグは常に不安でした。

ここでは、比較中に、フレームワークのデバッグツールとエラーレポート機能を組み合わせます。

React Native：ホットリロードと同様に、コアチームによって公式にサポートされているツールがないため、ReactNativeを使用したデバッグは常に「大雑把」でした。

ただし、React Native 0.62では、3月26日以降のデフォルトのRNデバッガーであるFlipperを発表しました。Flipperには、デバッガーに必要な優れた機能があります。

• 利用可能なReactDevTools
• ネットワーク、レイアウト、データベース、および設定インスペクター
• アプリのリロードに役立つメトロアクション
• クラッシュレポートとデバイスログ。

Flutter：Flutter DevToolsは、非常に強力で完全な機能です。シンプルなコンソール出力から、ビジュアルウィジェット分析、ネットワークおよびパフォーマンス検査に至るまで、ほぼすべてのユースケースに適合します。

Flutterは、おそらく5つのフレームワークの中で最高のデバッグ機能を備えています。

Xamarin：XamarinはAndroidアプリとiOSアプリを異なる方法でデバッグします。Androidアプリは、他の.NETアプリケーションと同じようにデバッグされます。デバッグ構成でデバイスを実行した後、ブレークポイントを追加してアプリの実行を追跡できます。

Xamarin.iOSは、Mono Softデバッガー、生成されたコード、およびMonoランタイムをIDEと連携して使用し、デバッグエクスペリエンスを提供します。

Ionic ：彼らのドキュメントでは 、フレームワークがWebデバッガーを使用して簡単にデバッグ可能なハイブリッドアプリ（WebビューのHTML、CSS、JavaScript）を作成するため、Ionicは幅広いデバッグ機能を提供します。

より良いログまたはより深いデバッグを表示したい場合、 Cordovaはほとんどすべてのニーズに適合するVSCode拡張機能を提供します。

NativeScript：コマンドtns debug <platform>を使用すると、NativeScriptを使用してデバッグセッションを簡単に開始し、Livesyncを開始できます。

ただし、デバッグの出力はコンソールに出力され、行ったすべての変更はアプリと同期されます。ただし、 VSCode拡張機能を使用すると、はるかに優れたデバッグエクスペリエンスが可能になることに注意してください。

さらに、NativeScriptプラグインのデバッグに関するこのブログ投稿は、開発者が使用するプラグインのネイティブソースコードのデバッグにどのように取り組むことができるかを説明する、NativeScriptアウトラインを使用したアプリの構築とデバッグに深く取り組むのに役立ちます。

さらなる比較

上記は、開発者が使用するツールを引き付け、維持する主な要因です。次に、開発者がクロスプラットフォームツールでの作業に費やす時間を楽しむことができるオプションのものを見てみましょう。

コードエディタ/IDEの統合

上記の5つのフレームワークのうち、Flutterは、サポートするさまざまなエディター用に出荷されるプラグインと統合のパワーにより、最高のように聞こえるかもしれません。

Flutter拡張機能をVSCodeにインストールすると、完全なデバッグサポート、スキャフォールディングスニペット、美しい構文の強調表示、およびコード補完を備えたIDEになっているようにすぐに感じ始めます。

Flutterのツールほど高度ではありませんが、React Nativeには、ReactNativeアプリをすばやく簡単に実行およびデバッグするのに役立つMicrosoftのReactNativeToolsもあります。

Xamarinは、フレームワークのインストールを決定したときにVS2019がXamarin開発に必要なすべてを提供するため優れています。これにより、開発者はIDEから必要なものをすべて取得できるため、開発者はツールに固執します。

IonicとNativeScriptを使用すると、HTML、JSX、CSS、SASS、Angular、React、Vueなどの人気のあるフロントエンドツールを使用するため、ほとんどのWeb開発エディターで問題ありません。これらのツールは既存のエディターですでに十分にサポートされています。

サードパーティモジュール

Advanced React Nativeアプリは、サードパーティのモジュールに大きく依存しています。サードパーティのモジュールは、他のモジュールや現在のバージョンのフレームワークとの互換性のために、不足している部分で更新するとすぐにパズルになる可能性があります。

ただし、React Nativeコミュニティは驚くほど大きいため、アプリの構築に非常に役立つ可能性のある多くのオープンソースパッケージがnpmで利用できます。

この問題は、FlutterとXamarinのマイナーな問題です。これは、クロスプラットフォームアプリを構築するために必要なほとんどの準備が整っており、更新プロセスがそれぞれのYAMLファイルとXMLファイルによって適切に管理されているためです。

Flutterには独自のパッケージマネージャーWebサイト があり、Flutterパッケージの使用例を検索および表示できます。

Ionic自体には、マテリアルまたはiOS UIアプリの構築に必要なほとんどのUIコンポーネントが付属しており、設計ガイドラインを尊重しています。ただし、ネイティブ機能にアクセスするには、Cordovaのネイティブプラグインに強く依存しています。これらのプラグインは、最新ではないか、ドキュメントが不足している可能性があります。

NativeScriptは、Ionicと同様に、見栄えの良いUIコンポーネントが多数バンドルされています。ただし、ネイティブプラグインは、NativeScriptのチームとそのコミュニティによって利用および開発され、専用のマーケットプレイスで紹介されています。

結論

5つのフレームワークはすべて大きなコミュニティを持っており、企業間で広く使用されているため、すでに主要なクロスプラットフォームツールとして知られています。それぞれに独自のワークフローがあり、それぞれのユースケースに合わせて調整できます。

それでも、それぞれの長所と制限を理解し、どのタスクとチームを扱っているかに応じて選択することが重要です。

ソース：https ：//blog.logrocket.com/comparing-developer-experience-for-cross-platform-frameworks/

#frameworks #xamarin #flutter #ionic #react 

What is GEEK

Buddha Community

クロスプラットフォームフレームワークの開発者エクスペリエンスの比較

クロスプラットフォームのモバイルアプリ開発では、1つのテクノロジースタックでiOSやAndroidなどの複数のプラットフォーム向けのモバイルアプリケーションを構築できます。

つまり、プラットフォームごとに専用の母国語を使用して記述されたアプリの複数のバージョンを作成する代わりに、コードを1回記述して、一度に複数のプラットフォームにデプロイできます。

開発者の経験とは何ですか？

開発者エクスペリエンス（DXと略記）は、開発者がクライアントライブラリ、SDK、フレームワーク、オープンソースコード、ツール、API、テクノロジー、またはその他のサービスを使用するときのエクスペリエンスを表します。

DXは、ユーザーエクスペリエンス（UX）デザインからのいくつかのアイデアと哲学を共有しています。

これはどのように違いを生むのでしょうか？

単一のターミナルコマンドでWebアプリをデプロイする機会は、同じ結果を達成するための長い指示のリストに従うのではなく、より優れた開発者エクスペリエンスとして認識できるものを示しています。

DXは、開発者がツールを使用してそれに固執するように駆り立てる潜在的な要因の1つです。

この投稿では、開発者にとって本当に重要な4つの要素に基づいて、いくつかの人気のあるクロスプラットフォームモバイルフレームワークのDXを比較しています。

• 設定
• ドキュメンテーション
• ホットリロード
• デバッグ

私たちの比較では、5つのクロスプラットフォームフレームワークに焦点を当てます。

• リアクトネイティブ
• フラッター
• Xamarin
• イオン
• NativeScript

入門

フレームワークのセットアップが第一印象です。簡単に始めることが、フレームワークのワークフローに関してDXに最初に影響を与えるものです。

ここでは、Android StudioやXCodeのセットアップを無視して、さまざまなモバイルフレームワークのセットアッププロセスを比較します。これは、基本的にすべてのフレームワークにとって必須の手順だからです。

React Native：Expoを使用すると、ReactNativeを非常に簡単に開始できます。

NodeJSとExpoをインストールした後は、入力するコマンドが1つだけで、準備が整います（Android StudioまたはXcodeをインストールせずに、Expoアプリがインストールされたデバイスがあることを前提としています）。開始テンプレートには、開発者をガイドするのに役立つ美しくシンプルなインターフェイスが付属しています。

RNコマンドラインツールを使用して、ExpoなしでReactNativeアプリを起動することもできます。この方法を使用してRNアプリを実行するのは、それほど手間がかかりません。CLIツールは、開発者が最初の画面アプリをすぐに入手するのに役立ちます。

RNの使用を開始するには、RNを既存のネイティブアプリに統合する必要がある場合、またはツリー外のプラットフォーム用に構築する必要がある場合にのみ注意が必要です。ただし、これは高度な方法と見なされるため、この比較では考慮しないでください。

React Nativeは宿題をうまくやっているのでreact-native doctor、コンピューターのセットアップを確認するのに役立つパッケージもリリースしました。

Flutter：Flutter SDKをインストールするのは、コンピューターにパッケージをインストールするのと同じくらい簡単です。彼らのガイドは、従うのが簡単な4つの簡単なステップを示しています。これがあなたの側で少しバグがあるとしても、Flutterはあなたをカバーしてくれます。

彼らはDXを大事にすることでよく知られています。彼らはCLIに呼び出されるツールを統合しflutter doctorて、フレームワークのツールチェーンで何がうまく機能していて何がうまく機能しないかについての情報を取得できるようにしました。

より良いDXを提供するには、Flutterツールもコードエディターで構成する必要があります。これは、セットアップのいくつかの追加手順を説明します。これらの手順はオプションですが、インターネット上で最高のFlutterレビューを達成するのに役立ちました。

Flutterのすべてが「すぐに使える」と感じます。Flutter SDKに同梱されているパッケージのみを使用して、より複雑なアプリを簡単に構築できます。

Xamarin：Visual Studio IDEに慣れているC＃開発者の場合、Xamarinのインストールは確かに公園を散歩しているように見えます。ただし、Visual Studioがない場合は、VS2019のインストールとXamarinツールが面倒になる可能性があります。

Xamarinをインストールすると、Visual Studio GettingStartedGUIを使用してアプリを起動できます。ここでは、モバイルアプリを選択し、提供されているテンプレート（マスター詳細、タブ付き、シェル、空白）から開始テンプレートを選択します。次に、プラットフォームを選択し、[続行]をクリックして、初期化されるのを待ちます。

Ionic：v1以降、Ionicは常に非常に簡単に使い始めることができます。現在、v5を使用しており、さらに簡単になっています。

これは3つのステップでionic start myApp <template-name>行われます。IonicwithNodeをインストールし、（空白、タブ、サイドメニューの3つのテンプレートが提供されている）のプロンプトを実行して実行し、最後に。を使用してアプリを実行しionic serveます。

ここでは、デフォルトのアプリがモバイルWebサイトのようにブラウザで提供されますが、これはビルド後のアプリの外観とほぼ同じです。

また、Ionicにはv5があります。これは、1つのコマンドライン命令だけで上記と同じ結果を得るのに役立つ、美しく直感的な起動ウィザードです。

NativeScript：開始するには、クイックセットアップとフルセットアップの2つの方法があります。クイックセットアッププロセスは、React Native with Expoに似ています。物理デバイスにアプリをダウンロードすると、React Nativeがリンクを介して開発端末に接続し、アプリの作業を開始できます（Android StudioまたはXCodeをインストールせずに） 。

フレームワークをインストールするためにOSの端末とうまく機能するリンクを提供するため、フルセットアップも簡単です。さらに、Flutterと同様に、次のコマンドでアクセスできるドクターツールがありますtns doctor。これは、コンピューターのセットアップを確認します。

注：
ほとんどのクイックセットアップには、ワークフローにいくつかの制限があることに注意してください。たとえば、一部のネイティブプラグインへのアクセスが制限され、単体テストが不可能な場合があり（NativeScriptの場合）、一部のリソース（スプラッシュ画面、アイコン）にアクセスできません。

ドキュメンテーション

開発者なら誰でも、ツールのマニュアルを使いやすくすることで、ツールに夢中になることがあることを認めることができます。

React Native：最近、React Nativeのドキュメントにいくつかの大きな改善が加えられましたが、React Native開発者は、ブログ投稿、オンラインチュートリアル、コースなどのリソースから高度なトピックに触れる傾向があります。

これは、中級から上級レベルまでのReact Nativeトピックが、コアAPIによって提案されたものよりもはるかに多くの（状態管理、ナビゲーション、アニメーションなど）を要求するという事実に関連しているようです。

Flutter：Flutterのドキュメントは、5つのフレームワークの中で最も愛されている必要があります。彼らは、誰もがそれらを通り抜けるのを助けるために組織化された情報でそれを氾濫させました。単純なコマンドから、短い有益なビデオやウィジェットクラスを含むクックブックに至るまで、Flutterのドキュメントは非常によく提示されています。ウィジェットのクラス参照APIは、ウィジェットの各ソースコードから簡単にアクセスできることを述べましたか？

Xamarin：Xamarin開発者は、ドキュメントが「フル」であると言っています。これは本当です。Xamarinには、5つのドキュメントのうち、フレームワークのトピックに関する洞察が必要なときにいつでも戻ってくるドキュメントの1つがあります。

ドキュメントの資料だけで、初心者から上級者までかなりうまく行くことができます。そのナビゲーションは本当に直感的で、トピックとユースケースに関する未解決の問題への短いチュートリアルとリンクが含まれています。

Ionic：Ionicが彼らのドキュメントに驚くべき仕事をしていることは明らかです。メジャーアップデートのたびに、Webサイト全体が変更され、ユーザーエクスペリエンスが向上します。

Ionicを使用する開発者のほとんどは、必要なコンポーネントを簡単に検索、検索、統合できると感じています。

NativeScript：NativeScriptの1つは、宣伝するものよりもはるかに優れていることです。NativeScriptのドキュメントは非常に基本的です。フレームワークの能力を活用することがいかに簡単であるかを開発者に示すために、より多くのガイドが必要です。

さらに、初心者から熟練者に移行しようとすると、NativeScriptのドキュメントには、フレームワークで実際に実行できることの明確な例がいくつか欠けていると感じます。ほとんどの場合、開発者はいくつかの基本的な概念を理解するためにGitHubの問題を経験する必要があります。

ホットリロード

これは、モバイルクロスプラットフォームフレームワークの中でホットなトピックであり、モバイル開発の時間効率の良い部分と呼ばれることもあります。

React Native：長い間、ホットリロードは開発者をこのクロスプラットフォームソリューションから遠ざける弱点の1つでした。ただし、React Native 0.61で、彼らはFast Refreshを発表しました。これは、正確にはホットリロードではありませんが、RN開発者も満足させます。

高速リフレッシュの素晴らしい点は、最新のReact（関数コンポーネントとフック）を完全にサポートし、エラーを適切に処理することです。

Flutter：Flutterのホットリロード機能は操作するのが楽しいです。非常に優れているため、フラッターは、作業中にアプリをリロードする3つの異なる方法、ホットリロード、ホットリスタート、およびフルリスタートを提供します。

ドキュメントで非常によく説明され、解決されているいくつかの警告がありますが、これらはこの機能が開発者にとってFlutterのベストセールスポイントの1つであることを妨げるものではありません。

Xamarin：他の4つのフレームワークと同様に、Xamarinのホットリロードはそのままで機能します。さらに設定しなくても、ファイルを保存して更新をトリガーできます。Xamarinのホットリロードは、一度に複数のプラットフォームで機能し、復元力のあるリロードと呼ばれる原則を使用します。

Xamarinのホットリロードにはいくつかの問題もあります。イベントハンドラー、カスタムコントロール、ページコードビハインド、追加のクラスなど、C＃コードをリロードできません。また、ホットリロードセッション中にファイルを変更することはできません。この変更を表示するには、アプリを再構築して再デプロイし、ホットリロードを再度有効にする必要があります

Ionic：Ionicアプリは2つの異なるアプローチを使用して開発できるため、Ionicでのライブリロードは2つの方法で表示できます。ブラウザを使用してアプリをコーディングして結果を表示するか、電話をコンピュータに接続してそこから評価できるようにすることができます。それでも、Ionicには完全なホットリロード機能があり、選択したアプローチに関係なく、アプリを効率的に開発するのに役立ちます。

NativeScript：ネイティブスクリプト5.3以降、VSCodeからのデバッグ、スタイリング編集、JavaScript編集、さらにはファイル編集をサポートする素晴らしいHMR –ホットモジュール置換機能を公式にサポートしています。

開始時に実行されるLiveSync機能を使用するrun or debug on deviceと、Ionicの場合と同様に、アプリに変更を加えて、接続されているすべてのデバイスとエミュレーターにリアルタイムで適用されたものを確認できます。

デバッグツール

開発者は、「デバッグは、そもそもコードを書くよりも2倍難しい」と言うことがあります。これは私たちの仕事の中で最も難しい部分の1つと見なすことができるので、なぜツールがそれを難し​​くする必要があるのでしょうか。

ツールはハイブリッドであるだけでなく、常にネイティブに互換性があるとは限らないため、モバイルクロスプラットフォームのデバッグは常に不安でした。

ここでは、比較中に、フレームワークのデバッグツールとエラーレポート機能を組み合わせます。

React Native：ホットリロードと同様に、コアチームによって公式にサポートされているツールがないため、ReactNativeを使用したデバッグは常に「大雑把」でした。

ただし、React Native 0.62では、3月26日以降のデフォルトのRNデバッガーであるFlipperを発表しました。Flipperには、デバッガーに必要な優れた機能があります。

• 利用可能なReactDevTools
• ネットワーク、レイアウト、データベース、および設定インスペクター
• アプリのリロードに役立つメトロアクション
• クラッシュレポートとデバイスログ。

Flutter：Flutter DevToolsは、非常に強力で完全な機能です。シンプルなコンソール出力から、ビジュアルウィジェット分析、ネットワークおよびパフォーマンス検査に至るまで、ほぼすべてのユースケースに適合します。

Flutterは、おそらく5つのフレームワークの中で最高のデバッグ機能を備えています。

Xamarin：XamarinはAndroidアプリとiOSアプリを異なる方法でデバッグします。Androidアプリは、他の.NETアプリケーションと同じようにデバッグされます。デバッグ構成でデバイスを実行した後、ブレークポイントを追加してアプリの実行を追跡できます。

Xamarin.iOSは、Mono Softデバッガー、生成されたコード、およびMonoランタイムをIDEと連携して使用し、デバッグエクスペリエンスを提供します。

Ionic ：彼らのドキュメントでは 、フレームワークがWebデバッガーを使用して簡単にデバッグ可能なハイブリッドアプリ（WebビューのHTML、CSS、JavaScript）を作成するため、Ionicは幅広いデバッグ機能を提供します。

より良いログまたはより深いデバッグを表示したい場合、 Cordovaはほとんどすべてのニーズに適合するVSCode拡張機能を提供します。

NativeScript：コマンドtns debug <platform>を使用すると、NativeScriptを使用してデバッグセッションを簡単に開始し、Livesyncを開始できます。

ただし、デバッグの出力はコンソールに出力され、行ったすべての変更はアプリと同期されます。ただし、 VSCode拡張機能を使用すると、はるかに優れたデバッグエクスペリエンスが可能になることに注意してください。

さらに、NativeScriptプラグインのデバッグに関するこのブログ投稿は、開発者が使用するプラグインのネイティブソースコードのデバッグにどのように取り組むことができるかを説明する、NativeScriptアウトラインを使用したアプリの構築とデバッグに深く取り組むのに役立ちます。

さらなる比較

上記は、開発者が使用するツールを引き付け、維持する主な要因です。次に、開発者がクロスプラットフォームツールでの作業に費やす時間を楽しむことができるオプションのものを見てみましょう。

コードエディタ/IDEの統合

上記の5つのフレームワークのうち、Flutterは、サポートするさまざまなエディター用に出荷されるプラグインと統合のパワーにより、最高のように聞こえるかもしれません。

Flutter拡張機能をVSCodeにインストールすると、完全なデバッグサポート、スキャフォールディングスニペット、美しい構文の強調表示、およびコード補完を備えたIDEになっているようにすぐに感じ始めます。

Flutterのツールほど高度ではありませんが、React Nativeには、ReactNativeアプリをすばやく簡単に実行およびデバッグするのに役立つMicrosoftのReactNativeToolsもあります。

Xamarinは、フレームワークのインストールを決定したときにVS2019がXamarin開発に必要なすべてを提供するため優れています。これにより、開発者はIDEから必要なものをすべて取得できるため、開発者はツールに固執します。

IonicとNativeScriptを使用すると、HTML、JSX、CSS、SASS、Angular、React、Vueなどの人気のあるフロントエンドツールを使用するため、ほとんどのWeb開発エディターで問題ありません。これらのツールは既存のエディターですでに十分にサポートされています。

サードパーティモジュール

Advanced React Nativeアプリは、サードパーティのモジュールに大きく依存しています。サードパーティのモジュールは、他のモジュールや現在のバージョンのフレームワークとの互換性のために、不足している部分で更新するとすぐにパズルになる可能性があります。

ただし、React Nativeコミュニティは驚くほど大きいため、アプリの構築に非常に役立つ可能性のある多くのオープンソースパッケージがnpmで利用できます。

この問題は、FlutterとXamarinのマイナーな問題です。これは、クロスプラットフォームアプリを構築するために必要なほとんどの準備が整っており、更新プロセスがそれぞれのYAMLファイルとXMLファイルによって適切に管理されているためです。

Flutterには独自のパッケージマネージャーWebサイト があり、Flutterパッケージの使用例を検索および表示できます。

Ionic自体には、マテリアルまたはiOS UIアプリの構築に必要なほとんどのUIコンポーネントが付属しており、設計ガイドラインを尊重しています。ただし、ネイティブ機能にアクセスするには、Cordovaのネイティブプラグインに強く依存しています。これらのプラグインは、最新ではないか、ドキュメントが不足している可能性があります。

NativeScriptは、Ionicと同様に、見栄えの良いUIコンポーネントが多数バンドルされています。ただし、ネイティブプラグインは、NativeScriptのチームとそのコミュニティによって利用および開発され、専用のマーケットプレイスで紹介されています。

結論

5つのフレームワークはすべて大きなコミュニティを持っており、企業間で広く使用されているため、すでに主要なクロスプラットフォームツールとして知られています。それぞれに独自のワークフローがあり、それぞれのユースケースに合わせて調整できます。

それでも、それぞれの長所と制限を理解し、どのタスクとチームを扱っているかに応じて選択することが重要です。

ソース：https ：//blog.logrocket.com/comparing-developer-experience-for-cross-platform-frameworks/

#frameworks #xamarin #flutter #ionic #react