Developers
June 17, 2020

Microsoft introduces Web Live Preview

An ASP.NET service focused on helping you see your UI results while coding.
Source: Pixabay

Today we will talk about a service that Microsoft has launched. The service is for ASP.NET and it helps users view their UI In the best way yet developed.

No more hard cycles between development and running the app to see the effective changes. The normal process consists of:

  1. Developing
  2. Making a change
  3. Compiling
  4. Running the app
  5. Change it's not what you wanted
  6. Stop debugging
  7. Run the cycle again  

ASP.NET designers tend to switch from WerbForms code view to the Design view to see how the UI looks like. As modern UI frameworks evolved, more components of HTML and CSS are dependent. What does this mean? That the design view may not be reflected in the UI.  

As ASP.NET and .NET frameworks and UI libraries are one of the most popular in the world. Microsoft ships them in the same box together with Visual Studio and its corresponding templates. Microsoft always thought and worked based on that the best way to see your UI and data in your actual application.  

Microsoft recently launched its service for Visual Studio. It's an extension for the editing mode, and it's called “Web Live Preview”. You can access and download the extension in the Visual Studio Marketplace.

 

How does the extension work?

You first install the extension. Once you have it installed, in your ASP.NET web app you right-click on the option “Edit in Browser”. This launches your browser with your web app in a different mode. You will notice there are some things added to it.

Now you can select elements on the view and see what you select directly synchronized with the source. Master pages are also synchronized. So, it's not the only synchronization for the selection, but the source too. As you make changes to the source, they are reflected at the same time in the running application. There's no need to refresh webpages or save data, it occurs simultaneously.  

If you work with Razor pages, you can interact with the code, detect it, and select it. If you have a code loop, you can do modifications to it, and see it automatically reflected in the application.

This process of automation makes it highly effective for developers to not have to so a 7 step process to see how their applications are looking. It allows you to develop and test at the same time. The testing comes in the form of a working preview.  

If you currently use browser development tools, this is not something that replaces your current tools, but something that maximizes its power. The point is to increase your utility, not to replace it. Web developers usually rely on tools for browsers. This tool allows for source synchronization to any rendered app. 

For now, Microsoft supports the .NET framework. It supports projects for WebForms and MVC. Users are asking for .NET Core and Blazor support. Microsoft says that they have heard their customers and that they are currently working on expanding their offer and support. For code changes that happen outside the ASPX and Razor pages, there is no automatic reload so users have to manually reload the page.

The Web Live Preview works for Chrome and Chromium-based browsers. There is a single browser developer tool extension and it works with integration too. To use the extension, you will have to have developed mode in your browser installed, and then you can load your extension from the disk.  

There currently are 12 code editors with a Live Preview version for web development. Atom, Visual Studio Code, WebStorm, Light Table, Emacs, Geany, PyCharm, CodeLobster IDE, CodeLobster, LiveEditor, and CoffeeCup. They are all different and they all have pros and cons. Focusing on the product that we are talking about today, we can see that Visual Studio Code is cross-platform, supporting all operating systems, Windows, Mac, and Linux. Visual Studio Code is not Visual Studio. We have seen that the Web Live Preview that has been announced and launched by Microsoft, applies to Visual Studio.  

In conclusion, ASP.NET and .NET developers don't have to go through the standard process of developing, debugging, compiling, running, testing, and making changes to the User Interface again and again. Developers can now spend their time efficiently, working on their code while simultaneously seeing their UI in the running app. You can see your product while you are producing it. It may sound simple, but developers know this is a life-changer.

We can expect more companies to develop and implement this as the market always competes and improves based on product launches. The installation of the extension is easy and once installed, the use of it will simplify your development. You can check out the documentation of the release to understand fully every part of the working process. Users are asking for .NET core and Razon support, and as a good practice, Microsoft listens to its customers and is now working on it.

TagsASP.NETMicrosoft
Lucas Bonder
Technical Writer
Lucas is an Entrepreneur, Web Developer, and Article Writer about Technology.

Related Articles

Back
DevelopersJune 17, 2020
Microsoft introduces Web Live Preview
An ASP.NET service focused on helping you see your UI results while coding.

Today we will talk about a service that Microsoft has launched. The service is for ASP.NET and it helps users view their UI In the best way yet developed.

No more hard cycles between development and running the app to see the effective changes. The normal process consists of:

  1. Developing
  2. Making a change
  3. Compiling
  4. Running the app
  5. Change it's not what you wanted
  6. Stop debugging
  7. Run the cycle again  

ASP.NET designers tend to switch from WerbForms code view to the Design view to see how the UI looks like. As modern UI frameworks evolved, more components of HTML and CSS are dependent. What does this mean? That the design view may not be reflected in the UI.  

As ASP.NET and .NET frameworks and UI libraries are one of the most popular in the world. Microsoft ships them in the same box together with Visual Studio and its corresponding templates. Microsoft always thought and worked based on that the best way to see your UI and data in your actual application.  

Microsoft recently launched its service for Visual Studio. It's an extension for the editing mode, and it's called “Web Live Preview”. You can access and download the extension in the Visual Studio Marketplace.

 

How does the extension work?

You first install the extension. Once you have it installed, in your ASP.NET web app you right-click on the option “Edit in Browser”. This launches your browser with your web app in a different mode. You will notice there are some things added to it.

Now you can select elements on the view and see what you select directly synchronized with the source. Master pages are also synchronized. So, it's not the only synchronization for the selection, but the source too. As you make changes to the source, they are reflected at the same time in the running application. There's no need to refresh webpages or save data, it occurs simultaneously.  

If you work with Razor pages, you can interact with the code, detect it, and select it. If you have a code loop, you can do modifications to it, and see it automatically reflected in the application.

This process of automation makes it highly effective for developers to not have to so a 7 step process to see how their applications are looking. It allows you to develop and test at the same time. The testing comes in the form of a working preview.  

If you currently use browser development tools, this is not something that replaces your current tools, but something that maximizes its power. The point is to increase your utility, not to replace it. Web developers usually rely on tools for browsers. This tool allows for source synchronization to any rendered app. 

For now, Microsoft supports the .NET framework. It supports projects for WebForms and MVC. Users are asking for .NET Core and Blazor support. Microsoft says that they have heard their customers and that they are currently working on expanding their offer and support. For code changes that happen outside the ASPX and Razor pages, there is no automatic reload so users have to manually reload the page.

The Web Live Preview works for Chrome and Chromium-based browsers. There is a single browser developer tool extension and it works with integration too. To use the extension, you will have to have developed mode in your browser installed, and then you can load your extension from the disk.  

There currently are 12 code editors with a Live Preview version for web development. Atom, Visual Studio Code, WebStorm, Light Table, Emacs, Geany, PyCharm, CodeLobster IDE, CodeLobster, LiveEditor, and CoffeeCup. They are all different and they all have pros and cons. Focusing on the product that we are talking about today, we can see that Visual Studio Code is cross-platform, supporting all operating systems, Windows, Mac, and Linux. Visual Studio Code is not Visual Studio. We have seen that the Web Live Preview that has been announced and launched by Microsoft, applies to Visual Studio.  

In conclusion, ASP.NET and .NET developers don't have to go through the standard process of developing, debugging, compiling, running, testing, and making changes to the User Interface again and again. Developers can now spend their time efficiently, working on their code while simultaneously seeing their UI in the running app. You can see your product while you are producing it. It may sound simple, but developers know this is a life-changer.

We can expect more companies to develop and implement this as the market always competes and improves based on product launches. The installation of the extension is easy and once installed, the use of it will simplify your development. You can check out the documentation of the release to understand fully every part of the working process. Users are asking for .NET core and Razon support, and as a good practice, Microsoft listens to its customers and is now working on it.

ASP.NET
Microsoft
About the author
Lucas Bonder -Technical Writer
Lucas is an Entrepreneur, Web Developer, and Article Writer about Technology.

Related Articles