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 with the IDE for an experience that combines guidance with live code.
From Blazor, the experimental tutorial feature can be accessed by downloading a special Visual Studio preview version 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 “Try out 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 .
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 is 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 at “Blazor Tutorial – Build Your First Blazor App” to place.
This reporter was lucky enough to get the special version (3.68GB download of 1075 packages), although clicking the tutorial button shown when first opening the IDE didn’t work for me (a message said the command was not available) until I used the installer to modify 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 app
- Step 4: Try the meter
- 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]
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 website version of the same tutorial 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 that 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.