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

[hikalkan]

Sure, you can do it. It is appreciated if anyone creates an article / medium post about it :)

[vnetonline]

I am also very interested in creating a SPA using Blazor Server Side have been playing with Blazor in Preview 9 and it is really cool in a way it reminds me of the old ASP.NET 1.0 days.

I have made some progress just need to work out how to use OAuth and get a token from ABP I have tried using connect/token but it is not working for me

Any ideas which oAuth library I should use ?

[hikalkan]

@mehmet-erim which library you've used for the Angular UI?

[mehmet-erim]

We have used angular-oauth2-oidc

[bkv143]

+1 for Blazor SPA template

[KevinFarrow]

Some interesting sessions at the .Net Conf. next week (as well as the official release of Core 3.0) https://www.dotnetconf.net/

Day 1: Building Full-stack C# Web Apps with Blazor in .NET Core 3.0 - 12:30 (PDT) | 19:30 (UTC)

Day 2: The Future of Blazor on the Client - 09:30 (PDT) \ 16:30 (UTC) Day 2: Blazor and Azure Functions for Serverless Websites - 10:00 (PDT) \ 17:00 (UTC) Day 2: An Introduction to GraphQL in .NET Core - 20:00 (PDT) | 03:00 (UTC)

Day 3: ASP.NET Razor: Into the Razor'verse - 09:30 (PDT) | 16:30 (UTC)

[cld0815]

+1 for Blazor SPA template

[xandervdm]

+1 for Blazor SPA template. Don't initially need any additional theming or 3rd party templates as the main 3rd party component vendors like SyncFusion, DevExpress, Telerik, etc are building great Blazor component libraries. The main thing to get is a sample Blazor app with integrated security into ABP to use as a starting point.

[halybang]

+1 for Blazor SPA template

[hikalkan]

Thank you all. We see that there is a great demand for the Blazor startup template. 👍

[panzhu]

+1 for Blazor SPA template

[KidoPlay]

+1 for Blazor SPA template

[realZhangChi]

+1 for Blazor SPA template

[qqzhw]

+1 for Blazor SPA template

[274188A]

+1 for Blazor SPA template

[bkv143]

Any news about Blazor SPA template?

[danielmeza]

I'm waiting for this to start migrate my project!

[LavenHook]

@hikalkan - I'm starting a new project that I would like to use this framework for. One other requirement for my project is that it needs to use Blazor. It seems the logical thing to do is at least start trying to incorporate Blazor by contributing to this project. If I head down this path, I will need a lot of guidance (I'm new to this framework and Blazor). Should I just continue to use this issue to get guidance, or should we open another? Incorporating Blazor features doesn't specifically pertain to a new template.

[hikalkan]

Please open new issue(s) when you have problem on creating a Blazor UI.

[kbowma]

Any status on when we might see a Blazor template?

[LavenHook]

@kbowma, (also, @Webdiyer - RE: #1435) I do have the very early stages of a Blazor module working in my fork of the Abp repository. It's not even to a point where I feel comfortable making a pull request yet. But it is at a point where you could branch my repo, compile the Volo.Abp.AspNetCore.Blazor project, add [DependsOn(AbpAspNetCoreBlazorModule)] to get rolling with a new Blazor-Abp based project. A word of caution though: the nature of RazorPages (and therefore the Abp theming mechanisms) conflict with Blazor - haven't quite gotten this aspect figured out yet.

I would love some feedback on where to go from here. I am in the process of trying to make a reasonable project plan (and creating corresponding tasks/issues) for myself.

Right now, the broad picture is for me to get a basic theming system worked out that can be used for a turn-key site. I would like to make more configuration options available (right now, it is pretty much only capable of a standard configuration). I would like to add a custom routing engine that can be used for multi-tenancy, and route prefixes (not possible without overriding the default Blazor router, from my understanding). Ultimately, all these things need to be done before a real Blazor template can be created - which is my end goal for my fork.

Let me know what you think. For the sake of keeping this issue & repository clean, start new issues on my fork, if you have any input.

[kbowma]

Would someone from Volosoft please confirm whether or not a Blazor template will be part of the commercial version, and maintain at the same level as Angular and MVC. (if so, any indication of timing would be helpful as well)

[hikalkan]

@kbowma yes, we will work on the Blazor template. Not only for the ABP Commercial, but also for the open source side. And we will maintain as we do for all official UI options.

Time? You know this is hard to answer. I can say that we will start to work on that in the February. It will get some time because we will also develop Blazor UIs for all pre-built modules.

[leonkosak]

So, Blazor UI would be just separated projects (.csproj) inside the same solution as API (backend) and therefore would deploy separately? What about changing the hosting model (server, wasm) - official way would be relatively simple as I can see (just some configuration). Do you see that abp could add any additional complexity for some reason?

[274188A]

I suspect it's not that simple. It takes (given their limited resources) to push out a new Blazor template. Hopefully this will arrive in time for when WASM Blazor goes gets released. I've been saying from the out-set Blazor will eventually come to dominate SPA web apps - and I haven't seen a reason to change my opinion.

[bkv143]

@kbowma yes, we will work on the Blazor template. Not only for the ABP Commercial, but also for the open source side. And we will maintain as we do for all official UI options.

Time? You know this is hard to answer. I can say that we will start to work on that in the February. It will get some time because we will also develop Blazor UIs for all pre-built modules.

So, the Blazor UI development has been started? The task is not in any milestone yet and it is already March.

[ismcagdas]

Not yet

[hikalkan]

Actually, we have started to work on the gRPC integration (currently testing & creating an integration design), since we will use it with Blazor UI.

[leonkosak]

@hikalkan , @ismcagdas There is approx. 2 months till Blazor Wasm release date. I know that Blazor is one of the most desired "features", but I think that Blazor Wasm is the "mode" which are we waiting for (or most of us).

Maybe development after Blazor Wasm release is a better time to start developing Blazor UI.

[274188A]

Agree with Wasm being the best option. Don't see how starting now can be a disadvantage. The debugging is still to come for sure. The way forward is pretty clear though.

[leonkosak]

That's also true.

[xiety]

What about Blazor Server? It is very useful technology too.

[hikalkan]

I also agree that client side blazor is the real blazor :) I also agree that it is good time to start on that. I see the demand and I am also very excited to start on that.