.Net Foundation On .NET, 19 Nov 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Running F# in WebAssembly with Bolero

Description

Bolero - https://fsbolero.io/
Blazor - https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor
Web assembly - https://webassembly.org/
Intellafactory - http://www.intellifactory.com/

In this episode, you will learn how to run F# code in WebAssembly in the browser using an open source framework called Bolero.

[01:13] - What is the goal of WebAssembly?
[04:46] - Introducing Bolero
[08:14] - How F# executes in the browser?
[15:03] - Supported Bolero programming models
[27:55] - Learning more about Bolero

A

Today, on on.net, we're going to be learning three things: f#,.

A

Webassembly with bolero.

A

A

Welcome to another episode of the on.net show.

A

today, we've got phillip, mr. f#.

A

he's going to talk to us about the combination of f#,.

A

Webassembly, and I guess the browser.

A

yeah, and some vs code.

B

Oh and some vs code.

A

A little bit. more of just using it though.

A

I'm not really going to talk about too much [inaudible]., two or three people watching the show who don't know who you are.? How about you introduce yourself.

B

Okay., my name is phillip carter.. I work on f#, all things,.

B

Like compiler, language,, tooling, documentation, things like that.

A

Yeah, and you're a microsoft employee.

A

Yeah,, I still am.

B

Yeah, still am as of a few minutes, ago.

A

Awesome., so what are you going to show us today?.

B

I'm going to talk about f# and webassembly, as you just mentioned.

A

Yeah, the story.

B

Webassembly is this cool thing, I guess,.

B

But I think I'm going to back up a little bit before diving into.

B

The f# stuff, because some people may not necessarily be 100 percent clear on what webassembly actually is.

B

They may know about a thing called blazor and that it uses webassembly, and there's this stuff going on there..

B

There's some efforts going on here.

B

To get c# into the browser with webassembly,.

B

But there's questions of,. What actually is that though?? What's going on?, I guess.

B

It depends on who you talk to, because there's this promise of webassembly as being a replacement of javascript.

B

All though javascript ecosystem, great language,, maybe not so great.

B

what if we could put another one in there?, there's been a lot of different efforts to transpile the javascript to varying degrees of success and some people trying to take javascript,.

B

And make it better like the typescript., but webassembly is actually,, I like to think of it as a compatible alternative to javascript.

B

It's not intended necessarily to wholesale, replace everything javascript-related.

B

that would actually be crazy. yeah,. I don't think that's what it's about.

A

I think of it as an alternative. yeah,. It's an alternative,.

B

But you can incorporate it with your other parts of your javascript application..

B

You want things to live together rather than create this own world for yourself, where you can't talk to this massive incredible ecosystem that can work in the browser today..

B

So it is fundamentally a different runtime and most browsers pretty much support it at this point and support it pretty well..

B

So there is c# support for it through blazor,, which we have some people working on,, but there's also f# support actually., it's built by the community,, which is really, really cool.

B

yeah,. How about I give my thoughts on it because.

A

I'm familiar with this topic as well., so one,. We will call it wasm.

B

That's it's short form.

A

Another thing is that there was this project called asm.js.

A

So that was really the precursor to wasm.

A

So if you ever see that,, that's basically v.5 or something like that.

A

I think of it like we have all these things,.

A

We sometimes talk about linux, and we talk about x64,.

A

And arm32, and arm64., I think of wasm as a single chip and a single operating system.

A

We'll talk about linux, running on x64 and windows, running on x64.

A

Wasm is just this one thing. it's this singular character,.

A

And it's both a chip and an operating system merged together., it's always the same everywhere.. So there is no linux version of webassembly and windows version of webassembly..

A

It's just one thing., it's effectively a 32-bit chip..

A

So it's 32-bit everywhere., that's really cool because you compile this code and it can run in your browser on this laptop,.

A

It can run on your phone,, ios and android,, and no one has to be the wiser.

A

It doesn't matter which language you started, with.

A

No, absolutely not., you can start with c, c#,, f#, and go.

A

There's even a javascript to wasm project,.

A

Which is weird,, but it's a thing.

B

If you can do it,, you might as well. yeah, for sure.

A

Yeah. so with that in mind,.

B

One of the things that blazor does is it builds on top of that foundation, and it gives you the traditional,.

B

Hey, I have a framework with which I can start building things with.. I don't have to necessarily know what the il of.

B

Wasm is and how everything that I do translates to that action.

B

The wasm of wasm., the wasm of wasm. yeah., you can just have an opinionated way to build apps.

B

Blazor does that for c#,, and so bolero is something that you can do that with in f#.

B

It actually uses some of the components of blazor under the covers..

B

It's not the same framework necessarily,, but it's a lot of the same moving pieces just going in an f# direction.

A

So if you think about it,, it's super simple., you could say it's blazor for fsharp-ish.

A

Yeah, in a way.

B

So they got this wonderful site..

B

If you go to fsbolero.io.

A

Let's check it, out.

B

Bolero,, f#, and webassembly. you can develop spas with the full power of f# and.net..

B

They have this cool button,, which I'm going to click soon..

B

But what's great, is there's a super easy getting started. Experience. you just need.net core.. So after that, you just install some custom templates., you can create a new app and you can run it.

B

then, when you run it,, they have a little video showing there, that sort of thing.

B

it's very simple.. So I already actually have that on my machine.

A

I assume you can do this on windows,, mac, or linux.

B

Yeah, I have this on a mac right now..

B

If I was running windows,, it would be the same.. If I do ubuntu or something, it'll be fine., there's definitely a lot here..

B

It is about fundamentally writing. F# code.

B

You don't have to write both f# and javascript for the web. App.

B

You don't have to write f# and c#.. You can just do f#.. It uses a particular way of doing things. That's called model-view-update,.

A

Which, if you've heard of model-view-controller,.

B

It's just when, instead of c,, it's the? U update., it's oriented around this notion, if you create.

B

Types that represents the domain of the ui,.

B

And say, well, this page could have this number of things that you can click on.

B

when you click on this thing, there's an action that can happen, and you want to update the ui based off of that action. That was performed..

B

It's a very top-down,.

B

Any action you can conceptually think goes through the top of the page, and then changes percolate through the pages that we render is based off of what you're actually doing. it's very similar,. This is what react was built on top of this idea., the elm language actually pioneered. This thing called the model-view-update thing..

B

So there's this library called elmish for f# that takes that same concept and makes it available in f#.

B

It is agnostic of ui technology,, so you can use it with f# transpiling to javascript or you.

B

Can use it f# on top of webassembly., so that's what they do. Here.

B

Then,, they add a bunch of other little goodies like html templating and some opinionated ways to communicate with the server with your ui, and things like that..

B

So, there's a whole lot in this package that you can do,, which is pretty great., although it's experimental in the sense of it's preview and it's on top of a preview with blazor being a preview.

B

And webassembly, perhaps also being preview.

B

I think it does actually a really good job of showing you what.

B

A really true, complete picture for building real apps could actually look like..

B

Speaking of real apps.

B

One of these really is the actual f# compiler itself?.

B

Right., there must be a lot of.

A

Code to run through with that thing.

B

There is a lot of code in the f# compiler., so what they actually have here is you go to tryfsharp.fsbolero.io,?

B

If you click this button, it takes. You there.

B

there's a couple of different samples..

B

This is actually executing f# code in the browser.

B

It does it by taking,.

B

I think we call it the f# compiler service,, which is, so the way the f# compiler is factored is there's a thing called the compiler library, and that's what does all the actual work.?

B

Then we have a head on top of that library called fsc.

B

Fsc calls into fsharp.compiler,.

B

It's called f# compiler private., it's the compiler library, and that's what does all the work.

B

well, that stuff is,?

B

It doesn't care if it's running on windows, or mac, or anything like that,. It's just a library., it's done at standard-based., so they just take that, and they say, "well, we're just going to make this run on wasm.".

B

So what I'll show here.

A

Right., this is similar to how wasm works.

A

it has a similar model.

B

Yeah, absolutely., I was going to ask you to do this.

A

Because I don't believe anything you say.

B

I got my-, I think we were on network. yeah. there we go to network. okay., so I got zero right. Here.

B

So I'm going go ahead and execute some code here.

B

Let's call fibonacci of five., so one thing that you noticed actually, I deleted something., you notice. I got an error here. quite quickly.

A

Yeah. the type int to int,, which is a function,.

B

Is not compatible with any of the types by blah blah arising from printf style format string..

B

This is basically saying I specified percent I,, which means int,, but I simply passed it. A function, type.

B

I didn't pass it the result of a function, call.

B

So the compiler immediately will complain about it.

B

if you'll notice over here, though, there's nothing in the network at all..

B

So I can put that back in., it's happy,. I can run it. it actually. Compiles, does that,.

B

I can do that, sorry.

A

Right., we could be doing all of this in a faraday cage.

B

A

B

Absolutely., I don't believe it would now be the same. there's none of this. the only time, you'll notice. The network here is when we change source file.

A

Okay., so all we did is we did a fetch-.

A

right. across the network, literally to get the the text of.

A

This program, which is in no way breaking the webassembly model.

B

Right., so I just had a thing where I can have it say: hello.

B

Rich to you and sure enough, it compiles and runs hello, world., hello, rich so.

A

And still, no network.

B

Still, no network. now, we'll hit the network even more, but.

B

This is we're going to use no network to make a network call.

B

Right., so what this does, is, this actually hosts a json type provider, which is a feature in f#, where you can basically point in arbitrary data source at a component that.

B

Can then hook into the f# compiler and give types based off of that., so in this case, it just has some json and it parses it.

B

You'll notice, there's this repo.name thing: here,.

B

That name property, like that's an actual property that.

B

Was generated by the f# compiler running in wasm.

B

So again,, like you, know,, there's some network calls now, but that's because we actually went to a real url here.

A

Right,, it's line, 10. okay.

B

Right., this is just a json port at this point, right? yeah., which also makes total sense.

A

Right., but if you go,.

B

There's actual a name, property and notice for repo.name,.

B

That name actually corresponds to this name: property right, here.,.

B

So it's going on as in wasm world that went and made a web request that got the json document and then it.

B

Parsed it and it was able to then call into the f# compiler.

B

That's running in wasm and interpret that json and say,.

B

"Here are these properties like things that are called name and actually prints it out."?

B

So every single repository that the github api gave us here.

B

These are their names and it just prints them out in a bullet point: list.

B

right.. This is pretty cool because I feel like, if you're to the point where you can host something like the f# compiler in wasm,, you can host a lot of stuff. right. exactly.

A

Yeah. so one thing to talk about is,.

A

My thinking would be that,.

A

So, let's start from the beginning., so the run-time,, the monitor, run-time,.

A

That's what we use here,. It was compiled to webassembly, because it's native code.

A

But then basically, everything on top of it, I think, is actually interpreted.. So basically,.

A

What we do is we take in that text, which is the textual program,.

A

Run it through the f# compiler,, the f# compiler has to be interpreted and then all of.

A

It's like bcl dependencies underneath that are also interpreted.

A

Yeah., so the only thing that's actually webassembly is the run-time and it's amazing..

A

I'm actually shocked how fast this is.

B

Yeah., it's pretty sleek and even though I said it's preview tech,, I mean,.

B

I think that goes to show that once we determined that this stuff is not really preview, anymore,.

B

It's going to be in pretty good shape.

B

we're not going to be coming out of the gates. With this thing,.

B

That you can't feasibly build things with.

B

So all this stuff is actually all open, source., there's a repo called tryfsharponwasm..

B

That's exactly what this is. so there's a couple components to this.

B

The main thing that we have here is in the client,: they use,.

B

Instead of the new git client,, they uses the packet client, but it uses the same stuff under the covers..

B

One thing I want to call out is this: is a list of their dependencies and that's it..

B

So there's blazor builds with a cli, so they can actually orchestrate stuff on the client.

B

Then just the co bolero., they have a fork of the compiler service that makes it available on wasm and same thing with this f# data library and that's it..

B

That's all that this is actually using.

B

aside from that,. This is just normal f# code, like this app.fs.

B

I promise you, there's no like embedded stuff going on here.

B

This is f# code., they call into the compiler library,.

B

They have this thing called compiler,. They represent, okay,.

B

We have all these options that we accept some source texts,.

B

There is this thing called.

B

The fsharpchecker, that's like the component in the compiler service.. They have to do that, so they can actually try to check the code, and all of this just runs in wasm, which is pretty radical.

B

So one question I have is, I know, with the blazor model,.

A

You basically can say,. I want to do the client-side wasm thing, for the reasons why that's good, or they have this alternate model, which is, I want to run on the server,.

B

I want my c# code to run on the server.

A

And I'll use this signalr pipeline for dom updates.

A

does bolero support both of those models or is it basically webassembly only?.

B

You can support both., so there's.

B

Some different ways that you can configure it..

B

They have this.net new bolero app, for example.

B

That gives you the whole package.. You can get a little fancier.

B

With configuring, what you actually create., you can create something. So it's client-side only if you'd like,.

B

But by default this also includes the signalr channels, stuff.

A

Okay. that way, it's the same as blazor.

B

Yeah. exactly., I think that's the goal here, is saying,. "This is where blazor wants to go." we're going to have that similar model going on in the actual site. okay. makes sense.. So I actually created one of those in my machine here.

B

You'll notice that there's two folders here.

B

there's this myapp.client and myapp.server.

B

Actually, before we leave.

A

Bolero or maybe we can do this at the end,, we should do some shadows to the people who actually worked on that?.

B

Yeah. absolutely., I definitely plan on doing that. okay. just checking. yeah.. This is not a thing that we created..

B

This is an f# community thing, actually, a company called intellifactory that builds a lot of really cool at f# stuff..

B

Some of the folks working there are just absolutely, incredible, f# engineers.. So that's why they were able to make this happen..

B

So I just want to show the project file for the server side,.

B

There's just a single f# file here, running dynacore 3.0.

B

This is all a configuration..

B

I don't want to call it nonsense, but stuff that you generally don't look at too much.

B

A

Yeah., that's boilerplate. sets everything up.

B

It needs to do this, configure services thing just like you would normally do in a blazor app and like it has a certain convention. Here.

B

There's this iwebhost environment things,.

B

This is where that communication things come from.

B

There's this thing called a handler.. We want to set up a handler for different stuff.

A

Yeah., we wouldn't exactly call this an intellectual property., right, yeah., so you would see a similar thing on blazor-side,.

B

But in this case, it's all an f#.. This is just .net core., so perhaps not as interesting here, but I think this is.

B

Where it's more fun, because this is a ui, that's written in f#.

B

So let me just actually run it first.

B

Right now we're running a web server.

B

yeah., so I'm initiating the web server..

B

So what the web server is going to do is that's actually going to then host the app in the browser, so you can interact with it.

B

when you're, actually interacting with the app,.

B

That's not making any calls at that point unless you're doing something that requests,.

B

Like serving new pages. right., so the main purpose for this web server is to.

A

Serve up the wasm files and so do the io.dlls?.

A

B

Yeah. okay., so you can see here, now we have it. Saying, "hey, welcome to bolero.". So this is just the template that shows you a couple of different features.. It says this entire application is driven and elmish..

B

So if you're curious, "okay., where does this come from?? Where does this come from?? What's that all about?".

A

B

That is driven by a couple of different stuff,.

B

Like there's some standard html stuff here, but it includes a templating system., so you got to this dollar sign thing.

B

These are little holes that you put in the html here.

A

I see. so this is similar to the razor files-ish.

B

Yes. but then, you put these holes in there.

B

in a way, at least that's the way I like to think of it, is saying,. "This is going to be what's filled in by the f# code.".

A

So one question I have on that and maybe the designers would have to answer this, but like asp.net team with blazor and stuff that came before it.

A

They did like cshtml extension.

A

Now I think it is?, what is it now?, just .razor?.

B

.Razor. .razor. asp.razor., okay. yeah., so they're basically saying this.

A

Is very similar to html, but it is indeed a different format because it's got all these, the templating engine, thing.

B

A

Do you know why the folks here just decide to go, "it's html.? It's all good"?.

B

I think it is partly just the design choice,. I think at that point. getting the f# stuff to work with the razor files can actually be quite a challenge.

A

Yeah,, I didn't mean necessarily use.razor.

B

Right., like we use fs razor or something.

B

yeah., I think they'd probably be able to answer that.. My best guess is most web developers or people who do web development, or at least to some degree, are familiar with.html.

B

sure., as it turns out,. You can actually just put stuff like that in html, anyways. yeah.. This reminds me of knockout-.

A

B

Which I used before. yeah., so the folks who built this had been doing f# with web for quite a long time..

B

So that's definitely totally up there. Earlier.

A

Yeah. definitely not a critique,, just a question.

B

So we have this file here called main.fs.

B

So f# files,, you typically want to read top to bottom, because.

B

Usually, the way that things are architected is there's the stuff at the very top and then stuff below..

B

It typically depends on that and so on..

B

So at the very top, we have this notion of a page or.

B

At least what we're saying what a page is for our app.

B

A page can either be the home,, the counter, or the data. that actually corresponds right, here,, home, counter and the sync download data..

B

If you navigate on those different pages,.

B

This is a special convention that they have, this endpoint routing..

B

This is just a very convenient way to say,.

B

You can use an f# union type to say, "okay.. These are all of my pages..

B

These are their names that I'm going to refer to them by in my f# code,, and this is the endpoint that I'm going to associate with it when you actually navigate via url.".

B

Right., so I assume this isn't.

A

Literally asp.net core endpoint routing., it's just inspired?.

B

Yes.Yeah. exactly. yeah., it's just a little attribute you throw on there..

B

It makes total sense. how it does. so back to that mvu stuff,.

B

Here, we're defining a model for this whole thing for actually all three pages., so we say, "okay.

B

well, the model as we're calling it has a page.".

B

So a model is you can think that what the users are actually interacting with at this point,.

B

They're, interacting with a page.

B

there's this single counter books, error,.

B

Username password, signed in as, sign-in fails.

B

This, say I sign out here, we go admin and I think the default is just password as the password..

B

Then you can see. There's these books,. You can reload.

B

I've heard of some of that. right., so that's.

B

All of this data is being represented with an f# record type,.

B

Just a conglomerate of all of the your conceptual model for how the page works.

B

Then book is sort of like a special one..

B

A book has a title,, an author,, a published date and an isbn,, and all of that information is also listed on the other page in the table, form here.

B

So when you have a model,, you needed an initial state.

B

so for example,, there's no username,, there's no password,.

B

You're not signed in as anything,, you didn't fail to sign in because that you didn't even do it. there's no books..

B

There is no error. the counter, and this little "counter" page here is zero, because that's just the initial state., that's how you define it., you define your model,, you define an initial state for the model, and then you get into some fancier stuff..

B

I'm actually just going to collapse a few of these things, because I want to get to this stuff called message..

B

This is where you start getting into the update notion of you're, going to update the ui,.

B

Well,, what updates the ui? well,? They use this ui message. Paradigm.

B

Where you say an action performed on the page has a message associated with it.

B

So in this case, the set page message sets which page we're going to be on., you can say., "okay.. What page are we setting it on?"?

B

Are we incrementing or are we decrementing??

B

Are we setting the counter or something?

B

there's this increment, decrement stuff.

B

Are we getting books?? Did we get some books?

B

if we got the books, there's an array of these book types that allows us to actually display stuff.

B

So, there's a whole bunch of different messages,. When you build one of these apps,, you can break these up into different message. Family.

A

Okay., I was going to ask them next because in this page,.

A

It's not a particular problem to group all these together,.

A

But you can imagine with a large site,.

B

You wouldn't want to put all these things: together. yeah. in fact, in some cases,.

A

You might want to reuse the same name, but do something slightly different.

B

Absolutely. say you had an entire page of counters.

B

For example,, you could have just been like counter messages things like that.. That could be done there., but so I want to walk through very briefly what this counter thing does actually.

B

as an example., because at the very bottom, there's a lot to set up here.

B

But it eventually, it initializes, the actual application.

B

It does this program.nkprogram or make the program,.

B

Passing in an initial model,, some initial message: state, all the initial state there, and then it's setup where you define all of.

B

Your functionality for how your model that represents the ui,.

B

You define your messages for how that ui can change, and then you define an update function that actually performs the update, itself,.

B

That changes the current model.

B

there's this function called update. in this case,. It takes into thing called remote, booksservice.

B

Were not really using that in this particular part of the demo,.

B

But it takes in a message and it takes in what the current model is, and it produces a new message,, a tuple of a new messaging,, a command which was the actual command that was sent,.

B

In this case,, what was the message that was sent here?, so this model is the thing that actually gets updated.

B

So, as I highlighted it, here, you'll notice there's a model,.

B

After I increment, its a model with counter equals, model.counter plus one.

B

well,, that corresponds to the increment message..

B

So when I hit this button, here, that actually sends an increment message to this update, function. it says, "okay.

B

well,. We received an increment message.. So what do we do?" well, in this case,? We take the current model that we're working with, and we create a new one that has its counter plus one.

B

So you can define this anyway, you want, but now you define your whole,.

B

At least that part of the ui that you want to have changed.

B

You have that represented as a single f# type, and you just construct a new one with different data that corresponds to what you want based off the action that was taken..

B

It's pretty straightforward, and it's also a very f-sharpie thing.

B

It's all about just functions and data being passed to functions.

B

Make sense. it's reminds me of it.

A

Seems almost like the midpoint between mvvm and pub-sub.

B

I don't know if that's,, I'm sure.

A

People are screaming,, that's fine, but.

B

I guess I can see this takes some of the mvvm stuff that people are like about. I have this very deliberate modeling.

B

Of what a ui actually is., the pub-sub thing of that actually totally makes sense,.

B

I think where I set up, okay,.

B

This is the initial state of everything, and now I'm listening to all these different kinds of changes., depending on those changes that I get, here's how I'm going to change the data. That's in the model there.

B

Yeah., that is basically what mvu is..

B

So this is just a little demonstrative thing.

B

It's not like a real app, but you can imagine real apps can have many update functions for different pages,.

B

They can have different componentized stuff. There.

B

So it's quite nice..

B

What's great is it's all f#.

B

We're not hitting the network for this sort of thing.

A

We could do view source again.

B

Yeah. go view,, yeah,, "inspect"., "inspect".

A

Well, inspect isn't super useful because there's clearly dom updates going on.

B

Sources. okay. there we go.

B

yeah. okay. whatever.

A

Okay., so how about we should probably close up.

A

I mean, we used the devtools in this before so.

B

A

Let's remind people where they can find the stuff, so they can do it at home and then we should finish any kudos. You want to do for bolero folks.

B

Absolutely., so if you go fsbolero.io,, which we'll probably put in the show, that's here,, they have a very clear getting started. Thing,.

B

The video that they play,, you can watch that,, it's like 30 seconds long, and this shows it all running..

B

You click the "learn more" button., there's a whole lot more that you can learn. About., there's different! What's routing,, what's this routing thing, all about.? How do you do remoting?? How do you do this,? How do you do that., it's all open source as well., so if you're the person who wants to hack on it a little bit and improve it,, they take contributions which is pretty great.

B

I'll, actually navigate to that github page. So you can see who these folks are..

B

So the fs bolero organization has a couple of people in it. Here.

B

That's great.: these are the folks that make it all happen.

B

Adam, in particular, he's been in a part of the f# community for very,, very long time.

B

I think he's like the owner of the company that.

B

Could be. so they build all this stuff,.

B

Which is pretty great., they accept contributions..

B

They have quite a few things like there's bolero,.

B

The core library itself. there's this hotreload thing with the client-side stuff.

B

You can just update a very tiny component, and only that will be re-rendered..

B

You don't have to refresh the page. the actual templates for getting started, the website,.

B

The actual tryfsharponwasm, they have all their folks for different things. They actually utilize..

B

These people are fantastic,. I think it recommends.

A

It looks pretty legit to me. yeah.. I definitely recommend.

B

Interacting with them, if anyone is interested.

B

be a helper or you want to help them. yeah. definitely, get started with it.. I mean,, I honestly think the wasm stuff, like there's the promise of webassembly,.

B

Or rather the thing that people want out of webassembly is extremely compelling..

B

This and blazor, and other efforts show that we can actually get there. yeah. yeah., I mean all this stuff was all about to ship.

A

So not enough foreseeable future for sure.

A

Okay. well,: this is great. thanks for being on the show again phillip. this f# stuff looks amazing..

A

I mean,, I think, for the f# community,. They must be just eating this up.

B

The f# community is always doing amazing, things.

A

Yeah. for sure. you're telling us that basically, every day,.

A

Whether we want hear it or not.

A

okay., this has been another episode of on.net, and yeah,.

A

We've learned about f# and webassembly with bolero. thanks for watching.