Aspnetcore: Blazor Generic Support and reusability

[mickturn]

Sorry, I know this is not a forum, but I did not find where I could post this. (copy/paste from a previous message…)

Up to now, we are developing web app, using Bootstrap as front-end framework.
Personally, I am pretty tired to rebuild from scratch and copy/paste, for each new project, some part of codes + the ajax stack, and we have to rewrite one big app and write ~5 new app.

Now, we are looking for an alternative.

Angular have been exclude as:

• TypeScript is not a very appealing language for old school guys like us (C, C++ syntax)
• TypeScript is not usable elsewhere (I mean not like C# with Xamarin, .Net Core, Blazor)
• Some part of the documentation is poorly documented
• Too much update
• Poor reusability
• Debugging sucks
• Big apps are Too fat

We then thought that AngularDart could fit but we found:

• Very POOR documentation, and incomplete
• Debugging sucks
• Archaic generic support that leads to ↓
• Big apps are Too fat, as there is a lack of generic component (a lot of copy/paste). For an app rewritten at 1/5, we reached ~20Mb. So we have to find a solution…

Now we are thinking about Blazor.

We see only advantage, among them, the future lazy loading that seems so powerful.

We know the quality of MS documentation, and that C# is highly generic, but we did not find enough information about:

• Can we structure Blazor Component around MVC pattern (did not see yet)?
• Are components "really" generic (not like the archaic AngularDart generic support, check the link provided)? Because I have seen this video, but it does not really show reusability of components outside a given area, with a different type.
• Where is the doc for Blazor Server side vs Blazor Client side? We find this video very useful, but not "complete" (the switch between Blazor Server side vs Blazor Client side seems "magic").

Can we start to write apps? Or the future of Blazor is still uncertain?

[stavroskasidis]

Blazor is still not "greenlighted" for production, so I is still not recommended to build products yet.

Having said that, in my opinion this is one of the most stable "pre-alpha" (or whatever you want to call it) things I have ever tried. I am building a relatively big project in my free time myself (not a product, for personal use), and I can say that the foundations are really good, stuff just works.

Sure, there are some issues with performance, and you have to interop with JS a bit more that you should, but these will only get better with each version, since the mono team is actively working on the runtime. Also, the server-side model (using SignalR) is planned for .Net core 3.0, which means that in some form, blazor WILL survive and not all your current blazor code will be a throw-away (hopefully none).

So, yeah, not recommended but the stakes are not that high in my opinion.

[Andrzej-W]

We all believe that Blazor will not be abandoned and that it will revolutionize web development. I have to agree with @stavroskasidis - Blazor has some missing features and known bugs but it is one of the most stable and feature rich experimental project I have ever seen. I'm already (slowly) working on a new commercial product and have to say that I have never been able to write something similar in plain HTML/JavaScript. I'm also "old school" guy with almost 30 years of experience in C/C++/C# programming. For people like we JavaScript is simply not acceptable.

Read this https://github.com/aspnet/Blazor/issues/1299#issuecomment-412340860 and if your project have to be indexable by Google, Bing, etc. read this: https://github.com/aspnet/Blazor/issues/1311

Blazor doc is available here https://blazor.net/docs/. You should also read this blog https://blogs.msdn.microsoft.com/webdev/category/blazor/. In version 0.5.0 you will find information about server side mode.
Here you will find a lot of links:
https://blazor.net/community
https://github.com/AdrienTorris/awesome-blazor

This is a nice example application for Blazor beginners written by @lohithgn :
https://blazorexamples.surge.sh/

Note that Blazor works in current versions of Firefox, Chrome, Edge and Safari. Forget about Internet Explorer. iPhone users have to upgrade to iOS 12. Chrome has very slow Web Assembly implementation.

[mickturn]

Thanks guys.

Well, seems we have underestimate the sources available. Very useful!

And very happy to find here people that understand us.

I just start to read some piece of code (I find the codes so readable), and I have some "more specific" questions:

• Can we put the @function block outside the cshtml files? (cshtml files for "front end developers", and cs files for "Blazor code developers")
• Can we write some generic @functions that can be shared between components? (Could be used with @lohithgn controltypes samples, for instance)
• In Flight Finder App, can I make services like AppState.cs generic, and use this elsewhere in the app for different sub component's services?
• Is compile time long with big Apps? (Start to be a real nightmare with AngularDart…);
• What about Json deserialization performance (Bad with AngularDart)?

I insist on the generic aspect, as this is our biggest problem with SPA, and for sure the one for those who will write big web apps. Indeed, we reached with AngularDart ~20mb for 1/5 of the app, without any other pictures than favicon (677 bytes) and no frameworks (jQuery, Bootstrap, …). If we did not have to copy/paste, we could make a huge space saving.

If Blazor is launched, it will solve this problem in the future with lazy loading, but generic component + lazy loading will be so powerful! Nothing could equals it!

@Andrzej-W how do you deal with generic components?

[enetstudio]

I would start creating a project with Razor Components ( so-called Server-Side Blazor), and shift to Blazor client project by the time the Blazor framework is fully mature. Note that on internal organization sites the use of Razor Components is preferable.

Q: "Can we structure Blazor Component around MVC pattern (did not see yet)?"
A: I believe you could do that on server-side prerendering, which is not supported yet. Note that server-side prerendering differs from Server-Side Blazor. It is a one time rendering just like Angular Universal. But why would you use MVC ? Blazor is actually replacing MVC.

Q: "Where is the doc for Blazor Server side vs Blazor Client side?"
A: Your code should be, I believe, almost identical when using both flavours of Blazor, so that switching between them can be almost seamless, though you can do otherwise, as for instance, use application service to retrieve data directly from your database, when using Server-Side Blazor, and HttpClient to retrieve data from your Web Api, when using "client side Blazor". I, personally, would use HttpCilent and Web Api, in both cases.

Right now you should follow the web sites provided by Andrzej-W above. But I think the best way to learn about Blazor is to read the Issues and Pull Requests in Github...

Hope this helps...

[enetstudio]

See also this: https://github.com/Suchiman/BlazorDualMode

[danroth27]

Can we structure Blazor Component around MVC pattern (did not see yet)?

Blazor is a UI framework, so it is primarily focused on the presentation layer (the "V" in classic definition of MVC). Blazor is unopinionated about how you handle your Model and Controllers. Lots of folks have been experimenting with different patterns, which you can take a look at on the Blazor community page.

Are components "really" generic (not like the archaic AngularDart generic support, check the link provided)? Because I have seen this video, but it does not really show reusability of components outside a given area, with a different type.

We recently shipped support for generic templated components in Blazor 0.6.0. You can read about them here: https://blazor.net/docs/components/index.html#generic-typed-components

Where is the doc for Blazor Server side vs Blazor Client side? We find this video very useful, but not "complete" (the switch between Blazor Server side vs Blazor Client side seems "magic").

We've documented the server-side vs client-side hosting models here: https://blazor.net/docs/host-and-deploy/hosting-models.html.

Can we start to write apps? Or the future of Blazor is still uncertain?

Currently the Blazor project is experimental, and is not recommended for production use. We have committed to integrating the Blazor component model into ASP.NET Core 3.0, which we expect to preview early next year. We expect to ship support for running Blazor client-side on WebAssembly as well, but the roadmap for that has not yet been determined.

I hope this helps. Please let me know if you still have questions or need additional clarification!

[mickturn]

@danroth27
Thanks for all. It's crystal clear!

We expect to ship support for running Blazor client-side on WebAssembly as well, but the roadmap for that has not yet been determined.

Awesome :D !!!

[Andrzej-W]

@mickturn

Can we put the @function block outside the cshtml files? (cshtml files for "front end developers", and cs files for "Blazor code developers")

Yes, you can. Here is a very simple example: https://blazor.net/docs/components/index.html#base-class-inheritance-for-a-code-behind-experience
Based on this pattern I was able to create a generic base class and then use it in a few pages (Blazor components). I made this in Blazor 0.5. In Blazor 0.6 we have true generic templated components (https://blazor.net/docs/components/index.html#generic-typed-components). Unfortunately I don't have enough time to play with Blazor now.

Support for C# partial classes is also planed.

What about Json deserialization performance

Currently client side Blazor app is not a native WebAssembly app. It is compiled into IL code which is then interpreted in the browser. It is slow if you have big JSON response from the server. Here you can compare client side and server side Blazor which returns 500 items. Test it in Google Chrome which has some problems with WebAssembly performance to see the difference.
http://blazorserwer.azurewebsites.net/
http://blazorclient.azurewebsites.net/
Server version has a bug aspnet/Blazor#1223

[mickturn]

@Andrzej-W I definitely need to start reading in depth. Everything is there!
Thanks again.

Currently client side Blazor app is not a native WebAssembly app. It is compiled into IL code which is then interpreted in the browser. It is slow if you have big JSON response from the server. Here you can compare client side and server side Blazor which returns 500 items. Test it in Google Chrome which has some problems with WebAssembly performance to see the difference.
http://blazorserwer.azurewebsites.net/
http://blazorclient.azurewebsites.net/
Server version has a bug aspnet/Blazor#1223

Keeping in mind that Blazor is but an experimental project, I will try to compare JSON performance with AngularDart/Dart, which sucks…

@stavroskasidis, as you work on "a relatively big project", can you tell me

• how long is compile time?
• do you use Generic Typed Component?
• what is the size of the App?

I cannot stop thinking that, with an "effective" communication, Blazor will definitely revolutionize web development, and BLAST JavaScript and all other frameworks based on, and others Angular like.

Seems it's time to write something with Blazor!

[stavroskasidis]

@mickturn

how long is compile time?

Not that much different from any other asp project. The only overhead difference is the linker that runs for the blazor client project. A full rebuild runs for about 10-15 seconds. That invoves about 13 projects and a couple of prebuild/prostbuild events that copy files.

do you use Generic Typed Component?

Not currently, no.

what is the size of the App?

About 4MB gziped including everything (runtime, dlls, css, some js interop).

By the way, because I am referencing some old code that I started writing a few years back, I have some dependecies that maybe are not relevant to a conventional web app. For example I am pulling dlls like: System.Xml (this one alone is 0.5 MB ), System.Data etc

[davesspacebar]

I believe as well Blazor could change the way everyone develops web apps and I'm not just talking about MS platforms. If using WebAssembly this can be replicated so you can build front and backend in ruby, or other web languages so everyone only needs to learn a simpler web stack. This would be a huge leap forward. Most developers are probably not good at every part of a stack, SQL, ASP.Net/MVC Razor, javascript. Being able to remove a part of the stack and replace it with something more well known/used for a full stack developer seems like a nice way to make development easier to build, understand and maintain. I do hope Blazor and functionality like it, is the future for web development to simplify the stack.