ブレザーを使用したソフトウェア調査の構築-パート1 -状態

私はBlazorを使用して小さな調査サイトを書くことに決めました.この一部は、Blakorを学ぶ言い訳です.
私がBlazorで学ぶように、私はそれについてブログについて記事のシリーズです.
この一連の記事は、私が製品を使用することを学ぶことを通して行くように、むしろ私の思考プロセスであるBlazorのためのトレーニングコースであることを意図しません.

動機

これがシリーズの最初の部分であるので、私はちょうど理由から始めたかったです.
なぜ調査サイトを構築し、なぜ炎.
カスタムソフトウェア開発に対する経営者の意識調査を実施したい.一方で、ほとんどのビジネスは現在、ソフトウェア開発によって得られた価値を理解しています.現実は非常に異なっている.
多くのビジネスは、ソフトウェア開発を「バムオンシート」として扱うように見える.彼らは開発者(そしてすべてのスタッフ)をTheory Xと考えている.
したがって、私はこれが正しいかどうかを確立するために調査を実行したいと思います.
私の最初の考えは、このために調査モンキーのようなサービスを使用することですが、私はほとんどのサービスは、1回限りの調査のためにかなり高価と思われる.
これと並行して、私はBlazorを調査し始めました.その技術は、元のデモ以来、私は気づいてきた-しかし、私は最近それだけで時間を過ごすことにした.
したがって、なぜ2つの活動を結合しないとの理由を使用して、ブレザーアプリケーションを構築するための調査を使用します.
これは最高のROIですか?
おそらくない.
私の「請求可能な」時間は調査猿のようなサービスのコストよりかなり大きいです.しかし、それは私に新しい技術を学ぶために口実を提供します.そして、それは私が私の時間を無駄にしていて、Netflixの上でもう一つのシリーズを見るより、より良い使用のようです.

元気か？

私がブレーザーを見始めたとき、これは確かに私の最初の質問でした.
そして、書く時に、私はおそらくNOと言うでしょう.
それは初期のバージョンを感じます.
あなたが予想する開発経験は、まだそこにありません(あるいは、私はそれを見つけることができませんでした).
Visual Studioはエラーを報告しますが、アプリケーションが正しく実行されます.
どんな熱い再装填でもないようです.
フレームワークはまた、フル機能のフレームワークであるために明らかな機能性を欠落しているようです.例えば、ネット5.
しかし、それは十分なアプリケーションのために良いですか?
私は、はいはいを与えます.
私が調査サイトを通して働くので、私はより良い考えを持ちます.私は確かに私のメインのウェブサイト(SEOの欠如)のために使用しないでください-しかし、単純なアプリ、それから多分.
時がたてばわかる.

ブレザーサーバー

OK、一歩後退.Microsoft Pageからの輝き

Blazor is a framework for building interactive client-side web UI with .NET:

• Create rich interactive UIs using C# instead of JavaScript
• Share server-side and client-side app logic written in .NET.
• Render the UI as HTML and CSS for wide browser support, including mobile browsers.
• Integrate with modern hosting platforms, such as Docker.
• Using .NET for client-side web development offers the following advantages:

Write code in C# instead of JavaScript.

• Leverage the existing .NET ecosystem of .NET libraries.
• Share app logic across server and client.
• Benefit from .NET's performance, reliability, and security
• Stay productive with Visual Studio on Windows, Linux, and macOS.
• Build on a common set of languages, frameworks, and tools that are stable, feature-rich, and easy to use.

要するに、JavascriptではなくCを使ってWebページを構築します.
ブレザーは2つのバージョン- Webアセンブリとサーバーに付属しています.
Webアセンブリは、特別なバージョンをダウンロードします.ブラウザにNetランタイムを使用して、ローカルマシン上でDLLをブラウザで実行できます.これはすべて、Webアセンブリによって提供され、かなりのレベルの電力を提供します.
サーバはsignalrのブラウザー(ウェブソケットの上のマイクロソフト抽象化)と対話するでしょう.「仕事」は、DOM変更がブラウザに送り返されるサーバーで実行されます.これはかなり小さいダウンロードサイズを与えなければなりません.しかし、ロジックがブラウザではなくサーバ上で実行されるとき、少しより少ない演奏者になります.
私にとって、Blazor Serverバージョンはこのプロジェクトのために行く適切な方法のようです.
Microsoft Pageに基づきますほとんどのブラウザでブレーザーサーバがサポートされます.

州

調査は、最後に永続的なストレージに保存して質問の4 - 5ページの単純な構造に従います.
認証の必要性がないか、または回答者が「調査中」と答えることはない.
私はしかし、調査の“これまでのところ”の答えを追跡する必要があります.
ASPからの移行BLACKサーバーへのネットMVCは少し違ったことを考える必要があります.そして、国家はそれらのうちの1つです.
ここでASPNET MVCを使用すると、このセッションの状態を使用することができます.Blazorサーバーは、ブラウザ上のストレージ、サーバー上の永続的なストレージ(データベース、Blobストレージなど)を提供したり、スコープサービスを使用したりできます.
そして、スコープサービスは私が行ってきた選択です.
スコープサービスが使用されて.NETコア依存性注入を使用して、ユーザー接続のクラスの同じインスタンスを提供します.
Blazorサーバーの場合、ユーザー接続は、回路として参照され、基本的にsignalr接続です.それが壊れたならば、新しい回路はつくられます(この場合、クラスインスタンスを失います).
Microsoft Pageは以下のように述べている.

Blazor Server hosting model supports the Scoped lifetime. In Blazor Server apps, a scoped service registration is scoped to the connection. For this reason, using scoped services is preferred for services that should be scoped to the current user

私の政治

これを念頭に置いて簡単なサービスを作りました.

using SoftwareSurvey.Models;
using System.Collections.Generic;
using System.Linq;

namespace SoftwareSurvey.Services
{
    public class StateService : IStateService
    {
        private readonly List<IStateObject> _stateObjects = new List<IStateObject>();

        public T GetOrNew<T>() where T : IStateObject, new()
        {
            var state = Get<T>();

            return state ?? new T();
        }

        public void Save<T>(T state) where T : IStateObject
        {
            var existingState = Get<T>();

            if (existingState != null)
            {
                _stateObjects.Remove(existingState);
            }

            _stateObjects.Add(state);
        }

        private T Get<T>() where T : IStateObject
        {
            return _stateObjects.OfType<T>().FirstOrDefault();
        }
    }
}

これは登録されたオブジェクトの単純なリストです.調査の各々の「ページ」は、istateObjectを実装する州オブジェクトを有する.例えば、

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

namespace SoftwareSurvey.Models
{
    public class Demographic: IStateObject
    {
        [Required(ErrorMessage = "Please provide company size")]
        [DisplayName("Company Size")]
        public string CompanySize { get; set; }

        [Required(ErrorMessage = "Please provide your job seniority")]
        [DisplayName("Job Seniority")]
        public string JobSeniority { get; set; }

        [DisplayName("Job Title (optional)")]
        public string JobTitle { get; set; }
    }
}

依存性注入設定

DIセットアップは基本的に任意と同じです.NETコアアプリケーション.スコープを付けたクラスを起動時に追加します.cs

public void ConfigureServices(IServiceCollection services)
{
  ...

  services.AddScoped<IStateService, StateService>();
}

用途

次に、関連するBlavorコンポーネント内で、Stateserviceを使用し、状態オブジェクトを取得および保存するために使用します.

@code {
    protected Models.Demographic Model;

    [Inject]
    protected SoftwareSurvey.Services.IStateService _stateService { get; set; }

    [Inject]
    protected NavigationManager NavigationManager { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        Model = _stateService.GetOrNew<Models.Demographic>();
    }

    protected void HandleValidSubmit()
    {
        _stateService.Save(Model);
        NavigationManager.NavigateTo("/ThankYou");
    }
}

最終結果

これによって、ページ状態オブジェクトをサービスへのユーザーの相互作用の期間中に簡単に保存できます.
いくつかのアプリケーションでは、このアプローチにいくつかの欠点があります.

サーバは、迅速な調査

のための罰金です-メモリの状態です

接続が失われた場合、サーバはブラウザのエラーになります.再び、私は、このユースケースのためにこれが許容できると思います.

サーバーは、サイトのすべてのアクティブユーザーのオーバーヘッドを持ちます.これは、多くの回答者を同時に得ることができないので、このユースケースの問題ではないでしょう.

最後のポイントでは、Azure SignalR Serviceを使用してこの問題に対処します.これは多分私がプロジェクトの後半で見る何かである.
Githubでプロジェクトのこの段階の完全なコードを見ることができます