Web Live Preview lets you amend source code at runtime
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.
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.
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.
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.
Rojenx is a leading concept artist who work appears in games and publications
Check out his personal gallery here