Building desktop applications with C# and WPF is still a rich and active area of development, but if you're looking to the future of either a current project or a new endeavor, you need to evaluate what web development tools, languages, and frameworks are the right investment. Migrating from a desktop development environment to a web development toolset is a decision that requires, among other things, planning, retooling and rethinking, and potentially adding or training staff.
In some cases, you may be able to leverage existing code and knowledge for future development. It may make more sense to start over with HTML, CSS and JavaScript. In this article, we'll take a look at the pros and cons of embracing web technologies and introduce you to some of the modern libraries and frameworks that may help you along the way.
Advantages of JavaScript and HTML
There are many advantages to adopting a web development environment. First, the user doesn't have to download anything. This is one of the most appealing features of a web application. If designed correctly, websites can be built to be mobile compatible — compatible for just about any operating system or device. This eliminates the need to write a separate platform-specific applications.
Compatibility across desktop, mobile and different operating systems can greatly reduce the development cost of an application. As I'll explain in more depth later, current web development tools and frameworks offer real opportunities for code-once, run everywhere scenarios.
With web apps, you get centralized updates. Rather than having to distribute updates individually to all users of a desktop application, or include some kind of auto-updating process, a web app typically offers a centralized point of update — the web server itself — for both the front-end user interface (UI) and the back-end business logic. That means easier incremental updates, too. Updating a desktop application, even for a small bug fix, often requires updating the entire application or, at best, providing a patch.
Adopting web development practices sometimes results in a cleaner architecture, as the UI elements (view, view controller, and view model) are typically implemented on the client- side while the business model, data persistence and other logic are implemented on the back end. This enforces a certain architectural discipline.
Perhaps most importantly, modern web apps offer an enormous array of capabilities. These aren't static web pages anymore. HTML5 — or perhaps more accurately, W3C standards implemented by most modern browser releases — offers some fairly sophisticated capabilities right out of the box including rendering a wide range of video, audio and image media, geolocation, Scalable Vector Graphics (SVG), offline events and data persistence, websockets and more. The ability to plug in functionality via HTML elements, components, or even scripts that call out to external APIs and services makes almost any capability available to your web app.
Migrating from C# or WPF to JavaScript: First Considerations
Keep in mind that it's not all a trip down easy street. I'd be doing you a disservice if I didn't discuss a few points on the potential challenges of moving to a web app paradigm for development.
The problem you're likely to run into first is that there are many different web frameworks and architectures to choose from. New flavor-of-the-moment frameworks are constantly being introduced. Many are open-source, and many also see regular updates, bug fixes, and new versions. It's important to make sure your framework of choice is actively supported. It's also important to know whether version upgrades have introduced breaking changes and how the vendor or development community has communicated and supported those changes.
The richness you may have come to expect of Windows Forms and WPF controls may seem somewhat lacking. On the other hand, there are many vendors of web controls you can take advantage of, as well as excellent interface building tools in some of the frameworks. And experienced web designers will tell you just about anything is possible with some thoughtful use of HTML5, CSS, and JavaScript.
Interfacing with the hardware layer offers some complications, but is not impossible. For user security, browsers make access to some local hardware resources dependent on user settings, and other resources are off limits entirely. There are, however, development frameworks that let you write native applications that have full access to local hardware, storage, GPUs and so on.
Connectivity is probably a significant concern. If the server goes down, or the Internet itself, your web app doesn't work, right? We've all experienced this! Bandwidth can be an issue. It takes planning and monitoring to ensure that web page and data rendering is fast. Data compression, streaming, and local caching/storage are some tools to reduce the amount of data that must be sent down to the client. And then there are Denial of Service (DOS) attacks (and other hacking attempts) that can cripple a website and compromise its security and, therefore, the privacy of your user's data.
However, using web development techniques doesn't mean you're limited to client-server web app interactions. With a little HTML5 and JavaScript, any web page can do quite a bit in the local browser and only needs external connectivity to access remote resources. To be fair, most desktop and mobile applications need access to remote resources like shared files, messages and databases to be useful. Monolithic local applications are more the exception than the rule today.
More importantly, some frameworks I'll discuss later, you can use HTML, CSS, and JavaScript to build native desktop and mobile applications. So moving some of your expertise into the direction of web app pays a dividend in flexibility, letting you build web apps, desktop apps, mobile apps, back-end services and more, all with the same languages and tools.
A Breakdown of Web Frameworks and Architectures
For teams considering moving from development with C# and WPF to a more web-centric environment, you don't have to throw out years of experience and code. Instead, using some relatively new but battle-proven web frameworks, you can bring your existing .NET Framework skillset into the web app world.
Angular
Angular is a TypeScript-based web application framework. One of the advantages of Angular and TypeScript is a rich object-oriented language syntax that is converted into JavaScript. Visual Studio natively supports TypeScript and offers built-in integration with Angular so that you're debugging code directly in TypeScript: breakpoints, inspect variables, and so on. Angular is also an excellent cross-platform development environment for developing desktop and mobile applications.
Angular encourages a component-based architecture, separating the UI from the model and controller. Furthermore, while Javascript is an "untyped" language, TypeScript is a strongly-typed superset of Javascript, adding syntactical benefits and compile-time type checking. This significantly improves development time, as you don't have to run the application to discover type conversion bugs, misspelled function and variable names, and so forth. Here, we have a complete Angular roadmap.
You can find JavaScript UI controls that integrate directly into Angular (as well as React, and Vue).
React
React is a popular JavaScript library primarily focused on tooling that helps you build web user interfaces. Helper frameworks such as ReactJS.NET and Bridge.NET let you write your app in good old C#. ReactJS.NET focuses on support for React in ASP.NET Core and ASP.NET MVC development. Bridge.NET operates more as a C# to JavaScript transpiler with C# integrations for popular JavaScript libraries (including React, Angular, and others).
Razor Components
Another useful set of technologies includes Razor components and the Blazor framework for single-page web apps.
Razor is a markup language that integrates with ASP.NET to create dynamic web pages in C# or VB.NET. You effectively write HTML and Javascript with <%= and %> markup tags to incorporate back-end function calls and data binding before the page is rendered, hence the term "dynamic web page." Each web page is actually converted into C# code with string writes that gets compiled and executed at runtime to emit the HTML for the current state of the webapp. Caching ensures that not every web page view requires a full recompile -- only when the Razor file changes does the page recompile.
With Razor, you are still implementing client-side logic in JavaScript. However, because the page is dynamically rendered, it is delivered with the data acquired from the back-end at the time it is compiled. This often eliminates the need to make separate client-side AJAX calls to request the data from the back-end that is to be rendered with HTML and CSS on the front-end.
Blazor
Blazor takes this one step further -- as a feature of ASP.NET, you can write web apps in C# and Visual Basic, sharing code and libraries (with limitations) between the client and server. Under the hood, Blazor leverages WebAssembly, a binary instruction format virtual machine, to create a client-side .NET / C# environment. C# or Visual Basic code is compiled into normal .NET assemblies, downloaded and executed in a web browser using the WebAssembly-based .NET runtime.
There are performance considerations — while the .NET runtime is compiled into WebAssembly, your application assemblies are not — they are interpreted, not compiled, at runtime on the client side. This can easily result in performance issues. A pre-compile step into WebAssembly may be developed in the future.
One of the interesting things about Blazor is the ability to configure it to use SignalR, a real-time messaging framework, to communicate between the client and server. Client-side UI events are actually sent back to the server, processed, and data changes are sent back to the client and merged into the DOM to update the UI.
Xamarin is another toolset that developers often associate with cross-platform mobile development, but actually supports a much larger world of potential application platforms. Originally Xamarin was created for writing native Android, iOS, and Windows apps with C# and the .NET Framework. As the toolset has matured, however, it's become possible to write Xamarin-based apps for Mac and even the web.
Embracing HTML, CSS, and JavaScript
If you're starting a greenfield development project or porting a desktop application where little code reuse is possible, it may be a good time to consider embracing the web development stack.
Technically, you can think of HTML, CSS, and JavaScript as a "cross-platform" development environment since platform neutrality is built into web development by its very nature. Not all browsers (or browser versions) support all the latest HTML, CSS and JavaScript features, but the ability to write a web front end just once and have it work on different browsers and operating systems greatly reduce development and maintenance costs.
On top of that, JavaScript has grown up beyond a simple scripting language for web pages. Along with the Node.js runtime environment, JavaScript is becoming a first-class language supported for use in microservices and cloud functions, server-side development, desktop scripting and even mobile app development. A little skill with JavaScript can spread across a large number of potential projects.
The simplest version of embracing the web development stack is, of course, a web site. Many new businesses and services are built as web sites today, from shopping to social media to banking and employee benefits. Whether you develop a site using one of the C#-based solutions mentioned earlier or just jump into HTML, CSS and JavaScript directly, it may be the only app you end up needing to build and maintain.
Webview Apps
Webview apps are a hybrid between a native application and a pure browser-based web app. A webview looks like a native app, but it's just a browser with no interface of its own, running natively on the platform, using a web site as its actual interface. This gives you the advantage of using Javascript, HTML, and CSS for rendering the "application," but also interfacing with the native OS.
For example, Google's Chromium provides a bare-bones browser environment. You can easily interface with the web application running in the Chromium browser, executing Javascript code and responding to events fired by the Javascript code. A webview also lends itself well to test automation, as it can directly control the HTML elements -- inner text, class tags, styling, and so on.
Another advantage of a webview is that the application can easily run offline (assuming you don't have other constraints such as cloud-based databases). As an application, the webview can provide all the scripts necessary to run the application. This also significantly reduces load times. A webview application can synchronize the scripts with a server as necessary.
Electron makes the webview concept a turnkey solution. Electron is essentially an embedded web context within the browser that lets you embed remote web applications. And we've come full circle: you can deploy a native desktop application, even through an app store, but under the hood it's just a web app written in HTML, CSS, and JavaScript.
Migrating from Desktop Development with C# and WPF to Web
If you're thinking of moving from traditional desktop app development with C# and WPF to a web development paradigm, there are many options, frameworks and tools to choose from ... and it seems like more arrive every day. Evaluating these options is a difficult process.
Starting from "where you are" with a desktop application is probably the best way to figure out "where you want to go." Particularly when considering migrating a desktop application to a web app, it's better to focus on your existing desktop application requirements first and then decide what web technologies best meet those requirements.
On the other hand, if you're starting from scratch on a new codebase, take a close look at whether investing in the web development stack — HTML, CSS, and JavaScript — can pay dividends down the road.
If you are considering this migration, you can future-proof your apps with cross-platform UI controls with a toolkit of fast, flexible UI controls for JavaScript, .NET, and Xamarin.
If you have any questions, please leave it in the thread below!
GrapeCity Blogs
Try Our JavaScript Developer Tools
MESCIUS Resources
Marc Clifton