ASP.NET Community Standup - Better Razor Editing in Visual Studio

[Music] [Music] do [Music] do [Music] [Applause] [Music] so [Music] hello welcome everyone hello hey so we uh last talked to many people from this team in november i believe um yeah it was a while back now wasn't it yeah yeah wow so and what was fun is while we were setting up allison had a blue screen [Laughter] and you know i didn't bring it up then but i may be jinxing things because i actually wore my blue screen shirt today oh my goodness oh i'm not i don't know i don't know i think allison you you have john to blame [Music] i know thank you yeah sorry about that well uh you've got a lot of cool stuff to show us i've got a bunch of community links so i'm gonna jump right to that um as always i share all these links in the chats and all the stuff so i will start by dropping the links in there and there we go and let's let's get right to them so um uh first of all this just came out this i saw jen looper just tweeted about this on friday this is cool if you're getting into web apis this is a really fun way to get started so this is actually um goes through building apis using museum apis so for instance there's the metropolitan api and um and so you know just digging through like querying pieces of art and stuff so i thought this is awesome um and we're actually looking at uh adding in so this does not have net code yet but we're gonna be adding that in over this next month so i just had to share it i thought this was fun api for everything holy cow i know i know and you know what i love about this is like there's a lot of cool apis out there and why not like learn you know how to how to do api fundamentals by actually acquiring some fun stuff and it's it's it's really pretty too so uh this is coming up this is uh we do these so we do a big.net conf in november where we announce the new stuff and then we do these throughout the year we do these focus events and so this uh focus event coming up uh we're doing a focus on this is like desktop and migration to um to net5 for windows apps so really like digging deep into what do you need to do and and focusing on migrating existing current apps to um to.net five so like wpf and windows forms so this is this is great information here for that um okay cool damian bowden uh talking about sharing asp.net uh controllers and razor pages from a separate shared project or assembly so this is just a nice technique and this is common like in in a business where you'll have like some common shared functionality um so he shows how to do that um so you know there's some some simple things just like bringing it in and injecting it but one of the cool things he shows that you need to do is actually this thing here so when you bring in a razer library you need to support pages and views um so he shows bringing that in yeah in that case the reason why we have that if i recall correctly is just because we default to blazer class libraries today where we include like dot razer files and so when you click that check box you're saying not only do i want blazer files to work i also want i can erase your files that i include and honestly this is like the bread and butter of a lot of razor development like if you've ever used a framework um or even like some sort of vendor that's offering different components or elements um they do this effectively cool and i i really love that about the ecosystem just as i'm watching you know people are building really cool components especially as you seen with blazer you know people it's very this component model makes it easy for vendors and you know community people to build out component libraries and stuff so so i love seeing that um this is neat so daniel is just building out a series um this is a whole rental car facility thing and this post is actually the first in the series because i just saw it but he's actually on step five now um so this is building out an app um and it's you know pretty full featured thing but here like this is actually what he's building too with all the azure components so authentication you know back-end all the back-end service stuff so and if we go to the current one i believe he's on on part five now so like um here's using azure service bus queue and stuff so this is really nice i love to see these kind of more full-featured things where people go really deep on something so all right we got a few blazer ones so as a reminder we do a monthly blazer show and we've got on the first one coming up in um in february we've got chris santi coming on which is cool um so normally i don't share too many blazer links throughout the throughout the rest of the month but i had some cool ones i want to show here so uh this one andrew locke has been talking about different hosting models for blazer web assembly and here he's showing hosting without an asp.net core app and um so he talked in the previous one that we featured last last show on pre-rendering and and i talked about you know how you can do that the different models here and in this post he goes through and talks in detail because blazer is just standard uh it's just web standard stuff it can be shared from anything including a static application so here he goes through and and does shows how to do that and this is a you know pretty in-depth thing um there's there's all kinds of pretty diagrams and stuff in the interest of time i'm not going to go through it in more detail than that but as always you know thanks thanks to andrew for these in-depth uh blog posts okay here's here's an interesting one from neil swimberger who i saw is on the chat hi niels um so this is a post on using yarp to work through coors issues so coors cross origin request i forget what s is is probably written there is a sharing resource sharing um so the issue you get into is security when you're requesting a resource from another domain so another um across origins right and so one neat thing with yarp and we've had the arp team on the community stand up before to talk about what they're doing but yarp is a very dot-net friendly way of creating and configuring proxies and so here he shows using yarp to proxy that so that you are simulating having the same origin so you know walking through here we've got a blazer client we also have an api back end so here he shows creating that back end and then here this is the magic creating that yarp proxy so then that yarp proxy um you know we're configuring that and pointing all the stuff together uh the reverse proxy configuration is super simple which is one of the kind of selling points here um and then you've got your your json file for configuring your routes and stuff so this is cool and then one nice thing i like that niels does here to tie it all together is using tie project tie to run it all um and then here showing that all working together so really nice post pulling a lot of the current stuff together we've got a checklist of all the cool hip new technologies we've got you know blazer and tie and yarp so well done sir all right anthony giaretti has been continuing his series on grpc this is a nice quick short tip this is a workaround to issues you'll see where grpc is only http 2 and so you can get into issues adding a service reference if you do not support both http 1 and http 2. so here visual studio 2019 only uses http 1 on service configuration and so here by supporting http one and two both visual studio and grpc are able to play happily together so that's cool that's all the community links i've got now i've got four more that you uh the the razer team have shared with me so i'm including these here and these are in this link listing so people can get to them uh first of all we've got two surveys um so we've got this one i shared uh recently um when daniel i think daniel was on the show or i don't know it was it was the last stand up maybe um but this is a of course we'll do uh dark mode and this is just some kind of how do you you know which do you prefer and now that they've run that survey for a bit there's some more updated stuff in the survey these are really quick surveys really encourage you to go through and take them and i'm just showing like clicking through a few of the things is very visual it is fun of course pick dark mode because we're not you know monsters and then um it's it's just really kind of like which do you like it's like an eye test it is which is better a or b so so there you go um these are two other things that that you folks have shared with me so this is the language server protocol or lsp as we finally call it so there's that and then a new blog post that just went out this morning from mr daniel roth and this is cataloging cataloging some improvements in the razer editor in visual studio so um this is the experimental one more specific most specifically too and like for knows for all these links we're probably gonna be referencing back to them throughout like this whole thing so i have some more context throughout as well very cool so i'll just pass over to you folks um if you wanna uh so this post i'm assuming this kind of also writes up some of the stuff you'll be talking about this morning unless you want me to kind of go through oh no yeah it writes up basically everything so um i think it's that is the paper trail for what we're probably gonna show today uh it probably even shows a little bit more than what we're gonna show today but i think that's a good place to kind of uh jump to after this um so hey john can you share my screen i will yes we have a lot of screen shared and there you go yeah razer tooling um yeah so like i decided to put this together like a slide deck or we all decided to put together a slide deck because there's a lot of us and there's a lot we want to show and so it's really hard to organize all that um in a way that is reasonable so um there's gonna be lots of demos lots of content um but in general we're always open to questions totally feel free to ask lots of questions in the chat and i saw shanji wright also mentioned say i hope a lot of this applies to non-blazer code um and it totally does um this is our intent here is to make it so from razer tooling we're not just thinking about blazer yes blazer is very very cool and it's a new thing right but we're trying to make all razor experiences better not just blazer um so it's definitely uh something that's on the top of our mind so razer tooling um i gave this little spiel in the beginning of last time i'm gonna do it again just in case if we have any new people but i'll be kind of quick um so one of our backgrounds and like some of the background on why we're even doing a brand new razor editor if you haven't experienced it already is there's lots of bugs and the pre-existing experiences so visual studio today is kind of error prone in a lot of ways we've seen lots of issues and it turns out it's actually really really hard to fix these issues that we're running into um the existing razer editor is just old technology we it was created back when razer was created years and years and years ago and it really hasn't changed all that much um and then when new platforms kind of come into the mix so vs code got created like after raise 0 was done vs or mac is a thing there's um like platforms within platforms like there's code spaces there's live share um and we keep getting more platforms but the bug count that we have is was already unmanageable as it was so now you're saying okay we gotta fix bugs for a whole bunch of different platforms it's a really hard problem so our thought was how could we fix this problem um also guess what razer actually brings in a lot of other languages so razer's typical format is what html and c-sharp right well in reality there's actually a lot more languages playing there there's the razer syntax like all the at symbols the keywords that you're used to those are going to be the razer language we have c sharp and then we have html which itself has css javascript and any other sub languages it has so in reality we're almost working with five different languages at any moment which makes our job just that much harder it's no longer oh just format the document well no you gotta format every little piece of the document and make sure every little piece of the document actually works together um then there's a question from the chat uh will a new editor be a vs aftermarket offering um i i guess is this saying will you have to pay for it if if that's the i don't know if until you get the question but if that's the question the answer is absolutely not um the goal here is to make it so that your existing razer editor is better so everything we talked about today is going to be making the existing razor editor better and kind of the path we're taking to do that um bugs magically disappear if you just restart yes yes but let's turn off and turn it back on again definitely the solution here um so uh and then lastly on top of all these platforms and subplatforms blazer blazer game in existence and just like literally just made everything even more different everything even more hard which is a good thing because we want to have a good experience but we already have a huge bug trail to maintain and we have new features we want to deliver and because we're so highly coupled to the pre-existing implementations it was really hard to do that so kind of like the existing solution this is what the editor you know today for razer and blazer um this is kind of how it all works you have all these different languages and they all depend on each of the platforms that they're kind of running on right so can you imagine trying to make it if you're trying to do vs for mac or vs code you're now trying to say i'm going to write specific code for this platform to make sure it works in a certain way and i have to fix bugs specific to that and not just for razer but for all the languages underneath it too so it's a compounding problem which um we found to be very difficult so of course in this new world if you've heard of language server specification language protocol rather um john linked to the language specification earlier and we decided to take a language server approach to this new experience that's our new solution and the intent here is can there be a standard contract for a lot of the editor interactions that you do on a daily basis um like if you have an error in your document how does it show where does it exist what type of errors can be shown like is it a warning is it a red squiggle is it not um so diagnostics is having a contract so if we can then abide by that contract and then the right-hand side here all the platforms can respect that contract ideally we should just have to implement the contract and we can work across the board now in practice it doesn't actually work as seamlessly but it removes so many of the barriers it's just an incredibly net positive win for us um so this is kind of like the what we're going to be showing and we're saying experimental editor it's one that's powered by lsp it's one that works across the board no matter the platform you're in in a consistent reasonable way um so using the new editor so what we're gonna be showing today is visual studio specifically i know in the last talk we kind of um we showed a lot of vs code but in this one we're actually really happy with what we're releasing and we'll kind of go over that a little bit and we're going to be doing visual studio specifically so if you go to visual studio you can try out the brand new editor by going tools and this might be hard to see but tools options there's a preview features thing under environment here and then there is an enable experimental razer editor checkbox let's see if i can zoom in here i always regret this when i do this but i'm going to try it anyways um and this enable experimental razer editor checkbox if you uncheck this and restart vs you'll have the current experience if you check it you'll have the new experience now granted it is still experimental i have to give that with some caveats here right there are some books there are things we're working on improving but there's a lot of net positives that's something that we're constantly working towards and making better so if you try it out and you say you know what it's not there for me yet um well try it in the next release we are iterating on this so quickly um so definitely give that a shot all the demos you'll be seeing today are gonna be with that intent um with that check box enabled but moreover when you download sixteen nine preview three the six um that we may have it on by default for you we are slowly rolling this out to customers um where people um paying non paying doesn't matter anyone who's using visual studio right we're turning this on for you and saying hey what do you think does this work for you and seeing how fast we can get this out into the public to make it so we can really make it quality so with that said the demo format a lot of today is we're going to be trying to demo on simple applications a lot of the default apps the default templates so there's not a lot to consume not a lot of different contexts to understand and more importantly we figured it'd be kind of cool language server protocol is a really cool thing we think it's a cool thing so let's take off the covers and let's look to see what's under the hood of how this all actually works so we'll be demoing on simple apps and then doing a little deep dive into how these things work under the covers just from a protocol perspective so that's kind of the intent here um and then i think the first demo if i recall correctly would be to nay if you want to take it over sure thing thanks uh thanks sean uh okay let's get started so the first thing we're going to be talking today about is code actions they're also known as light bulbs or quick actions so before we do anything else let's just take a quick look at what they look like so i'm just going to swipe over to program.cs now this is just a simple cs file nothing too special about it or anything like that i'm just going to go here and type in something like debugger.watch so you can see uh error pops up pretty quickly uh this error is essentially saying that debugger doesn't exist in the current context you also see a light bulb below it with a couple of potential solutions let me try to zoom in here as well i realize it's probably a bit hard to see uh okay hopefully this is better but you get this light bulb with some potential solutions things like adding a using statement fully qualifying the type or even generating a brand new deep cover class so this provides you with a variety of solutions to the issue i'm just going to fully qualify it right now the diagnostic goes away and we can return to our work now what the razer team has been working on is bringing the same great rich experience you see right now in seashore into the razer land so this includes both supporting these types of c shortcode actions as well as brand new resource specific code actions so let's take a look at that i'm just going to head over to counter.razer this is a fairly typical razer file with a code block in it if i click on the code box i get another code option this one allows me to extract a code block to code behind essentially what it does if i click it is it takes all the code from codeblock puts it into a counter.raiser.cs file and this helps improve modularity and just really simplifies refactoring so that's some of the code actions we have right now uh we're working on many more but let's actually talk about how this works behind the scenes so i'm just going to head back over to the slide and this is rough diagram of how everything is structured uh when you start off visual studio sends a request to the razer language server this razer language server in turn delegates its responsibilities to razer and c-sharp on the razer side we compute the research-specific code actions things like creating a component extracting the code behind that and stuff likewise there's also a c sharp side uh which is handled by rosin roslin is the c compiler and analyzer it has a much better understanding of the c sharp nature of the project so how the c sharp files are structured uh what the different syntaxes syntax trees and project references and so on are so uh c sharp uh in turn is able to do that processing and provide those c sharp specific code actions um thanks thanks nick um so um the next question you may be asking is how does this communication work you're essentially communicating from the razer side of things into the c-sharp side of things uh well as taylor mentioned earlier this is done using the language server protocol essentially we have this object if i can go to the next slide we have this object called code action params we pass in say a text document and a range and c sharp in turn gives us some code actions uh now i don't know about you but for me this is still kind of pretty abstract and what sometimes helps is just diving deep into it and uh seeing how it's working under the hood so what we're gonna do is go back to visual studio and actually attach the visual studio instance that i was just showing and see what the debugger is doing in the background so let's go ahead and do that i'm going to go here and type something like debugger dot launch like we did in c sharp and as in c sharp we're gonna get a diagnostic there it is now i'm not gonna click on the diagnostic quite yet i'm just gonna head over to my other visual studio instance and attach there you go and now i'm going to click on debugger now as soon as i clicked on debugger the breakpoint was triggered and let's look at this breakdown this is essentially what happens when visual studio calls into the razer language server here we see the code action params object that we were discussing earlier let's open this up i'm just going to zoom in some more hopefully you can see that better and here we see the text document it's the counter dot razer dot g dot cs bar uh keep in mind this is a dot g dot cs file that means it's a generated c sharp file when razer communicates with rosalind it communicates relative to the c sharp because uh ruslan understands the context of the document in seashore likewise if you look at the range which is essentially where we clicked in the document we see line 121 now the document the reason document we were looking at certainly wasn't that long well line 121 is the position translated from the razer document into the c sharp land so we provide research sorry we provide roslyn with all this information now that seems pretty good but uh what's happening now let's allow rosalind to actually do all its work analysis and so on and see what it returns just hopefully it's something good i'm just going to open this up again and okay assuming it's tricky uh okay so here we see some of the results i'm just going to pop this open here and we see roslyn has returned to us four separate code actions if you open them up one of them is adding a using statement another is fully qualifying system.debugger and if you scroll down some more we also see things like uh generating the debugger type now uh you may notice uh when i demo this earlier in razer you only saw two separate code options uh adding a using statement and fully qualifying the type so clearly something more is happening well if we swipe back over to the diagram we see that once rosalind returns us some code actions we actually do some more post processing we filter out some code actions for example the adding a debugger type is filtered out because it's not fully supported in the razer context so we don't want to show it to the users likewise we also do some more remapping we want to remap from the generated c sharp file that rosa knows about to the razer file that you're actually working in so we do all that and send all the results back to visual studio which consolidates them and shows them to the user so if i just uh detach now and swipe back over we see the light bulb i pop it open and i see the two code actions that were filtered and remapped and provided by rosslyn i really wish visual studios font size would actually respect that in the code actions yes like all the other stuff is pretty small it's just like it's just a code that gets enlarged which is yeah right but hopefully you were able to see it hopefully it wasn't too too bad it's the using and for those who can't it's the using and fully qualify that is showing up in the little light bulb that is working there let's see if this actually works the light bulb strings what yeah that's that's perfect that's perfect there you go there you go right oh that is gorgeous yes just a bit pixelated but other than that now one thing that one note by the way is like when you're hovering over that and you're showing the light bulb by the way today showed how there was the using system of diagnostics what we're getting returned to but when he said we're remapping and doing additional information this is what he's referring to right it's we're adding the at here because if you were just to add using system.diagnostics in the razer file well that doesn't that doesn't mean anything that's not a it's not something in razor it's just text so we have to understand how to actually do the right thing in this case so some kind of intricacies of this experience yep cool uh yeah that's basically it for uh code actions and research thank you that was really good yeah we said we have a question actually another one um there's a few questions i'm sure i missed but i'm just looking at the very bottom the last one that um sean wrote yes does this mean vs could start relying more on lsp for other parts of the editor absolutely there's actually a lot of movement in the vs ecosystem to kind of go towards lsp powering more and more pieces so for instance roslyn has actually started moving little bits of their tech over to be lsp bound so this is not everything so i um i believe a go to definition um is one of the candidates to move entirely over to lsp and so the intention here is it's not moving the entire editor over like full scope because it's darn near impossible to do they're not doing work i guess i say that yet we're doing it um so i'm a hypocrite here but uh it's a hard thing to do so in their case they're moving a single feature over and more and more things are going to be like that so yeah absolutely um there was let me see another question here just for background for people that don't know roslyn as well can you kind of go a little deeper on that sure so roslyn and we're i guess you know yeah when we say rosalind it's kind of a little misleading so this we're talking about the actually could you show my screen quickly yep yep just a sec there's so many screens we go all right so what i'm saying roslyn i am referring to i guess same problem here come on windows you can do it is the dot net slash roslyn github repository so this has basically everything you need for the c-sharp language so this is everything from the compiler to building your code to emit something to analyzing it to understand how to provide a tooling experience in visual studio this is like so when you write when you when today wrote the debugger like red squiggle that is an error that is generated from the compiler i believe that's from the compiler um i don't know if that's from the analyzer layer there's different types of layers but it's generated in this effectively code to understand that you some that's not correct something needs to happen um so it's a semantic understanding of that code um so yeah rosalind is here i would suggest checking it out they have actually a really great readme um for all the various details of what exists here but when we're talking about c sharp and rosin this is what we're referring to um so i believe the next piece is um actually completion from allison allison actually just joined the razer tooling team um from rosslyn actually what a great segway and uh yeah so over to allison okay um so similar to today going into the details of how code actions work and the new lsp powered razer editor we now want to share some of the details of how completion works so before we begin as taylor mentioned i just started getting involved in razer pretty much this month so most of my contacts actually comes from a roslyn c sharp background and working on the lsp experience in that space so i just wanted to give major credits to the existing razer team for all of their hard work in getting the completion experience and razer to where it is today so what exactly is completion so many of you may already know but just to illustrate on what exactly we're talking about here so completion is just when you're typing and you get this list that pops up that lets you auto complete the currently selected item in the list just like that so how completion works in lsp at the most basic level is that each language server such as razer c-sharp uh html defined their own set of properties and they left the client such as bs or bs code know about them so you can see these properties directly in the text to the right which were screenshot directly from the lsp spec website so some examples of these properties include trigger characters and commit characters so basically when to automatically start a completion session and when to automatically commit a completion session so going back to vs here an example of for example a trigger character in html would be an open angled bracket because as you can see this triggers a new completion session and if we type a bit and then say type a closing angle bracket we can see that the current completion session was committed so and closing angle bracket would be an example of a commit character in html so trigger characters and commit characters are needed because if you think about it each language needs to have their own set of characters that will trigger and commit completion so for example in c sharp if we type list open angled bracket you'll see that a completion list doesn't show up and that's because while open angle bracket is a trigger character in html it is not in c sharp so going back to the slides here so when a user types in the new editor if the character they typed is a trigger character or if the user just explicitly invokes completion razer will receive a completion request so this request contains information such as where in the document completion was triggered and how it was invoked for example via typing or explicit invocation what's unique about razer especially is that since it's a mix of different languages the request may be sent to multiple language servers so razer has for example a razer language server and a c-sharp html language server so the c-sharp slash html language server basically acts as this intermediate language server that forwards along requests to the actual c html language server owned by other teams so for instance a completion request may be sent to the razer language server as well as the c-sharp language server so we can go through an example of this right now in the next slide in this example say that we're typing the at character at the beginning of a razor document so going back to vs you can see that if we type an at character here we get a completion list that pops up and this completion list is actually a mix of both razer completions and c-sharp completion so for example um do you zoom in actually with windows plus that's min or what was that windows plus windows plus maybe it doesn't work ah oh no okay it's not not working do windows magnifier type just type in magnifier rather into the windows oh no oh they're spawning super slow okay got it okay um go back oh no there we go okay perfect yeah so wherever your cursor is it's going to go ahead and just zoom in on wherever your cursor is so i would move that magnifier out of the way it's just to show it so we can see this yeah okay cool is that better yeah it is okay awesome um so for uh so back to the typing character you can see that popping up the completion list has a mix of both c sharp and html completion so for example uh action right here this is a c sharp completion but if we scroll further down the list we can see code right here which is actually from razer so how does this all work it's going back to the slides um so at is a trigger character in razer files for both razer and c-sharp so the initial completion request gets sent to both the razer language server and the c-sharp slash html language server so the razer language server case is pretty straightforward razer computes the completions and then sends them back to the client which is in this case the s in the c html case so again the c html case is more like this intermediate server so it doesn't compute the completion items directly it mainly handles some razor specific logic such as mapping to the generated document and one of the other main tasks it does is determining whether the completion location is html or c sharp so in this case the completion location is determined to be c-sharp so we ask the c-sharp language server which is owned by the roslin team what the completions are at the map location so c-sharp then sends us back a list of completion items and then we send the results back to bs so we send these results back in the form of completion item objects which uh basically contains information such as insert text pre-select information which is basically just like whether or not the item should be auto committed when typing a commit character and as well as kind custom commit characters for the item and so on so the client which is yes in this case is responsible for combining the completion results from the various language servers and that's pretty much the gist of it one part i did leave out from this diagram was that along with the initial completion requests some language servers such as c-sharp also support completion resolve requests so that basically means that we don't tell the client all the information in the initial request response until the user specifically selects the item in the completion list so for example roslyn won't compute the tooltip information for an item unless specifically requested and so by tool tip i just mean over here if you pop up the completion list the tool tips is just this description to the right right here that gives further context on the completion item so imagine if we had to compute all the tooltips for all the items in the completion list we might be doing a lot of unnecessary work when the user really only cares maybe about like one or two items in the list so this lazy evaluation saves us a bunch of computation time and speeds up everything and that's pretty much all i had yeah it's amazing how much how much complexity kind of falls in the completion area where like allison just described all the various hand-holding we do to kind of even present a completion list right but you got to think of all the complexity that even involves picking the right items to show in completion right it's like well are certain c sharp elements even in scope are there usings added for them um are they not that also applies to html well are you inside of a table do you show td do you show tr um all sorts of different complexity that kind of just gets uh abstracted away and yeah the tool tips oh my goodness we actually just made a change to make our tool lips even more lazy and oh my goodness the amount of perf savings you get on that is pretty insane pretty insane so we did have a few questions just in general from people on how to report issues that they see so like what's um you shared a link and i passed it over in the chat but do you want to talk about that general yeah oh is this the youtube one did you link to the i did link in youtube i'll drop it in the general chat also but just like do you want to talk about how people should interact as far as like issues one question is i know in general i've been told to tell people to use like report an issue or report a bug from inside a visual studio if you hit something is that is that useful yeah so actually if you share my screen real fast i'll just i can go over this real quick all right there we go all right well i can't see anything can you all right um so uh so this little person the top right corner so i'll zoom in here come on you can do it you can do it actually onto my other screen to show this so this little person over here when you click this there's a report a problem button in visual studio so the second you see something click this button do report a problem and i'm going to close out of the show quickly i will then bring over what it brings up which is this developer community feedback issue could say something be broke what you actually did to make something broken now i say something we broke but honestly it really helps if it's very clear as to what exactly happened it helps us triage it and understand what's going wrong and honestly it helps us fix it quicker so if you fill this out fill this up it will actually attach all the information we need um in a secure way to make it so that we can investigate the issue without sending all of your data to all the interwebs right so that's that's a really important piece here so i hope i helped with some of these for visual studio for mac so i see these and and what taylor's pointing out is it gives us stuff like which build a visual studio are you running and like steps to reproduce it and it does it like you would not believe how careful people are as far as like we cannot track any personal identifiable information we don't track who you are or anything but it does tell us what went wrong so that we can diagnose it and then internally this goes directly into the bug reports that the team uses and i was like i just ran to this meeting from a vs4 mac meeting where we were presenting to like the executives and they're going through the specific bug reports so we saw issues people reported here and then they got fixed and then they get like the the executives are like watching like we're all watching it right but everyone is paying attention to issues that you report so this is like totally do this like it may i see people report stuff like the in chat or on twitter or whatever and it's like you can do that but it may not who knows if it'll get fixed you go and report a bug it pops up onto people's dashboards and it gets done so yeah and i think the intent here is to make it so you don't have to do anything extra right every now and like to be how to illustrate how careful we are like we still have to ask a lot of the times how do you repro x y and z if you really can't tell right um like we we don't have all the information you think but we have so much more than if you were to say some random bug over twitter um this gives us at least a starting point cool well so one other question here just somebody's frustrated about this oops wrong one that's not very frustrated um asking like do is there unit testing like do you have unit tests going on and i'm sure you do but can you talk about like is there automated testing going on on this okay so they're aware of that uh yeah but there's just so many so many that i said this is referring to so many bugs yeah they just yeah abs so we have units we even have integration testing but the problem is is that because there's so many different languages and teams interacting it's not necessarily as simple as say unit testing one piece right we can we can verify that we show c sharp completion and then if you insert something that it inserts the code for c c sharp completion but what says it's correct right or how like what if c sharp changes the spacing or something very subtle how do we know it's actually unfortunately it's a really hard problem to solve and without being incredibly exhaustive in those tests it's a very hard thing to verify that is correct now we do the best that we possibly can with the pre-existing editor and we're actually even doing a better job with a new editor um but there are things that fall through the cracks so i i did see a few mentions of like okay a blazer the existing experience of vs is really painful in the chat and we totally get it yes it is absolutely hard sometimes especially a statement where i'm saying if you do override like abc it replaces the code above it yeah that's awful that's the last thing we ever want to happen and it's also one of the motivations for us doing this is we have more control end to end over what is happening so one we can write the tests two we can make things actually work functionally how you would expect them to work cool i didn't mean to put you on the spot i just i think we want people to know how to like if they're running into issues how to report them and stuff and honestly it's i think these are good you should feel upset you should feel passionate my cat is losing his mind yeah um you should like you should feel passionate because we do too we want this to be the absolute best experience for you as well and we're doing everything we can to do it you know so i totally get it like i think we're on the same page as what i'm trying to say cool okay uh did you have more stuff to show us we did yeah and i think there's one other question about does it work in vs go to la i think i recall yeah yeah yeah what about vs code yeah absolutely so this is one of the beauties with our with our model is that the things we do in visual studio also apply in vs code so when we go ahead and add this like say a new light bulb well you're gonna get that in vs code too the pieces that tanay showed like having those c sharp light bulbs you're gonna get that there extract to combine you're going to get that in vs code those are baked into the omnisharp extension so this is i guess my screen is still showing here um i guess let's do a brand new window here and please nothing bad okay that's fine let's test.jason we're okay um and extensions this c-sharp extension right here has all the goods that you could possibly our razer stuff is baked into this cool and then yeah so ryan is next so ryan was going to show off some more good bits hello yeah uh i'm here to talk a little bit about colorization and how we go from this your your basic completely uncolorized document that i had to lobotomize visual studio in order to get a picture of uh to this are our latest and greatest of all colors everywhere uh so basically there are two types of colorization in visual studio you have your syntactic colorization and semantic colorization syntactic colorization is text mate that's a rules-based grammar meaning that it can identify things like oh we've started an html element we've started an html attribute but it doesn't know about things like user libraries just general libraries it can't know that this is a it can't know that this is a razer component that the razer component attribute or that this is a function it has no way of accessing that data but it's really fast so it's the first thing that visual studio does to give you a general idea of what your document's going to look like as you go along the other problem with it is that it's easy to get lost especially quote unquote lost especially in multi-language scenarios like ours so you'll see here on this little example this string that should be blue like with bool or a void but there's a small bug in the text mate grammar which has made it a different color it's really hard to avoid that kind of things with multi-language so what can we do about that we can use semantic colorization semantic colorization has a full understanding of your project via our lsp server that means we know that this is a component we know that this is an attribute uh we and we have uh syntax tree knowledge of the whole document so we we know what everything is for sure but that's not quite enough for us because razer is such a such a complicated multi-language thing we still need c-sharp in here you'll notice that toggle nav menu is not uh that bright gold like it should be this isn't colored this entire section isn't colored so we need to bring c sharp into the fray and that's what this looks like this is the just the rosalin parts of our colorization here you can see that this is that nice gold we've got this enum colored up and down here in the actual code block it's all colored and then again we can put that all together into this our running visual studio it's nice and snappy get those colorizations pretty quick as we go along beautiful but how does it actually work how do we get to that first you make you start the same way you do every lsp interaction the client makes a request against the server the client in this case being visual studio in this case we create a syntax tree based on our entire understanding of the project and of the specific document we're looking at we walk that tree for razer specific ranges razor specific ranges would be things like our nav link component here the match attribute uh things like uh the the at symbol here that kind of stuff but then whoop i keep clicking but then we have to move uh we have to get our c information and as as every not everyone but as others have talked about we shell out to the c-sharp language server which we also call rosalind to give us that information based on our backing document which is just sort of a lie that we we invent this document which doesn't really exist uh which represents all of the c sharp and then we map that back onto the razor document then we have to combine both the razor ranges and the c sharp ranges into an ordered list it's important that that's an ordered list because everything is relative when we move on to the next step and convert those ranges into semantic tokens format uh what is the semantic tokens format i'm glad you asked how do i exit the there we go uh we go over here to the lsp specifications and we can see you should zoom in let's see control scroll wheel does a pretty good job in browser yeah control scroll over here here we go is that better yeah more more still a little more good i am hmm i would just i would just you could do control plus or control scroll that's for if you're doing the browser that is that's what i was doing though oh interesting you have the magnifier going and the browser scrolling so you've got yeah you go okay technical difficulties here here we are at the lsp specification and a little more a little more a little more a little more yeah like it plus like three more times probably which sounds crazy but do it yeah yeah so and by the way we we always do like we track stats and stuff but if you're watching on a phone or a tiny you know a small device let us know in the chat because we do this is actually instructive for us to yeah keep on this cool okay go ahead uh but there there's a lot of good information here but the part i wanted to focus on today is here where we describe the actual tokens that we're returning and basically what it is is is it's just a huge array of unsigned integers and each of those on-site integers depending on its position in the array means something so the first the first part of an individual token is the delta line that's the the number of lines since either the start of the document or the previous token uh and so that lets you know why it's important that we have all of this be in the same in the correct relative position because when we translate all of this into numbers it's all relative to the previous stuff uh then we've got the uh start character relative to the start of the line or the previous character the length of the substring we're talking about the token type i'm going to go into that a little bit but that basically tells us what it is that we're colorizing and then the modifiers this is for stuff for like is it static is it private that kind of stuff currently that doesn't work in vs we're working on that uh we'll we'll get there uh but let's go into a little bit of an example about that um let's say we wanted to colorize this specific element the nav link component element so if we assume that it's all blank empty lines above this this is on line delta eight from the start of the document because everything is zero indexed uh our start character is one because we're not colorizing this opening bracket in my little example here how long is it seven characters it's just string length and now we get to the kind of interesting part which is token type the token type is 71 which obviously visual studio has no idea what c 71 means by default uh but what we what we do is when when the client first starts the language server the client in this case again being visual studio uh we return a semantic token legend and the legend is just a list of strings which are all in the same in the array position that we will be returned so the the razer tag helper elements string is in the 71st position in the array and so visual studio will use that to uh to translate your to translate this token into our nice purple color here and then again we we do not use the modifiers yet unfortunately working on that uh and then just the last thing i wanted to color today is as john said at the at the top of the uh of the presentation we do have some surveys that we'd love for you all to take these are about the default theme colors uh so either light mode or dark mode depending on your preference uh do basically this is just do you do you like a couple of different kind of an a b test of colorization options you know do you like the purple that we have for our tag helper elements do you wish that it was lime green that kind of stuff i know one person you would say yesterday i i certainly wouldn't know anything about wanting neon colors everywhere uh yeah that's that's sort of what i have today uh there's a lot more interesting stuff in in the lsp spec for semantic colors if you want to dig into it they do edits they do uh range requests but i thought i would keep it just to the uh the basic full document request for today awesome thanks ryan wow very cool okay we had a question i'm scrolling back to it now there are so many there's a lot of chat going on which is amazing there's a few questions i believe yeah okay so yeah intermediate razer lsp unique for idb ide or is the code reusable it's a great question so when allison's example she had mentioned that there's a razer language server in an html or c sharp language server so the razer portion of that that's like the piece that's responsible for providing the component completions telling you are you in c-sharp are you in html some of the diagnostics that you get that piece is reusable it's literally verbatim just on whatever platform it is there is no changes on the html c sharp piece we have built effectively a contract that we implement on each platform independently where it tries to act as dumb as possible to glue all the underlying language servers together so it inter actually interacts with our razer language server and based on this contract and based on that it tries doing as little as possible to make completion work in a way that can be as little code as possible so there's a few possibilities for breaks so the answer is yes some pieces are unique but most pieces are not cool wow um i'm looking to see all the chat going on um [Music] i did share in the chat by the way the links to those surveys um yeah um and then i think someone asked uh sean said there's a c-sharp semantic colorizer that he cannot live without well improvements in cement coloring and razor makes c sharp cement coloring better so we wouldn't actually like technically yes we could change it if we absolutely wanted to will we probably not um we're going to respect whatever c sharp colorization options you have in visual studio so if you decide to change your type names to lime green uh in c sharp well we're going to show it as a lime green too yeah um so that's really up to your own setting so if your p if your extension customizes c sharp colors you'll get that in razor as well but we're not going to be doing that by default unfortunately cool [Music] yeah so so as part of doing that like and and you know we did talk about like there's the text made there's there's all that kind of infrastructure for colorization is that something where people can like add additional extensions or get you know like more deeply colorized things if they want to wait i think are you saying can they do that yeah i mean like so there's um sean talked about there's an extension that he likes for colorization can people customize colorization more in more detail if they want to that's a great question ryan correct me if i'm wrong i don't like there's no way today that we can make it so your c sharp is different in razor at least colorization wise than not like we could add it and maybe do the work to add it but it's not something out of the box that we've considered right yeah we we don't have anything which could accomplish that today um obviously you you can set the individual colors uh in in visual studio but i think that that's not what's being asked there there i think they want greater control of what the different token types are uh and that that's not something we have uh looked into yet yeah come on granted if there's ever an actual large ask for these things we have seen similar issues or people want their c sharp formatted differently in razer than outside of razer it's another example we're actually wanting a difference between in and out um if there's enough ask like we're willing to do anything just to be totally frank we are at your service so you you drive what makes things work or what like what our priorities are cool yeah and and people can do this by filing an issue right or or you could i mean you could it's not ideal to do a report a problem because that shows up as a bug it was probably better to just go into the repo and say here's a recommendation or whatever i would agree i always ask for extensibility kinds of questions because this came up in our last um community stand up with david fowler and damian edwards where there are often extensibility points built in that just are not super documented right so there's like cool little hooks that we build in case people want to customize things but they don't know that they're available so yeah uh it looked like jen janiscoo7 was asking about nested coloring by that were you referring to uh razer inside inside of a c-sharp code block uh if so i did an issue which should resolve that i think like last week late last week uh so if that's what you mean then that that is coming cool 16 9 preview four yeah there's one i was i was going to try and look it up but there's a um there's an extension in visual studio i've used in the past that does stuff for like it color matches braces for like nested stuff and it uses it it does some more like colors and it uses italics and some stuff like that i haven't used it for a bit but um there's some pretty neat stuff people do with that sort of thing uh so here's a question are you worried about complexity proliferation when adding so much infrastructure to support basic things like code completion and grammar parsing when it can be done natively faster so i guess it really um you're not wrong natively is absolutely faster i think if you do native anything it's absolutely faster um but in terms of complexity i'd actually argue lsp is a simpler approach to doing it especially when you incorporate all other platforms that are now being adopted with all of our various languages vs code vs for mac visual studio and then also the again the sub platforms we need them live share code spaces and code spaces is also both of those are both on vs code and in vs so then having to make it work on all of those pieces like what does it mean to do a native completion experience in live share what does it mean to do it in code spaces you're the actual dev box that you're you're playing with is somewhere else not on your box so it's actually a difficult thing to do and then more importantly in razer how do how do extensions work you can make c sharp completion work natively but then how do you extend that how do you make it so maybe you want to add additional like intellicode ai assisted autocompletion right building contracts to enable anyone to extend the experiences is one of lsp's goals and it's actually what vs code is built on today where they are lsp first and all their extension models and because of that they have a massive extension following um and it's super successful because of that so i think their trade-offs yes maybe it will not be as fast but will you be as productive um i guess that's an it's i'd say yes because you can do it anywhere but um there is no there's no doubt that native is of course faster than doing anything asynchronous or anything that's say lsp cool uh i found the extension just because we're chatting here let me share the one that i've used in the past is via sephora vs4 but this is kind of neat here's the thing so it does color matching of braces and it's just you know it's neat what what people do there's rainbow braces and there's there's also use of italics and stuff so some fun stuff it's i always love how people you know extend extend things and yeah cool oh yeah look at that oh interesting i see yeah it's funny actually in the new editor that's actually one of the gaps we have today where we don't actually even highlight the braces um with the new one but it is something that we're tracking yeah yeah and i get this is just c sharp right which is a much more constrained problem than you're solving um with you know as you explained it it just reminds me how many languages are at play there yeah and are kind of poorly defined you know and how exact so honestly so that's it so just give it i'm not going to rattle here but um the old editor was something that we called projection based so the idea was every single one of your pieces of your doc was effectively a window depending a window into another document um depending on the language that was in so at date time dot now would have a window for the app which would go into razer the date time right now would go into c sharp and if there's any html around it that would be separate ones that wanted html now ideally that sounds great because it means if you type in any one of those windows well you're typing in that other document somewhere else but what happens when things magically insert lots of text let's take the override scenario you're in a nat code block and you type override space you add one of the methods to override this is one of the reasons why that scenario breaks down so much is because that inserts a huge snippet of text from almost nothing you're typing in a window how do we know how to grow that window in a certain way in the right way in the formatted way to be in the top level racer document it's actually really hard problem and it's why so many things break down and the last community stand up ij actually showed this in formatting a little bit as to how why it's so difficult to interoperate with all these different languages and that contracts are the reason why we're any any bit successful today with a new approach do um do source generators get involved here at all so it's a great question um ideally source generators would be a great approach to take um however they're still evolving with their capabilities especially in terms of what even a editor model would look like for source generators so it's still being determined so and right now the answer is no in the future i absolutely envision them having some sort of play though cool well i guess we're kind of at the end of the time um and we did also for people that want to read more we've got the we shared a lot of links including there's that blog post that just went out this morning so that digs into that um and then i i guess some of the top takeaways there's read the blog post take the surveys um and then if you hit an issue file it using visual studio report a problem um and use the new uh try the new experimental lsp based razer syntax highlighter thing yeah yeah so the current release that everyone has access to is 16 9 preview 3 if you're in the preview builds of visual studio this is going to have a lot of really good goodies um every single release is going to have more though um so we're going to vs 69 preview 4 is going to have even more bug fixes and goodies preview 5 will probably only have bug fixes if we see fit but we'll probably start putting work towards 1610 preview one um so if you try it out see things that aren't working please file issues we love the feedback it's what we operate on it's how we know what is the most important tasks um to tackle so without without issues we can't we literally can't do anything um so please file issues um use the report a problem tool in visual studio that's the best way to do it okay um i did see one question pop up which i think is so interesting it's worth it's worth taking here which is how do you like yeah and this just goes more into also how do you actually prioritize and think about features because this is a heart yeah how do you quantify this so in razer's case it's actually super easy meaning we are a whole bunch of different languages are people more have are people using said features in the languages that we wrap so let's take light bulbs right they are probably one of the most like aside from completion one of the most c-sharp features used so there is no question they are incredibly effective because of their sheer usage in visual studio so would they work in razer it's c-sharp absolutely do you strap scratch your head after seeing an error in razer files today and not have a light bulb to do it yes you scratch your head you don't know what lame space you do honestly a lot of the time we see people they go to a c-sharp file type the same exact piece of code out get the light bulb and then just copy and paste it in the razer file and so a lot of these interactions are just proven via telemetry that we have to understand that okay well in these other languages these have proven to be successful we can bring them into the razer world awesome okay i'm just pasting the links into the chat again so that includes the surveys and blog posts and everything i think this is a great place to wrap up and then we'll do regular check-ins with with the team here because you folks are just cranking stuff out so yeah uh one other thing that i would like if you could share my scene just a very very last piece yep there we go okay so um for trying out reporting issues go ahead and as we said before use the report a problem tool this is our github handles twitter handles if you want to reach out we're always down to hear feedback let us know um all the code for this is actually happening in the asp.net core tooling repo let's see if i can zoom in here uh github.com.net asp.net core dash tooling this is where all the code for today is going on um we would love um contributions if people are interested there's i remember last time someone had mentioned what about a light bulb for extracting css to a css code behind and i i would love to have something like that right there's so many opportunities here or at least just even conversations that i'd love to have um and just know the new editor is there's so many feature wins that we have but it's not it it's lacking in parody in some ways of the old editor but it's also surpassing it in others so i think really if you're finding a lot of issues with the previous one try the new one out and it might solve every one of your issues if you try the new one out and it doesn't well just keep giving it a shot every single release and give us a chance we are just trying to make this the absolute best experience possible and again we are taking feedback to drive how quickly we fix different things one thing that i love too about this is it's pr it's not like you need to install a whole new visual studio or whatever you can do turn on or off the checkbox and i think you restart visual studio that's it yeah it's lit it's it was literally tools options preview features you check the check box you close visual studio and you open it back up and then you're done like that's it yeah yeah that's it so yeah and it's even possible to run both vs and vs preview side by side so if you want to uh try the two different experiences and not like ensure your current experience still works as normal you can do that so that really empowers you to try the new editor see uh if it's uh to your taste and get going yeah it's a really great point and squirrel physics uh gives you a solid vote here and i love the name anyways and like if you see yourself crashing a lot the new editor is going to be a saving grace we have made so many improvements and architecturally it's almost impossible to crash visual studio with a new editor because of the choices we've made so if you crashed it like kudos to you please file it i would love to see it to understand what we've possibly missed now famous last words right i'm going to eat like i'm sure the next time we do it i'm going to regret saying that so hard all right uh you know hold my finger yeah we're out for you now awesome okay well this is a great place to wrap up thanks to the whole team it's uh it's amazing i mean i just i thought it was really cool we have a lot of teams come on and today was amazing to see everyone give such great presentations so that was really cool uh thanks and welcome allison it was great to have you on and uh so cool yeah one thing i would say let us know if the deep dive format is interesting like i know this is this is a different forum to actually show the stuff off but we figured deep diving into some of these features was a cool thing to do maybe in the future we could do more but if it's not your thing maybe we don't maybe we just show features off and talk about them so uh let us know if that's something you're interested in if this was successful if this wasn't awesome all right well we'll wrap up there thanks a bunch everybody thank you we go to the thanks for watching screen [Music] now [Music] do [Music] [Music] [Music] you

Channel: dotNET

Views: 5,524

Rating: 5 out of 5

Keywords:

Id: _znjce8Cs2k

Length: 77min 18sec (4638 seconds)

Published: Tue Jan 26 2021