2018-11-08

September 2018

Band 33, Nummer 9

Dieser Artikel wurde maschinell übersetzt.

Cutting Edge – nie Mind JavaScript, hier Blazor

Dino Esposito Zu vor einem Jahrzehnt eingebürgert werden die grundlegende Web an eine Crossroad beendet. Traditionell interpretiert, clientseitige Technologien wie HTML, CSS und JavaScript würden nicht mehr angezeigt, die zunehmend durch kompilierten Technologien und Sprachen wie XAML und c# überlastet werden. Dedizierte ereignisverarbeitungs-Engine wie Silverlight, die als separater-Plug-In installiert wurde, zur gleichen Zeit, die Browserumgebung, schien anwendungssuchfunktionen systemeigener, zu integrieren. Klicken Sie dann die erste Entwürfe von HTML 5 angezeigt werden, am Horizont ab und kurz danach Silverlight Sunsetted wurde.

Die Ereignisse laufen schüttelten sich die Landschaft, wie IT-Entscheidungsträger gesucht wurde, die eine geeignete Plattform für die plattformübergreifende Webentwicklung. HTML5 empfangen eine Verstärkung und JavaScript begann seine Comeback. Heute sind die Angular, React und Vue beliebte JavaScript-basierte Frameworks, die mehr Entwicklungsteams für die Erstellung ihrer Front-Ends auswählen.

Blazor erscheint als eine mögliche Alternative zur Angular/React/Vue und Dank WebAssembly (WASM) geöffnet wird, das Web, um vorhandene Ökosysteme für Entwicklung, einschließlich .NET nutzen zu können. Aus diesem Grund mehr als nur ein weiteres Modell-View-ViewModel, MVVM-orientierten JavaScript-Framework, Blazor wird, in gewisser Hinsicht ein modernes versucht, überarbeitet werden, und optimieren das Silverlight-Konzept – die Leistungsfähigkeit von C# -Code für die clientseitige Webentwicklung anbieten. Der Kern der Blazor soll eine stark typisierte, browserbasierte Umgebung zur Erstellung von Web-Front-Ends mit c# und .NET Core, anstelle von JavaScript und Razor über HTML bereit. Allerdings nicht Blazor HTML- und CSS-aufs abstellgleis zu schieben. Stattdessen wird sie erweitert die HTML-Syntax mit einer Auflistung von vordefinierten Razor-Tag-Hilfsprogrammen und erfordern keine Plug-Ins installiert werden.

Ich Vorsicht Blazor ist immer noch größtenteils in der Entwicklung und was Sie hier möglicherweise radikal zu ändern, in nur wenigen Wochen bereitstellen. Der Code in diesem Artikel basiert auf Version 0.5.0 im Juli 2018 veröffentlicht wurde.

In diesem Artikel ich die zugrunde liegenden Systemarchitektur einer Anwendung Blazor erläutern und präsentieren eine minimale "Hello World"-Anwendung.

Die Magie der Blazor

Wenn Sie aus dem Silverlight-Umfeld kommen, Fragen Sie sich vielleicht wie Blazor – eine nicht-JavaScript-Plattform – können in den Browser ohne eine installierbare-Plug-in ausführen. Die Antwort ist, dass dies auch nicht möglich. Blazor ist tatsächlich eine Art zum Hosten in einem kompatiblen Browser-Plug-in erforderlich. Der Trick dabei ist, die so genannte konzeptionellen-Plug-in bereits eingebettet ist in den meisten modernen Browsern (die in den vergangenen 12 Monaten veröffentlicht), und kann leicht Polyfilled über JavaScript in älteren Browsern. Im Gegensatz zu diskret-Plug-ins wie Adobe Flash oder Silverlight ist das Tool, das Aktivieren der Unterstützung für Blazor WASM, einen offenen Standard, die in einer W3C-Community-Gruppe, die Vertreter aus allen gängigen Browsern enthält entwickelt.

Technisch gesehen ist WASM ein binäres Format für einen Stapel-basierten virtuellen Computer (VM), .NET CLR architektonisch ähnlich und der Java Virtual Machine, aber im Gegensatz zu den Android Dalvik-VM. Als Ziel Kompilierung von allgemeinen Programmiersprachen kann WASM zum Aktivieren der Bereitstellung von Anwendungen für .NET über das Web. Um dies zu ermöglichen ist jedoch eine Brücke erforderlich, um die .NET Runtime in WASM zu konvertieren. Blazor basiert auf der Arbeit von Xamarin, die Mono-Framework auf WASM zu übertragen. In einer Anwendung Blazor enthalten sind .NET Code für eine Version von Mono, insbesondere in WASM, kompiliert ausgeführt wird, siehe Abbildung1.

Abbildung 1: .NET Code im Browser ausgeführt wird

Wo liegt der Unterschied aus, z. B. Silverlight? Silverlight-Anwendungen in einer Browser-spezifischen-Shell, die Kommunikation mit der Container-Browser-Umgebung über eine ActiveX-Steuerelementen in Internet Explorer oder über NPAPI in anderen Browsern wie Chrome und Firefox Sandbox ausgeführt (siehe Dokumentation unter Bit.ly/2kldgdy). Heute sind die meisten Browser NPAPI Unterstützung zugunsten von WebAssembly schließen. Blazor verwendet viele der bewährten Konzepte von Silverlight und wendet sie auf eine Weise, die für Entwickler, die Suche einer Alternative zu JavaScript hostcomputerkonfigurationen attraktiv.

Was ist mit älteren Browser?

Entwicklungstools cross-Kompilierung von Code auf beide WASM und asm.js, die eine Low-Level-Teilmenge von JavaScript ist, eine Kompilierungsziel aus hoch entwickelter Sprachen sein (siehe asmjs.org). Blazor, fragt insbesondere mithilfe einer asm.js basierende .NET Runtime. Der bereitgestellte Code führt dann die funktionserkennung im Browser, um zu bestimmen, wie ausführen. Beachten Sie, dass das gesamte asm.js Framework derzeit Forschung und Entwicklung ist.

Besuchen Sie caniuse.com , welchen Browser überprüfen Versionen derzeit WASM unterstützen. Die Website vermerkt, dass alle Browserversionen (Desktop- und mobile) aus der Mitte 2017 und Unterstützung für sie freigegeben. Beachten Sie, dass zum Zeitpunkt der Erstellung dieses Dokuments, Blazor Polyfill mit Internet Explorer zurzeit nicht ausgeführt wurde.

Aufbau einer Blazor-Anwendung

Eine Anwendung Blazor ist eine einfache .NET Standard-Bibliothek mit einem "Program.Main" Einstiegspunkt, der heruntergeladen wird, und führen Sie im Browser. Nur die .NET Runtime kompiliert wird, WASM; der Quellcode, die, den Sie in c# schreiben, wird systemeigen ausgeführt, als handele es sich um eine normale .NET-Anwendung. Um Sicherheitsrisiken zu löschen, beachten Sie, dass alle Blazor Code noch in der gleichen sicheren Sandbox als JavaScript-Code ausgeführt wird. Abbildung 2 zeigt die Liste der Dateien, die von der Blazor-beispielanwendung, die im Rest dieses Artikels vorgestellt wird heruntergeladen.

Abbildung 2-Dateien, die von der Beispielanwendung für die Blazor heruntergeladen

Die anderen Hintergrundfarbe, die Sie in der Abbildung sehen identifiziert zwei verschiedene Momente in der Lebensdauer einer Anwendung Blazor. Zunächst werden die blazor.js und mono.js-Dateien heruntergeladen, um den Download der WebAssembly für Mono-Laufzeit (die mono.wasm-Datei) zu koordinieren. Derzeit werden die Mono-Laufzeit ist eine relativ umfangreichen-Version von .NET und teilt seine Ansichten auf 600KB. In früheren Versionen war eine kompakte Option jedoch zu einem Bruchteil der Größe zur Verfügung. Dies ist ein Bereich, der einige Verbesserung und Optimierung verwenden kann.

Sobald die Mono-Laufzeit heruntergeladen wurde, beginnt den Download der tatsächlichen .NET-Assemblys. Der Initialisierungsschritt kann eine Weile dauern, ungefähr drei Sekunden, in dem Beispiel im Abbildung 2. Aus diesem Grund bietet die standardmäßige Blazor Visual Studio-Vorlage einen dedizierten Bereich für die Benutzeroberfläche aus, um während der Phase laden anzuzeigen. Werfen wir einen Blick auf eine Beispiel-App.

Erstellen eine Beispiel-App

Für die Wiedergabe mit Blazor benötigen Sie .NET Core 2.1 und Visual Studio, 15.7 oder höher. Darüber hinaus müssen Sie die Blazor-Vorlagen in Visual Studio Marketplace installieren. Die Vorlage befindet sich unter dem Ordner für ASP.NET Core-Webanwendung. Es gibt derzeit drei Vorlagen – einfache clientseitige Blazor, gehostete ASP.NET Core-Anwendung und serverseitige Blazor. Gehen Sie für eine einfache Blazor-Anwendung mit keine Abhängigkeiten von jeder Back-End-Umgebung. Dieses Szenario ähnelt sehr genau einer Angular/React oder sogar Silverlight-Anwendung – eine einfache Clientanwendung heruntergeladen und im Browser ausgeführt.

Wie bereits erwähnt, ist das Projekt in Visual Studio eine .NET Standard 2.0-Konsolenanwendung, die basierend auf zwei bestimmte NuGet-Pakete: Blazor.Build und Blazor.Browser. Beide werden im Microsoft.AspNetCore-Namespace wurden die nutzungsbeschränkungen entfernt.

Das Projekt ist ein standard .NET Core-Projekt mit einen Bootstrapper für die Datei "Program.cs", eine "Startup.cs"-Klasse und ein paar Ordner, die ASP.NET Core-Anwendungen, z. B. "Wwwroot", freigegeben und Seiten Denken Sie daran. Die Main-Methode wird wie folgt angezeigt:

public class Program
{
  public static void Main(string[] args)
  {
    CreateHostBuilder(args).Build().Run();
  }
  public static IWebAssemblyHostBuilder CreateHostBuilder(string[] args) =>
    BlazorWebAssemblyHost.CreateDefaultBuilder()
      .UseBlazorStartup<Startup>();
}

Eine Blazor-Anwendung besteht aus Komponenten, die jeweils einer cshtml-Razor-Datei bestehen. Standardmäßig ist der Name der cshtml-Datei den Namen der Komponente. In der beispielanwendung ist der App den Namen der der Startkomponente, deren Quellcode im app.cshtml, ist, wie folgt:

<Router AppAssembly=typeof(Program).Assembly />

Die Startup-Klasse mindestens gibt an, dass die App-Klasse verwenden.

public class Startup
{
  public void Configure(IBlazorApplicationBuilder app)
  {
    app.AddComponent<App>("app");
  }
}

Das App-Modul richtet nur die Blazor-Router-Komponente. In traditionellen Websites (z. B. ASP.NET) routing auf dem Server stattfindet, aber in Single-Page-Anwendungen vorzugsweise erfolgt über eine dedizierte clientseitige Komponente. In Blazor, der Router JavaScript erfolgt nicht (wie in, z. B. Angular), jedoch ist eine Instanz der interne Router-Klasse, die analysiert alle Klassen in der Assembly verwiesen wird, suchen Sie für diejenigen, die ' IComponent '-Schnittstelle implementieren.

Der Router ist verantwortlich für alle Navigation-Aktivität, die nach innen und außen, abfangen und Ausführung. Natürlich sollten Blazor Komponenten bieten Routinginformationen für den Router, sie entsprechend aufzurufen. Blazor unterstützt die gleiche @page Notation von Razor-Seiten in ASP.NET Core. Darüber hinaus unterstützt es das routenattribut für Komponentenklassen in reines c# geschrieben.

Eine einzelne Seite

Eine Single-Page-Anwendung in der Regel beginnt eine Seite "Index.HTML". Eine Anwendung Blazor ist keine Ausnahme aus, und eine einzelne Seite befindet sich unter dem Ordner "Wwwroot". Eine einzelne Seite sollte mindestens das folgende Markup enthalten:

<app>
  <!—initialization markup -->
</app>
<script src="_framework/blazor.webassembly.js"></script>

Der Inhalt des app-Elements wird angezeigt, beim erstmaligen Laden der Blazor-Plattform, d. h. der erste Teil der Dateien in der Liste der abbildung2. Das app-Element, am häufigsten in einer laden GIF-kann jede gültige HTML enthalten. Das Script-Element ist verantwortlich für das Herunterladen von dynamisch der erforderlichen DLL-Dateien.

Der tatsächliche Inhalt der Startseite angezeigten richtet sich nach dem Router, und der restliche Inhalt der Datei "Index.HTML" nach den Script-Element gefunden. Betrachten wir die Arbeit vom Router.

Der Router überprüft die angeforderte URL – den Stamm der bereitgestellten Website – und sucht nach einer registrierten Komponente, die die Stamm-URL entsprechen kann. Im Beispielprojekt enthält der Ordner "Pages" eine Datei "index.cshtml", die mit dem folgenden Inhalt:

@page "/"
<h1>Hello, Blazor!</h1>
Welcome to your first BLAZOR app.

Die Richtlinie @page weist den Router über die Vorlage verarbeitet werden kann. Wenn eine Datei "_ViewImports.cshtml" im Ordner "Seiten" (bzw. im Stammordner) gefunden wird, wird dessen Inhalt berücksichtigt. In das Beispielprojekt enthält die Datei "_viewimports" im Stammordner eine Liste der using-Anweisungen, während die Datei "_viewimports" im Ordner "Pages" einen Verweis auf die Layoutvorlage enthält:

@layout MainLayout

Anschließend der Inhalt der MainLayout.cshtml verarbeitet, und der Platzhalter @Body aufgefüllt wird, mit der Ausgabe von der ausgewählten Razor-Ansicht ("Index.cshtml"). In das Beispielprojekt enthält die Layoutdatei (finden Sie in den Ordner Shared, wie in ASP.NET Core) ein typisches Bootstrap-4-dunkel-Navbar-Element. Hier ist dieser Code ein:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  ...
</nav>
<div class="container">
  @Body
</div>

In diesem Fall: Wenn Sie eine ASP.NET MVC-Hintergrund kommen, sollte diese programmierschema Recht vertraut vorkommen. In der Navigationsleiste müssen Sie in der Regel Links. Sie können Verknüpfungen über die kanonischen ein und Schaltfläche Elemente, oder verwenden Sie eine der vordefinierten (oder Benutzerdefiniert) Razor-taghilfsprogramme Ausdrücken. Insbesondere enthält die NavLink-Helper-Komponente, die bietet eine freundlicher Syntax, um Links auszudrücken, die nicht unbedingt -URLs plain Blazor. In einer Single-Page-Anwendung kann in der Tat ein Link alles sein, die der Router verstehen kann. Hier ist ein Fragment der Razor-Code in der Navigationsleiste der beispielanwendung verwendet:

<div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav">
    <NavLink class="nav-link" href="digitalclock">
      DIGITAL CLOCK
    </NavLink>
  </ul>
</div>

Das Href-Attribut verweist auf ein URI, der die Route auf eine Komponente wie "Digitalclock", eine separate CSHTML-Datei, die vollständig eine digitale Uhr-Komponente implementiert nur verglichen werden kann. Die digitalclock.cshtml-Datei befindet sich unter dem Ordner "Pages".

Erstellen einer Beispielkomponente

Eine Komponente Blazor handelt es sich um eine eigenständige Gruppe von HTML und c#. Alle erforderlichen CSS wird in separaten Dateien, nach der Komponente selbst ausreichend benannt. Beachten Sie, dass Blazor keine besonderen Aktionen mit CSS und keine Konvention zu erzwingen. Umgang mit CSS ist völlig Ihnen überlassen. Hier ist eine digitale Uhr als Bootstrap Eingabe Gruppe implementiert:

<div class="clock">
  <div class="input-group">
    <span class="@currentCss">@currentTime</span>
    <div class="input-group-append">
      <button class="btn btn-primary"
              type="button"
              onclick="@startStop">@buttonAction</button>
    </div>
  </div>
</div>

Razor-Ausdrücke wie CurrentCss "," CurrentTime "und" ButtonAction verweisen auf die Komponentenfelder, die in dem @functions-Abschnitt der Datei definiert. Sie können diese hier anzeigen:

@functions {
  string currentTime = "N/A";
  string buttonAction = "N/A";
  string currentCss = "clock-notset";
  Timer timer;
  ...
}

Der Ausdruck StartStop bezieht sich auf eine Methode aufgerufen wird, wenn auf die Schaltfläche "Beenden" oder "Start" Starten/Beenden des Zeitgebers geklickt wird. Abbildung 3 zeigt den vollständigen Code der DigitalClock Komponente.

Abbildung 3 C-Code der DigitalClock-Komponente

@functions {
  string currentTime = "N/A";
  string buttonAction = "N/A";
  string currentCss = "clock-notset";
  Timer timer;
  protected override async Task OnInitAsync()
  {
    InitTimer();
    StartTimer();
  }
  void startStop()
  {
    if (timer.Enabled)
    {
      StopTimer();
    }
    else
    {
      StartTimer();
    }
  }
  private Task TimerTick()
  {
    currentTime = DateTime.Now.ToLongTimeString();
    currentCss = "clock-working";
    this.StateHasChanged();
    return Task.CompletedTask;
  }
  private void InitTimer()
  {
    timer = new Timer(1000);
    timer.Elapsed += async (sender, e) => await TimerTick();
  }
  private void StartTimer()
  {
    buttonAction = "STOP";
    timer.Start();
  }
  private void StopTimer()
  {
    buttonAction = "START";
    timer.Stop();
  }
}

Abbildung 4 zeigt die Programmschnittstelle.

Abbildung 4: die Beispielanwendung in Aktion

Das Demoprogramm stellt eine digitale Uhr, die von einem Timer .NET gesichert. Die Datenbindung automatisch für Ereignisse, die ausgelöst wird, über eine explizite Benutzeraktion (z. B. wenn eine Schaltfläche geklickt wird), ist aber nicht wenn das Ereignis stammt programmgesteuert, z. B. wie Sie über einen Timer. In letzterem Fall müssen Sie die Methode StateHasChanged zu erzwingen, dass den Browser-Renderer zum Aktualisieren der Ansicht aufrufen. Hier ist der Code den Timer Tick-Handler innerhalb der digitale Uhr Blazor-Komponente:

private Task TimerTick()
{
  currentTime = DateTime.Now.ToLongTimeString();
  currentCss = "clock-working";
  this.StateHasChanged();
  return Task.CompletedTask;
}

Der vollständigen Quellcode finden Sie unter bit.ly/2LVeCxA.

Zusammenfassung

Blazor handelt es sich um eine bevorstehende experimentelle Framework zum Erstellen von. NET-basierte Single-Page-Anwendungen, der im Browser ausgeführt wird, über WebAssembly. WebAssembly ist eine Sandbox Möglichkeit zum Bereitstellen von systemeigenen Binärdateien in einen kompatiblen Browser – im Wesentlichen alle Browser seit Mitte 2017 ausgeliefert. Blazor Razor und c# zum Entwurfsansichten und nutzt einen Router und eine zusammensetzbare Benutzeroberfläche wie die meisten anderen gängigen JavaScript-Frameworks.

Dieser Artikel stellt die Grundlage für eine Client-Anwendung. In zukünftigen Artikeln werde ich die Integration in die Back-End spezifischen ASP.NET Core und die Erweiterungspunkte Blazor untersuchen. Erfahren Sie mehr über Blazor in Jonathan Miller Artikel , die führt Sie durch die Recht erforderlichen Aufgaben für eine clientseitige Anwendung herunterladen der JSON-Daten aus HTTP-Endpunkte.

Dino Espositohat in seiner 25-jährigen Karriere mehr als 20 Bücher und 1.000 Artikel verfasst. Als Autor von „The Sabbatical Break“, einer theatralisch angehauchten Show, schreibt Esposito Software für eine grünere Welt als digitaler Stratege bei BaxEnergy. Folgen Sie ihm auf Twitter: @despos.

Unser Dank gilt den folgenden technischen Experten für die Durchsicht dieses Artikels: Daniel Roth (Microsoft), Jonathan Miller

Diesen Artikel im MSDN Magazine-Forum diskutieren

Freigeben über