In case you missed it, Google won the browser wars although FireFox still nips at their heels. Most every browser now uses Chromium as the base web browser. Before this more universal approach to browsers, there were many shim libraries like jQuery that handled cross-browser capability, but now we really don't have that problem anymore; this makes front-end web development much easier for developers.

So how does this relate to desktop development and VB.NET specifically? Well as a result of Internet Explorer being dropped and Edge being Microsoft's browser, they also released a new desktop control to replace the old WebBrowser called WebView2 (documentation). What is great with the WebView2 is that not only can you send information to the browser from your application like you could in the old WebBrowser but you can send information from the browser back to your application. This means that we can display all of our UI in a WebView2 using all the niceties that front-end web development bring us, but have all of the business logic and simplicity of VB.NET.

The first thing you will need to do is install the WebView2 NuGet package, do this from your WinForm application project:
  1. From the solution explorer, right-click on your project.
  2. Click on Manage NuGet Packages.
  3. From the NuGet Package Manager, click on the Browse tab.
  4. Search for: Microsoft.Web.WebView2
  5. Install the most recent version.
  6. Build your project (Ctrl + Shift + B or Build > Build Solution).

After that the WebView2 control should show up in your toolbox and you can drag and drop the control onto a form.

I am also using Newtonsoft.Json to handle the data as JSON, follow those same steps above for the Newtonsoft.Json package.

The second thing you will need to do is essentially setup a mini web server in your desktop project. This is a major step, so I going to do my best to explain how this work.

I would suggest setting up a file structure in your project to look like this:
Code:
/
└── my-app
    ├── WebAssets
    ├── WebPages
    └── WebServer
        ├── Controllers
        └── Models
            ├── WebViewRequest.vb
            └── WebViewResponse.vb
  • WebAssets would hold things like your third party libraries (Bootstrap) or custom shared code.
  • WebPages will hold only folders and the sub-folders will hold the actual HTML, CSS, and JavaScript pages.
  • The WebServer > Controllers will have files that represent the controllers which handle things like routing.
  • The WebServer > Models hold the request and response models, essentially replicating an HTTP request/response.


Because I will be showing you how to setup this mini web server using a MVC pattern, let's assume that you have: www.something.com/Users/Index.html and www.something.com/Users/Update.html then this would live in WebPages > Users > Index.html and WebPages > Users > Update.html respectively.

Because I have already provided you with two code files, WebViewRequest.vb and WebViewResponse.vb, I will go ahead and provide you with their code:
Code:
Imports Newtonsoft.Json

Public Class WebViewRequest

    Public Property Controller As String

    Public Property Route As String

    Public Property Data As String

    Public Function GetModelFromJson(Of T)() As T
        If (String.IsNullOrWhiteSpace(Data)) Then
            Throw New ArgumentNullException(NameOf(Data))
        End If

        Dim model = JsonConvert.DeserializeObject(Of T)(Data)
        Return model
    End Function

    Public Function ToJson() As String
        Return JsonConvert.SerializeObject(Me)
    End Function

End Class
And:
Code:
Imports Newtonsoft.Json

Public Class WebViewResponse

    Public Property Status As Integer

    Public Property Body As String

    Public Shared Function BadRequestResponse(Optional message As String = "") As WebViewResponse
        Return New WebViewResponse() With {
            .Status = 400,
            .Body = message
        }
    End Function

    Public Shared Function NotFoundResponse() As WebViewResponse
        Return New WebViewResponse() With {
            .Status = 404,
            .Body = String.Empty
        }
    End Function

    Public Shared Function InternalServerErrorResponse() As WebViewResponse
        Return New WebViewResponse() With {
            .Status = 500,
            .Body = String.Empty
        }
    End Function

    Public Function ToJson() As String
        Return JsonConvert.SerializeObject(Me)
    End Function

End Class
Continued in next post...