 So yes, this will be a talk about F-Sharp, about JavaScript, about mixing both together. So my name is Chris. I'm an active member of open source F-Sharp community. You may know me from some of this stuff. If you're on Twitter and you're not F-Sharp developer, you probably know me as this unknowingly vocal guy that always tweets about how Microsoft hides F-Sharp which is totally not true. Yeah, I do a lot of this stuff, but I've realized after looking at the today's schedule that at this conference, I will be known only because of one thing. I'm the guy that's doing a talk before Miguel. So yeah, I will try to be as quick as possible to have, so Miguel have more time. So why F-Sharp? Why F-Sharp? F-Sharp is functional programming language, functional first language. It's running on .NET. What I like about it, it's pragmatism. It's not purely functional programming language. It's not Haskell. So it's a mixed language. You have also access to object-oriented programming. It encourages you to mix both stuff. It's functional first language, but it doesn't push you to this ivory tower of functional programming. It's type-safe language. It's statically typed. It has really strong type system, bit stronger than what you have normally in C-Sharp. It has a couple of really interesting features, including computation expressions that I will show you in a moment. But shortly speaking about that, it's generalization of async away from C-Sharp. If you're familiar with async away, this is this custom syntax that allows you to program stuff asynchronously. In F-Sharp, we have similar solution. It's just general. It's not something specific in the compiler, like in case of C-Sharp, but it's general thing and you can implement your own computation expressions, and I will show you this in a moment. I really like community of F-Sharp. It's really nice group of people, really friendly, really doing great parties, so yeah, it's fun. If you've never seen F-Sharp, I have really short introduction to the language. So language F-Sharp is coming from family of ML languages. It characterizes with a couple of things. First of all, it is statically typed language, but it has strong mechanics of type inference, so you don't need to manually specify types in your code. So here in this example, compiler at the compile time in your editor knows that value is integer, that value two is a string, and that sample list is a list of integers. And also it's white space significant language, so you don't have curly braces, you don't have any other stuff. You just put four spaces, or how many spaces as you want to capture scope. And the really nice feature about F-Sharp is this pipe operator, and this is basically like pipe known from the Unix operating system. It takes result of previous computation and puts it as the last parameter of next function. So it allows you to really nicely compose the computations, the functions together. It has two really interesting types for domain modeling. First one is record type, the declaration is on the top. Record type is compiled down to normal C-Sharp class, but it's immutable by default. It implements comparison, equality, and all this stuff. I think that C-Sharp X plus four will have record type. I really don't know what's the status, but I know that there is some kind of RFC for that. And the second type is the discriminated union type, and this is basically like bit more powerful enumeration type. It's like enumeration type with additional data attached to it, so it's not only, enumeration type is basically like integer under the hood, and this can have arbitrary data attached to it. And the computation expressions. Computation expression is a block of code that's in the curly braces. That has some name before of that. So those are examples of asynchronous computation expression, and what computation expression do is it changes the way that the code inside of the computation expression is executed in some way. And it introduced couple of additional keywords to this scope. This is like lead bank, which is basically await, and returne that returne the value from the computation expression. And do bank is basically await without returne kind of value. So this is kind of similar to async await in C-Sharp. If you are familiar with that, you should understand that code. Async await is coming to JavaScript as far as I know, to X plus whatever version. Yes, but now, why JavaScript? So we have F-Sharp, we have .NET. This is fine platform, I mean, why we want something else. So first of all, I left out in the room one code everywhere, especially in the browser. We usually want to write JavaScript to run code in the browser. Yes, we can do Node.js and all this stuff, but it's fairly often our aim with JS is to run code in the browser. Virtual machine of JavaScript is probably good in most browsers. It's probably the most invested, those are probably most invested virtual machines in the world right now, because like everyone is trying to make V8 faster and better, so yeah, it's good, good bet. It has innovative and really open-minded community. So my favorite example of that is all those new front-end frameworks that people love to laugh about. Oh, every two weeks there is new, new big framework in JavaScript that you need to learn. This is true, but you can look at it from the other perspective. In that network, we've been sitting with MVVM for the last, what, 15 years, and JavaScript has moved through like classical MVC, through MVVM to something similar to like reactive programming nowadays with, and maybe MVU patterns with React Redux in just couple of years, which shows this innovation and the fact that JavaScript community in general wants to try new things and want to invest into new things. JavaScript is popular. Yay, everyone, everyone knows now writes JavaScript and it has pretty good tooling, that's good. And you probably might notice that I'm not mentioning language here in the Y JavaScript. Don't get me wrong, JavaScript is definitely not the worst language. I've worked with, but if I could choose the language I want to work with, it's definitely not JavaScript. And this idea of replacing JavaScript with something better, it's not new. Like it's not something that we as F-sharp community has invented. The idea has been around for years, starting with things like TypeScript and probably even CoffeeScript before that, that was like super terrible. That was one of the worst language I've used. Flow from Facebook, this is kind of like deprecated right now, like people are putting more attention to TypeScript. But also other languages that just compiles to JavaScript. So ClojureScript, Elm, PureScript, ReasonML from Facebook, and also there are many, many others basically. Nowadays, every community of every language tries to come up with some compiled to JavaScript solutions. So we have Scala.js, we have Haskell.js, and all this stuff. So yeah, so F-sharp community has come up with the project called Fable, which is F-sharp to JavaScript compiler. But I need to be fair, this is not the first nor the only JavaScript compiler from the F-sharp community. The first F-sharp to JavaScript compiler that I've heard about was created around 2010 by Thomas Petricek. It was called, how it was called, F-sharp tools for ASP.NET or something like that, that was plugging, that was like some kind of library that was connecting a classic ASP.NET web forms with F-sharp and also compiling JavaScript part. Then there was project called FunScript, and then out of project called FunScript, project called Fable was created. Additionally, there is another project called Web-sharper, and Web-sharper is like commercially supported and to end solution for writing full stack web applications, but I just don't know a lot about it, so I'm not gonna talk about it. There are a couple of key features why I really like Fable. First of all, it's producing really high quality readable JavaScript code, which is important because I know that we love this idea of, oh, I will write JavaScript or I will write TypeScript, well, TypeScript probably not, but I will write Haskell, JS, or I will write ClojureScript and I will never look into JavaScript. So after a couple of years with Fable and with other solutions like that, I definitely may say that that's not true. You always there are some cases in debugging something goes wrong that you want to look into your JavaScript code, compile JavaScript code, and then if the code is total mess, it's really hard to debug what's going wrong here. So the fact that it's producing high quality, really human readable JavaScript code is really good thing. Secondly, it has really deep integration with JavaScript ecosystem, so it doesn't produce any kind of custom JavaScript that just doesn't work with rest of the world. It works well with Webpack, it works well with Fable, it works well with all standard JavaScript tooling that's out there, and I will show that in a moment in the demo. It supports almost all Azure language features, the only feature that's not supported is the feature called type providers, because type providers are magic and I'm not going into details of that. It supports many, many .NET APIs basically by providing built-in bridging between .NET APIs and standard JavaScript APIs. So for example, you can use normal date time type or you can use some other types like big integer and this is all mapped into JavaScript. This means that unless you're using a lot of calls to system.io or system.net, so those things that are platform specific, there is high chance that you can take your code, especially if it's business code or something like that that just doesn't have those calls to platform specific stuff, just some calculations or some business rules. You can take your existing code, you can put it through Fable and this will run in browser, there's really high chance for that. It has the TypeScript definition to Fsharp definition generator. I know that Michaela has mentioned that for the WebAssembly and C-Sharp, we already have that and there is huge focus on developer experience and tooling in the community. So we really try hard to make the experience as good as possible. So it's not something that you need to spend a lot of time trying out and learning. It's just something that we want to be as simple as possible so you can go and use it. It's not treated as a niche product. And also, the feature I haven't mentioned here at the least, but I really like, is that it's first product, this Fsharp to JavaScript compiler product in Fsharp community that's really, really popular. So there are conferences about Fable, just about Fable, just about this solution. There are user groups just about it. There are a lot of people working with Fsharp only using this product. So it's not something super niche. It's not something that's used by two guys in their room. It's something that's used by many companies. It's something that's embraced by community. And it's also something that pushes forward new features to the language. So there are some features in incoming Fsharp 4.6 release that were inspired and that were created just for the sake of making Fable better. So this is something that's going to be around and it's really good. So how does it work? It takes Fsharp code, then using something called Fsharp compiler service. Fsharp compiler service is a fork of Fsharp compiler that's just created for the tooling, its community maintained. It creates Fsharp abstract syntax tree. Then it transforms Fsharp abstract syntax tree to the Fable abstract syntax tree and then to the Bible abstract syntax tree. And then it feeds this Bible abstract syntax tree to the Bible and Bible if you don't know about it is this JavaScript to JavaScript compiler. So basically it's a tool, really popular tool in JavaScript community that enables you to use modern features of JavaScript even if your browser is not really targeting the not really implementing those modern features yet. And it allows you to feed abstract syntax tree in the form of JSON to it and then it produces really nice code. So that's the secret behind those like two important points I've mentioned. So readable and high quality JavaScript code and deep integration with JavaScript ecosystem because Bible is used by everyone doing JavaScript. I mean everyone. And so if we are basically plugging into Bible it means that we are compatible with everything that's in the JavaScript. And then Bible produce JavaScript code and JavaScript code runs everywhere and it produce happiness. And there is one more arrow here if you're happy you write more Fsharp code and then it's like perpetuum mobula. Yeah, and now it's demo time. How to stop that? Okay. So, whoops, why that, why this is not working? Oh, that's annoying. Okay, so this is some standard. Standard, oh, that's annoying. This is some standard Fsharp code. I'm not really going to move through it through details of this code but there are a couple of really important things here. So first of all, you have access to normal browser APIs. This fabled.import.browser, this is like normal module that's in the core of Fable and it adds you access to all like document, get element by, APIs to the window APIs to all the stuff that's in the browser with JavaScript. So here we create canvas and canvas is this control for doing 2D graphics. And I'm not, this code is public so you can look at it later. What I want you to show you is kind of like user experience and I need to put all of this here. This is annoying. So this code will produce the fountain of the part of beautiful colorful particles. I haven't mentioned before like when I was showing all this stuff that I'm also really known for building beautiful UIs and you will see in this demo that, yeah, trust me. So this is type, this is type representing particle. It has its coordinates x and y, it has velocities, it has color and some other stuff. And the second important thing is a function that updates particle. So it takes existing particle, it takes some change of the time that happened from the last update. And then it creates new particle, it returns new particle with new coordinates and stuff. So let me, so first thing, as you can see, oh, NPM starts not running. I'm not doing anything custom. I'm not doing any custom controls. This is just plugged into NPM. You can see that it's plugged into Webpack. So all this normal tooling, this compiled successfully. This is hard if I don't see what I'm doing. Yes, that's beautiful, right? My UI skills, magic. But one thing I want to show you is probably many of you, maybe many of you are here, that developer center used to creating the UIs with C-Sharp, with WPF, is this super nice really quick feedback loop that we get with Webpack and with all this tooling. So I just changed the file and I need to make it float. And it just automatically refreshed in like a couple hundred milliseconds. So this is really cool. The second thing I want to show is, it's actually, this will be hard. Up, up, yes. You can mirror the display and see. Yeah, yeah, that's not the problem. So I've opened normal developer tools in Chrome, or in any, it would work also with any other browser. And I can put in my F-Sharp code, this is up first, the same file that I had opened in the editor, I can put breakpoint and this is just working. So this is powered obviously by the, and there's like tooltips and all stuff. You can do all the stuff that you can, during debugging the normal JavaScript code. So again, this deep integration with the JavaScript ecosystem. And the third thing I want to show you, I can have similar code in TypeScript, because we are on the TypeScript track. This is basically implementation of the same interface. And then I have some update function. Let's put something here, like 12. And then in my F-Sharp code, I can just import the TypeScript code. This is using built-in import default. This is basically putting like require call that's just working like loading modules in normal modern JavaScript code. And then here, yeah, and this is working. And this is now running most of my code from like F-Sharp code, but update function is running from TypeScript code, which shows you that when you start using Fable, you are not forced to do everything by Fable. You can integrate with existing libraries. You can integrate with your existing code. You can slowly move to Fable. You can implement in Fable only those parts of the code that makes sense and so on. So that was demo time. How much time do I have? Seven minutes. Okay. So I've showed you some really simple demo that's do some amazing UI and like really colorful stuff. But building real world single page applications in Fable usually involves something called the Elmish architecture. But the Elmish architecture name is inspired by language called Elm. And Elm is just all about this architecture. It's kind of like domain specific language for building single page applications. It's something that has been called for a while model view update pattern. It's basically really, really nice of writing UIs in pure functional programming way. So without any mutation, without doing any bindings or anything like that. And what's important is not only Fable but it's also Xamarin with fabulous project and WPF. And I have really quick demo for that. So in Elmish style of programming, you define model of your application. Well, in this case, it's very simple, it's just integer but it can be custom model that represents the state of your application in the state of the window. Then you define messages that can happen inside your application. Button was clicked, button was double clicked and so on, so on. New window was opened, whatever can happen in your application. And then you have this beautiful update function which takes existing state, which takes message that happens, some change that happened and produces new state. So basically it's really similar to event sourcing style of saving data but in this case it's event sourcing but representing the state of your UI. And last part is a view part which is pure function that takes some existing model and just produces HTML. That's rendered to the screen. This is internally powered by React. So it's using all these tricks we've done they are doing for really fast updating views. This is really, really similar to React Redux style of applications, it's just way simpler. And yes, this is really cool. So, I need to, again what's really important about that part is that it also integrates with all the tooling that we have for React Redux style of applications. So in your Chrome, when I will start it and it also have really awesome UI, like this is the best UI you will see during this conference, trust me. Oh yeah, that's the UI. Awesome, right? So, when I plus one, first of all, we have some kind of built-in default logger so it's showing what are messages happening and what's the new state. But what's also important is that it integrates with the Redux Chrome tools, Redux Chrome tools. So you have all this default tooling that you use for building your Redux applications for your Elmish applications. And I have no time, I have no time. And the cool thing is also supports a hot module reloading, which is this changing, changing code on the runtime without killing the state of your application. So when I change something here, so now my plus button should add 10. This is still free, that's the state of my applications hasn't changed and when I click it, whoa, wonderful. And two minutes. And I've lost my screen. What is my keynote? So if you want to start, you need to have both .NET Core and Node.js installed. Yeah, that's right in time. You need to have both .NET Core and Node.js installed. There's really good getting started guide on fable.io and you can go to fable.io repel. I don't have time to show that, but it's basically fully working Fsharp editor inside of your browser, providing all the features like code, auto completions, hovers, tooltips, finding all the references. And this is all running in the browser. It's running Fsharp compiler, compiled JavaScript running it in the browser. So it's really awesome. I need to also mention Safe Stack. It's like initiative for building full stack web applications with Fsharp. I will have second talk about part of the Safe Stack later today, so I will talk a bit more about that later. Those are all links. If you want to take photos to the staff, my name is Chris. You can find me in those weird places. And yeah, thank you. And if you have any questions, I will be around.