Microsoft Web Live Preview: Hot reload for ASP.NET web applications

New time-saving extension works only with old .NET Framework, for now

2 Reg comments Got Tips?

Microsoft has released an early version of Web Live Preview, a Visual Studio extension that enables hot reload for ASP.NET web applications.

In other words, a developer can change the source of a web page at runtime, and the web page in the browser updates without the application having to be restarted.

The issue Microsoft is trying to address is fundamental. When a developer is designing a user interface, it is handy to see some sort of preview of what that the design looks like without having to run the application. If you have to recompile and run every time, then the larger the application becomes, the bigger the delay as code is compiled, runtimes initialised and so on.

In the early days of .NET – first released in early 2002 – the company met this requirement with a framework called Web Forms, invented by Scott Guthrie (now veep of cloud and AI at Microsoft) and Mark Anders (who went on to Adobe (via Macromedia) before founding his own startup). Web Forms had a visual designer from the beginning, and made designing web pages somewhat similar to using a form designer for Windows applications. Web Forms were popular and are still widely used today, but technically it was an abstraction too far and out of step with application trends outside the Microsoft bubble.

ASP.NET MVC, first released in 2009, was a more modern framework, with better performance, amenable to unit testing, and easy to integrate with JavaScript libraries. One snag: no visual designer.

Since 2009, ASP.NET has further evolved, with a view engine called Razor, and the big open source fork called ASP.NET Core, but many of the concepts introduced with ASP.NET MVC remain. The idea of a visual designer for web pages is problematic, since much of the code is generated at runtime and responsive designs morph according to the user's device and page size.

Editing a web page at runtime

Editing a web page at runtime

Hot reload is an alternative and arguably a better one. With the newly released extension for Visual Studio 2019, there is a right-click option for a web page called Edit in browser (a misnomer since you actually edit in Visual Studio). When selected, the page opens in the web browser, and selecting an element on the page automatically navigates to the source code in Visual Studio. Editing the source also updates the page, at least some of the time. For example, adding a Bootstrap class (the default CSS library in ASP.NET MVC) to an HTML element updates the page with the new style, and even content within code loops will update automatically. Some types of edit require a browser refresh, but not a full application restart. Other changes, such as new functions or data type changes, do still require restart.

Editing a web page at runtime

Editing a web page at runtime

Microsoft has also provided a browser extension that synchronizes the updated source with the browser developer tools (Chromium-based only). This extension is not required to use the basic live preview feature.

The big disappointment in the initial preview is that only ASP.NET Framework applications (either Web Forms or ASP.NET MVC) are supported, not ASP.NET Core. Program manager Tim Heuer has said that "we know you want .NET Core and Blazor support. This is definitely on our roadmap."

Both ASP.NET MVC and .NET Framework are the old stuff heading for obsolescence so it is odd that Microsoft has shipped this feature for them first, but suggests that it is a feat easier to pull off when everything is running on Windows.

"Thank you for bringing the visual back into Visual Studio," said one comment to Heuer's post. That is overstating the case. Modern web development is a blend of HTML, CSS, JavaScript or TypeScript, and on the server, the developer's preferred language and framework, and working with all these different pieces is a challenge that Visual Studio does not always meet well.

JavaScript debugging is an issue, for example, with the option of using browser tools, which means juggling between two different debug environments, or attempting to debug the browser code in Visual Studio, which is unreliable. Still, hot reload looks like a time saver and will be welcome. ®

SUBSCRIBE TO OUR WEEKLY TECH NEWSLETTER


Biting the hand that feeds IT © 1998–2020