微软官方开源:不用一行 XAML,WinUI 也能像 React 那样写 – chingho

微软官方开源:不用一行 XAML,WinUI 也能像 React 那样写 – chingho


あなたも私と同じ気持ちを持っていますか?

WinUI 3 の XAML + MVVM セットは動作しますが、イライラします。一つ減らして書く x:Nameコンパイルには問題はなく、実行時に白い画面が表示されます。 ViewModel のレイヤーごとに INotifyPropertyChanged 定型文、書きすぎると疲れます。バインド パスを変更するには、XAML と C# の間を行き来する必要があります。

最も不快なのは、ステータスとインターフェイスが半分に分割されていることです。 React のコンポーネントはきちんとインストールされていますが、WinUI に関しては、ViewModel、XAML、分離コードの 3 つの部分に分割する必要があります。小さな機能を変更するには、3 か所を移動する必要があります。

最近、GitHub で正式にオープンソース化されました Microsoft.UI.Reactor そのときの私の最初の反応は、ついに当局が問題を自らの手で解決したということでした。

基本的な状況: Microsoft 公式プロジェクト、公式に実験的マーク、MIT ライセンス。 10 月 29 日の時点で、スター数は 800 個、フォーク数は 62 個、投稿数は 800 個を超えています。捨てても誰も気にしないわけではありません。 NuGet では、 0.1.0-preview.16。

それが何なのかを一文で説明してください。書き方が違うだけで、WinUI のままです。 レンダリングする Button、TextBox、および NavigationView はすべて実際のコントロールであり、Windows App SDK 上で実行され、まったく変更されていません。変わるのは、インターフェースの記述方法です。

この点をまず説明する必要がある。多くの人はこのタイトルを読んで、Microsoft が新しい UI フレームワークを作成したと考えます。それは真実ではありません。

01|具体的に何が変わったのですか?

端的に言えば、次の4つです。

  • • 仮想要素ツリーの層が中央に追加され、古いものと新しいものが比較され、変更されたもののみが実際のコントロールに適用されます。

  • • React のフックを移動します。UseState、UseEffect、UseReducer これらは合計 9 つあり、ステータスとインターフェイスが一緒に書かれています。

  • • XAML の代わりに C# メソッドを使用します。コントロール、プロパティ、イベントはすべて厳密に型指定されます。

  • • フレックス レイアウト、チャート、ナビゲーション、データ グリッド、テーマなど、多数の構成要素が付属しています。

最も直感的なのはこのカウンターです。これは 1 つのクラスだけで実行できます。

using Microsoft.UI.Reactor;
using Microsoft.UI.Reactor.Core;
using static Microsoft.UI.Reactor.Factories;

ReactorApp.Run("Hello Reactor");

class MyApp : Component
{
    public override Element Render()
    {
        var (count, setCount) = UseState(0);

        return VStack(
            Heading($"Count: {count}"),
            HStack(8,
                Button("-", () => setCount(count - 1)),
                Button("+", () => setCount(count + 1))
            )
        );
    }
}

いいえ App.xaml、いいえ MainWindow.xamlコードビハインドも ViewModel もありません。ステータス、インターフェイス、クリック イベントがすべて 1 つにまとめられています Render() 内部。

私が気に入っているのは、新しいことを学ぶ必要がないことです。C# を知っていれば書くことができます。 IntelliSense、リファクタリング、コンパイル チェックがすべて備わっているため、文字列バインディングの何が問題なのかを推測する必要はありません。

微软官方开源:不用一行 XAML,WinUI 也能像 React 那样写 – chingho
Microsoft.UI.Reactor ウェアハウスのヘッダー画像

逆に、これが最も厄介な部分でもあります。UI がコードに変換された後、デザイナーのドラッグ アンド ドロップに依存している人は苦労することになります。

02|なかなかいいのが3つある

まず、エラーは事前に報告されます。 最終的には、XAML のバインド パスは単なる文字列です。間違って書いた場合、デザイナーは実行するまで対処しない可能性があります。 Reactor はメソッド呼び出しでいっぱいです。名前が変更されると、コンパイラはエラーを報告します。

2つ目は、近くでステータスを解除できることです。 MVVMの分解手法では、一度ページが複雑になると、書くほどに太っていくViewModelになりやすく、バインディング式がぐるぐる回ってしまいます。フックは React のアイデアに似ています。状態はローカルで宣言され、副作用はローカルで管理され、コンポーネントはきれいに逆アセンブルできます。正式には、これは Functional MVU と呼ばれます。

第三に、コーディネーターは実に現実的です。 README にはいくつかの数字が書かれています。コア フレームワークは 13 日間連続で反復され、React、SwiftUI、Compose を使用して一連のベンチマーク レビューが実施され、コード レビューが実施されて 275 の問題が特定されました。

少なくとも、チームが真剣に取り組んでおり、空の倉庫を配布することを急いでいないことがわかります。

03|サポート設備も充実

多くの WinUI 周辺アクセサリが付属しています。各モジュールの成熟度レベルは、公式 (プレビュー/ドラフト/初期) によって明確にマークされています。

|
モジュール
|
それは何をしたのか
|
成熟
|
| :– | :– | :– |
|
フレックスレイアウト
|
Meta Yoga の純粋な C# ポート、 FlexPanel
|
プレビュー
|
|
チャート
|
D3 完全アルゴリズム移植 + 宣言型チャート DSL
|
プレビュー
|
|
マークダウン
|
ネイティブ md4c パーサー+ Markdown() 要素
|
プレビュー
|
|
注文
|
コマンドレコード + 16 の標準コマンド + フォーカススコープのショートカットキー
|
プレビュー
|
|
ナビゲーション
|
タイプセーフなルーティング、GPU 遷移、バックスタックのシリアル化
|
下書き
|
|
アクセシビリティ
|
WCAG 2.1 AA ターゲット、コンパイル時および実行時の検証
|
下書き
|
|
ドックウィンドウ
|
VS スタイルのドッキング: ラベルのドラッグ、クロスウィンドウのドッキング、フローティング パネル
|
下書き
|
|
WinForms 相互運用性
|
WinForms アプリケーションで WinUI コンテンツをホストする
|
下書き
|
|
データ
|
DataGrid、PropertyGrid、FormField、非同期検証
|
早い
|
|
ツールチェーン
| mur
CLI、40 個以上の Roslyn アナライザー、インプロセス MCP サーバー
|
下書き
|

個別に言及したいのは2つです。

1つは [GenerateReactorWrapper] ソースジェネレータWinUI コントロールを Reactor 要素に自動的にラップし、双方向属性を生成できます。率直に言うと、サードパーティのコントロール ライブラリの正式な適応を待つ必要はなく、自分でラップするだけで済みます。これは WinUI にとって非常に重要です。

2つ目は 内蔵MCPサーバー。 DevTools には、UIA ツリーのチェック、レイアウト オーバーヘッドの表示、スクリーンショットの取得、構造化ログの読み取りなど、AI エージェント専用のツールが付属しています。 Microsoft が UI フレームワークを作成したとき、デフォルトですでにエージェントが隣に配置されていました。これは期待に値する。

04|プロジェクトは使用する準備ができていません

README は非常に簡単です。製品を開発する際には、引き続き XAML/MVVM を使用することをお勧めします。 Reactor で作成されたアクセシビリティ API、テーマ、コマンド、およびデータ スタックは、当初は WinUI に戻される予定でした。新しい書き込み方法を試したい場合は、同じプロセスおよび同じビジュアル ツリーで実行できます。混ぜることもできます。 Reactor コンテンツは XAML アプリケーションに挿入でき、XAML コンテンツは Reactor アプリケーションにも挿入できます。

Rust もコピーを作成しました: Windows-RS 倉庫内 windows-reactorアイデアは同じで、crates.io に送信されました。言語は異なりますが、その下にはネイティブ コントロールの同じバッチがあります。

現在の実験期間は、 3~6ヶ月。一般に、オンライン製品の作成に使用するのではなく、今すぐそこから学ぶことができます。

05|使い方は簡単、3つのコマンド

ウェアハウスのクローンを作成する必要はありません。足場は直接生成されます。

winget install Microsoft.WinAppCli
winapp new -t reactor -n MyApp
cd MyApp
dotnet run

winapp new テンプレート パッケージはオンデマンドでインストールされるため、プレビュー バージョンを手動で固定する必要がなくなります。より完全なシェルから始めたい場合は、次のことを試してください。 reactor-mvu、reactor-navview、reactor-tabview、winapp new --list 全部見えますよ。

2 つの条件: Windows は開発者モードをオンにする必要があります (設定 → システム → 開発者オプション)。スキャフォールディングにより、単一プロジェクトの MSIX パッケージ化アプリケーションが生成されます。dotnet run 完全なパッケージ識別子で始まります。

フレームワーク自体を変更したい場合、公式は 2 つの落とし穴を指摘しています。それらをそのままコピーします。

  • • 短いパスにクローンを作成する。 XAML とリソース コンパイラは 32 ビット ツールであり、長いパスをサポートしていません。深くネストされたディレクトリまたは OneDrive 同期ディレクトリに配置すると、260 文字の制限に達してレポートが発生する可能性があります。 MSB3073 / PRI210;

  • • プラットフォームを明示的に指定する必要があります、dotnet build -p:Platform=x64(または ARM64)、失敗するとトリガーされます WindowsAppSDKSelfContained エラーを報告してください。

オープンソースのアドレス:

最後に書きます

現在の AI 時代では、UI はあまり話題になっていません。

初め、800 スターは非常に現実的な数字です。熱はすべて AI にありますが、デスクトップ UI は本質的に冷たく、周辺サンプル、コントロール、不正行為の投稿がほとんどありません。遭遇した問題に対する答えが見つからない可能性が高くなります。

2番、まだプレビューです、0.1.0-preview.16API は、それが言うたびに変更されます。 AOT には互換性マトリックスがあり、どのサブシステムが PublishAot=true 次に例外がスローされますが、公式のリストは非常に明確です。最悪なのは、VS にプレビューが組み込まれている VSIX です。同関係者は、これはスモークテストに使用できるが、日常的な開発には使用できないと述べた。

三番目、変わったのはその書き方であり、周辺部分ではありません。。 XAML デザイナー、バインド ツール、コントロール ライブラリ、チュートリアルは 10 年以上蓄積されています。数ヶ月で埋め合わせるのは不可能です。

まだ見る価値はありますか?それだけの価値はあると思いますが、過度な期待はしないでください。

– 終わり –

下の公式アカウントカードをクリックしてフォローしてください



Source link

Leave a Reply

Your email address will not be published. Required fields are marked *