.Net Foundation .Net Community Standups, 8 Oct 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: ASP.NET Community Standup - October 8th, 2019 - Running the .NET Website with Rowan Miller

Description

Join members from the ASP.NET teams for our community standup covering great community contributions for ASP.NET, ASP.NET Core, and more.

Community links for this week: https://www.theurlist.com/aspnet-standup-2019-10-08

A

All right, hey we're live so hear me. Ok on the internet, I can.

B

Hear you, okay,.

A

Cool, let us know if the audio is not okay, otherwise we'll assume it's wonderful, so Rowan welcome to the show hey.

B

Thanks for having me so.

A

So you've got a lot of stuff to show off with how we run the dotnet website. All the stuff that you've been doing cool people are saying on the streams that they can hear fine good morning to Australia hello, to James good. All our friends are here: let's jump over and I will show all our community links, which are quite numerous here, so I'm going to share my screen and we'll share.

B

A

Blank screen and then I'll move everything over all right, all right. That was not smooth all right. Let's start here, Steve Gordon has a great post. This is about response compression with Hayes peanut core 3. Your first thought may be the same as mine was, which is what responds compression, isn't G RPC already pretty compressed, and it is it's binary, but Steve goes through and explains some things about.

A

You know that it can still be compressed, it's definitely more compressed than then Jason is but it you know you can turn on additional compression and then there's a trade-off. The CPU cost for gzip. So he shows in here that there's this there's a setting here. You can set compression level right when you turn on the G RPC service and then you know, go scope. Some reason. My formatting I have gone to a read mode on this.

A

Really. Ok, there we go. Let's try that again, yeah! So now we'll get some nice formatting. So so, anyhow, this this shows how G RPC is turned on the different options, and then, after that you know, you're just doing your request, and he shows in here the that you can see the with the console, logging etc. You can turn it off per service method, so he shows how to do that and disabling also from a client.

A

You may need to do that if there's some, if there's an issue there so good to know about that, this is interesting from Joe he's, showing he's continuing this long-running series he's been doing on on. You know, building on performance, optimizations and stuff. So here he's got a it's a asp net core from zero to overkill, and here he's looking at performance, optimization with benchmark net, so he's got a thing with a proxy to api route and it's doing a look-up on a list of different routes.

A

So here he has an idea and he's thinking hey. Maybe I can optimize this and he goes through and uses benchmark net in order to do that. What I like with this is he's looking at this and he's saying I bet I can. I can optimize this by not doing a bunch of string manipulation, so he goes through and does actually four different attempts at optimizing. It balancing trade-offs and stuff, and I kind of don't want to spoil the punchline. I guess I'll drop down to the end.

A

He goes through all these different things and looks at different kinds of caching and uses aggressive inlining. What he finds out is pretty much. I think that the first attempt is generally the most optimal I think in in pretty much all the cases its first place and it does allocate, but it's not allocating of a lot. So it is I think my takeaway from this is that it's very worthwhile to actually like optimize, like excuse me to benchmark and to see rather than guessing and optimizing things, and then you actually slow things down.

A

Oh I've definitely made that mistake before so right there and, of course, there's a video that goes with it too. If you'd like to watch that, oh all right, Tim Heuer, with a timely post on self-contained deployments for dotnet core 3, so asp net, core 3 is rolling out currently across asher, and what you can do right now is is without having to wait for that or if you want to use a you know, dot, release or whatever you can always do a self-contained deployment.

A

So here he talks about doing that walks through setting setting that up and then also you can do this in the publish dialog. There's the option for self-contained as well so I last week spoke at vs, live San, Diego and I showed signal are with.net query, and this is exactly what I did is a self-contained deployment, all right, two posts on blazer.

A

First of all, Bradley Wells demystifying, the different bindings options for a blazer, so one is just one way: data binding, and this is where you're you know taking data and just binding it to output it. He also shows two-way data binding, and this is a case here- where he's got an input element and he's binding it and he's also then displaying it in an h1 and as you update on one, it shows it shows in the other.

A

So it's it's updating in the binding, two-way and then the the final thing here is showing binding on other events. So you can also have you know on input or you can bind on different events, so that kind of gives you all the different options there. So I thought this was nice to kind of wrap all that up.

A

The next blazer post I think is fun, partly because we have metalhead looking guy on LinkedIn net, which is a nice juxtaposition, so Garron is showing here how to make dynamic, blazer and here he's applying it to site core so site. Cores is this: you know pretty pretty well known and heavily used.

A

Content management system does quite a bit of sophisticated stuff, as here he says, marketing, system and engine, and so here he's showing that, because it's got a REST API he's actually using blazer and built this the site. That's using placeholders and it's calling in through the API and populating all that.

A

So it's cool to see this and it's in a you know pretty thorough walkthrough showing how to do that if using Sitecore I would expect this as very good news and then also just in general, it's pretty cool to see the flexibility of phlaser to work there.

A

Alright, quick little update for folks that are using Carter, so Carter from previously I believe the Nancy FX team and kind of rebrand it over to Carter. So now this is being built with dotnet core 3 they've got a release imminent and they would like people to start taking a look now and so will my asked them to also give us an update when it actually goes live. But if you are a Carter user, please jump in and take a look now all right. This is cool from John Seely.

A

He is talking about migrating from WCF to gr, pc with dotnet core, and so some some things he shows here. You know: there's there's different options. If you're on wucf WCF itself is not moving to dotnet core, there is there's a core WCF project that we've pointed out before. There's also the option to go to gr pc, so he walks through how and why you do it definite performance.

A

You know advantages and then also being on the newest newest release stuff. So he talks through on here and he actually takes some sample code from MSDN and walks through converting over to gr pc so creating his prototype. You know building out a service, he does show some things like using handlers for reuse between WC, f and g RPC, which is interesting, and you know walks through all the way through you know, and then he does point out some some tips, all's or some things that could be made better in the future, all right.

A

So this is neat from deke. We've pointed out dot notify before and it is, it is a system for building kind of micro. So it's! What is? How exactly does he explain it here? There's there's a term that he uses that I don't want to get wrong. It's basically a full stack micro service, so building decomposing a website into a bunch of tiny micro services and then composing from the front end, and so he talks to hear that they've hit three point. Five and some different.

A

You know support for this, including nice templates to build things out so builds out a whole walkthrough showing how to do that for more on the, and so this in this case he's doing this using react. He also does have support for four other things so view and and different reacts scenarios and then I also in the show notes, I'm going to include this. This is the dot notify website we featured this before, but I just you know for the context for people looking at this so again, this is this is kind of nice.

A

If you want to build this kind of composable, like definitely for something like a dashboard to be able to pull all these different things together and compose them on the front end.

A

Alright I mentioned and I'm trying to talk fast, because I know you've got a ton of stuff to show to your own. So we've we've got this. This is a cool site. I was just working with Brady, so Brady gasser the mastermind behind this site. This is a kind of a dashboard showing what the rollout state is for a dotnet core on different in different environments. So this is asp net core on as your websites dotnet and you can go through and you know check out for any region.

A

You can see what the status is so here you know. If we look, you can see what's deployed and where he also explains things like if there's no asp net core requirements or if it's in progress and you may have the runtime but not kudo, builds etc. So this is good to know and of course, if you, if you know you need to target something, you can directly target a region and you can watch as stuff gets rolled out there. So pretty neat. Alright. This is an exciting thing. This is a release from rest year.

A

They've hit rc1, so this is cool from the rest of your project, which is kind of falls under OData. So this is a turnkey library for building restful services. This is open source under dotnet foundation and exciting to see them hit, rc1 Congrats, robert and team.

A

Alright, now we had a fun part of the show we last week we said hey, we'd, love to start featuring, some non-english blog posts and so we're taking a crack at that. So this is one from rana renato and I'm going to show you I'm just gonna be honest. I try to learn different languages, but I do not speak all the languages yet so I actually use this. So here are translating from Portuguese.

A

One weird thing is that Renato I'm sorry, but when it we translate the site, it actually changes your name to tomorrow and I'm not sure what's going on there, but this this in this post he's talking about some implementation, examples for dotnet, core 3 and G RPC.

A

So you know general kind of walkthrough showing you know using the template but or the the project template for a G RPC and then a bunch of great links towards the end and video showing you know updates recently from G RPC as well.

A

So next from Benjamin, we've got a tutorial for asp net core I think Benjamin is on is watching live now, which is neat so here. This is a tutorial walking through building out a site using asp net core, and it is funny here when we do so, it says, building in espanol and then, when I translate it, it says building it in english. So it's kind of funny, so here he walks through building it. This is a nice introduction.

A

He talks about the standard things of creating you know, creating a website using Azure, devops and he's using my sequel for the back end. So he shows using the my sequel and a new framework provider and just just walking through and building a credit application. All the way through the you know, get commit and get push all right, and then one more. This is from Leslie Ramirez and Scott. Hanselman pointed me at her blog she's, she was I believe it at the.

A

What was it called Colombian developer, something they had a conference there in the Dominican Republic, which was pretty neat. So this is a rollup of what's new in dotnet core 3 and c-sharp at 8 and with some nice kind of code, examples showing things like switch expressions, Noble reference types, etc so and then finally, I walk through with WPF and windows, open source, stuff.

A

Alright, as always we've got, our links are shared via URL s, they're gonna be on the the page for this, and then I will also tweet them out and put them in the show, notes and stuff. I am ready to stop talking, because I would like to hear someone else talk and yeah I'm done Jeremy there you are. Where should we start John? Oh, my goodness?

A

Alright, so I asked you to be on the show, because I've worked with you a lot over over time and I'm amazed what you and small team are able to pull off running the entire dotnet website for a lot of reasons. One you're always like giving me all these cool asp net tips of stuff that I either didn't know where had forgotten about and then also you do a lot of stuff as far as the content strategy stuff. So, there's a whole day's worth of stuff to go over here. How about?

A

Let's start just with a quick look at what's in the dotnet website, your.

B

Man, absolutely so the when we think about dotnet on the web, there's a few different pieces that make that up because we work at Microsoft. We have like a separate documentation platform should be doc, so Microsoft com, so the dotnet content on there we usually refer to as net docs. We obviously have a blog. We have done ed and asp.net and xamarin blogs and then the pod.

B

When we think about all that stuff, we call that generally the dotnet web presence and one other piece that fits in there is what we call the dotnet website, which would be kind of like our marketing site or our like rant brochure type web site. So that would be what you find when you go to like dotnet or Microsoft comm, which is what I've got up on the screen now. So the type of content, that's on here introductory like overview for each of the entry points into our stack.

B

So obviously dotnet is the name of our platform, but there's lots of different things that make this up. So, for example, we have an asp.net section on here, so this would be the landing page. That explains what asp.net is and if you happen to be a new user. That's here, because you're interested in asp.net or web development.

B

We have like the process for getting you up and running so downloading dotnet building your first web app all the way through to having like a customized hello, world, app running on your machine and then the other thing that the other primary thing that we handle on this site would be downloads of dotnet. Dotnet is a big stack and it does a lot of things and therefore what to download and where to get it from can be confusing at times. So another big focus is trying to make our download story as simple as possible.

B

Those two pieces kind of explaining what time it is and helping new users get up and running either with dotnet for the first time or maybe using a new part of the stack that they've never used before and then helping our existing customer base find the right thing to download and install on their machine.

B

Does that work.

A

Yep and I haven't seen so folks if you're watching send in your questions. Otherwise, let me see-oh C question about the newsletters. These few newsletters web application I'm, not sure what that is. Yeah.

B

A

That's fine! Alright! So do you want to start with the technical side or.

B

What yeah, let's go there so brief overview? The website is surprising, asp.net core application. If we scroll down to the bottom, we have a footer which I'll just zoom in on down here and you'll.

A

B

Have the version of.net core that we're running on, which is currently three zero? Zero? If you look back at this from time to time, you'll see us actually running on previews. So before 300 was out, we are running on 300 rc1 and we actually often roll those out to the website even before they're released to the public. So we'll be running on the nightly builds of a release in the week leading up to release of dotnet koi.

B

Behind the scenes, it's an asp.net core app, it used to be MVC and a couple of weeks ago we actually moved across to Razer pages, which was a great experience, so I'm sure we'll talk about that at some point. I think we're going to dig into the code a bit today, so I'll kind of just show you that I've got the application open here.

B

It's the net landing page project here, if you look in the pages, folder you'll see a whole bunch of different, like Razer pages hanging out in here, so I'm sure we'll dig into some of those as we we dig into the technical parts of the site a bit. Should we talk about the kind of overall architecture of the site, a little yeah.

A

And as we do that we did have some questions from this troublemaker named Sebastian again.

B

A

Said is the site fully static, how many cores or machines to run it and do they scale dynamically, so I.

B

Don't know if so is the site completely static? No, it's not. Most of the pages have at least some element of server rendered content on them. That's dynamic! Now, in some cases you will see on the site that we have like header and a footer. So a lot of that stuff is like calculated once and then cached for quite a while and then some other pages on the site fairly dynamic. So let's load up an example of that.

B

If we go to the community section of the site and we go to the community, stand-ups page I'll see they're actually live at the moment, so this stuff is obviously dynamic when we're not on the air. It has a countdown timer and then I was also showing the download section of the site, and so that's driven from metadata. So as we release versions of.net core, we have a github repo that has a whole bunch of JSON metadata in it and the download section of the site.

B

So if I go over here, the fact that this says dotnet core 3 and when you click the buttons it's going to give you 3 0 0, that's all dynamically driven from metadata behind the scenes and there's one other question on that Oh. What type of machine does it run on? So it runs on a P one instance in Azure, which is kind of the smallest production scale instance, we'll dig into the architecture a bit about why it's able to run on a small machine. I will talk about that shortly.

B

It was one other piece in his question. What did I miss there's.

A

A scale daemon, yes, he appears and that.

B

Can so yeah, we automatically scale up based on CPU and memory usage, just using the built-in functionality within Asia for doing that, which is a pretty good segue into talking about the architecture. So this is a fancy diagram that I made over on the left. We see this is be like our production instance. So when you hit net Microsoft, comm you're actually going to an azure front-door instance and behind the scenes based on the URL you're requesting that's sending you off to one of the web, apps or AP.

B

Is that actually make up the dotnet site so we're not one big monolithic site? We have a central app service which has a lot of the more static content in it, but some of the more dynamic sections of the site are actually split out into separate micro sites, though the asp.net community site, that's like a separate little site that we maintain, but it's obviously rendered as part of Microsoft comm. So we use front-door to distribute up the traffic between those various backends there's.

B

Also, some api's we'll look at some of those later and then they all talk to a common set of azure resources, so like keyboard, for storing all of our secrets, as a search will see a section of the site that uses as a search a bit later and then blob storage, which is where we store some image assets and things like that.

B

You'll notice on the slide that there's three other boxes here. So we have production, staging and dev. There is what we kind of hit on a day to day basis as we're developing. Once changes are committed into our master branch. We use Azure DevOps, which deploys those into dev, does some very basic testing on them.

B

Then the change gets deployed into staging and we have some more significant testing running on the changes there and then it goes for a manual ok to be deployed to production, that's kind of the workflow so from a change being committed into our actual code base, they're being live on the site. It's about a ten-minute flow three to our production instance. Well,.

A

And then that was something for our community stand up page when we had that running for a short bit in production. You pointed me at that kind of workflow. It was actually relatively easy to set that up with hazard, EV ops, to do the site swap and the testing, and all that yes,.

B

So slight slight swapping there's, there's two parts to the migration as it flows through from dev staging production and there's obviously lots of ways to do this. But this is just how we do it here. So we we have a DevOps pipeline and actually I can load it up. I wasn't going to load DevOps because there's some information in there we don't want to share, but I took some screenshots that we could look at. So this is our deployment pipeline for the actual main website that has the vast majority of the pages in it.

B

You can see. We have three different stages in here deployed a dev deploy to staging, and then, if you have a keen eye, you can see that there's like a tiny little tick. Next to this one, which means somebody has to approve the change before it flows into the production stage. But what's more interesting is when we look into either the staging or the prod deployments. This is what each of those phases looks like. So we deploy to pre staging, which means we have a on the app service which isn't the actual production slot.

B

But it's one that we call pre-staging, and so we put the changes into there. We then use a warm-up extension to actually go and hit a set of pages on the app, and these are intentional pages which make saw all of our services that run the site are warmed up and then once that is wong, we do a hot swap.

B

So we take out the production slot and we swap with the pre staging one and the traffic asia takes care of like making sure all requests are finished and then allocating new requests for the new slot for the new slide. That means we get like instant, swap with no downtime, no regression in page load, speed, etc. We do it and to your point, John, that's really easy. In DevOps and yeah.

A

B

Basically, just drag a thing in that says, swap slots, and then you just tell it which you want to swap the one thing. What you'd have to do. We use a third-party extension for Walmart. It's called website warm-up a really nice extension from the community and.

A

Like you've got shown there, you give it a list of URLs and it just things all those URLs and yeah.

B

If any of them fail, you can define whether it's okay for it to retry. So we do allow some retries, but if it doesn't get a successful response code from the URL, then it fails and the deployment stops. So you know, if someone's checked in something that doesn't compile well I guess compiler would get picked up in the build phase. But if there's something that's like going to return a 500 response code, when you hit a page, that step will fail and the whole deployment will stop and the change will never even get into staging.

A

B

There was one other piece I wanted to cover back on the architecture. Thing you've noticed some dotted purple lines here. So the way we use staging another name you could almost use for it is like pre-production. Our staging environment is only ever one change away from production because we deploy a single change to staging. We check that it's okay and then we move it to production, and so staging is only ever off by one and that one change is definitely intended to go into production within the next few minutes.

B

So we actually use staging as a hot standby for production using functionality built into front door. We can basically say for each URL rule. That says you know if it's slash platform, slash community, slash, stand-up, then route it to the community, stand-up app. We can say well. If the production one's offline then swap it over to the staging one and serve the request from there. That's obviously because it's going through front door, that's all transparent to the end visitor to the site.

B

So that means we have I. Guess I should point out two production and we put in the west. Us and staging goes in East US Asia has the concept of paired data centers. So if something happened and both of those data centers went offline as your guarantees that they're going to prioritize getting at least one of those two data centers back online, so we intentionally chose those two data centers. So if West us goes down, somebody you like runs a truck through a fiber line or something we failed.

A

At the East.

B

Us, if something really bad happens and they both go down. We know that we're on at least one of those data. Centers is going to come back up as quickly as possible. Straw.

A

Okay right any.

B

Questions we should dig into on that stuff. Well,.

A

Let me see so no I mean there's there's like code focus questions, but nothing so far, really on that architecture. Yet, okay,.

B

Okay, maybe jump into some code I think the best way to do this, I'm I, think most of the interesting discussions we've had is when we're just poking around and we'd come across things. So I might just start knowing some stuff, and then we can go from. There sounds great okay, god, let's go to a browser when we, my focus, isn't just on engineering I'm interested in the site as a whole. So there's a few different parts to that. One is obviously the engineering side of things.

B

I'm have a background as a developer, not a web developer. I've been kind of in the web dev space for a couple of years now so folks watching there's likely somebody watching that has more web dev experience than us.

B

The other part of what I focus on is the usability sides they're, like what content goes on-site, how to explain things to customers and then one other part is like the search engine optimization and analytics and data science side of things, and so we might touch on kind of all three of those as we walk through some stuff today.

B

One of the things that's important from a search engine optimization point of view- is that each page has a very distinct URL, so we don't have the same content like replicated on three different URLs and obviously for an end user. We might think that you know like download, like I, have here I download with a slash, that's the same page, obviously, but that's not necessarily how a robot crawling the site is going to think about things.

B

It's gonna see like download with a slash and download without a slash and might get confused by that I think it's two separate pages.

B

So one interesting thing: we have a piece of middleware that does URL standardization, so I'm going to put some capitals in here and put a trailing slash and, if I hit enter on that I'll just zoom in so we can see this we'll see in the network tab that we have a 301 redirect from the capitalized, trailing slash back down to what we have decided to use for this site, which is all lowercase, no trailing slash on any of our pages. So.

A

That ensures you get all the Google juice, pointing at one. Yes, yep.

B

And there's one other piece that makes that happen if I just do a view page source on this.

B

So we have this little piece of metadata. We drop in here as well, which says this is the canonical URL at this page, which is another hint to Google. Being anybody else crawling our site that, if you're looking at this page, this is the URL that we want to be indexed in search and send people to.

B

Cool so swapping to the code. If we look in startup, see us here, roll around till I find the thing I'm looking for.

B

There we go so well, look there's a few things mixed in together here, but the piece I'm going to focus on at the moment is when we're adding rewrite options. We add this new URL standardization rule and so I'll drill into the definition for this.

B

So we'll see this implements from rewrite I rule and we get the context in and we get the chance to do some stuff with this request that's coming in, and so we have some checks here to say like does it end with the trailing slash if it doesn't and- and it's just like an empty one, so it's just asking for the home page- then we get out of here. Otherwise we go through and we do some stuff really didn't we check you know. Is it mixed case or is it all lower case?

B

We wanted force things to be lower case. We want to make sure things don't end with a trailing slash, etcetera, mm-hm, so yeah we. Ultimately we just build a response. Based on that. So we'll say it's real one move permanently just to let everyone know that they really shouldn't be accessing via this URL. Then we go ahead and set the appropriate headers to send them off to the correct version of the page.

A

So there's a question is rule an interface. There wasn't I rule right, yep.

B

This is from asp.net core, so this isn't something we invented so Microsoft asp.net core rewrite pretty simple interface. You can basically do whatever you want with the context it's coming in so.

A

Okay, so that was the URL standardization rule and then you just turn that on as standard as part of your options in the middleware yeah.

B

Yeah so anyway, in start-up CS, one other interesting thing here. So on this site we do a bunch of redirect so over time as we've evolved, the site, we've retired, some pages- we've changed the way things are connected, like maybe something that used to be three separate pages. We've kind of merged into one some stuff just didn't make sense to have anymore and other things. We wanted to move to a cleaner URL structure, and so we have a bunch of redirects in place for our site.

B

The way we used to do that was in web config and we would use our iOS URL rewrite module, which is great because that's preloaded in Azure app service. If you're running on Windows and obviously one of the key benefits of a spinet core is you can run a Windows or you can run on Linux. So we didn't want to be dependent on the iOS URL rewrite module, because that meant you wouldn't get the redirects if you spun the site up on Linux.

B

So we use this handy piece of functionality, which is also baked into a asp.net core which allows you to take rules as they would have been defined but iis and actually serve them using the asp.net core pipeline instead of IAS, but that allows all of those redirects to actually part about app instead of being part of the web server. That's running our out. If we look at those I'll find them here, so we'll basically see a bunch of URLs if you've ever used, the IAS URL rewrite module. This is exactly the same syntax.

B

All we did was copying or cut and paste them out of web config into this file and then point asp.net at them. This was a really nice way to take an app that was previously despite being a bitonic or the actual deployed version of it had to be on Windows that can now be deployed on Linux or Windows.

A

So I noticed as you scrolled through just above there. You also have some some localization out. How do we handle localization there so.

B

Localization is kind of an open issue on the site. At the moment we don't fully localized everything we should. Obviously. So that's it's on the backlog of things that we're working on. We do use the localization at one point at the moment, so I'm going to let's actually look at where we use it first and then I'll show you the example of how it works if I scroll further down to the endpoints.

B

This was something that we moved to when we upgraded to asp.net core three, oh and I'm, routing that we have a localized copy of the dotnet license on our site. So one of the things that our site serves is the static HTML, which is the license that using.net.

B

So if I look at this extension method, this is an extension method that we created. You can see it's as we walk through it's. Actually, this endpoint route builder is actually a really nice way of expressing what we do here. So we say we're mapping an endpoint that says: if the request is for this path, net library license about HTM, then we want to go through and using the built-in infrastructure. That's in asp.net core for localization, oh yeah.

B

We don't have to worry about working out the browser settings and the precedence of browser settings and all that stuff, that's all just baked into asp.net core. So we basically look at the context and we pull out the culture information which is in this thing called features on the context. We get the request culture and we're particularly interested in the UI culture, because that is the thing that would govern what language the you either we're going to present.

B

The license should be read in and then we redirect to the localized version of the license, and these license is it's a static file, that's produced by our legal team, so we just upload it to the site. So if we go looking at dub, dub dub root, folder you'll, see that under each of these, like is the English version of the license. Is the French version of the license so they're all static files? Yeah but then, if we look at that working, let's take this row.

B

Like over here and go there I happen to be my browser set to English, so we'll see a redirect from that's the way the network tab is doesn't make this super useful, but you'll see a redirect, isn't.

A

B

On that one and look at the headers.

B

Look at the right here we go in the response. You'll see the header that redirects to the appropriate location here right, yeah, yeah, there's would be something there's, obviously lots of ways to solve this problem. In our case, the license file that we get is just like a straight-up HTM file that gets handed off from our legal team. So rather.

A

B

Like mucking around converting that to erase a page or something we just put that on the side as a static file, and we do simple redirection to handle and go.

A

Back to startups.

B

Yes, you asked you mentioned some code in here, so this is where we tell we have a list of cultures that we support, but these are all the ones we're interested in as far as the license goes and then, if we just go down and find where we use that.

B

Up here it is yeah we use request localization, which is basically telling asp.net call a hey. We want to get localization services, features I, guess within this request or within all of our requests. Okay. So when our piece of middleware, our routing rule that we are looking at, you know asked for the request. Culture features those are present, because we've added this piece of configuration.

B

A

No I'm, just if you don't mind, I'll just throw questions right in at you. So there was a question earlier about. If it's MVC architecture I see there you've got pages, do we have? Is it kind of a mix I've done some websites that have both MVC and pages I, don't know so.

B

We completely raise the pages now I'd been thinking for a while, like since I'd seen, Razer pages come out that it was probably a really good fit for this site. The characteristics of this site most of our pagers static, ish, as in they didn't, they basically had empty MBC actions on them.

B

Now we run some server-side code, where we make use of built in asp.net core features like we'll talk about putting cache breakers on images and a little bit I'm sure so, they're not truly static in the sense that it's just a raw HTML file that we're going to serve back to the end-user but they're, also not like super dynamic. In that we had any code in the MVC action. We were basically just using built-in features within the razor engine or rendering a page yeah.

A

That's totally what I've built so many websites where it's like every controller, just says, return view and you're like what yes.

B

Now not all of our pages are like that, but the vast majority of them are so now having moved to razor pages. If we look at just like this one, which is the page that talks about MVC within the asp.net section of the site, this is just a razor page, there's no code behind it or anything like that. So this this is beautiful. We no longer. If you want to work out where this page is, you don't have to like go into the controllers.

B

Folder work out what controller it's on work out, what view it's returning all of that stuff, as we made this change, we also made the effort to not to do as little custom routing as possible. So by default we rely on the built-in routing conventions that say the page matches URL or the falls in.

A

B

And page structure matches URL, so you'll notice, like all of our folders and names, are lower cases with hyphens between them. That's because that matches that matches the structure of the URLs on the site and then some of our pages, like this hosting one so I, might just actually go to this page.

B

If we go into the asp.net section, we talk about hosting and we have a place where we list out companies that offer hosting services for asp.net, and this is dynamically driven from a metadata source, and we do some things like each 24 hours. We reorder the page so that we're not like favoring anybody in particular.

B

So if we look at the code behind that one, that would be a page here that does have a CSS file behind it with a very simple piece of code. The logic for that all lives in this hostess service- that's injected from di- but you know I would say maybe like five to ten percent of the pages on our site- have code behind them and 90 to 95 percent of them. Don't there's.

A

A question earlier about single page application- and you know potentially using blazer at some point and that kind of thing is it something where the majority of it just fits more with the server side. Yeah.

B

So I think there's a spectrum there right like if we think about things that and I'm still thinking through all this. So this is just a riff off the top of my head. There's some things that really should be single page applications like the whole site, so I think a really good example of that.

B

If we think of the azure portal like that would be so annoying if every link you clicked on was a post back a new page, but the edge of mortal and things like that should definitely be a single page out and then there's other things at the other end that definitely shouldn't be single page apps.

B

If we think of like a question-and-answer system, you know most people are gonna like go to a question, hopefully find the answer, close the site and go out, but within pay within sites like that they can be sections of the site that use client side interactivity. So that would be true in our site. We have some very small sections of the site that do have some relatively interesting client side interactivity. So this is very much an open question on our site.

B

We're still working out the best way to do this, but we do have a couple of small islands in the site that I implemented using a single page application architecture or like a framework, but it's not the whole site. That's an SBA! It's a section of the site uses an SPI framework to give that client-side feel. So, let's look at an example of that.

B

This one actually isn't using a SPI framework at the moment, it's using a whole bunch of horrible JavaScript, but we'll look at it as an example of something that I think would be much better implemented as a single page app. We have this in browser tutorial where you get loaded with and in the browser editor that we kind of run you through as a new user.

B

We give you some challenges, so just run the code next step, and then we can say like it was this Rowan, so I ran it and says: hey Rowan's keep coding and it starts to give me some challenges to start using variables and so there's obviously quite a bit of client side interactivity here at the moment, the JavaScript behind this page is an absolute mess.

B

So this is a candidate of something we're looking at moving to a single page application and blazer is obviously one of the primary things we're looking at to handle this particular case. Hopefully that answers the question. Yeah I'm an example of where we do have a single page framework and we're still kind of working out. The way we have it at the moment is not the right way for it to be, but it's something that we tried. If we look at the learn hub, so these are places you can come to learn asp.net.

B

We kind of aggregate some resources for learning about asp.net, there's some client side interactivity here, so I could search for you know, I get suggestions and I can search for tutorials, and this is actually implemented as a as react at the moment.

B

Just because that's what we used when we first started playing around with single page apps, but again, like obviously we're the 18 that team we use blazer though, but looking at movie mr. blazer as well.

B

Hopefully that answers the question. Yeah.

A

It does somebody was asking about which, which, by framework and I, think you just covered that so going back just a short bit just because two people asked about this Pete two people were asking about Arabic support and if there's some ability for the community to contribute to translations, so I, don't think anything's possible now, but I know like the docs site, you can contribute I, don't know there if they offered translations for it either I don't.

B

Know if you can contribute to the translations, so the site at the moment is closed source. So we use github that it's a private repository at the moment. I there's not like a particular reason for that other than that's just how it was originally done.

B

So, as we've been working on the architecture of this site, we've split out some pieces, which we are definitely going to move to being public, that people can contribute to I'm, not sure if the whole site is going to be or not that's kind of an open question that we just haven't answered. Yet in a minute we'll look, we have a resources repository, which is where we've started, putting the metadata that runs the site, because that's something where it makes sense.

B

It would be really good for the community to be able to contribute to those so, for example, all of the metadata that runs this section here. It makes sense for people to be able to contribute to the metadata that runs the list of asp.net hosting providers. It would be great if new hosting providers that want to add themselves to the list could just send a pull request. Instead, maybe in a little bit, we could look at how we're splitting that stuff out. um I honestly, don't know how the translation is going to work.

B

We will probably end up reusing at least some of the pipeline that is used for Docs and some other places so trying to have that as public as possible would definitely be something we take into account as we work on that all right. I know, that's not really an answer. I guess it realized. No I don't have an answer. It's.

A

A hard problem right I mean it's oh yeah I do feel like it is something where if the community can contribute it's it's nice or and I've seen different approaches like where you do automated. You know best guest translation, but before it goes live you have someone. That's a native speaker review it so they're not starting from scratch, but they're at least reading it and seeing if it makes sense, I, don't know I.

B

See well really interesting question in there. Why use a custom Donette website for a site like this rather than a CMS? So that's.

A

Actually, a super.

B

Interesting question so I think there's pros and cons to both things.

B

Interestingly, this is my perspective, which not everyone would agree with, but we kind of have a CMS right like github is the CMS. If you want to make a change to a page, all you do is just edit the text using the github web UI. So if someone non-technical wants to come and like update the heading on a page or something they can easily do that, they just find the page. The files on disk match the URL structure. So it's super easy to find and you can just send a pull request now.

B

Obviously, that's not quite as flexible as a like drag-and-drop editor in a CMS but yeah our site's maintained by the dotnet team, who is fundamentally a technical group. So us, like even the least technical people working on our team, editing HTML is like straightforward, I. Think.

A

Who there's it's deceptive, because and partly because it's such a clean feel to the site, it seems like it's all content and there's there's more than you to expect is dynamic there's. So let's look at this as an example.

B

You might like.

A

B

Just some buttons, but if we go to go to the repo that is actually all driven off the JSON metadata that you find in this completely separate github repository right here. That would be really hard to do in a CMS I'm sure you could do it. You could like write, custom components and you can upload those components to your CMS and things I. You know most CMS systems have a way of adding in but.

A

Then you start getting to the point of working harder to support the CMS versus you know what I mean yeah.

B

Whereas if it's just an actual website, well deployment and versioning, and all that stuff's just built into DevOps, so if we have a bad deployment or something yeah, I think my take is that you definitely could build our site in a CMS, and it would have some advantages over what we have right now, but I think those advantages would be outweighed with. It would not outweigh their challenges. You would face as doing.

A

B

A

That's a good point to somebody was saying that you, you know your your building on your running on what you promote and like when you win asp net core 3 like if you scroll down to the footer like you're, always on kind of the latest releases, usually with this so yeah so powered by dotnet, core 3 and I. Think I wouldn't be surprised if you've run into cases that you've reported back to the product team. Where you're like hey we're, hitting an issue. Yeah.

B

A

B

In the we first started running now, we made the change in the preview 7 of three-zero-zero release. We swapped. We try now to have the dotnet site running on a release at least one week before it's released public, obviously we're not it's not like. We have a release that we're sitting on for a week we run on the nightly, builds of that release, which of can anybody can use? mmm And yes, we have found things in there like we found some issues.

B

There was an issue where, from an MVC action, if you returned not found, you wouldn't get the customary page that we found, because our site returns not family.

A

B

A few places yeah yeah I, see quite a few folks in the chat kind of saying, like yeah. You could definitely do that with this CMS and, yes, you absolutely could I think yeah.

A

B

Would be valid options for us to your point like we build and ship asp.net core, so there's a lot of value in us and actually using our product. It gives us both the experience of being a customer validation that we can run a fairly reasonably high traffic site on this iPhone. We can monitor like CPU and memory regressions things like that and well.

A

And that is a key point. I mean you serve millions or requests a month in you. This really is something where you are. You know if something's gonna go wrong, it's the chance. If something wrong in an asp net core early release, there's a good chance. You'll see it before customers will, which is. Hopefully you know, I mean big picture is good yeah.

B

It's actually interesting I mean so folks might be interested in this, but outside eye is growing so we're currently at around, like 8 and 1/2 million page views a month as we've worked on it. This is actually I find this interesting. I looked this up today. So over the last two years since I've been focusing on the site's, we started back in kind of May 2017 of this effort of improving search engine, optimization, making sure we have all the right content, also like retiring some legacy sites and trying to focus in on one big site.

B

We've gone from, like 2.4 million I wrote the numbers down: 2.4 million requests a month back in May of 2017 up to our biggest month. So far was actually July of this year at 9.2 million I'm. Typically now we're sitting around eight and a half million. No so yeah, it's not it's not Facebook or anything, but it's an interesting sized site to be validating our framework on yeah.

A

Yeah, so there are some interesting questions have come up. One was saying you mentioned that you do have some parts that are spa in the larger site. How do you actually integrate a spa inside of a full? You know spa site or a full server-side application.

B

Yes, so the way we do it at the moment is it's actually a separate app service, so it's actually a separate site which we then use front-door to aggregate together and.

A

I think when you mentioned front door before people may have missed that, because it's easy to miss you're actually using front door to kind of put this common like pace on top. But it's actually there's a few different websites that you're managing and running separately and then front door kind of makes that transparent to the.

B

User, so if I go back to this one, let's just use the Learn hub as an example. So that was the page where I could look at the learning materials and I could search and a few other things.

B

The main site would be one of these web apps in this diagram here see if I can, but this might be the main site here and so by default, any URL that comes Dada, Microsoft com, slash whatever gets mapped by default to this app service here, which would be you know, my main website taught as your website's done yet behind the scenes.

B

But then we say if anything starts with like slash, learn, slash asp net or take that and actually map that over to this app service here instead, and so the way we have it implemented right now is that this is a single page app which handles that client side interactivity. Now, as we talked about this, we actually don't necessarily think that's the best way to do it. So we are now prototyping the idea of actually using Islands within the main site.

B

So instead of having separate sites for kind of micro sites, we would actually put everything in a single site, but we would have islands that render in the client side, interactivity, and so obviously one way to do that is to use blazer when that's just kind of integrated by default, because it's just still asp.net core. But there's also ways to embed like react. Islands within within the site as well, when we're playing around with various ways to do that at the moment.

A

Whoa, let me see there is another good question in here and let me see, Rey was asking about logging and diagnostics.

B

Yep so I'm not gonna open that stuff, because I would be showing a whole bunch if I.

A

Don't want to show in the portal.

B

The two main things that we use for logging and Diagnostics, so we integrate with app insights and so we'll see that if we go to startup see us now, we use we add application insights, telemetry, pulling our instrumentation key from configuration, and so that gives it we use app insights for all of the like or o4s keeping track of client-side things. So we like regularly go in and say like what are the common URLs people are getting a 404 on. Is that an issue like did we break? Something?

B

Is that a common link that people are gonna, try and hit? And we should add a redirect or add a page on it or like? Is there a link on a prominent blog somewhere, that's pointing to our site to the wrong URL that we should go, find and fix, so these app insights for that kind of stuff? That's also the azure portal would be where we look at things like. How are we doing on time? So it's like CPU usage and memory usage and keeping a track of all that kind of stuff. Wait.

B

How often have we scale it up and down so we use the built in Azure, alerting for all that stuff. We get. We actually been integrated with Microsoft teams. So, if there's, if it looks like there's an issue like the response, time starts to increase on the server or it needs to scale up to handle an increased load. We get just a message in teams on a channel that we all look at and that's all just integrated into Azure.

B

So that's really easy and then for analytics, which is so that's all about how's the site doing on them. The other question is I care our customers doing like how well is our site actually serving our customers and.

A

Then we turn more.

B

To Google Analytics, so we use Google Analytics on the site to look at things like: where are people dropping off from our site? What pages are people learning on where they just bounce straight off the site? So we use a combination of those two things: I.

A

Think that's something that people would have no idea how how thorough you, how thoroughly you and your team review that and and have like you- are constantly improving things and you're watching for here's, where we're losing people as they go from. You know the landing pages to a tutorial, and you know continuing to improve the experience.

A

B

Know this might be interesting to people or it might not. This is kind of getting less on the technical side and more on the design side of things, but there's a bunch of different stuff we use for that. We do use the studies where people will come to Microsoft and they sit in a room behind a one-way mirror. We'd give them a task to do it and, if possible, they bring their own computer and laptop.

B

Let me actually watch them and we get their feedback and it's really interesting watching people, the results you get from that youth super obvious in hindsight, but not always obvious when you're looking at a site for a product that you own and understand completely so a lot of changes on our side.

B

If one example, if you look at the homepage of our site, you can imagine you're a brand, you user coming to done that for the very first time, maybe you're in no js' person and you're, like someone's using done it you're interested what it is, the way our site used to be structured.

B

Is you had land and these boxes here or the equivalent of these boxes would be more like dotnet core done it framework xamarin, slash mono, which, not surprisingly, when you put a non dotnet developer in front of that you know your lab they're like well. That doesn't make any sense that doesn't help me understand what this framework, nothing at all. So those.

A

B

A

They call that shipping the org chart right.

B

A

B

Or maybe shipping the technical implementation of the product, yeah.

A

A lot of our work has.

B

Been around like how do we explain dotnet in a way? That's true like this is not. This is not smoking mirrors. You can build for web and mobile and desktop, but you don't need to know the name of all the underlying technologies when you first land here of.

A

Course, if you choose web.

B

And you're a web developer whoa. Now you need to know that you're going to be building an app with ASP on there. So.

A

Anyway, that's more on the design.

B

Side of things might be interesting, yeah.

B

A couple of other things, so one of the reasons we've had such a big increase in site traffic is search, engine optimization and looking at having a really clean site. So let's look at a couple of things that go into that, so one of the things is that site should have a robots.txt. So if google comes to our site, this is what lets Google know how it should go about crawling our site. So there's a few places where we tell Google, don't bother crawling these pages.

B

These aren't things that you should be indexing, so we have some directives there and kind of rank going with this. This is a little bit more interesting. If I look at the sitemap or the site, I mean people have seen sitemaps before I would assume.

A

B

Kind of indexes all of the interesting pages on the site to tell a search engine crawlers where to go to find everything. There are obviously ways that search engine crawlers can achieve this without us, giving them a sitemap. But this is a nice way to help the crawler out and make sure our site is represented as easily as possible.

B

The most common way I've seen for sitemaps to be built, is to get a third-party tool pointed at your site, and it will scan through and scan all of your links and build out in a picture of what it thinks the site looks like, and then you would basically check that sitemap unit has a static file to your site and obviously periodically you have to go through and update that, interestingly, with ASP right now, we thought well, we should really have to do that.

B

Asp.Net knows about all of the routing information, so we should be able to build this thing. Dynamically I was going to show you how we did that yeah one of the thermoses that we add, is a sitemap service, which is our own custom service that we've added and this thing it goes through and it uses endpoint data source.

B

So this would be the new routing model. That's in asp.net core we've had the service around for a while. It used to be built back in the I. Think we first builder when we were running on dotnet, core 2.0 or maybe even earlier, and this thing used to be really complicated. I mean we were like casting to internal classes and all this crazy stuff to try.

A

B

What all their the endpoints we're looking at MVC actions, and all of that now were you able to use point data source, which is a way of like looking at all of the different endpoints that are exposed, and then we have some logic here too, they go through them. Look at all the end points or a route endpoint, and then we have some logic here to go through and work out like what is the URL that it represents.

B

Let's dig a little bit deeper on this, so some routes are completely defined. So I'd looked at a page like slash, Apps, slash, asp.net would be this index page here. I, don't need any other information to work out what the URL is that should go in sitemap. That's just slash abs, /, a speedo! Well, that's not true for all ones. So would be a good example here, let's look at downloads and then let's look at the dotnet core download page, which is specific for a version. So the route for this one is slash.

B

Now notes left on that core, slash, REO or or whatever version of donek core I'm interested in and so I can't just render this to the sitemap. I need a way to expand this out to all of the different versions and, interestingly, the versions here all come from a service like we have a download manager which knows about all of the different dotnet core versions. We have to stick with me a little bit here as you can't like any pieces that make this work.

B

So on this page we put a attribute a site map, URL expander, and we tell it what piece what class can go and tell you how to fill in all of the values for this URL, and if we go look at the implementation that thing this will get the download manager from services. So this is the central service that we use for everywhere on the site that we reason about downloads and we expand the template URL.

B

We go through every version, of.net core that we know about, and we replace this version placeholder in URL with the ID of the current version, though the way that gets expanded out in the site map, if I just find it for you is, we can see here, there's girls oom in small.

B

We can see here all of these URLs, so they're coming from that one route they're using the central service, which is used everywhere on the site to define what versions of.net core exist and then it's going through and it's defining one four three: zero one: four two, two one, four two one clear as mud, yeah.

A

Yeah, no, that makes sense and I think this exactly points out the kind of thing where if people are looking at it and they're like why not just you know, use a bunch of static files or you know like there's a you're doing, you're being very efficient using the extensibility points that are built into asp.net and not repeat, you know what I mean so you're plugging in with things and if you click through on this, like there's a lot of version, history and you're, also there's Windows Linux, Mac, docker yeah.

B

A

A lot of Eros page.

B

With a without when a new release of dotnet core comes out, and we check in the changes to the JSON data, there's no site changes to go with that. The site knows how to reason about, like which one is the recommended release. You know three one gets released, it will listed at top here if it's a preview as to finding metadata or get a preview tag on it here. You know when three one reaches GA and we release three one zero. Well then, the page dynamically swaps around and that becomes a recommended release.

B

It gets flagged as current, so yeah.

A

Your point there's a bunch.

B

Of dynamic stuff that happens mm-hmm one other point on this: there are certain pages that we actually want to exclude from the sitemap, because they're not intended to be crawled by Google an example of that we have this campaigns folder on our site, which is where we stick stuff that we're gonna link to for a short period of time from social media or something pages that we're not intending to keep around forever they're just existing for a while.

B

So on these pages we add an attribute and actually learnt this from the asp.net core team, there's a way of defining attributes actually in the Razr page itself. Instead of having to have a code file behind it that you can use this syntax to put a sitemap exclude attribute on the page and then, if we go back to our site map service, you'll see if, if the site map exclude attribute is present on this page, then we don't return any URLs for it at all.

A

Well, yeah and this sort of thing to James James was saying: cool use of, employ routing and I. Think this this it's been cool, watching the evolution of where and point routing is going based on. You know from way back and the here's something we're doing internally and now it's something where it's available all through the platform, and you can you can make use of it yeah so.

B

One of the interesting change I made when we migrated to razor pages to is the way this used to work the site map when it came time to actually render it is it used to be an action on the controller where we would. We had an object model that represented the site map and we would put a whole bunch of like XML serialization attributes on it and we would directly return.

B

We basically do an XML, serialization and return the site map, and we had to do a bunch of work there to have the right attributes and the right properties. Even some, we didn't use to make sure that it was serialized in a way that people like Google were expecting it to be, but with a move to razor pages, we actually swapped it. We now just render it as a razor page, but instead of returning HTML it's returning XML uh and in the code behind we just set the response type to text XML.

B

So we have code behind it's using a centralized service. The sitemap service to bind that to the actual model of the page. So is the list of URLs that should be displayed, we're messing around with the response a little bit there and then we're actually rendering the XML using a razor page, which this is so much cleaner than what we used to have to do, to get it to properly serialize using the XML serialize them. I thought it's.

A

So yeah yeah, definitely so I'm noticing, with there's different places where you can handle caching right, like you, can have caching at the front-door level, you can have cache. You can do data caching, you can do like caching in the pages and stuff. What? Where is your kind of focus for caching, mostly that that's done at the front door level? Yes,.

B

Yeah: okay, the thing I.

A

B

Front door is, it will respect the cache headers that you returned from the site itself. We're still playing around with getting this right. I think caching is one of those things. It seems really easy until you actually start using.

A

B

There's a whole bunch of domain knowledge around like your actual site and getting caching right for your site and then there's obviously nuances to how every caching framework or solution works under the covers, like there's a little bit of nuance to that like, if you don't set cache headers, what happens well, as your front door picks a random number between one day and three day and caches your content for that. Much of there's no cache shadow, which makes sense because you want your things like expire at different intervals. You don't want to hit like it's.

B

You know three days since I initially deployed the site, and so now everything expires all at once and I get a whole bunch of requests back to my central service, but it takes a while to get all that stuff right. So if we go back and it's just a page that has some images on it. Oh this again network open and we'll look at this one here. So this is an image.

B

So I will see that we have a cache control on here with a massive expiry on it, but this means, as your front door, will cache this kind of in CDN style. Caching like cache it out around the world for a really long time. The reason we can do that is because we put a cache breaker on all of our images. So if I zoom in just a little bit higher actually you'll see I have this the hash of the actual file name on the end of it, which is a built in feature in here.

B

Speed on that core I was.

A

So embarrassed you pointed this out to me recently an ID they're, not known it or totally forgotten it, but that ASP append version in the tag helpers makes that super easy yeah.

B

It doesn't so that means our images they basically forever cached out at the CDN end, points which front door handles for you front doors, I might be speaking incorrectly here, but I think front door is actually built on top of the CDN infrastructure.

B

So it's really easy for it to make CD services available, and so this image- or this is actually a CSS file, but this will get cashed out all over the world at the CDN endpoints and then those requests never come back to our HAP service so, and you mentioned how they actually get that appended for you. So let's just go. Look at that page I was on.

A

Which would be the home page? This.

B

One if we pick an image, so here's an image here if I just stick ASP append version equals true on it. Then asp.net call will take care of appending that hash, which means, if I, create a change where I change that image and then deploy it. Then it will get the page will get to.

A

Start about a passionate.

B

That will go down to the client. The client will request the image with the hash on it. Cdn will see that it doesn't have that specific URL cached already, so it will come back to the central app service and then it will send the asset back and then the CDN will cache that asset with that hash on it. From that point on so.

A

Sebastian was asking if there's a way to force cache invalidation in as your front door. There.

B

A

B

A

Most the time you don't need that right if you're, using this append version, yeah.

B

The problem with caching is you have to get it right, the first time and if you get it wrong the first time then you're hosed. So we've.

A

Had some things like that.

B

Like we missed ASP, append version off an image and that's really hard to go fix once you've.

A

B

We you can go into the azure portal and, like manually purge, you can purge the entire cache if you really wanted to or you can plug in a URL and say purge this URL and it takes I've seen it been as quick as 30 seconds and up to like two or three minutes for the purge to take effect everywhere.

B

Okay, it's relatively straightforward thing. So.

A

One other thing, speaking of that image tag, and just in general, is that I was really happy as I looked at the site and did the view source dirty thing and all that to see how much use you're making both of SVG and then just kind of modern web design things so you've got a lot of SVG and you've also got responsive design using bootstrap yeah.

B

A

Don't know and.

B

We use bootstrap under the covers. We worked with a designer here, so we don't have a dedicated designer for our site, but we have a design team. That's what's all of the develop division. Here at Microsoft we worked with a designer to come up with a set of templates which, in implementation terms, basically turned into a customized version of bootstrap. So now we reuse that, on pages all throughout the site, so a that means you get a consistent experience as you go through the site like if I look at network time for a minute.

B

You know if I look at the tiles here, they're one style and if I go into web, like we use the same components everywhere throughout the site, so yeah we use bootstrap, and that also makes it really easy to do. Responsive stuff.

B

Too, like responsive you know, obviously bootstrap has all the building stuff to make it work. Well, mm-hmm, so that yeah we try to keep things fairly lightweight, even from an accessibility point of view, the less custom things you do, the easier it is to have a site that works well for your vision, impaired people using a screen reader or you know.

A

B

Having to use the keyboard to tab through the site or anything if you're doing crazy stuff with tab indexes and a whole bunch of like crazy custom, HTML and using CSS, but it's tough- it's not really intended to be used for. Then it's really difficult to maintain like a really clean, accessible site. Whereas if you just.

A

B

Pretty straight forwards, then it's very little work to do so.

A

Hayden's asking if the bootstrap usage extends to the wiki. Like pages I mean it's basically throughout the site, you're using a bridge.

B

A

B

Interestingly, on this one of the key reasons, so we talked about the front end like the actual pages section of the site, currently being split up into separate microsites, one of the things we're finding is. It gets really complicated to share the framework between all of those.

B

It's definitely a solvable problem like we asked we are sharing this header footer across all of our sites and microsites at the moment, and we are sharing our customized bootstrap implementation, but it really adds complexity to working with the site so like if you're working on a part of the site and you're like I need to. This is a part of bootstrap we haven't used before I need to go in and cut my zit. Well, if everything's like really split up, then it gets a little bit complicated to go through and find the right place.

B

You know you're gonna change it here and then that goes to this code base and gets deployed, and then you can use it. That's one of the reasons for the front end section of our site, which is relatively straight forwards, we're looking at pulling everything back into one out.

B

It's also an suggested using react so at the my.

A

B

Some parts where we are using react ready. We are yeah and actually the header at the moment. So the header is a part that we're not happy with exactly how its implemented right now. So this is a shared Microsoft framework for defining headers and footers. We call it the uhf. The universal had a footer. So if you go to Microsoft com, you'll see something that looks really similar as we go like Visual Studio com, sorry, Visual, Studio, Microsoft, comm, you'll see the similar theme here.

B

This is like a framework, that's used throughout all of our sites, but we then have the customized version for dotnet, and then we try and share that between all of our sites and at the moment that's a little bit messy.

B

You see, it actually doesn't render super well when it loads rendering really quickly now, but when it loads is like it renders kind of asynchronously and pushes the content down a bit all very solvable problems, but they're the kind of thing that get more and more complex as you make sites more complicated, which is why we're looking at pulling everything back together. Who knows? Maybe we'll pull it all back together and we'll be like well, that's even worse. It was we're prototyping this stuff at the moment,.

A

Well, it's continually improving, right and I think the way that you've built things with the CI and and the you know like writing as little code as possible and you and reuse, and all that allows you to continue to improve things without having to do a major big rewrites. Even if you do, you know change, you move things around yeah.

B

One of the overarching principles, both from a Content perspective like how do we build the pages but then also how we implement them, is to like keep everything simple like so doesn't need to be overly complicated and to your point, not just simple, but also really cleanly architected. So.

A

B

Know if we're gonna write some code, that's going to be used on a page. We time to split it into a service, that's been injected by a DI, and so that means, if we decide to take the code, that's in that service and split it out to a separate API. Well, then, it's really easy to do that. We just take the code split it out to an API.

B

Are we update the service to call the API and so they're just doing it directly, and it just makes it easy to move these bits of the architecture around.

A

um Wow we're at five o'clock there's a ton of cool stuff here, I feel like we did cover quite a bit. Is there anything else that you'd like to ever mention I.

B

Think so I did say one question there about react like there's a way to pre-render or prepend.

A

B

That is actually, even as we look at having islands of content within the don't head site. That is what we're looking at that kind of avoids that thing where the page initially renders and then the Dom changes and everything moves around. It obviously not experience. So yes, you're right. That is the way so.

A

In you did show some react parts of the site before there was in some of you, like um hello, there's the hosting gallery and some other yeah.

B

That one's not react, that's still I would say that's very. If we look at the hosting gallery.

B

So this is dynamic, but you don't really interact with it. On the client side, like.

A

ah Right, this lends.

B

Itself very nicely to a razor page that gets the data set winds it to the view you're done, there's no like there's no JavaScript that runs on here. Rayray, it's the stuff, that's different than something like the in browser tutorial or the learn hubs. So the learn hubs have like search and you can filter by tags and all happens. We do a nice shimmer effect as the contents, loading asynchronously- that lends itself much more to our client-side libraries. Okay,.

B

What do we want to keep going yeah.

A

Well, I do I, I, don't know, I, don't see any kind of lingering questions here.

A

Let me see yeah.

A

Yeah I don't know, there's some other questions about blogs and things that are kind of separate yeah. I think this is probably a good good spot to wrap up. Thank you. This is. This is really interesting. I is you've like shared information internally at Microsoft and, and you know, I've learned both technically and then also just watching like from a site architecture. Point of view, I've learned quite a bit from you, so I would just want to have the opportunity to kind of share this with the community as well, so and and I.

A

Think one nice thing to wrap up with is people are very happy with the amount of stickers you have on your laptop I.

B

Do my best I have a pile ready for my next laptops awesome.

A

B

A

B

One thing I'd like to wrap up with, because obviously there's a bit of back and forwards around like are we doing this right way? I definitely want to be clear that, like I'm, not somebody who works on the asp.net core team telling you that this is like the prescriptive way to do things. I mean I, obviously sit in the same building as a peanut core team, so I don't go and talk to them and like how we did the site map and everything.

B

I got some help from them and the best way to do that, but I'm much more on the side of somebody who's actually using asp.net core on a day-to-day. It's not the only thing I do so I'm, not in no way claim to be an expert, so I think one of the things we've seen is we've like chatted backwards and forwards, and some of the comments from the audience and everything is that there's lots of different ways to do things.

B

You just got to find the way that works best for you and nothing is ever perfect. You have to find the right balance between like good architecture that doesn't take up too much time and shipping stuff that helps your customers say yeah anyway, yeah I'm.

A

B

That if I said something that was like heretic, oh Lord, that's the wrong way to do it. Well, that's great! Yes, that's good that you know a better way well,.

A

Like anything in programming, there's a thousand ways to do everything I do think that you've tried you're continually trying different things. So, probably a lot of things. People say why, wouldn't you do that? Well, there's a good chance that something that you did try already a year ago, so well, alright! Well, thanks a lot folks, let's wrap up there and thank you Rowan for for the time.