SPA template using Blazor

[hitaspdotnet]

What Blazor is: An experimental .NET web framework using C#/Razor and HTML that runs in the browser via WebAssembly

• see: https://github.com/aspnet/Blazor

Resources:

• Blazor project website
• Steve Sanderson's demo at NDC Minnesota (Video)
• A collection of awesome Blazor resources

Blazor in action:

https://blazor-demo.github.io/

[hikalkan]

I like the idea behind Blazor. Will work on that template. Thank you for your suggestion.

[bbakermmc]

Everyone would love to not use JS :P I haven't been following it too closely other than its hit v .5 last week I think. But we know MS tends to issue breaking changes a lot so that's the only gotcha with the early life cycle stuff Just look at .net core.

[hitaspdotnet]

@bbakermmc Right. I tried Blazor using GraphQL as server-side query language that was amazing and is made building UX/UI for our modular app very very very simple.

@hikalkan Sir, are you haven't plan to start GraphQL integration? #86
I can help in building modules schema. I'm only waiting for integration.

[hikalkan]

We are not starting GraphQL is the next weeks. But we will work on soon (probably in ~2 months).

[bbakermmc]

Personally I dont see the huge reason for GraphQL, especially if you go with ServerSide Rending in Blazor. How do you throttle GraphQL, does it check permissions to see if the user has access to the table? Why does someone need to query the data? Sure maybe it makes front-end developers jobs slightly easier but they should learn how to do it properly, this is just another abstraction like EF which could generate horrid sql once you get into complex scenarios.

[hitaspdotnet]

@bbakermmc GraphQL is not any specific framework or database query language but rather a specification that describes the capabilities and requirements of data models in client‐server applications.
You can use Application/Domain services + Repositories as GraphQL objects for building schemas. Each module can have own schema at own endpoint.
For example, when you need a list of your store categories and their products and reviews and balabalabala with REST API you need to create the request for each data you needed, but this can be done easily with one request in single line code!! This not useful for multi clients applications?
You can see GraphQL in action on Facebook Mobile UserProfile page. All data of a user (pages, friends, videos, books, places, ....) comes with a single query and a single parameter UserID.

does it check permissions to see if the user has access to the table?

you can add this by design or using available libraries like this

[bbakermmc]

For example, when you need a list of your store categories and their products and reviews and balabalabala with REST API you need to create the request for each data you needed, but this can be done easily with one request in single line code!! This not useful for multi clients applications?

And this is what I would say is bad, the exact reason applies to EF also. It may not always generate the best/optimized query plan for the data. Sure it makes your life easy because you just deal with models, but it doesn't mean it generates proper response. And why not just make an endpoint that returns what you need. Why do I need to send back "everything". A product could have 1000000 reviews, hmm sending that back is bad. Also wouldnt this in return issue multiple SQL calls? 1x per object per repo? So in the end it didnt really save performance, not really, the db still has to issue 6 queries.

Not saying GraphQL isnt fine, but it has its place, and I dont see it taking over, its just another abstraction that I personally dont want to deal with :p Like I said its basically and ORM for the front end like EF. So now we need two ORMs lol? Its just a way for client side folks to get data w/out having to go to the DB people just like EF/ORMS are the same thing for the server side.

[hikalkan]

I didn't work with GraphQL yet, but read a lot.

Also wouldnt this in return issue multiple SQL calls? 1x per object per repo? So in the end it didnt really save performance, not really, the db still has to issue 6 queries.

This is one point I hesitate about. It would not be good to open entire database (or a subset model) to clients if they query unnecessary data which may lead to non optimized queries in the server side.
But it's also valid for REST. Client may perform many unnecessary API calls.

Anyway, as I said, I didn't work in practical. From my current understanding, we will provide a GraphQL endpoint for each module with their own schema/model. We will also provide full REST-style API for each module.

[bbakermmc]

@hikalkan Right, from my understanding it seems it needs to be tied to an IQueryable since its going to be doing its own "magic". REST isn't "better" by any regards, but you cant expose an IQueryable :p, you at-least know what will be sent back and can make better predictions. So in the SPA template you making to versions now, one REST and one GraphQL :)?

[hikalkan]

So in the SPA template you making to versions now, one REST and one GraphQL :)?

It'e very early for me to decide/answer that. I even don't know how to create Blazor template for ABP yet.

[hitaspdotnet]

@bbakermmc

this is what I would say is bad, the exact reason applies to EF also.

When a new technology is introduced, it certainly has its own fans and critics. Given the idea behind the vNext framework, the VOLO has been able to meet the needs of the majority of users. Professional users like you and novice users like me. The GrapgQL for users, who want to run their software on the cloud, has an easy and practical solution. I'm using GraphQL in my ZERO app at Web.Host layer with own controllers for calling my application methods at "myDomain.domainType/graphql" endpoint. That was useful for building my mobile app and my public website in angular.

[bbakermmc]

@hitaspdotnet Right. It just comes down to implementation and maintenance. If you want to use GraphQL why would you implement all the AppServices and REST stuff :p. I'm looking at it from a maintainability/performance standpoint.

Once you offer multiple choices on things maintaing the code becomes a nightmare. I assume youre not running, React, Angualar, MVC, and Blazor right? But if the vNext supports them all you now have to make sure each one is implemented correctly and then if you now say we will support REST and GraphQL now you multiplied the number of updates :p

Then you have security, well if its included as a package in the project but not used, its still potentially a "security" risk, just look at the NPM package hacks and stuff.

Maybe @hikalkan comes up with some super amazing UI to generate permissions per object per field, makes dtos, linked, objects, endpoints, and GraphQL would work great with it, then sure by all means just use GraphQL for the templates.

We see it now with AspNetZero where there are patches after a major release to fix things not caught.

Everyone is excited for vNext and we want the fancy new features.

[hitaspdotnet]

@hikalkan
Bootstrap 4 Components for Blazor Framework: https://github.com/chanan/BlazorStrap
Maintainable CSS with Blazor Framework: https://github.com/chanan/Blazorous

[hikalkan]

Seems a good framework: https://github.com/oqtane/oqtane.framework
Adding link here for a reference.

Also, see these UI component libraries:

• https://blazorstrap.io/
• https://blazorise.com/

[bkv143]

Do you have any date when Blazor UI template will be ready?

[hikalkan]

Do you have any date when Blazor UI template will be ready?

No date. This is an open source project :D

Our first goal to finalize the v1.0. Then we will prioritize other works.

[wocar]

Even without the template I’m sure we can make it work out of the box, at least on server side blazor

[Xeevis]

Like it so far! I'm wondering how much effort would it take to get at least Wasm client to work with recently shipped .NET 5 RC1. Tons of improvements for Blazor across the board and I'd like to start playing developing with it asap considering it's already feature complete and a "go-live" supported for production build.

While it's supposed to be fully backwards compatible with .NET Standard, upgrade yields some errors. Any insight on how to get through would be appreciated.

Changing the MyCompanyName.MyProjectName.Blazor.csproj to

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

  <PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Blazorise.Bootstrap" Version="0.9.1.2" />
    <PackageReference Include="Blazorise.Icons.FontAwesome" Version="0.9.1.2" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.0-rc.1.20451.17" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.0-rc.1.20451.17" PrivateAssets="all" />
    <PackageReference Include="System.Net.Http.Json" Version="5.0.0-rc.1.20451.14" />
  </ItemGroup>

  <ItemGroup>
    <ProjectReference Include="E:\GitHub\abp\framework\src\Volo.Abp.Autofac.WebAssembly\Volo.Abp.Autofac.WebAssembly.csproj" />
    <ProjectReference Include="E:\GitHub\abp\framework\src\Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme\Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.csproj" />
    <ProjectReference Include="E:\GitHub\abp\modules\identity\src\Volo.Abp.Identity.Blazor\Volo.Abp.Identity.Blazor.csproj" />
    <ProjectReference Include="E:\GitHub\abp\templates\app\aspnet-core\src\MyCompanyName.MyProjectName.HttpApi.Client\MyCompanyName.MyProjectName.HttpApi.Client.csproj" />
  </ItemGroup>

</Project>

will result in

[tvddev]

@hikalkan - Great news that this is almost ready to use, should we create new questions here or in the support forum?

[hikalkan]

Published the ABP Framework & ABP Commercial 3.2.0-rc.1, so you can try the Blazor UI now: https://blog.abp.io/abp/ABP-Framework-ABP-Commercial-3.2-RC-With-The-New-Blazor-UI

Blazor UI with this release is experimental, we are completing the features.

I am currently updating the application development tutorial to support the Blazor UI.

@Xeevis,

I really want to move to .NET 5 and develop the Blazor UI based on it. However, this means a major version change for the ABP Framework and we have already scheduled it (see https://github.com/abpframework/abp/milestones).

Current milestone is 3.3 (in progress, finishes on October 15) and the next milesone is 4.0. We will upgrade to .NET 5 with the 4.0.

So, a little more patient, we are working hard for this :)

@tvddev,

if you are using the ABP Commercial, please ask on the support web site.

Thanks.

[hikalkan]

For anyone didn't heard yet, @stsrki, the creator of the Blazorise, is joining to the core ABP Framework team in the next weeks: https://twitter.com/MladenMacanovic/status/1306878684251422720
I believe that we will do great things for the Blazor UI with the help of him :)

[wocar]

Wow thats great news. I have a question. The default template will target server side blazor or webassembly?
I ask this because as of now, some of my apps are a hybrid between razor pages and blazor server side.

Thanks and great job!

[hikalkan]

@wocar we are more focused on the webassembly at the beginning. So, default template is webassembly.

[xdmushui]

https://github.com/FlorianRappl/microfrontends-with-blazor-demos
https://github.com/FlorianRappl/Piral.Blazor

I like "Microfrontends": https://micro-frontends.org/
It would be exciting if Blazor were microfronted.

[hikalkan]

Getting started & Web Application Development tutorials are updated for the Blazor UI:

• Getting started with Blazor: https://docs.abp.io/en/abp/3.2/Getting-Started?UI=Blazor
• Web application development with Blazor: https://docs.abp.io/en/abp/3.2/Tutorials/Part-1?UI=Blazor

Also, just released the v3.2.0-rc.2.

[274188A]

this comment by Steve Sanderson is worth a read: dotnet/aspnetcore#24599 (comment)

[aicreed]

I've just been giving the ABP Book example stuff a go and I'm running into an odd issue when trying to edit a Book.
System.Object -> AbpBlazorTest.Books.CreateUpdateBookDto AutoMapper.AutoMapperMappingException: Missing type map configuration or unsupported mapping.

Adding a mapping configuration for object --> CreateUpdateBookDto works but this can't be correct can it? I suspect there's something else not working here.

Also after adding the mapping I can edit the Book but the data is not automatically populated in the modal.

[aicreed]

The error message I'm getting is before mapping it to an object. Adding a mapping configuration to System.Object resolves the error.
Must be something else wrong here as I don't see why CreateUpdateBookDto needs a map to object in the first place?

[aicreed]

I managed to get the above resolved, as it turns out I also needed to specify the mapping configuration in the Blazor client itself.

I'm now getting a different issue trying to build the client in release mode:

Blazor.MonoRuntime.targets(326, 5): Unhandled exception. Mono.Linker.MarkException: Error processing method: 'System.Void System.Runtime.CompilerServices.SuppressIldasmAttribute::.ctor()' in assembly: 'Volo.Saas.Host.HttpApi.Client.dll'

I only get this when compiling in Release mode, has anyone else tried this and know if it works? Thanks.

[hikalkan]

@aicreed this is the AutoMapper configuration you need to do: https://docs.abp.io/en/abp/3.2/Tutorials/Part-3?UI=Blazor&DB=EF#automapper-configuration

using Acme.BookStore.Books;
using AutoMapper;

namespace Acme.BookStore.Blazor
{
    public class BookStoreBlazorAutoMapperProfile : Profile
    {
        public BookStoreBlazorAutoMapperProfile()
        {
            CreateMap<BookDto, CreateUpdateBookDto>();
        }
    }
}

The "release mode" error can be related to tree shaking:

The .NET IL linker (originally based on the Mono linker) does static analysis to figure out which parts of .NET assemblies can ever get called by your app, then it strips out everything else.
This is equivalent to tree shaking in JavaScript, except the IL linker is much more fine-grained, operating at the level of individual methods. This removes all the system library code you’re not using and makes a huge difference in typical cases, often cutting out another 70+% of the remaining app size.

https://blog.stevensanderson.com/2018/02/06/blazor-intro/

ABP uses dynamic proxying and some reflection. This can be the problem. I created an issue to work in the next milestone: #5646

Current Blazor UI is experimental, so not tested on release mode yet.

[danielmeza]

@hikalkan may be the solution should be to use Source Generators to create dynamic proxies. More info here and here.

Source generators not only can solve the problem but also will made much faster the execution and the proxy can be used in any c# cliente, like a xamarin, windows or linux application.

[hikalkan]

We are following the source generators. However, it is early to decide.

[danielmeza]

We are following the source generators. However, it is early to decide.

Grate!
Are we waiting to that feature to stay? Or checking if all expected features can't be archive at compile time?

[SuriyaArul]

Hi @hitaspdotnet , I have downloaded ABP.IO project with Angular UI and i wrote some api's also. So, now I want to use Blazor UI in abp.io way. I have checked documentation in abp.io site, but I unable to find the solution, so plz help me out this issue. How to convert Angular UI to Blazor client without changing existing abp.io api's?

[Stirda]

@SuriyaArul ABP application services can automagically be injected in Blazor. No additional coding required in your API.

From official tutorial:

Injects the IAuthorAppService to consume the server side HTTP APIs from the UI. We can directly inject application service interfaces and use just like regular method calls by the help of Dynamic C# HTTP API Client Proxy System, which performs REST API calls for us.

[SuriyaArul]

Hi @Stirda Thanks for you message, I completely agree with your reply, But I am having ABP application with Angular UI, So I need to convert Blazor UI instead of Angular without changing Server side, Becoz I wrote around 30 api in my ABP application.

[wocar]

It is no easy task. You should do a migration plan and do it by parts. It is basically rewriting the front end

[SuriyaArul]

@wocar Thank you

[hikalkan]

Thank you all to join into this discussion. This was the most commented issue in the ABP Framework history :)

With the release of ABP 4.0 RC.1 in the next week (probably at Nov 11), we will have a production ready Blazor UI (based on the stable .NET 5.0).

So, closing this issue here. Please open new issues if you have problems or suggestions related to the Blazor UI.

Thanks again for your great attention.