Microsoft is testing tutorials in Visual Studio, starting with Blazor – Visual Studio Magazine | Hot Mobile Press


Microsoft is testing tutorials in Visual Studio, starting with Blazor

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

Starting with Blazor, the experimental tutorial functionality is accessed by downloading a special tutorial-specific Visual Studio preview build. The catch is that only 50 percent of the developers who try to download the preview IDE/tutorial pack actually get the customized build.

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

The idea is to bring all the resources associated with the normal tutorial process fully into the IDE so there are fewer things to juggle when following a website tutorial. Basically, this tutorial is presented in a new sidebar area, so instead of dealing with a localhost debugging browser tab, a tutorial website in another browser tab, and the IDE instance, the latter two are combined.

Step 4 of the tutorial: try the counter
[Click on image for larger view.] Step 4 of the tutorial: try the counter (Source: Microsoft).

So when you click a tutorial link in the new pane—for example, the program.cs file that’s in Solution Explorer—that file opens in Notepad. Developers can run and debug the app and use the usual features like hot reload.

“We’ve seen that when people are learning with many different types of resources — you’ve opened a bunch of tabs, opened a bunch of windows, you’ve opened your toolset — and so there’s a lot of context switching, and we’re in In our previous experiments, we’ve seen that users tend to perform better when everything is in one place, when they’re able to navigate smoothly from one place to another without getting distracted,” said a member of the development team, Grace Taylor, who leading the experiment.”And that’s something we’re experimenting with, something we’re trying to do, and if that goes well, hopefully we can introduce more experiences and tutorials later.”

The experimentally modified VS preview can be downloaded from the Blazor Tutorial – Build your first Blazor app website.

This reporter was lucky enough to get the special version (3.68GB download of 1,075 packages), although clicking the tutorial button that appeared when I first opened the IDE didn’t work for me (a message said that the command wasn’t available ) until I used the installer to change the preview download.

After that, it worked and the new Getting Started with Blazor tutorial window opened up on the left side of the IDE and guided me through this seven-step process:

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

For example, the instructions for step #4 (see graphic above) are:

In the running app, navigate to the Counters page by clicking the Counters tab in the sidebar on the left. The following page should then be displayed:
[image of app]

Select the Click me button to increase the count without refreshing the page. Incrementing a counter on a web page usually requires writing JavaScript, but Blazor lets you use C#.

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

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

Each time the Click me button is selected:
• The onclick event is dispatched.
• The IncrementCount method is called.
• The currentCount is incremented.
• The component is rendered to show the updated count.

For those who Not Get the special preview download, a website version of the same tutorial is available.

“This is the first experience, so if we see the test results are good, if users get good use out of it, if people tell us it’s a good experience, then we’ll make more tutorials, close it a cross-platform feature that many different teams and people can use,” said Taylor. The feedback includes a survey for users to fill out.

When I get around to providing feedback like this, I’ll mention that when I first opened it I was presented with the tutorial button in the IDE, but as I said, I had to modify the download through the installer to get the button to work. Also, the experiment had an awkward habit of leaving terminal windows open that I had to close manually. Other than that, the few things I tried worked fine.

About the author

David Ramel is an editor and writer for Converge360.

Leave a Comment