Blazor Client Programmierung

[Kokujou]

Hey Leute ich hab eine Frage über Blazor... Offenbar kann man ja mit Blazor Webseiten erstellen. Find ich auch cool. Ich habs ausprobiert und das einzige was mich tierisch daran nervt ist, dass es offenbar weniger ein Frontend als mehr ein Backend ist. quasi im PHP style mit Websockets. Ich weiß nicht ob ich das so prickelnd finde. Besonders weil ich ein Projekt habe bei dem ich sehr viel unschöne Dinge tun muss. Cookies, Introspection, viele viele authentifizierte Backend requests.

Ein Beispiel dass sich backend wise gar nicht umsetzen lässt: Wir haben einen Identity Server der seinen Token in einen Cookie schreibt. dieser Cookie ist nur für die entsprechende Domain gültig. Also nur für Requests an den Identity Server. Der Frontend-Part von Blazor könnte also problemlos authentifizierte requests schicken, aber der eigentliche Code-Part von Blazor würde davon absolut nichts mitkriegen.

Viele dieser Spielereien sind nur mit Javascript Interops möglich. Sicher stimmt ihr mir zu dass es relativ sinnfrei ist sich eine Webapplication mit einem fetten Framework aufzusetzen wenn man dann trotzdem reichlich Javascript Interops machen muss.

Aber nun zu meiner Frage: Gibt es eine Client-Version von Blazor? oder ein Framework dass ähnlich schön ist wie blazor und nicht so abscheulich wie Angular? Es müsste halt ein Framework sein dass auch wirklich im Frontend stattfindet, C# ist... nicht optional sondern tatsächlich Pflicht denn ich will nie wieder irgendetwas mit NPM Angular und Konsorten zutun haben... Wochen meines Lebens die ich nicht zurück kriege >.< Sorry für den Rage.

 

[new Account()]

Hättest du deine Frage nicht einfach googlen können?
Ist ja nicht so als würde man dann nicht gleich die Antwort dazu finden.

PS: hat schon gewisse Ähnlichkeiten mit Angular ☺

 

[Kokujou]

hab ich aber ich find immer nur lösungen zum serverseitigen blazor, sonst würd ich ja nicht fragen. da spezifiziert man dann controller undso weiter. aber unter client based blazor find ich nichts. oder sie verkaufen ihre server-based lösung als client based... irgendwas mach ich falsch

Ergänzung (17. September 2020)

ich meine es stimmt doch dass wann immer ich irgendwas mit C# mache a la Program.cs oder Razor das ist Backend stuff. und wenn ich die seite besuche baut er nen websocket zu meinem razor backend auf dass dann irgendwie die kompilierten files schickt.

also wie sollte ich nun auf client-side umsteigen?

 

[new Account()]

Ich habe in Google eingegeben:
"client blazor"

Erstes Ergebnis war:
https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor

 

[Kokujou]

das ist aeber nicht client... du kannst mir ruhig glauben was ich dir sage.

Ergänzung (17. September 2020)

du baust dir ein C# backend und kannst dann Javascript interop machen. aber ich brauch doch kein backend wenn ich ein frontend habe dass mit einem externen microservice kommuniziert.
und wenn ich sowieso javascript interop machen muss um das meiste client-based zeug hinzukriegen, kann ich auch gleich anfangen nur mit javascript und css zu coden. was nebenbei immer noch verlockender wäre als angular...

Ergänzung (17. September 2020)

jetzt wo ich so drüber nachdenke erinnert mich sogar die schreibweise von componenten mit dieser @code notation an php...

 

[Madman1209]

Hi,

das ist aeber nicht client... du kannst mir ruhig glauben was ich dir sage.

komisch, Microsoft sieht das anders, und zwar direkt im ersten Absatz!

Blazor lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. Both client and server code is written in C#, allowing you to share code and libraries.

und später:

Blazor can run your client-side C# code directly in the browser, using WebAssembly. Because it's real .NET running on WebAssembly, you can re-use code and libraries from server-side parts of your application.

Alternatively, Blazor can run your client logic on the server. Client UI events are sent back to the server using SignalR - a real-time messaging framework. Once execution completes, the required UI changes are sent to the client and merged into the DOM.

VG,
Mad

 

[Kokujou]

hats denn mal irgendjemand ausprobiert? oder denkt ihr ich denk mir das alles aus.

Ergänzung (17. September 2020)

leute klickt auf das get started und alles was ihr seht ist wie ihr ne server app aufsetzt. das ding heißt sogar "blazorserverapp"
ist ja schön wenn die sagen dass es irgendne webassembly methode gibt aber wo und wie und was und wann?

 

[Madman1209]

Hi,

oder denkt ihr ich denk mir das alles aus.

acho so, ne, klar... Microsoft denkt sich das aus!

Arbeite doch einfach das Tutorial durch! Wenn ich mir z.B. das Tutorial der To-Do-Liste anschaue muss einem klar werden, dass hier auch eine Client-Komponente verwendet wird.

VG,
Mad

 

[TheCadillacMan]

Wenn du keinen Server haben willst musst du eine "Blazor WebAssembly App" erstellen: ASP.NET Core Blazor hosting models
Dann läuft .NET per WebAssembly im Browser. So tief wie JS ist es aber dann prinzip-bedingt immer noch nicht in Browser integriert.

Falls du JS-Frameworks noch mal eine Chance geben willst, probier Vue.js.
Das ist deutlich leichtgewichtiger als Angular und meiner Meinung nach auch angenehmer zu benutzen.

 

[l0lsh4rp]

Also ich weis jetzt nicht genau was dein Problem ist.
Bin zwar nicht mehr 100% drinnen.
Aber ich habe Testweise mal eine Blazor Client App geschrieben, Authentifizierung über einen Identity Server und Daten über Grpc/Rest von einem extra Service (Auth über den Identity Server).

Also ja das ist möglich.
Kein JS Interop Notwendig

 

[Kokujou]

Wenn du keinen Server haben willst musst du eine "Blazor WebAssembly App" erstellen: ASP.NET Core Blazor hosting models
Dann läuft .NET per WebAssembly im Browser. So tief wie JS ist es aber dann prinzip-bedingt immer noch nicht in Browser integriert.

Falls du JS-Frameworks noch mal eine Chance geben willst, probier Vue.js.
Das ist deutlich leichtgewichtiger als Angular und meiner Meinung nach auch angenehmer zu benutzen.

ich hab ein gutes beispiel für dinge die mit blazor backend aktuell nicht gehen: cookies schreiben. cookies lesen geht weil die im request ans blazor backend gesendet werden. cookies schreiben aber höchstens als response und nicht domain übergreifend. dafür brauchte ich den ersten javascript interop.

Noch eine Frage, ich weiß nicht wie tief du drin bist, aber wie funktioniert dependency injection in der Webassembly version? aktuell wird mir eine Program.cs und eine Startup.cs auto generiert. Und die Startup kann man dann für die Dependency Injection verwenden. Läuft das im Webassembly genauso?

Also ich weis jetzt nicht genau was dein Problem ist.
Bin zwar nicht mehr 100% drinnen.
Aber ich habe Testweise mal eine Blazor Client App geschrieben, Authentifizierung über einen Identity Server und Daten über Grpc/Rest von einem extra Service (Auth über den Identity Server).

Also ja das ist möglich.
Kein JS Interop Notwendig

wie gesagt ist unser identity server etwas speziell. normalerweise kriegst du ja den token in nem body. wir senden ihn aber in einem cookie und dieser cookie ist ausschließlich für die adresse des identity servers. frontends teilen sich natürlich diesen cookie und senden ihn automatisch bei request an unseren identity server. aber wir können ihn nicht an das blazor backend senden. es würde also nur ohne server gehen.

 

[Faizy]

Du schmeißt hier etliche Begriffe durch den Thread, welche zusammenhangslos erscheinen und ich habe den Eindruck, dass du, wie bereits von anderen Usern erwähnt, zu faul zum googlen bist. Auf der Landing-Page zu Blazor steht im ersten Absatz: "Both client and server code is written in C#, allowing you to share code and libraries."

Da du anscheinend schon mit Tools wie npm Probleme hast, empfehle ich dir dringend die Basics nachzuholen. Wenn du das geschafft hast, dann erübrigen sich deine meisten Fragen von selbst. Angular und npm sind strikt zu trennen. Wenn du mit Angular Probleme hast, dann gibt es noch React und Vue. Um npm wirst du in allen genannten Frameworks nicht herumkommen (es gibt Alternativen, aber die findest du sicherlich selbst...).

 

[Kokujou]

Ich formuliere meine gesamte Fragestellung mal um. Ich beschreibe euch was ich brauche und ihr sagt mir ob ich es mit Blazor Webassembly ohne Javascript Interop verwirklichen kann und es wäre schön wenn jemand mir einen Prototypen schreiben könnte. Also nur die paar Zeilen für die Program.cs natürlich, oder vielleicht ein passendes Github Projekt verlinken könnte:

Ich brauche:

• Die Möglichkeit Cookies zu lesen, zu schreiben und sie zu abbonieren (Observable)
• Die Möglichkeit einen Browser-Cookie implizit an einen externen (!) Backend-Service zu senden
• Eine Möglichkeit für Translations basierend auf einem json-file (vgl angular l10n) und Localisierung
• Dependency Injection mittels einer Startup.cs
• Verwenden von externen assets (scss, javascript, Bilder, ...) aus einem git Submodule (selbe solution, andere csproj)
• Verwendung von Routing außerhalb von Komponenten
• Einbau einer Token Introspection
• Globale und Zentrale Behandlung (Behandlung! kein Logging), sodass nicht meine ganze Webapp abstürzt und ich terminierende fehler einfach durchfliegen lassen kann (wichtige Webrequests z.B.)

Ich danke schonmal im voraus für eure Geduld Ich hatte am Anfang mit Blazor Probleme weil in allem was ich gefunden habe nichts gestimmt hat. Sogar die Namespaces und Nuget-Pakete die referenziert worden waren falsch. Irgendwann hatte ich dann eine Blazor App mit Program.cs und Startup.cs aber es kann sein dass ich die "ausversehen" zur Server-App gemacht habe ...

 

[abcddcba]

es wäre schön wenn jemand mir einen Prototypen schreiben könnte. Also nur die paar Zeilen für die Program.cs natürlich, oder vielleicht ein passendes Github Projekt verlinken könnte:

wirst du dafuer nicht bezahlt? Warum sollte das jemand machen? Warum nimmst du genau dieses Framework, wenn du damit nicht zurecht kommst und unzufrieden bist? Jemand hat dir doch diese Aufgabe in der Firma gegeben, solltest du dann nicht davon Ahnung haben?

Aus deinen ganzne Kommentaren ging jetzt nicht hervor, hast du das Tutorial jetzt schon mal durcgarbeitet? Siehst du nun ein dass du auch den Client Code in C# schreibst?

 

[Kokujou]

wirst du dafuer nicht bezahlt? Warum sollte das jemand machen? Warum nimmst du genau dieses Framework, wenn du damit nicht zurecht kommst und unzufrieden bist? Jemand hat dir doch diese Aufgabe in der Firma gegeben, solltest du dann nicht davon Ahnung haben?

Aus deinen ganzne Kommentaren ging jetzt nicht hervor, hast du das Tutorial jetzt schon mal durcgarbeitet? Siehst du nun ein dass du auch den Client Code in C# schreibst?

das Framework hab ich sicher nicht freiwillig gewählt XD aber wir haben die chance von angular zu migrieren. sagen wir vielleicht. aber das kann ich nicht durchdrücken wenn das was wir brauchen damit nicht umsetzbar ist. darum meine Frage. die man irgendwie nicht beantworten will sondern lieber auf meinem Charakter rumhackt.

Ja ich habe es durchgearbeitet. Und ja ich weiß dass man auch Client Code in C# schreibt. Das war mir in der Sekunde klar als ihr gesagt habt dass es Client Code gibt. Natürlich wird das Ähnlich aussehen. Meine Frage ist was unterscheidet denn Client Code von Server Code?

Denn wie gesagt, diese ganzen tollen codeschnippsel von Komponenten undso weiter laufen nicht auf dem Client. Glaubt mir. Ich habs ausprobiert. Keine Kekse.

Also was macht den Client code aus, was ist da anders, ist das einfach nur irgendne Zeile in der program CS benutzt man da nen anderen Webbuilder und der Rest ist komplett identisch? Falls ja dann brauch ich nämlich für die Cookies trotzdem ein Javascript Interop, weil ich keine Bibliothek gefunden habe.

Was ist mit Token Introspection? Guards? Resolvern? Ist das alles machbar? Oder brauch ich dafür auch wieder Javascript Interops. Denn jedes mal wenn ich ein Javascript Interop verwenden muss ist das Framework ein bischen weniger Sinnvoll. Was ist z.B. mit den HostListenern?

Kann man in Blazor etwas an document:click anhängen?

 

[l0lsh4rp]

Kann sein das meine Infos teilweise schon etwas veraltet sind, da meine Test Projekt schon wieder ein paar Monate alt ist. Aber im großen und Ganzen sollte alles noch sehr ähnlich sein.

• Die Möglichkeit Cookies zu lesen, zu schreiben und sie zu abbonieren (Observable)

Scheint derzeit nur über Interop möglich zu sein. Wird aber grundsätzlich nicht mehr empfohlen, für Auth sollte man auf JWT umsteigen wird dann direkt unterstützt

• Die Möglichkeit einen Browser-Cookie implizit an einen externen (!) Backend-Service zu senden

Ich nehme an Aufruf zum Backend Service erfolgt über einen HttpClient?
https://stackoverflow.com/questions/12373738/how-do-i-set-a-cookie-on-httpclients-httprequestmessage

• Eine Möglichkeit für Translations basierend auf einem json-file (vgl angular l10n) und Localisierung

Gibt es schon Möglichkeit soweit ich weis aber vermutlich nicht 1 zu 1 wie in Angular.
Sample Doku

• Dependency Injection mittels einer Startup.cs

Bsp. aus meiner Startup

builder.Services.AddScoped<AppState>();
builder.Services.AddSingleton<IAccountController, AccountController>();

builder.Services.AddSingleton(new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

Verwendung:
@inject AppState appState

• Verwendung von Routing außerhalb von Komponenten

Kannst du ein Beispiel geben was genau hier gebraucht wird?


Grundsätzlich währe halt schon anzumerken das sich Blazor sich nicht 1 zu 1 wie Angular verhält. Ja Blazor Webassembly ist ein SPA Framework, aber genauso wie Javascript basierte Angular Alternativen
gibt es natürlich unterschiede.

 

[Kokujou]

Scheint derzeit nur über Interop möglich zu sein. Wird aber grundsätzlich nicht mehr empfohlen, für Auth sollte man auf JWT umsteigen wird dann direkt unterstützt

Danke! Aber wie wird dann das login über mehrere Browser-Tabs und Sessions unterstützt? Wir schreiben die Kekse ja nur deswegen damit unser Nutzer eingeloggt bleiben kann. außerdem würden wir auch gerne die Sprachwahl global festlegen und persisten. Session Storage ist dafür zu schwach und auch alles andere.

Ich nehme an Aufruf zum Backend Service erfolgt über einen HttpClient?
https://stackoverflow.com/questions/12373738/how-do-i-set-a-cookie-on-httpclients-httprequestmessage

Ja aber unser Problem ist leider etwas speziell. Ich versuchs nochmal mit aller Macht anschaulich zu erklären:
Wir haben den IdentityServer. Wenn wir dort einen Refresh Token beantragen liefert er den ans Frontend mit einem Cookie. Dieses Cookie ist ausschließlich für die URL des IdentityServer gültig. Andere Frontends (wir haben subdomains) können dann ohne irgendetwas speziell zu konfigurieren sagen, sie erwarten dass da ein bestimmter Header ist und möchten den immer bei requests an den Identity Server anhängen. So kriegen wir dann den Auth Token.

Soweit sogut. Aber in diesem Fall braucht das Blazor Backend leider den Token. Und es ist soweit ich weiß unmöglich den Cookie an Backends zu senden die nicht im Domain Namen spezifiziert sind. Und da alles Backend-artig abläuft hab ich so keinen zugriff auf den Refresh Token und müsste höchstens über ein weiteres JS Interopf einen Auth Token manuell beantragen damit ich den dann explizit an das Blazor Backend senden kann... sehr hacky.

Gibt es schon Möglichkeit soweit ich weis aber vermutlich nicht 1 zu 1 wie in Angular.

Hatte leicht gehofft man kriegt es ähnlich hin, aber so schlimm ist es auch nicht wenn nicht. aktuell lade ich die json files einfach, hab ne Translated Component mit ner @Translate funktion gebaut und löse diese Keys immer auf indem ich die Json Übersetzungen Parse. Aber ich hatte gedacht vielleicht gibts da irgendwas was bereits fertige gecodet ist und wo man nicht so viel migrieren muss^^ Aber die Localization sieht gut aus, danke!

Dependency Injection mittels einer Startup.cs

hier würde mich eher die Program.cs interessieren speziell für WebAssemblies. Ich hatte nämlich viele Probleme damit überhaupt erstmal eine Startup zu verwenden und als ich das dann rigendwie hingerunzelt hab fing das ganze mit den Websockets an >.<

Kann sein das meine Infos teilweise schon etwas veraltet sind, da meine Test Projekt schon wieder ein paar Monate alt ist. Aber im großen und Ganzen sollte alles noch sehr ähnlich sein.

• Die Möglichkeit Cookies zu lesen, zu schreiben und sie zu abbonieren (Observable)

Scheint derzeit nur über Interop möglich zu sein. Wird aber grundsätzlich nicht mehr empfohlen, für Auth sollte man auf JWT umsteigen wird dann direkt unterstützt

• Die Möglichkeit einen Browser-Cookie implizit an einen externen (!) Backend-Service zu senden

Ich nehme an Aufruf zum Backend Service erfolgt über einen HttpClient?
https://stackoverflow.com/questions/12373738/how-do-i-set-a-cookie-on-httpclients-httprequestmessage

• Eine Möglichkeit für Translations basierend auf einem json-file (vgl angular l10n) und Localisierung

Gibt es schon Möglichkeit soweit ich weis aber vermutlich nicht 1 zu 1 wie in Angular.
Sample Doku

• Dependency Injection mittels einer Startup.cs

Bsp. aus meiner Startup

builder.Services.AddScoped<AppState>();
builder.Services.AddSingleton<IAccountController, AccountController>();

builder.Services.AddSingleton(new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

Verwendung:
@inject AppState appState

• Verwendung von Routing außerhalb von Komponenten

Kannst du ein Beispiel geben was genau hier gebraucht wird?


Grundsätzlich währe halt schon anzumerken das sich Blazor sich nicht 1 zu 1 wie Angular verhält. Ja Blazor Webassembly ist ein SPA Framework, aber genauso wie Javascript basierte Angular Alternativen
gibt es natürlich unterschiede.

Naja in .razor und .razor.cs files kann man den NavigationManager injecten. Aber ich brauche zweierlei: zuerst mus sich den NavigationManager in Scoped Services und vielleicht (?) auch Singletons einsetzen, das ist eine große Problemquelle und vor allem brauche ich die aktive App URL, möglichst nicht local host. Und auch dafür hast du glaube ich den Navigation Manager.


Um das jetzt noch mal abschließend zusammenzufassen: Macht es überhaupt irgendeinen Unterschied ob man Webassembly oder Server verwendet? Denn so wie ich das jetzt verstanden habe ist der Code 1:1 identisch. Aus entwicklerseite ist es z.B. recht nervig dass man im Browser die WebRequests nicht mehr sehen kann, da diese jetzt im Backend passieren. würde sich das zumindest ändern?
Wenn die Code Basis identisch bleibt dann sind die wirklichen Probleme die ich aktuell habe wie z.B. das anhängen von C# Code an globale Events (document:click, window:close, focus, unfocus) ziemlich herausfordernd

 

[GroMag]

Irgendwas ist hier ziemlich verquer...

Du willst ein Framework, was bestimmte Anforderungen erfüllt. Also musst du dich belesen, ob das so ist. Ist das nicht so, ist es das falsche Framework.

Und Foren wie hier sind nicht dazu da, dir diese Recherche-Arbeit abzunehmen.

 

[Kokujou]

Wenn ihr die Antwort nicht kennt oder keine Lust oder Zeit habt mir zu antworten dann lasst es halt. Ich dachte vielleicht kennt sich jemand in dem Framework aus und hatte schonmal mit ähnlichen Anwendungen zutun. dann hätte dieser jemand mir einfach ja oder nein gesagt und ich hätte mir ne Menge Arbeit gespart. Besonders da ich das hier inoffiziell tue.

Aber vielleicht könnt ihr mir ja diese Frage beantworten: Gibt es noch andere Projektbasierte C#-Frameworks für Frontend-Entwicklung?
Dann könnte ich mir die noch angucken um vielleicht eine noch bessere Lösung als Blazor zu finden