Thank you for participating in this prototype customer study. This study will require you to download a Visual Studio solution, open it and following the guide below. Each step in the guide will have some set questions associated with them in an associated survey. The guide should take about 30 minutes.
If you have any questions at all during this guide please email Gabrielle at [email protected]
Please note: you will not need to actually code (unless you want to)
This prototype is NOT a guaranteed feature/change. We are using this customer study to see how changes shown in this prototype may help the JavaScript/TypeScript experience.
You will need the following
- Visual Studio 2017/2019
- Node.js Development Workload for Visual Studio
- NPM Task Runner Extension
- This folder downloaded and unzipped locally
- This form open as you go along
Imagine that you are creating a new .NET Core + Angular project in Visual Studio.
You would do File, New, Project, .NET Core Web App
and then Select Angular
Imagine when you hit Create, you now have a different experience then what you are used to. (This is where the prototype guide will begin)
Before starting this step please make sure you have the Node.js Development Workload for Visual Studio
Open up the downloaded folder and select the Experiment.sln file to open up the prototype.
When Visual Studio opens up you should see the following in the solution explorer:
Take this time to explore the solution, open any file you choose and even run the project if you would like. (But dont click around too much. Don't want to ruin the rest of the study)
Please respond to question 1 of the .NET Core + JS/TS ProtoType Customer Study form with as much detail as possible.
Try to include: what differences you see in this new experience, what was the first thing you noticed, what do you not like about it so far.. and etc
If you open up the ExperimentTS project, you will see the following icon:
Before you click the arrow please answer 2b of the form on what you think the icon is used for. When you open it up, is it what you were expecting?
Next right click the npm icon, you should see the following menu:
Before you click the arrow please answer 2c of the form on what you are expecting from each menu item.
Select Install New npm packages. You should see the following:
Please search for any npm package. Click around and check out the different features of the search window. If you can't think of one.. search for import-local. Once you select one (and you are done exploring), press Install Package and then Close.
Next open your package.json file. And then open your output window and make sure it is set to NPM. You should see the NPM install command running.
Once it is complete, your package.json should include the newly installed package.
Please make sure to respond to question 2a-c of the .NET Core + JS/TS ProtoType Customer Study form with as much detail as possible.
Try to include: what differences you see in this new experience, what you would change about this experience, and etc
Before starting this step, make sure you have the NPM Task Runner Extension installed
You should still have your package.json file open. Lets focus on the scripts object:
Before we continue, please answer question 3a on the question form.
Next open the NPM Task Runner Extension:
You should then see the following:
Before we continue, please answer question 3b on the question form, with your expectations on this experience
Now select the Solution 'Experiment' dropdown and choose ExperimentTS. Please take note of what differences do you notice?
Next double click on the lint command
Next we are going to edit the scripts object in the package.json. After the e2e command add the following:
"testNPM": "npm install"
Be sure to save the package.json file and then look back at the NPM Task Runner Explorer Extension. What do you notice?
Please answer question 3c on the question form, on how you felt about this experience and what you would like to see different and etc
In the Experiment project, open the WeatherForecastController.cs in the Controllers folder.
Take some time to read through the code to understand what its functionality is. Set a breakpoint on line 39
We set this breakpoint so you can get view the random values that will be displayed on the site.
The Experiment project should be set as the startup project. Start the project with debugging and when the breakpoints hit, continue through them but make sure you still have the values available to see:
You see matching values from the backend and the frontend.
To get more of an understanding of how the backend and the frontend projects are connected, take a look at the following files:
- Startup.cs (in Experiment)
- Weather.service.ts (in ExperimentTS)
This is the end of the prototype guide, but feel free to click around and play around with the code more. There are 4 more questions left on the form, please use this time to give us as much detail as possible on your experience.
The JavaScript/TypeScript tools team would like to thank you so much for giving us your thoughts and opinions.
If you have any other questions, feedback or suggestions about the prototype, please email our Program Manager, Gabrielle at [email protected]