Microsoft is testing tutorials in Visual Studio, starting with Blazor – Visual Studio Magazine


Microsoft is testing tutorials in Visual Studio, starting with Blazor

You have a 50/50 chance of accessing a new experience from the Visual Studio development team that integrates tutorials into the IDE for an experience that combines guidance with live code.

From Blazor, the experimental tutorial feature can be accessed by downloading a special preview version of Visual Studio specific to the tutorial. The catch is that only 50% of developers who try to download the IDE preview/tutorial package will get the custom version.

The experiment was announced last month in a video by Microsoft’s James Montemagno titled “Test the new experimental Blazor INSIDE Visual Studio tutorial.”

The idea is to bring all the resources involved in the normal tutorial process completely inside the IDE so there’s less to juggle when going through a website tutorial. Basically, this tutorial is presented in a new sidebar pane, so instead of dealing with a localhost debug browser tab, a tutorial website in another browser tab, and the IDE instance, the latter two are combined .

Tutorial Step 4: Try the Counter
[Click on image for larger view.] Tutorial Step 4: Try the Counter (source: Microsoft).

So clicking a tutorial link in the new pane — to the program.cs file that resides in Solution Explorer, for example — will open that file in the editor. Developers can run and debug the app and enjoy the usual features like hot reloading.

“We’ve seen that when people are learning with a lot of different types of resources – you have a bunch of tabs open, a bunch of windows open, you have your toolset open – and so there’s a lot of change in context, and we’ve seen in our previous experiences, that users tend to do best when everything’s in one place, when you’re able to navigate from place to place seamlessly without being distracted,” said a member of the Grace Taylor development team, who’s doing the experiment.” And so it’s something that we’re experimenting with, that we’re trying out, and hopefully if it goes well, we hope we can rolling out more experiments and tutorials on the go.”

The experiment-modified VS preview can be downloaded from the “Blazor Tutorial – Build your first Blazor app” site.

This reporter was lucky enough to get the special version (3.68 GB download of 1075 packages), although clicking the tutorial button presented when first opening the IDE did not worked for me (a message said the command was not available) until I used the installer to change the preview download.

After that, it worked, and the new “Getting Started with Blazor” tutorial pane opened on the left side of the IDE and walked me through this seven-step process:

  • Step 1: Build your first web app with Blazor
  • Step 2: About your Blazor projects
  • Step 3: Run your application
  • Step 4: Try the counter
  • Step 5: Add a component
  • Step 6: Modify a component
  • Step 7: Next steps

The tips for step #4 (shown in the graphic above), for example, read as follows:

In the running application, navigate to the Counter page by clicking the Counter tab in the left sidebar. The following page should then appear:
[image of app]

Select the Click Me button to increase the number without refreshing the page. Incrementing a counter in a web page normally requires writing JavaScript, but with Blazor you can use C#.

You can find the Counter component implementation in the Counter.razor file located in the Pages directory.

A request for /counter in the browser, as specified by the @page directive at the top, causes the Counter component to render its content.

Whenever the Click Me button is selected:
• The onclick event is triggered.
• The IncrementCount method is called.
• The currentCount is incremented.
• The component is rendered to display the updated count.

For those who don’t get the special preview download, a version of the same tutorial on the website is available.

“It’s the first experience and so if we see that the results of the experience are good, if the users get good value from it, if people tell us it’s a good experience, then we will continue to create additional tutorials, making it a full platform capability that many different teams and people can take advantage of,” Taylor said. Feedback involves a survey that users can complete.

If I manage to provide such comments, I will mention that the tutorial button was presented to me in the IDE when it was first opened, but as I said, I had to change the download through the program d installation for the button to work. Also, the experiment had a bad habit of leaving terminal windows open, which I had to manually close. Other than that, the few things I tried worked well.

About the Author

David Ramel is an editor and writer for Converge360.

Comments are closed.