DevExpress UI for Blazor / Razor Components - Free Early Access Preview

02 April 2019

I'm sure you are aware of Microsoft's recent advances for Visual Studio, .NET Core, and their new efforts in creating/deploying/using web applications. Along with these accomplishments -- and also to give our ASP.NET team something else to do! -- we are releasing a set of seven native components to help you build rich browser-based UI using Razor Components and Blazor.

Blazor? Razor Components?

Let's take a quick detour to understand what these technologies are, and how they could help you, and why we decided to create this new suite.

Firstly, though, let's quickly talk about developing client-side web apps. Traditionally, this meant you could only use JavaScript. In fact, you needed JavaScript to do anything on the client-side.

With Blazor / Razor Components you can now write rich interactive client-side web UI using .NET! This means you can write client-side web apps using C# and Razor syntax with .NET assemblies. In fact, the name comes from combining Browser + Razor = Blazor.

Let's take a look at how Blazor works.

Blazor - a client-side framework

This is a fairly new framework that Microsoft created with an open-source product called WebAssembly. WebAssembly? To quote Mozilla, WebAssembly...

...is a low-level assembly-like language with a compact binary format (Wasm) that runs with near-native performance and provides languages such as C/C++ and Rust with a compilation target so that they can run on the web. It is also designed to run alongside JavaScript, allowing both to work together.

What Microsoft did with Blazor is to run .NET code, using Mono compiled under WebAssembly, into Wasm code that could execute in the browser.

Microsoft's Blazor documentation has a good breakdown of what occurs when a Blazor app is built and run in a browser:

  • C# code files and Razor files are compiled into .NET assemblies.
  • The assemblies and the .NET runtime are downloaded to the browser.
  • Blazor bootstraps the .NET runtime and configures the runtime to load the assemblies for the app. Document Object Model (DOM) manipulation and browser API calls are handled by the Blazor runtime via JavaScript interop.


Image by Daniel Roth, Microsoft Docs

Now you know how Blazor works in the browser, let's take a look at what Blazor is...

Blazor is a single-page app framework for building interactive client-side Web apps with .NET. Blazor uses open web standards without plugins or code transpilation. Blazor works in all modern web browsers, including mobile browsers. -Microsoft Docs

What benefits does this give you?

  • You don't need to use JavaScript to create the UI for your single-page application (SPA). You can write everything in C# or VB.
  • Blazor apps running on WebAssembly render client-side and you also have access to the .NET ecosystem.
  • You can share the server-side and client-side logic. Full-stack development, in other words.
  • Since it's all .NET, all the time, you can rely on its performance, reliability, and security.
  • You're using Visual Studio 2019 for development.

It does have some downsides, though:

  • Debugging is a pain. Remember: what's executing in the browser is Wasm code, not C#, not JavaScript.
  • Download times: you get the runtime as WASM, but most of your app is downloaded as normal .NET assemblies
  • Currently, Microsoft describe it as "experimental".

While Blazor on the client-side is still an experimental project, Microsoft has been shipping a steady stream of updates, so hopefully the experimental label will be gone soon. They're actively working to improve the downsides too and we look forward these updates.

Razor Components

Now a quick word about Razor Components:

A Razor Component is a piece of UI, such as a page, dialog, or data entry form. Components handle user events and define flexible UI rendering logic. Components can be nested and reused. Components are .NET classes built into .NET assemblies that can be shared and distributed as NuGet packages. The class can either be written in the form of a Razor markup page (.cshtml) or as a C# class (.cs). -Microsoft Docs

If you've used Angular or React, then you're familiar with the concept of everything in the UI being a component. Razor Components behave the same way. This component model gives you more control over how you build and control your UI.

Razor Components are what you use to create Blazor apps. One key advantage of Razor Components is they can be used either on the client-side or server-side!

Server-side Blazor

The benefits of Blazor in the browser are significant, but problematic. So, to address the problems, Microsoft introduced what might be called "server-side Blazor". In short, the UI is hosted and rendered on the server and then sent to the client (and updated) via SignalR over a real-time connection, a web socket. In other words, all of the benefits I just mentioned, with none of the issues. All C# and Razor syntax, and no need for JavaScript.


Image by Daniel Roth, Microsoft Docs

What benefits does this give you?

  • Faster app startup
  • Runs on .NET Core (fast, not limited by WebAssembly or browser sandbox)
  • Simpler for some scenarios

It does have some downsides, though:

  • Requires a connection (no offline)
  • Latency
  • Requires more server resources

However, Microsoft is actively updating Blazor on their GitHub repo and we look forward to see this new technology develops in the coming months.

DevExpress UI for Blazor / Razor Components

To celebrate this new technology, we have designed and created a new suite of Razor Components for Blazor. Best of all, these new components will work for both client and server side Blazor!

The controls are native for Blazor and newly created by our ASP.NET developers. The same devs who have built our excellent ASP.NET controls.

We are releasing them as a free "early access" preview through Nuget. There are seven components so far: a Grid (of course!), a Pivot Grid, and various editors (a Combo Box, a Spin Edit, a Date Edit, Text Box, and Pager) that can be used within the grid.

The grid is the most complete: it provides data binding, editing, paging, filtering, row selection, some pre-defined column types, and the use of templates.

In fact, the data binding supports component parameters, which bind a property values across components.

There are a couple of events for editing too:

namespace DevExpress.Blazor {
    public class DxDataGrid {
        [Parameter] internal RenderFragment ChildContent { get; set; }
        [Parameter] IEnumerable<T> Data { get; set; }
        [Parameter] protected bool ShowColumnHeaders { get; set; } = true;
        [Parameter] protected bool ShowFilterRow { get; set; } = true;
        [Parameter] protected bool ShowPager { get; set; } = true;
        [Parameter] protected bool AllowRowSelection { get; set; } = true;
        [Parameter] protected int PageSize { get; set; }
        [Parameter] Action<T> SelectedItemChanged { get; set; }
        [Parameter] T SelectedDataItem { get; set; }
        [Parameter] Action<T> RowRemoving { get; set; }
        [Parameter] Action<T, Dictionary<string, object>> RowUpdating { get; set; }
        [Parameter] Action<Dictionary<string, object>> RowInserting { get; set; }
    }
...

Obviously we have plans for more components and more functionality, and I'll talk about this in a moment.

Download the preview from NuGet

If you wish to test the DevExpress UI for Blazor / Razor Components, download the DevExpress.RazorComponents.nupkg from the DevExpress NuGet Early Access feed:

https://nuget.devexpress.com/early-access/api

Once you've added this feed to Visual Studio 2019, you'll see the DevExpress.RazorComponents package:

This preview is made available under the DevExpress Preview end-user license. To gain access to the build free of charge, you will need a DevExpress.com account. You can either create a free account to test our NuGet package or you can get a free 30-day trial of all our controls.

Demo

Experience the DevExpress Razor Components online here:

https://demos.devexpress.com/razor-components/

Get Started

We've created a guide to help you learn how to create a new project and use DevExpress UI for Blazor / Razor Components:

https://github.com/DevExpress/RazorComponents/

Watch Training Videos

We've prepared four excellent getting-started videos to help you learn Blazor:

  1. Getting Started
  2. Component Structure
  3. Dependency Injection & Data Access
  4. JavaScript Interop

Plans

First, these preview components will be further developed with new features and functionality. Obviously, as Microsoft releases updates to .NET Core, so shall we.

Second, although we have many plans for more components within this new ecosystem, as with all of our future projects we rely on feedback from you, our customers, on what we should be looking at and considering. Send us emails, open up support tickets, let us know.

Along those lines, please take a moment to complete this short survey:

Thanks!

31 comment(s)
Customer37575

It looks like an April Fool's joke. Completely unexpected announcement, you said that you are just looking closely.

1) Is Blazor ready to use in production?

2) Are you really going to regularly develop your own set of components?

3) Which line of components do you plan to release?

4) What is the basis? (DevExtreme or something else?)

5) In which version can we expect the first option - 19.1 or 19.2?

6) Why, then, did you decide to do XAF SPA at React, rather than using Blazor?

2 April, 2019
Ray Navasarkian (DevExpress)

April fools was yesterday. :-)

1) You'll have to direct this question to Microsoft.

2) That's our plan but the marketplace will ultimately decide.

3) Good question - we've just released 3...let's see how things go from here...

4) Right now it's free. If we ever sell a bundle, it will be included it in our ASP.NET Subscription.

5) This depends on Microsoft.

6) At the time, Blazor was but a glimmer in our eye.

2 April, 2019
Customer37575

Or maybe it's not too late about XAF SPA? Discuss with Denis, because the SPA has not yet been released to sail. Suddenly Blazor is a silver bullet. Yes, in DevExtreme there is a stable set of components, but at first XAF SPA doesn't need much IMHO.

Personally for me (as a .NET developer), JavaScript / TypeScript causes pain and suffering. I want a warm typed world.

More questions and suggestions:

1) Should we expect more new components for the Blazor in the near future?

2) Need grouping in Grid

3) Of the components, a component is really needed for building forms (analogue of LayoutControl and FormLayout). It is also desirable with validation)

4) The demo is loaded instantly, no brakes .. Is it really going to be everywhere? Everything that I tried before caused suffering and pain.

As for the Free Blazor Training Course, I will express the opinion of a Russian person - it is hard to listen, read the text as if a robot. Video is preferable for reviews IMHO. Text articles would be much better.

2 April, 2019
Vladislav Kiselev

It looks like a port of bootstrap components and looks ugly.

We expect to have something rich and powerful like DevExtreme for Blazor platform.

2 April, 2019
Fredy Wenger

What about SEO support (I don't have seen any statement to SEO yet)?

What about responsive design ans mobile support?

Can CSS and bootstrap still be used oder not?

2 April, 2019
Cory Crooks

This is fantastic! Kudos!

2 April, 2019
Mehul Harry (DevExpress)

@Vladislav, It is not a port but these are new components. If you prefer DevExtreme, you can use it with client-side technologies. However, the strength of Blazor is working with C# and .NET. UI and feature wise, the DevExtreme controls were influenced by the DevExpress ASP.NET controls. :)

2 April, 2019
Mehul Harry (DevExpress)

@Cory thanks! Test out the preview and give us your feedback too please.

@Freddy, For this preview version, we'll collect information about what features are important to our customers. Thanks for you feedback, we'll make sure to include it in our plans.

As for CSS, yes, you can still customize our Razor Components. Responsive design, Bootstrap, SEO, these are possible and I'll likely address how to do this in a future blog post and/or webinar so be sure to keep an eye on our newsletters please.

2 April, 2019
Mehul Harry (DevExpress)

@Customer37575,

I'll pass on your feedback about XAF to Dennis and let him address the plans they have. For your other questions:

1. Yes we have plans for more razor components.

2. Thanks and yes, we agree, grouping is an important feature for grids. All of our grids get this feature. ;)

3. Thanks for your feedback.

4. Can you explain a bit more about the pains please? Email me at mharry@devexpress.com, thanks.

Regarding videos text, I'll discuss it with our video team. However, I recommend you take a look at the http://blazor.net website and their docs. They are good for text based learning.

2 April, 2019
Graeme Elliott

This is great, looking forward to more controls becoming available

2 April, 2019
Anders Wang

Server-side Blazor, another kind of WebForm

2 April, 2019
Stephen J White

Wow, glad to see this announcement. This was a very good surprise. :)

I agree with Customer37575, some derivative of the Layout Control would be a great help.

Do you know if these controls will be included in the ASP.NET subscription or will they be a separate package? And how will this affect the Universal Subscribers? If it's too early to tell, I'll understand.

2 April, 2019
Mehul Harry (DevExpress)

@Stephen thanks, we'll appreciate your feedback and will count your vote for layout control (@Customer37575).

@Anders, Besides .NET and C#, why compare Blazor to WebForms (genuinely curious)?

@Grame, thanks! Test out the preview and give us your feedback too please.

2 April, 2019
Alexander Krakhotko (Xafari team)

greate!

demos.devexpress.com/.../Pager

endless scrolling on 1M+ page without COUNT()?

3 April, 2019
Ralf Grenzing

AWESOME! GREAT!

3 April, 2019
Bassam Abdelaal

Super fantastic , very excited !

i think this will have a great success

very quick response by DX , super job you did , i think this can be your most successful web package , pls continue

3 April, 2019
Piotr Stola [DevExpress MVP]

It’s great surprise and news. Early access demos looks amazing, specially grid with 1GB database connected via EF 3.0. I can’t wait to grab solution form github and get into details.

@Mehul Harry please send congratulations to team. And I hope Microsoft soon will move Blazor into Beta stage and “experimental” phrase will be removed.

3 April, 2019
Jim Foye

This is intriguing, certainly. This morning I have to go change the flowers at Silverlight's grave. Then I'll stop by the nursing home to check in on WPF. But when I get back I'll look into Blazor.

Ok, seriously, this is interesting technology, but I wish we had a crystal ball to see what where Microsoft will be on this in 10 years. I'm not worried about DevExpress, you guys are great about supporting your products. Microsoft is a different story.

3 April, 2019
jdubeau

The hamburger menu may needs a little work, but you all should not that the demo is reactive, the screens crisp and they come up fast.

It a second or two for Pivot Grid Large Data Source page.

It's not javascript it like dom replacement.

I hope the grid become as nice DevExpress other offerings.

Ignorance is bliss, but how you debug this?

3 April, 2019
Sven Glöckner 1

This is really amazing! Thanks for this great announcement!

However, I'd like to mention that they already was some effort in the community to create Blazor wrappers for DevExtreme widgets, please have a look at this project: github.com/.../BlazorDevExtreme

3 April, 2019
Alexander Bülow

Awesome! Keep up the good work!

We already moved first small parts of our application to a Client-Blazor-SPA which does business communication and data reading via SignalR. We are looking toward the development of your components. The grid is a must have component for us. Looking forward to build a informational web interface SPA by using your components.

Thank you very much! Blazor, Webassembly and the availability of powerful UI components are the key to do web developing without ugly javascript and without the need to use multiple languages. :-)

3 April, 2019
Ben_Hayat

Hello Team;

Just came across this [great] news that DevEx has formally committed to Blazor/Rzaor components; My feelings are, Blazor is the next generation of ASP.Net (replacing MVC) with two flavors, server side and client side. So, betting business on Blazor at this point seems valid and a great timing to set DevEx is one of the primary component supplier for Blazor.

Having said that, a few questions and suggestions;

a) Are you components build based on BootStrap 4.x or a propriety framework?

b) If based on BS, do your component depend on jQuery?

c) Are your components "Mobile" ready out of the box? As almost most SPA apps, are starting off being run on the Mobile screen size?

d) Ability to turn our app to PWA, is this something under the control of Microsoft or Developer Express?

e) For v1, what [business/data] related components are planned? i.e. A simple way to create a data entry form with Validation.

Thank you in advance!

..Ben

6 April, 2019
Serge S (DevExpress)

Hello @Ben_Hayat,

a) Are you components build based on BootStrap 4.x or a propriety framework?

Yes, we use Bootstrap 4.x + our additional css.

b) If based on BS, do your component depend on jQuery?

The components do not depend on jQuery.

c) Are your components "Mobile" ready out of the box?

Based on Bootstrap, the components are responsive. The components will do their best to adapt to the screen size.

d) Ability to turn our app to PWA, is this something under the control of Microsoft or Developer Express?

We ship native Blazor components. If a web application can be turned to PWA, our components neither help nor prevent you from doing so.

e) For v1, what [business/data] related components are planned? i.e. A simple way to create a data entry form with Validation.

Please refer to the first two comments here. @Ray Navasarkian has already answered this question.

9 April, 2019
Stephen J White

@Mehul Harry  My apologies, I didn't see Ray's answer about the pricing stuff. :)

One other thing I'd like to see is some kind of theme switching capability, similar to what can be implemented in your MVC and DevExtreme suite. Of course, having it work out of the box would be great. :)

9 April, 2019
Ben_Hayat

Thank you Serge for the reply.

I'm really excited with your Razor Components development.

9 April, 2019
Daniel Programer

Hi,

Are you planning on posting a roadmap in the near future? I'd like to see a comprehensive Blazor library at some point so that I can start migrating some of our WebForms applications. In my scenario, I have an immediate need for the following components.

1. Hierarchical (master-detail) grid with basic column sorting, paging and the equivalent of ASPxGridView.SettingsSearchPanel (our users find this function very useful).

2. Popup component (equivalent of ASPxPopupControl)

3. Tab component (equivalent of ASPxPageControl)

4. Menu (equivalent of ASPxMenuControl)

5. Splitter (equivalent of ASPxSplitter)

I think you should strongly consider implementing some sort of layout mechanism that would allow dynamic resizing of child components (e.g. if I set the width and height of the grid component to 100% and the parent container is resized, the grid would automatically adjust to fill in the content of the parent).

What about various themes? Honestly I'm not too impressed with the current option.

Thank you, this is great new and keep up the good work!

10 April, 2019
Ben_Hayat

Thinking out loud... As Ray used to tell me 20 years ago. :-)

Today, I was testing the "Blazor" model of this new MSFT technology and watching the network and how much stuff has to get downloaded from server to client to start the Mono VM to run in another VM (WASM). To exasperate the test, I turned off WiFi on Mobile, and it took over 1 minute for a basic demo to load. And it's all have to do with all the Mono dlls that have to load up.

There is no way an average Joe is going to wait over a minute for my app to load. Heck I will never even get him as a customer with that time.

And this brings up my comment/discussion with the smart guys from DX and their customers...

Unless MSFT does a total magic, "Blazor" will never fly. You can build a powerful Angular/React/Vue that loads up in split second, especially using lazy loading and use worker service to get data in the background.

Having said that, my question is, is the "Razor Components" model a viable alternative framework to build a real Business App for desktop & Mobile than "Blazor"?

I do like the fact many of my business logic is running on the server, close to the metal and I don't have to send load of JSON to client and then run lots client's code. Codes run on the server, user gets to see a reflection of data via SignalR. Sounds like a better alternative than Blazor.

Do you (DX and it's customers) feel this is a more solid way to follow or should I go back to building the traditional REST Service and build my client using a proven technology like Vue?

Note: I'm leaning towards Razor Components for the amount of Dev time I save.

I'd love to hear your feedback, as this was intended to shed light for all of us.

Thanks for your time.

..Ben

10 April, 2019
Mehul Harry (DevExpress)

@Daniel, thanks for your feedback. We don't have an official roadmap yet but as you know, we're committed to Blazor and we'll see how it develops as a technology which Microsoft matures and how the web developers come to adopt it with other alternatives.

@Ben, I spoke with Dan Roth, Microsoft PM for Blazor, about this and they've got some ideas around how to improve this scenario. As you know, there is nothing we can do on our side other than make our assemblies light and fast (they're pretty much are). As for adoption by web devs, this involves a crystal ball so I'll leave it alone. The technology is still new and they've some hurdles to overcome before many 'enterprises' will consider Blazor. However, it is an exciting technology for .NET web devs.

For guidance on technology, I recommend using a proven technology which has several DevExpress controls available for it. ;-)  But seriously, I'd recommend considering using the DevExtreme MVC controls for ASP.NET Core. Or our controls for React/Vue/Angular. It depends on your needs. Currently, we have *seven controls* in *preview* for Blazor. This will change in the coming months. So my advice in the future will likely change as well. Does this help?

10 April, 2019
Ben_Hayat

Thanks Mehul;

But the core of my question was something else.

The question was, Blazor (client side) needs a total re-write of the Mono without using a Mono style VM. WASM is already a VM, so our app has to run inside TWO VMs. That's the first problem. Second problem is the sheer # of .Net dlls that has to be loaded. That's not gonna fly.

Knowing this major hurdle, my question is, is the Server side (Razor Component) model a better way to build an app as it is just like MVC server side without the need of all that HTML, JS, data to travel to client in case of MVC. The network traffic is much lower with Razor than MVC.

And MSFT has indirectly said it, that Razor Components are the next generation of ASP MVC server side.

Just be clear, do you guys (DX & customers) find it that Razor Components is a better way than the old style server side code generation? (just look at each MVC page, how big it is for Mobile).

Hope I'm more clear now.

10 April, 2019
Dalibor Carapic

Is there a chance to somehow wrap devextreme components into blazor components? I would not mind writing my own wrapper components.

20 April, 2019
Mehul Harry (DevExpress)

@Dalibor, I'll write another post about how we built our new Blazor components. However, they do not wrap DevExtreme.

There was a community based project from a longtime DevExpress customer, Miha Markic:

github.com/.../BlazorDevExtreme

However, he has since retired the project. In the next blog post, I'll discuss how and why we built our controls the way we did, stay tuned. :)

23 April, 2019

Please login or register to post comments.