Introducing DotVVM Application Blocks

DotVVM was always focused on improving productivity for .NET developers who build web applications.

DotVVM 1.0 was introduced at the time of the .NET Framework and the growing popularity of client-side frameworks like Angular JS, React, and Knockout JS. DotVVM offered to build web apps with only C# and HTML knowledge. Soon after that, we released DotVVM 1.1 with support for .NET Core.

In subsequent releases, we have been adding plenty of new features. DotVVM 2.0 added static commands, which could patch parts of the viewmodel instead of sending it to the server and back. Also, REST API bindings provided a direct way to bind data on the page from any API.

DotVVM 3.0 introduced the JS directive allowing you to interact with JavaScript code easily, and in DotVVM 4.0, we added React integration which allows hosting third-party components.

Compared with client-side JavaScript frameworks, DotVVM saves significant development time. However, many users prefer Blazor, which also offers writing web apps with just C# and HTML, and offers similar simplicity and productivity.

That's why we decided to move forward and introduce an even more productive way of building modern web apps. As the blog post title suggests, the name is DotVVM Application Blocks.

Building apps from ready-made blocks

A lot of business websites and portals consist of similar parts. There is some kind of sign-in and sign-up experience. There are often lots of GridView pages with sorting and filtering capabilities. There is also plenty of forms for inserting and editing data, often with quite complex interactivity and business logic.

What if you can just use these high-level building blocks and compose your application from them?

Each application block contains not only from the presentation layer things (visual components, page templates), but it contains also business logic. The business logic contains a lot of extensibility points so you are free to change the behavior, provide your own data source, or develop a universal extension you can use on multiple pages.

It looks like a “low-code” platform, but you are still a developer using Visual Studio, C# and Git. And you are not limited by the feature set of the framework – you can always write any part of the application yourself.

List and detail page

The only thing you will need for an app using Application Blocks, is the Program.cs file. You can configure almost anything using a Fluent API syntax.

builder.AddApplicationBlocks(blocks =>
{
    // set up data-access for Order entity using Entity Framework Core
    blocks.AddEfCoreDataSource<AppDbContext, Order>();

    // use an application template based on Bootstrap
    blocks.UseBootstrap5Template();

    // register pages
    blocks
        .AddListPage<OrderListModel, Order>(page =>
        {
            page.BeginPageExtensions.AddFullTextSearch();
        })
        .AddDetailPage<OrderDetailModel, Order>(page =>
        {
            page.UseLayout(layout => layout.Columns(
                layout.Form(m => m.Name, m => m.Price),
                layout.Form(m => m.DepartmentId)
            ));
        });
});

You can see that the code installed data-source for the Order entity – it is using Entity Framework Core in the background, but the infrastructure allows us to build providers for other data source as well. We plan to introduce a provider for Azure Cosmos DB, Mongo DB and Marten.

You can see that the page template is also customizable. We plan to ship Bootstrap 5 and DotVVM Business Pack templates, but you’ll be able to change or build the templates to your own preference.

Finally, the code registers a list page and a detail page. The list page renders a GridView with sorting, and we configure it to add a full-text search extension. It will take all string fields in the GridView and allow searching on them.

The detail page defines a two-columns layout and lists which fields should be in which column. There will be more ways to do this, using DotVVM Auto UI and annotation attributes.

You can see that each page also has its own model – OrderListModel and OrderDetailModel. That’s because each of the pages may need slightly different fields with different configuration. The framework will provide an automatic way how to map the Order entity to these models, also with an.

Dashboard with tiles

Another common requirement is to be able to quickly define dashboards with aggregated values and charts. This API will contain many extensibility points, and of course building your own tiles would be supported. However, for creating a quick aggregations for total values, or values filtered by some period of time, this can save a lot of time.

blocks
    .AddDashboardPage(page =>
    {
        // total price of all orders
        page.Tiles.AddValueTile<Order>(LocalizableString.Constant("Orders"), 
                o => (double)o.Price);

        // chart total price of orders by department
        page.Tiles.AddChartTile<Order, string>(LocalizableString.Constant("Departments"), 
                o => (double)o.Price, o => o.Department.Name)
    })

Menu and navigation

All pages will be automatically registered in DotVVM route table. The Application Blocks templates will provide their own master pages which will render the entire menu.

Extensibility

Each type of page will provide placeholders where you can place “extensions”. You can image an extension as a markup control which can communicate with the page viewmodel and respond to its events.

In our prototype, we have implemented the FullTextSearch extension which you can add to a list page and it can modify the filters before the data is loaded. Similarly, we’ll have extensions that can be added on detail pages – e. g. comments section, tags, uploading attachments, browsing the history of changes, and more.

Sign up for a early preview

We plan to launch an early preview during February. If you are interested, sign up for an early access. We are looking forward to share more info with you in the upcoming weeks, and thrilled to hear your feedback.