.Net Foundation On .NET, 5 Dec 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building Serverless web applications with Blazor and Azure Functions

Description

Learn about Blazor
https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor?WT.mc_id=ondotnet-c9-cephilli

Blazor and Azure Functions for Serverless Websites
https://channel9.msdn.com/Events/dotnetConf/NET-Conf-2019/B203?WT.mc_id=ondotnet-c9-cephilli

In this episode, Jeff Hollan from the Azure Functions team comes to discuss the benefits of pairing Blazor WebAssembly applications long with Azure Functions.

[01:12] - What are the benefits of Blazor in Serverless?
[04:02] - Why does Blazor fit well with Serverless ?
[09:56] - How to get started with Blazor and Azure Functions?
[14:15] - Community call out
[15:47] - How to reach out to the Azure Functions team?

#azurefunctions #blazor #dotnet #aspdotnet

A

In this episode of the on.net show,, I have my good friend, jeff han and coming on to talk to us about how we can build serverless applications with both blazor and azure functions, check it out.

A

Hey everybody, welcome to another episode of on.net show..

A

My name is cecil phillip and I'm actually super-excited, because I have one of the people that I have a lot of respect for,.

A

I hope you have a lot of respect for,. I have with me today, mr. serverless, mr. jeff han., how are doing sir?

A

fantastic to be back., I'm doing great.. I really hope that you're able to join us today.

A

now everybody knows you for obviously talking about azure functions and serverless and microsoft in general.

A

But I feel, like you, have some new stuff that you want to show us today, a little bit less about the product and, more so about how we could use things together in the microsoft viscus system to create some interesting applications?.

B

Yeah, absolutely,, I'm nothing if not a fan of buzzwords.

B

So if it's not serverless,, it's going to be some other stuff. sure.. So today I wanted to talk to them about things like webassembly and specifically blazor, and how dotnet developers have this brand new world of development patterns open to them. With some of this new tech, like blazor,, the dotnet core three started to light up.

A

Sure., so I feel like in the dotnet ecosystem in general,.

A

Like blazor, is like the new hotness, right?

A

everybody's talking about blazor and writing like these client rendered applications..

A

So we haven't had a tremendous amount of conversation on the show about it.. So what do we get?

A

your view, of,? What is blazor and what are some of the benefits of using something like that?, particularly so in a server-less contexts.

B

Absolutely., so blazors is made up of two pieces or I guess there's two flavors.

B

Of it and we'll show one of them more strongly than the other, but really it's about this nice dotnet framework for writing. Web applications,, specifically single-paged application style, daps.

B

now,, the traditional blazor,, the one that more people may be familiar with,.

B

I know I was when I used razor pages, is server-side rendered blazor.

B

Yes., so you can write a blazor app,, you deploy it just like you might any dotnet web application.

B

You've got this nice reactive style. You add on to use.

B

But this new emerging one that actually pairs very closely.

B

With serverless, are these client side rendered blazor apps.

B

In that case,, what makes this unique is that,.

B

You still write dotnet application., you're, writing a dotnet application,, you have,, here's my element of html that I need to be rendered.

B

Here's the dotnet code that I need to be evaluated..

B

It's going to be compiled into dlls and binaries.

B

But what's crazy here is that, this blazor,, this dotnet code, will actually execute inside of a web browser.

B

So there's new technology called webassembly, which pretty much said, any web browser, whether it's safari, chrome, edge,. They can actually execute binaries.

B

So traditionally,, if you wanted to have code, run in the browser,.

B

Your only option was really javascript, because javascript was the only language that a web browser could interpret.

B

yeah., but now with blazor and this client side webassembly powered dotnet..

B

You can now write a dotnet app that can get compiled and actually.

B

Run directly on internet explorer or edge.

B

But still run all your dotnet code to do all the logic.

A

That's pretty interesting scenario for a lot of our developers. Because, javascript is great, great community over there and tons of great packages and resources., but for me,. If I could reuse my knowledge of c sharp and dotnet.

A

And write something that runs on the server and on the client and be able to have them talk to each other,.

A

That's a huge benefit for me and a lot less stuff for me to have to worry about. In terms of how do I set up this thing?.

A

How do I build in on?? How do I get it ready for deployment?

A

yeah,? Not only do I liked that.

B

I can reuse the languages that I know and I'm familiar with,, but even the ability to share things like classes where I have a class that needs to be filled out here and it's going to be submitted to the server, and I can actually just share the same class in both spots without having to be, okay.

B

I need to switch this to json and javascript is going to do it that way.

B

it just clicks together. Really nice.

B

yeah,, that's great., so now,.

A

Why is there such interests? Now??

A

I find folks with having these client-side render to apps with serverless.

A

There must be an interesting benefit there,, because everybody's talking about it all across the ecosystem.

A

Ready to go on a ride,, I've got.

B

Some visuals here, visual aides..

B

Let me see what you've got., let's do it.. So if we think about a standard web application,.

B

It looks a little bit like this, where you've got the browser,.

B

It's making a request to a website, and you can imagine that this is an asp.net site.

B

yes.. It's going to hit the server.. The server is going to render the code like we talked about and then return back in index.html.

B

yes., which the browser renders.. This is sometimes called the three tiered architecture.

B

sure. now,. The downside of this pattern is that,.

B

If I have immense scale, like I have a bunch of requests that happens,, maybe a huge burst promotion..

B

I now need to scale up a bunch of instances of my server and I need a bunch of instances of the server all rendering their little copies of an index.html page.

B

right.. So it's cumbersome to scale., but even then, maybe it's the inverse problem,.

B

Maybe I don't actually have a site. That's super popular.

B

maybe actually also have a site. That's not popular at all.

B

All right. the problem with this approach is that,.

B

I need a server running 24-7 in order to be able to serve.

B

Those web requests, even if only one or two people are going to their website a day or a week..

B

So what's interesting about these new blazor type apps and where it fits with serverless, is that now I can take that same application..

B

So let's say I want to go to jeffholland.com., but now, instead of having to hit an asp.net site,.

B

That's going to render the html.

B

it's actually just going to hit a storage account, and that storage accounts just going to return back, an index.html page,, that's going to reference things like brazor files., it's going to reference things like css., but here rather than the server doing all of the rendering,.

B

It's actually just pulling back a static page,.

B

And then the browser itself I mentioned the.net can run in the browser.. Now it's up to the browser to actually render that code..

B

So this is nice because now I'm not paying for a web server,, I'm just paying for a few files in a storage account..

B

Whenever those files need to be rendered,, then it just pulls in those files and renders them all on the machine.. So you pay, maybe nothing, pennies a month to do this.

B

at the same time, if it needs to scale,, I'm just scaling that storage account,, I'm scaling that file and storage, but all the hard work's actually happening on the customer's web browser.

B

right.. That makes a lot of sense because I can imagine.

A

Like storage is probably a little bit cheaper than compute.

A

yeah, for sure. right.. So now we're not worried about crunching strings and.

A

Rendering html and processing css and all these other things to send to the browser..

A

We can do a lot more of that interaction upfront on the user's machine using their own,.

A

Whether they are using edge or chrome or whatever the case is,.

A

And that could just happen in their own space..

A

I think another thing that's interesting there to know is that, dotnet developers now have the ability to interact with the web platform..

A

So whether we're talking about local storage or we're talking about the fetch clients or any of those other interesting things that are very native to the browser,, we have a way to interrupt those features as well.

A

yeah.. It's super powerful.

B

The other reason that serverless comes in handy,.

B

Is because maybe somewhere in this website, I do need to call some actual data.

B

sure.. I've got a sql database or a cosmos db database, and I need to pull that data into render my page.

B

now,. While I could run dotnet in the browser- and I could have my browser connect directly to cosmos,.

B

It gives me a little bit of heebie-jeebies to think that I have all these browsers connecting directly to my database.

B

right.. So the other pattern we see very common with this is,.

B

I actually might need some code that runs in the cloud, and that's where our good friend azure functions comes in..

B

All right., so also serverless same benefits,.

B

It's a lot less expensive than traditional compute., but here my browser can make a call to say, "go get me. Some data," calls a function written in dotnet as.

B

Well goes and fetches that data securely in the server and returns it back., so I still can have some server side logic., but using this new framework, I don't have a traditional web server,.

B

I've got these serverless functions and this blazor client-side code, they're playing hand-in-glove with each other..

B

That's amazing, because if you think about.

A

This scale across not only your front end, but your backend as well.. You have a tremendous amount of flexibility.

A

again, the whole thing about serverless is that,.

A

I don't have to think about these machines that are in the back, that are doing the work..

A

So if I have tons of these front end client is running.

A

Blazor and the load increases exponentially like my function, code,.

A

My serverless code is just going to increase exponentially as well., then up-front, like we have blob storage,.

A

We can put something in front of it, like azure, cdn that'll, help with the caching and the geolocation of that., so clients all over the world can be able to hit these static assets and not really have to worry about provisioning. These things all over the place.

A

yeah, and the scenario you mentioned.

B

We've actually had customers do exactly that..

B

So one of the cool stuff we've seen a customer do is,.

B

They had a retail site that was built on wordpress.

B

It was like to traditional servers architecture that I talked about, server, full. yeah., but they want to run a massive promotion and they were like, "we're going to get thousands of hits every second..

B

We can't scale our backend database enough.".

B

So what they actually did is for the pages that we're going to be impacted by the promotion,.

B

They turned that into this new serverless web architecture..

B

So the bulk of the site was still this wordpress site.

B

But then, when that incredible amount of traffic happened,.

B

To your point, they're just scaling all these client-side browsers,.

B

They have these functions in the storage account with cdn., so the site was able to handle this incredible amount of load by taking advantage of this architecture as an extension to their existing api event..

B

So people people find a lot of use and saying, "not only is this less expensive,. It's super elastic.".

A

All right, and with azure functions, not only do write blazor and dotnet,, but we write azure functions and dotnet. so again, dotnet in the backend, dotnet in the frontend and everybody's happy..

A

It's the best way to write any code. Honestly.

B

Java-Scripts great null, blazor is way better.

B

sure.. So why don't we talk a little bit.

A

About how we can actually do this?, what does it look like from a developer perspective, to create a blazor app and create a function app and have them work? Together.

B

Yes., so blazor right now is in preview as part of dotnet core three.

B

yes.. So the first thing you need to do is, just make sure you install the right templates..

B

So if you head to the dotnet core blazor site, it'll make sure you install the right templates for your dotnet cli,, and then you get a bunch of new templates..

B

The one we've been talking about today is this blazor wasm,, which is webassembly.

B

So that's blazor that runs on the client.. So once you get the templates installed,, it's really about just as easy as just spinning up a project.

B

Okay., so I'm here in an empty directory., I can say dotnet new and blazorwasm. As I mentioned, the blazor that runs on webassembly.

B

Okay., it's going to scaffold out that for me a blazor site, that I can get started with, I could customize it,, I could add, even interact with javascript in this side. If I wanted to.

B

sure., but this looks super traditional, right?

B

I've got an index page,, which has just some simple html..

B

I see a little annotation here.. If I come here to my counter,, you'll,, see there's a little bit more c-sharp code., then. Finally, there's an example of something that's actually going to fetch data from a database..

B

I don't know why this gets me so excited., but seeing http, client and knowing that my old friend, http client is actually going to be running in the browser,.. All right. just makes me so excited..

B

So this is a simple template here that, if I wanted to, I could then customize,.

B

I could have it call functions as needed., but when I say dotnet run,, it's going to compile it, generate all the webassembly artifacts that it needs.

B

When I run this locally on my box,, it's actually going to be running all that dotnet code directly in my browser doing this code that I set up.

B

Right. so essentially, when we're using the dotnet cli, it's,.

A

Going to package up all that code, together,.

A

It's going to write the dlls and have wasm connectivity.

A

Yes. they'll know that's going to load up the run-time when they pull in our dlls and we can run it in the browser..

A

It's really cool.. It looks the same as every other demo,.

B

You're looking at this- and you don't know, but just know that all the logic here like incrementing this counter is counter plus plus in dotnet.

B

This fetch data is fetching this weather using.

B

Http clients all now just running through the dotnet cli.

B

As you mentioned, setting up the bridge between my dotnet code.

B

And webassembly, in this case, in my edge browser.

A

All right awesome.! So how do we add some azure functions?.

A

I love azure functions.. I know you love azure functions., I love them.. How can we mix a little bit of blazor and azure functions, together? yeah., so in the same way,.

B

Following that fetch data pattern,, which is a great one, if I wanted to maybe modify this and instead of calling,.

B

In this case, it's calling actually just to static json, file.

B

So an example of one,, let's say, I added in a new page here which is going to pull in some function: data. okay.! Let me just populate this really quickly with some code.

B

sure., so here,, I'm just going to use my old friend, http client.

B

I could call an azure function., so using the azure functions extension,, I already have a function that I spun up,. I won't go through creating that. in visual studio code,.

B

This would be an example of a function that I could deploy and run in the cloud,.

B

This one's really simple,. It just returns. Back, hello.

B

yeah., but by deploying that function,, even in the same workspace, is the blazor app..

B

I can now have this code running in the server in dotnet,.

B

And then using my blazor file, here,, I'm using just the http client to call that api.

B

Right. so now I've been able to pair those two together, nicely,.

B

And if I wanted to just finish this out since we've gotten this far.- let's add a navigation item,. So we can actually navigate to this new page that I just created.

B

Now,, I think that's everything I need..

B

If I come back in here and say, dotnet run,, it's going to go ahead now and spin up a blazor app, but in this case it's going to call that function running in the cloud, use that function to return data back to us here on the client.

B

Right., because before like you, said,.

A

We're using that static, json document that was just available.

A

should we test it: out? yeah,: let's try it.

B

Let's see what happens., so if I "refresh" this,, I should see a new page which has functions. okay.. It's calling out to that function. right now. It's loading and it says, "the message is hello.", so it's called the function, that are function, return back my data and not use that data to dynamically render this blazor page.

A

This looks pretty awesome.. It would be great if there was some type of community project that would create like a blazor functions. Template., yeah, together,, I say dotnet.

B

New blazor serverless and it gets me right, function,.

B

My blazor app and whatever else I might need to get that all wired up.

A

Very critical., so if you're watching, a little bit of homework for you., I agree.. That would be a great thing to see, because I really love the pairing of these two technologies. Together.

A

again,, like we said, before,, that being able to use the same language across both the frontend on the backend,, but also to having the power of the cloud, the power of azure behind some managed to skilling for us, to be able to manage the distribution for us..

A

I don't have to worry about updating machines and doing networking or doing any of that type of stuff,.

A

They can get all just happen as a part of the infrastructure that we're already paying for.

A

again,, because it's serverless, and it's like a pay per use, model, right?, so to stay only with blob storage,.

A

We pay for to storage that we use, and just like, with azure functions, we're going to pay for the amount of compute that we use.

B

Yes., it's awesome., it's a perfect way,. This is how I'm running my personal blog right now..

B

If anyone speaking of homework,, that's such a nice project to do this honest.

B

I've got a really simple site.. Let me try to spin this up, pair, these two together, and I pay. Maybe a penny a month on this thing.

B

All right., because I'm not super popular as much as you flirt on me.

A

I don't believe you.

A

Work, no matter how much homework! Do you give these people??

A

That's how the product gets better and we got to get feedback.

A

That's awesome., but this is a great man.. So thank you so much for coming and showing us this.. If everybody that's watching,, they want to get in contact with you or the team or anything like that..

A

Where are some places that they could reach out and ensure their feedback or just learn about like functions and using functions with blazor?.

B

Yes. so good places to keep in mind.. We have a monthly live webcast,, where usually myself and a few members from the functions team will give updates..

B

It's like the dotnet community stand-ups, but we have less frequent updates than them,.

B

So worth following that, once a month on youtube, reaching out to us directly on social media like twitter@azurefunctions., you can reach out to me directly as well,.

A

Or our teams actively monitoring these forms, like stackoverflow.

B

So, even if you post a question which is like, hey!, I'm trying to do this thing, jeff showed of functions and blazor.

B

I'm running into issues, will find it on stackoverflow data.

A

Awesome., thank you so much.. I really love when you come on here, because I feel, like the excitement level, just explodes out of the room.

A

good to that. awesome. well,. Thank you again.. So, if you liked this video,, please send us some feedback.. If you'd like to see more things like this, leave some comments down in the boxes. Below..

A

Thank you. So much for spending your time watching this episode of the on.net show.