Scale By The Bay 2019: Krzysztof Cieslak, Hacking F# in JS ecosystem

Scale By The Bay 2019: Krzysztof Cieslak, Hacking F# in JS ecosystem

Recording: Scale By The Bay 2019: Krzysztof Cieslak, Hacking F# in JS ecosystem

[Music] yeah thank you thank you for this introduction so yes sorry for those couple of minutes of July we had small technical issues and due to those technical issues unfortunately I will need to skip my demo that I had prepared because I'm forced to show presentation from another machine but it's fine I hope yeah my name is Chris I've been doing quite a lot of stuff in f-sharp open-source community I'm mostly well known from the project called ion ID which is set of plug-ins for Visual Studio code for F sharp that brings like transforms and visual record into full F sharp ID that's working cross-platform and things like that and I've done also a bunch of other open source F sharp stuff if you would follow me on Twitter I'm really vocal about like open source methodologies open source sustainability problems about developer experience developer tooling things like that and about photography I'm into photography a lot so yyf sharp this is also his cow a conference like lot of talks on on functional tracker about Scala so I want to say a couple of words about F sharp before going any further so f sharp is a functional first programming language on dotnet this used to be a bit of problem because dot not used to be like windows centric and you know microsoft windows only visual studio blah blah boring stuff fortunately since couple of years microsoft has been changing their strategy regarding the dotnet dotnet in general so they started developing dotnet core which is the brand-new open-source fully cross-platform framework which is definitely from Microsoft point of view a future of of their development platform and F sharp is their out of the box as one of the three possible languages c-sharp visual basic and no one is using visual basic let's let's not joke and and have sure so it is type safe type safe language it's based on a camel and ml familial the family of languages called ml that's been around since 60s it's focused really dramatic approach to software development in in in just getting things done in focusing on getting things done rather than thinking about diving a lot into category and and especially like functional programming category theory theoretical concepts you probably won't find them in F sharp so if a lot of people are telling me that this is like disadvantage of the language but at the same time it just enables us to focus on getting stuff done rather than discussing stuff and mostly it has couple of really fancy features and one I want to mention is something called computation expression that I will show in a moment this is this is really interesting feature it has great community from my point of view so I like to say that I came to the F sharp for a language because I was interested in new programming language and I stayed because they're great people because I could if I was just in narrating languages I could definitely go to husk on do something more fancy from like just theoretical point of view but community is something that made me stay in F sharp so if you've never seen that surgery I have a couple of slides with some all intro so first of all what what is interesting is that even the F drop is strictly typed statically typed programming language you very rarely need to actually specify types in the encode F sharp has a feature type inference its global type inference so basically it attempts to figure out the types of the expressions for you and it workings it works pretty well in practice there are some limitations mostly around interrupt with dotnet framework and object oriented world because basically object oriented method overloading breaks and type inference algorithm that there exist at the moment so there's some issues with that but if you stay into in F support in in more functional programming word functional first word then this works pretty well so yeah and this is the second really well-known thing from the from the F drop is a pipe operator and this basically is a pipe similar to UNIX pipe so it takes something on the left and and put it as a last argument of the of the function call on the right and this allows you to write the curl that's really nicely formatted with the set of pipe leads chains of the pipe pipe operations and this means that you read code from left to right from top to bottom so this is exactly how you read your normal text in English which is really nice change from you know braces and the stuff that's actually invoked first in in object oriented languages like C sharp that this actual is somewhere at the right because this is like the first thing then then you go to something that it's around that and and so on so this this makes a flow of your code totally different it has algebraic data types so it has record type and it has discriminate Union discriminate union is kind of similar to the case classes in Scala I'm not really too much into Scala but yeah it should be similar so what discriminate unions represents a choice so for example here we have type shape and it can be the circle and circle can have such set of information it can be rectangle it can have some different information it can be something else what is really nice it is the fact that you have in F sharp you have exhaustive pattern matching so if you pattern match on the something that's that shape the compiler will force you to hunt handle all cases so it removes one of the typical set of errors that you've added some new implementation of interface or something and forgot to handle that with this you don't have such problems and there are also records which are under the hood compile to normalcy subclasses but they have couple of additional features they are immutable by default they provide a way to compare and to and default equality based on structural equality so not on comparing the the pointers and just in memory but if I have two instances of the model then the the equality operation will check if property one but the one instance is the same as property one at the second instance and and and and so on so on so on so it's like structural equality which is pretty cool and asynchronous code is using those computation expression feature I mentioned briefly and computation expression is ability to enhance a block of your code with some additional additional functionality so for example here we we have this block of code that looks pretty normally as a normal shop code that you will that you would normally write it as a synchronous code but because you put this async fingy and those curly braces around that that means that this code will be executed asynchronously so it's it's almost normal code because it actually introduced those two additional things one is do bank and let Bank operations and those works like async await from C sharp or modern JavaScript yeah with what is really nice again is the fact that this is a mechanism that can be a standard by the by the users it so async is part of f-sharp core Ising computation expression is part of the choral library but you can create your own computation expressions it's not a compiler feature like fact that Hillary's async code and something that works like async/await it's not implemented directly in compiler which is huge step up from from for example C sharp or async/await in c-sharp is implemented as compiler feature that it had to be a new version of the compiler it you don't have ability to implement anything like that on your own here with with a computation expression yes you could do that and the other hand the second part of the title of this talk mentions JavaScript and and why JavaScript well first of all it it kinda runs everywhere but what is most important it runs in the browser and I think that this is why one of the main platforms of distributing browser and web is one of the main platforms of distributing applications nowadays so so it's really cool it has pretty good video to all machine it's it's topic that's not really discussed to a fan but JavaScript virtual machines are probably virtual machines that most money has been put into in last ten years and those like billions of dollars of investments making v8 better and better and better than it used to be ten years ago so it's pretty good video machine which max that means that code is pretty pretty fast and given all the limitations of JavaScript as a language it's pretty amazing what they do it has really innovative and and open minded community so yes we all love to laugh at javascript and entries like every every month there is new new framework of the flavor and we loved laugh at that but at the same time the amount of innovation that those those framers were able to create it's pretty astonishing from from my point of view so it's really nice that there is this community does kind of like just open minded and looking all the time for new ideas this obviously is times it's not good because he has he breaks stuff you you kind of you would use sometimes want to use just something stable and hope that it will work in 10 years but at the same time the fact that there is a lot of innovation is awesome it's popular javascript is popular a booster is most popular language in the world so having some way to work with JavaScript is good and it has pretty decent tooling and not only in terms of like editor tooling but all additional built tuning the bug has things like that and you can you can see that I haven't mentioned a language as a advantage of JavaScript like I think we can all agree that that javascript is not a perfect language it's getting better and better every year just a lot of development into language also not only we've bitter to a machine but also in language but it's still not a language we probably that people at this conference like it's not a functional programming language it's not type safe language so there is like lot of stuff that's that we would like to have better and obviously there is quite a bunch of projects that attempt to make target JavaScript with some better language so he Esther's Elm there is obviously typescript which is super popular but they're also like functional programming languages like Elm rezone pure script there is basically nowadays every language every existing language also has a project that takes this language and tries to compile the it down to to JavaScript and it's like Scala is a closer to script or interest like procedure there are some projects for for akumal there are some projects like every single programming language and that brings me to fybel and fable is f sharp to JavaScript compiler it's not a first after up to JavaScript compiler the concept of after up to JavaScript compiler has been around at shop community basically since 2010 and that was were first attempts to do something like that this is like fourth or fifth iteration what is really interesting about this iteration is it actually picked up so previously after up the javascript compilation was always treated as an ish in AB subcommittee as something okay the project exists but no one is using that seriously fable changed that a lot fable became literally a mainstream part of the F sharp community to a degree where it actually drives forward new language features so there are language features coming to the F drop language that are driven just for sake of making fable better which is pretty showing that everyone also Microsoft side is it's kind of thinking that this is pretty big deal key features of a five ball there it it's it's built on top of Babel the JavaScript too as for those of you who are not familiar Bible is JavaScript the JavaScript compiler essentially it allows you to write modern JavaScript with all modern or even experimental features and target the set of JavaScript that you need for example if you are not at Internet Explorer 8 and I'm really sorry if you do but if you do then you can target write this new modern JavaScript and compile down to the old-school JavaScript that will run in all browsers and so and so on so it's really vastly popular project in JavaScript community it's a project that a lot of companies are investing into so it it's it's it's a thing huge thing in JavaScript community so the fact that fable is built on top of of Babel means that we get all the cool stuff from Bible for free kinda and I will discuss that in a moment it's de perak this also provides a deep integration with existing JavaScript community so there are two approaches when you have function especially functional programming languages compiled to JavaScript there are two different approaches one approach is try to live in the functional Babel and just okay this JavaScript's think this is evil and we don't want to touch that for example this is a case with elm so if you've ever used elm you know that the whole idea behind Elam is providing great developer experience in a bubble and addy calling external javascript libraries is not really super pleasant experience fable goes into that totally different way so it based around idea of integrating with existing JavaScript ecosystem with existing JavaScript tooling with existing JavaScript libraries because we believe that javascript communities in general pretty : and and working with them makes everyone lives better it supports almost all features of the f-sharp language a couple of limitations around like some reflection by staff and and like type providers are not really supported but those are like details generally you can take your usual normal a trap code and hopefully it will be successfully compiled to JavaScript as long as you don't depend on some dotnet framework native calls because obviously system that IO call to handle file modifications in dotnet will be totally different in in node.js world and in browser wouldn't even make sense so things like that won't be won't be compiled at the other hand it provides couple of support for couple for whole bunch of of dotnet api's so for example things like string dot concatenate are transformed to some kind of string that can concatenate that's in JavaScript date/time type from dotnet is transformed into date type from from JavaScript which means that especially if you're in in writing if you write your pure domain code that's kind of okay using some simple types some default built-in types without doing like web requires or without touching file system this code probably might be hopefully successfully compiled to JavaScript in terms of JavaScript interrupts and I will mention that that also later it's using it gives you a tool that creates a fable binding files which is basically every app file with bunch of interfaces from typescript definition files this is another example of this integration with existing community typescript committee has created tons of typescript definition files for existing JavaScript libraries there are in a repository called definitely typed and you can go to definitely tab you can take any any typescript definition file you can put it into into a typescript to 5-bolt tool and it will output you a binding file which means that it's like this really easy way of simple way of integrating wave with existing existing libraries and it's stable in general it's also focused on developer experience and like getting started experience there's like a lot of materials for getting started pretty good templates so you can do like dotnet new fable animation employed and this will create you if you want to just start with application with with playing with the technology it's it's probably easy to start so how how this does it actually work under the hood and this is this is really interesting part so at the beginning you have a trap code it's some F sharp source files and after project file that contains all the files then you have something called a flow compiler service and after compiled service is a library that's created that's basically a fork of the compiler of official compiler F sub compiler just with some additional api's that are focused on creating developer tooling on creating AST parsers and creating yeah all different kind of no tooling around f-sharp so using extra compiler services will produce a flop abstract syntax tree we transform this f-sharp abstract syntax tree in in something called fable abstract syntax tree then we transform that into Bible abstract syntax tree and we feed this final form of abstract syntax tree as a JSON to Bible this means that fable itself is just this red part and this is this is really not too complex I mean this is a lot of code this is this this is obviously a lot of work but conceptually this is not not something super difficult it's basically mapping from one type to another type to another type so basically pebble as a compiler can be treated as function that takes every abstract syntax tree at the end it outputs Bible abstract syntax tree and then because we fit that to Bible Bible is responsible for outputting actual JavaScript code which means that it will be high quality code because Bible is is this super popular tool from JavaScript community this is pretty cool because for previous iterations of F sharp to JavaScript compilers were attempting to output JavaScript themselves which meant that they were not using standard JavaScript module system they were not using standard way of formatting JavaScript and so and so and so on so it was really difficult to integrate the output from those previous iterations with with existing system here because it is Bible we just get this integration for free and this is super super important also you cannot talk about language to JavaScript compilation without good framework for UI programming in the browser because even though we can run run JavaScript everywhere nowadays I guess if I'm using f sharp or Scala and am using Scala as our F sharp enables in fibe all probably using node.js and the server is not something I'd want to do because if I want to use a burp on the server I can just use dotnet if I want to use Scala on the server I can just use JVM so why compile server-side to to note the big thing is it's your Y programming is a browser programming and and fable fable ecosystem contains this one library called elvish elvish is inspired as a name suggests by Elham programming language if you're not really familiar with alb it's a functional programming language it's really domain-specific language it's not general general usage language it's the most specific language focused on creating single page applications for a browser web web applications and it's really focused around this idea of you need direction of flow of data in your application which gives you ability to really easily reason about what's happening in your application and illumise architecture is is implementation of ideas from Elm on fable and also not only on file but also draw at the moment libraries that you can use for targeting Sumerian which is what nerds mobile framework or WPF which is like desktop applications framework but in general elements is based on this Model View update pattern it's inspired by football it's a really great way of writing Hugh ice in pure functional programming why because basically you model your UI as a set of immutable types and a set of pure and set of pure functions that transforms either state of your application or outputs view and I will show that in a moment so in principle changed because you know UI has always been object oriented world and people were saying okay UI is strictly connected to object oriented programming whole idea of object oriented programming was kind of driven by writing graphical user interfaces because battle needs to be closed drop down needs to be class and so on so on everything in to be controller Elm has changed that and and it's shown that functional programming can be a great way for writing graphical user interfaces and this is this idea is getting more and more mainstream which so the big biggest example of that is recent announcements of Swift UI stuff from from Apple which is this new paradigm of creating graphical user interfaces with Swift and that's more or less implementing ideas of Model View update and and those ideas of more functional programming way of creating graphical user interfaces which is pretty awesome so yes so elvish elvish elvish model you have something called a blade function and update function is executed whenever something happened in your application it takes existing State existing state of your application the event and it outputs new new state of your application it's just again a simple transformation then whenever model is updated it's fed to the view function and view function is responsible for taking the model and rendering actual HTML in case of elvish default implementation of elvish is using react under the hood so it's not directly outputting outputting HTML but it's rather using create under the hood and that's another example of this deep integration with existing JavaScript ecosystem that gives us huge advantages because react is fantastic library and a lot of effort is put into making it better and better so demo time we won't have them all unfortunately as I've mentioned huge huge important part is is this JavaScript interrupts under a couple of ways in which we can do that so one is this whole bunch of API that are built in in Fable Cora library that's distributed together with fybel there is also possibility of generating those external bindings from from typescript definition for that I've mentioned before you can also just use import at it's simple function call that simulates importing in modern modern JavaScript and you can also use dynamic programming if you really want to make your life miserable so how to start first of all you need to have both Atman current node.js installed on your machine to start with with fiber fable doesn't try to hide the fact that it's based on it's kind of in the middle of both those words so it's it's using both tooling from from dat nerdcore and obviously from node.js because that's that the target there is pretty good starting guide on a fable that IO page so if you want to check it out go to fable that IO and there is like pretty pretty lot of documentation and pretty good starting guide and also there is fable that io / Apple and you can go there and just play with with f-sharp and and see how what JavaScript code it's compiled it's pretty awesome project actually fable dot io / Apple is using a version of F sub compiler that has been compiled with fable to JavaScript so it's basically like bootstrapping itself and it runs totally in a browser so you abstract compiler is loud loaded that the JavaScript version of F sharp compiler is loaded in the browser and it it there's no server behind this this there's this tool which is pretty cool also another thing I want to mention while I talk about fable and and I've stripped the JavaScript compilation is a safe stack and safe stack is this idea of using F sharp above on a client and server side because this is huge advantage like I mean using F shop just to target JavaScript is pretty cool it works a lot of people are doing just that but there is like even more advantages when you use extra both on server and client as the advantages around sharing code and types of communication between client and server so yes it's it's critical project it's focused on developer experience it's focused on making people productive and good documentation and safe acronym means Saturn as your Bible and elvish and Saturn is like web framework that I created a sure is well you can actually switch that to AWS and that would be more fun and fiber one tell me I've just described so a couple of things I've guest presentation will be put it online by the organizers so you will you will find that online and yes do you have any any questions yes yep second row you do you know if there's any plans within the Fayetteville community to maybe target or utilize what was similar to any extent there are different extra projects that are targeting webassembly there is one to the called FS bolero that's targeting webassembly I think that Bible itself there is no I don't know about any plan that's kind of okay we need to move to webassembly now because like let's be further like well past this is my my personal opinion but webassembly still there's like long long way before it will be become super popular and and super production-ready so it's definitely we don't feel a pressure that okay right now we need to move to fable javascript is going to stay for three years and hear us around so just having ability to target JavaScript ecosystem I think it's something that we focused on right now others okay great can we give our speaker a round of applause thank you so much thank you my name is Chris again and you can find me on Twitter you can drop me an email if you have any questions you can find me on github 500px if you're into photographic Goodreads if you're into reading books and I have consulting company feel free to to talk with me if you need any help thank you [Music]