 So I asked my wife what do you mean exactly tell more about myself and she was you know Like I don't know exactly tell them your name your age and the number of kids that you have So I went along and I created a web application in Elm that tells you my name my age and then my the number of kids that I have and You know it took me a lot of time. I've created You know the entire application and the gifts and the videos and the presentation and whatnot and after many many hours I've decided to show it back to show it to my wife and when I show that this Gift this gift the only thing she had to tell me was you idiot. You're only 37. So Even though it's biographically incorrect, I'd still like to proceed with the presentation. So Indeed my name is Amitai Burstein. I'm the CTO and co-owner of Gizra. We're a web development shop based in Israel and since the beginning of 2016 we have an official US office so My Twitter handle is Amitai Buu. So if you want to tweet go ahead, it makes me feel important So today I would like to talk about Elm which is basically a different approach to web application But let's start by understanding what problem it solves So you couldn't agree or disagree but one of the problems I call it This is where you might disagree of all JavaScript framework is what they have in comments They they are all written in JavaScript and That's fine. If you're a JavaScript ninja, which nobody is or they are very very few and When I'm going to show you about Elm so often time people say so what's wrong about JavaScript? I think there is a lot of things that are wrong I'm not gonna I'm not gonna get into the argument of the JavaScript Ecosystem and the fact that two two days ago we had grant and yesterday We had gop and today it's cool to use npm script and finding what the real best practices are but rather I want to show you a pragmatic approach or Our own approach in Gizra, which is basically saying We want to build web application the quickest way possible the cheapest way possible Solid web application and also keep our developers moral high So in this in this session, I'll probably be bashing angular one a bit just because you know It's so popular to hate angular one. I have nothing really against it I'm just gonna show it The mindset that I at least know of angular one and how it corresponds In Elm and basically just to show you how I think that Elm provides better tools to deal with front-end development So Elm is a function a functional programming language If you know what's functional programming language is good for you If you don't know will cover some some of the things in general the gist of it I would say that Function the function that we have don't have states and that is immutable. That's probably The two important things that we have so what you can see on the screen. It's the code This is this is Elm. It looks similar to Haskell in case you've you've seen Haskell It's a compound language. It's being compiled into HTML Java and CSS It doesn't mean you cannot use bootstrap or semantic UI you can but if you want to have some inline CSS or stuff like that You can do it so we have the Elm language and Along that we have also the Elm architecture, which is basically a set of best practices on how to How to come and how to structure our application our application how to connect the different components and Basically, we know MVC model view controller in in Elm in the Elm architecture. It's pretty similar We have the model update the view will see a few code example that will explain that and Basically the Elm architecture have a few principles. I just want to share with you the two important art Two important principle So the first principle is saying we have a single source of truth and the entire state Our entire application in health is held in one single record tree in one big object And when I saw that when I saw that for the first time it really resonated with me if that's even a thing that you say in English because in Angola one if I would ask you where is your state you'd probably you know scratch your head a bit and you say well It's in the UI router or in the router But then you remember that you have a few services and each service, you know can have its own internal cash So you don't really know where where you don't really control the entire state of your application Or you cannot control it easily add on top of that the fact that The async nature of JavaScript and again, it's really really hard To know what is the condition of your web application and definitely we're in cases of bugs And we have a lot of bugs in front end just because it's so hard It's really hard to reproduce. It's really hard to reproduce those those problem So this idea this principle of having everything in one single record tree is maybe counterintuitive to the fact that We are thinking well everything should you know separation of concerns everything should be completely separated So yeah, the LM architecture is still saying everything should be There's there's still a separation of concerns But still the entire state is held in one single place just to help us control our web application The second principle is that state is read only and you know folks. It's 2016 We all already understand that the root of all evil in this world is heartwarming positive Non-cynical world is two-way data binding and you know, you probably remember yourself. Thank you just for laughing mission accomplished I Remember yourself myself going into Angola one sites three and a half years ago And you know checking the first example where you fill in the input form and it shows you Your name high and your name and I told myself. Oh my god This is saving me so many jQuery lines and you know that thing that made us love Angola one so much is the thing that we now Hated for this two-way data binding because we have a big problem If we have this model view controller thing with the two-way data binding our review our html is actually Changing our model without necessarily the control and being involved over there And when the model is changing the data changing it might cause A fact of triggering other action other changes and again We are not able to control or understand the state the condition of our web application So back to our award-winning web application, which is basically a glorified counter example I'd like to think that maybe I'm the first that was able to personalize a counter example but it's a counter example my friends and I'd like to show you through I'd like to show you some code and Basically to show you how we are thinking elm so definitely you don't need to understand every single line and command over here And definitely there is a learning curve to elm I know I when I saw the elm syntax for the first time I closed it and I didn't go back to it for For three months because it looks a bit daunting, but I'll show you how things are making sense So even if you don't know elm I'll show you how things, you know fall into there the right place So this is the code that we have and I'll just go over it very quickly There is some boiler code that I'm not showing you I'd just like to show you the essence So we have a model called person We have a bunch of import stuff like you know in JavaScript. We have this Required thing, but let's go to the interesting part. We have here the model our model is basically just a record holding a few stuff Like the age which is an integer now. This is a compile language. It's a statically typed language It means age can only get integers There's no way you will be able to pass a string into into the age Just because the compiler will not will not let you do it This is part of the guarantees that elm brings with itself. There are no runtime errors There are no crazy things that you suddenly don't understand How come you have a string being pushed into an integer? So we have the age which is an integer the kids and the name and In the initial initialized model, I just initialize a bunch of Values watch me as I quickly Completely ignore the init function There we ignored it and we reach this line that fills me with total joy And in effect, maybe I could have stopped the presentation right here And if you're coming for react redux, it might make sense because again Angular 1 I'm looking at you if I would ask you about your fairly big, but not too big angular 1 web application What are all the options? All the actions? Sorry a user can interact With your application and that they will change the data meaning what are all the actions now? If you're a senior developer and you started the project Well, maybe you know you remember everything, but see you wouldn't feel too confident You'll have to go into the code you look some stuff inside the controller You look some stuff inside the view because it might be changing the model and you come with a list and it's not Well, you kind of hope cross your fingers that the list is correct And the beautiful part over here is you know our glorified counter example This is just a counter and example. I can increment and decrement it I've just created a new type called action and I'm giving it this arbitrary words, which are decrement and increment increment And I know exactly where to look for when you'll ask me. Hey, I'm a tile What are the different actions you can do for your web application? I have one single line that tells me not more not not more than that not less than that So below that we have this update function, which is kind of the controller for that we know from Eb me see So let's look at the type signature. So the type signature basically helps us helps us understand that I'm gonna get an action I'm gonna get a model and then I'm gonna return another model So elm is immutable language meaning I got a model. I'm not gonna I cannot reassign values to it I'm actually creating a new model and handing it back. Let's completely ignore the effects that we see below that So now the update function is getting an action and a model and I have a case over here case action off Decrement and increment. I cannot write anything else. I cannot have a type of the compiler will not allow me to have a Typo over here the compiler will not allow me to forget to write the word Increment over here So it's guaranteeing that all the cases are fulfilled and basically inside the case you can see I'm saying take the model and Take the kids property and that's decremented by one or incremented by one All right, that's our view So it might have some certain resemblance to HTML I know that I know that when I saw that for the first time that was like that's when I decided to close elm for the first Time because I said hey Where's my HTML right like it's it's really hard to to read the syntax It has its advantages it has a disadvantages in short I will say you it just syntax deal with it the disadvantages are probably that it's less readable because we're used to reading HTML The advantages are these are function that are compiled so I cannot have a div with it with a typo I cannot have an enclosed tag and so on and so forth. So basically what we are seeing here in the view function we have We have the div which is like the root div and below that we have another div completely ignore the text We don't care about it and then I see I have a name plus plus which is basically just concatenating a String which is the model name and below that I have the same thing which is an age and since age is an integer I'm just casting it into a string and you know I got it and the same thing for kids number below that I have a button which basically we're saying on click Just send one of those actions that we've set already the decrement the increment. We cannot have anything else The HTML the view part isn't changing our model It is basically saying take the action take the model that we have right now sending to the update function Which is like the brain of our web application. This is where all the business logic is being handled We're just sending it and changes should be done there So we have the increment and decrement and then below just some some debug code But even though it's not HTML still it's a bit. It's quite convoluted. We can probably clean it and By clinging it we can actually show that everything in Elm is actually a function So what I've what we've done over here the view name is actually I can declare a view name I have a function. It's getting a string and it's returning an HTML So this is basically just getting the name at it and it knows how to print it So if I'm going up I can see that the view name is now getting the model name Same thing would be with age the view age if I'm looking at the function So the signature will be an integer and I'm just getting an HTML and by the way, I'm writing it When I'm writing the type signature, I don't have to Elm is Inferred typed meaning it can it can understand by itself But this is kind of a best practice for us the humans to understand what's going on So with the view age, basically view age I pass it the model age and here our web application is perfect. It is showing my name. I'm it I my age and my kids number Oh, no How embarrassing I have a bug and in front such a respectable audience The number of kids is wrong and we can see that in the debug if you can see from that far The age is 38 the kids is 3 and the name is Amitai But somehow the kids number is appearing incorrectly if we go back to the code we can actually see That I wasn't very concentrated probably when I created the web application The view kids which is also getting an integer. We are passing it by mistake model age So one of the things that Elm allows us since it's a combined language is a statically type language is to try and Move the runtime mistakes into compiler errors, and I don't call it runtime errors because again There are no runtime errors in Elm What did I mean something That there are no runtime errors, okay, it is but it but it's true So our idea is try to shift as much as possible this this those mistakes that We are so used to pushing into production and just have the compiler You know bark at us and say this is wrong and in order to do that we need to understand types So let's have a quick types one over one here is the types here is the type Boolean This is how it's defined in Elm it can get either a false or a true. That's it If we wanted to extend our Fancy web application, and I wanted to share with you the different vehicles that I'm out I might own and again since I'm the CTO of Gizra. I'm so rich I might have a boat One boat. I don't want to exaggerate. I might have a plane one pay But I might have multiple cars. I Actually have two I want to sell one. I don't know how to do it, but Basically I have this integer of the car the integer is wrapped With a car type. It's not just a simple integer. So now in my model I would say the name and the age and the kids and then I'll have another Vehicle property which is basically a vehicle type from now on So then we can start once we understand types. That's it you understand types We can talk about type safety So once we have the type safety in place We're basically helping the compiler in helping us and preventing those mistakes So again looking looking at our previous example how it looks right now The age and the kids are both integer if I go down I can see that I'm just initializing with normal numbers a Possible solution would be just defining here. I have this new type kids Which is just it's just the kids right? It doesn't get it's not like the vehicle. It's not a plane or A boat it's just kids But what important is we have an integer and that integer is wrapped with the type kids So just for the sake of the example I I kept age as an integer and kids is now of kids type So if I look at the initializing model, then you can see the age is being initialized with a simple integer But the kids is initialized with the integer wrapped with the kids type So the view kids function for example if it used to get an integer up until now This is before the change that we want to add here is the new change If you can see in the type signature you can see that it's no longer gonna get an integer It's gonna get this kids type is it basically again our value wrapped in something So we need to unwrap it in sour our let there is a let block over here basically we are you know reaching inside and yanking out unwrapping the kids and now we have inside this valve inside this valve Variable we have our integer and we can print it we can print it out Just to show that there is a possibility again to keep it a bit shortened and in our argument Over here on top. We actually already unwrapped it. So we keep it a little more readable But the fun part here is once we've done it one we have this type safety in place if I'm looking at the compiler This is actually the integration of the elm compiler inside atom the compiler is actually Telling me hey, you cannot do that You cannot call now view kids with the model age and the compiler is actually telling me I'm expecting the function is expecting a kids type and you are passing me integer And this is beautiful because it will never reach production because you know, it's not it wouldn't it wouldn't compile So the update function very similar to that we're seeing if this is the before change We can see that the kids is treating the model kids as a normal integer is a normal number But it is not that our number is wrapped in that in that type So the change would look like that again I need to unwrap our value and then here the kids you can see maybe you can see there is a small Apostrophe this is quite common in immutable language It's saying I took the value from kids, but I'm doing some kind of computation, right? I couldn't reassign kids itself because it's an immutable language and then I will reassign and then I will reassign it So Basically the update function and that's that's the fun parts I mean our entire business logic is being done here again if we're thinking about angular one when you have bugs suddenly your data Something on the screen is you know not working properly you need to start digging thinking where is this data changing? You don't have to ask yourself that in hell because there is one single place that it can happen and that's in your update function so obviously it makes is it much easier to ping point bugs and fix them and We could have more complicated Requirements I want to show you a more complicated requirement just to I just want to put it in context Just so the next requirement won't sound too harsh It's is a very short video try to notice the sound of the piano in the end. It's I think it's my own favorite part Blenby so the next requirement is putting limits on kids because And by the way, I add that's the name of the girl that was crying she was basically throwing a fit for 30 minutes because She was annoyed by the fact that the the yellow potato had glasses didn't fit her better and like It just won't I'm sorry So we want to put the limits on the kids like logical limits when we hit the decrement So it won't be low below zero and if we Hit increment it won't go beyond a certain lumber now again angular one. How would you how would we do it? Would we disable the HTML just to prevent the clicking that that's like it's kind of signs wrong sounds wrong Right, it's dealing with with the HTML. He doesn't deal with the data How would we do it? Otherwise in the controller? Maybe listen to the model changing and either prevent it or or or revert it We don't have that problem in elm because we all don't have the two-way data binding this is data is flowing through Through a single direction. This is the unidirectional Unidirectional approach like we said earlier the view is just sending the current model with the action And then it's up to the update function to decide what to do with the action if it decides not to do nothing It won't do nothing So indeed this is before the change we can see that you know when we're hitting decrement Then we're just decrementing without checking anything the entire change that we need to do Sorry The only change that we need to do is add an if over here So if the value is reaching a certain amount when then we just return kids zero again Not just a zero a kids zero save thing if we're gonna do it for for the increment so Business logics business logic requires testing right type safety cannot always save us We saw for example the if then for for for putting a limit and it requires testing so For the audience who writes unit tests in JavaScript for their own web application All right Now another trick question who enjoys doing that so for the viewers viewers at home a very few people raise their hands and I cannot blame her Clap back blame them because Writing unit tests for JavaScript. You probably have the same amount of joy and happiness those guys in the back of Kim Jong-un must be feeling right, so Unit test in JavaScript. It is a so much a fun, right? Everybody Everybody hates it, right and And and to understand what makes unit tests really easy in Elm It's probably time to talk about few pure functions and side effects. So Your functions and side effects. Elm is a black box, right? It has no connection to the outside world So if I tell you that an HTTP request it's the outside world. It kind of makes sense, right? I need to call some server. It's more than that even getting reading the URL from the address bar This is the outer even getting the time and date from the browser This is the outside world and this basically all those things we call it effects now Today the new version of Elm was really so from now when we call it comments Those effects or those side effects outside of Elm So if we're looking at this code again back to a simpler counter example Just the integer just you know We could we could have let's say an action saying Sorry to get our information from the server then our action would look like that I will have the type action again, and we have two actions One is calling the HTTP request to get the server and once we've got it, we'll have a second action Nothing happens Together This code So let's say I'm inside the function This is the action code That's What It's List Drunk You know stand up and don't go all the way It's just just just to do basically When When it will reach the previous of code is oh now I need to do the actual request and this is the idea of having this pure function And another another I have all this benefit from that or not all this benefit of having this pure function is one of the things The reason why we had to write writing unit tests in JavaScript is that you need to mock the entire world We need to Jasmine catch HTTP and whatnot You don't need that because there is no HTTP calling when you're gonna unit test those functions So now if we're looking at update data from a server, we can see that again. We have a case over here If everything is fine, then I'm then I'm just updating my model If something is wrong with my HTTP, I'm getting an error and this is where elm It doesn't even encourage us It forces us to be better developers because if I wouldn't add this error case, it just wouldn't compile So honestly if I had to write it in angular one, I would probably cut corners and I say yeah I mean, why would the HTTP request won't work? Why what can possibly go wrong and I will just completely avoid it But elm doesn't let me do it. So just for the simplicity. I'm not to do. I mean my return value is nothing I got a model. I'm returning it but Confronted with the fact that I already had to write this error error handling I would probably tell myself. Well, let's invest a few more minutes a few more hours I don't know in you know providing a better error mechanism showing a message or whatnot All right headless Drupal. So I Literally look looked for the in Google images I looked the word ISIS and that way that's one of the first images that came in and I said like it's perfect It's showing everything that I want to show about headless Drupal. I Not even sure myself. I totally understand it, but it's like it just made sense so Drupal, I mean it provides us, you know Users and permission and content modeling and entity reference and restful and and whatnot So we decided yeah, we want to still use it. We just want to replace our angular. We just want to replace our React with something else. So one of the first experiments was our office time watch pretty simple every this is The Israeli law forces that every every employee that comes to the office They need to write their pin and they're getting you know We're just registering when did they keep came in and when did they come out? nothing too fancy However, what helped us what helped us sorry Decide to transition from Angola and actually to jump over react was Hadley and Elm Hadley so if you're already familiar with our Hadley project We have generator Hadley which basically Scaffold's an entire working headless Drupal installation. So you just write yo Hadley and it just you know drush It it creates your Drupal scaffolded. It is sorry scaffolding Drupal It's installing it npm install bow install creates an angular Application and basically it's a fully working headless Drupal It already comes with be hat test and Travis integration basically everything that that you want So we just told ourselves, okay Let's try to replace the angular one and basically create a typical web application that one that has login and logging with weather We log in with github and a routing system and maps and user interaction to filter the events and an article that I can easily drag and drop Files and upload them and create an article on the fly and the cool thing is that All those application you can already use that in your own existing Drupal site So it doesn't even necessarily need to be a fully, you know headless Drupal It can be a hybrid side that Drupal itself is Serving the page and you have this Elm web application inside inside the pages and First of all, I think it's a pretty cool demonstration of capabilities and If even if you're not wowed that's fine I mean, I won't take it personally and in a in a way. It's okay because this is a typical web application I mean I did we didn't the deliberate try to do something Extreme we wanted to see can we you know get all the nodes and permission and OG and what not everything is like we don't care about it. This is just restful serving the information So if you want to start interacting With Elm and everything that I'm saying is kind of right to Elm 0.16 and today was released 0.17 But still you can you can look at the things obviously you can go to elm that Dashlang.org and I'm pretty happy to say that the second example that appears in the homepage belongs to github Which is this and Hadley Hadley example another thing that we've done in Githra is another yo generator for For elm which basically scaffolds a very simple counter example But it comes with gulp and browse browser sync and sass and you can you know push to gh pages And basically it scaffolds everything that you need and it's already connected to Travis and You can read different blog posts some of our blog post that we are writing we're always trying to provide blog posts blog posts that are Pragmatic not just the crazy stuff But how do you do translation of the web application with type safety meaning how can I translate my web application and Be guaranteed that all the sentences that I put them put there will be Translated so you can do that and Just almost to finish the the the last 60 seconds about my own personal functional programming journey slash what about no JS so About a year ago a bit more than a year ago I started with elm and that was the first time I was touching Functional programming and I must admit that up until then I was looking you know looking at stuff like symphony as the holy grail You know everything is object oriented and it's the couple then composition and whatnot and slowly I started realizing Yeah, it's awesome and great. It's beautiful But the objects are mutable and they are holding states so it doesn't necessarily mean it's wrong It's just a completely different approach to solving to solving the problem and once I got into that I told myself Okay, what about the back end? I'm not about to replace Drupal I have a lot of respect for Drupal also a lack of hatred to parts of Drupal But still it's doing a lot a lot of stuff so on it on a not a typical on a quite complex system We might have like a headless Drupal, so we'll have a fronted in elm will have the Drupal itself acting as the headless Drupal But oftentimes we have also like a no GS proxy server So the same problems I have in JavaScript on the client side I'm I'm starting to have with JavaScript on on no JS. I've started to I've actually and Started to learn Haskell and this is a you saw framework which is really interesting And even if we won't use it in production in the end in Giza and most probably we use it and we'll kick No, yes, there is a real value in learning something that is so completely different because I Really got a kick in my developed prayer Developers brain and this is really shifted the way. I'm looking at at a development It really changed my approach and these were Exactly 35 minutes and 60 seconds about elm and thank you very much questions You want to try the mic or oh? Yeah, and I'll The elm you're asking so elm is pretty stable in the sense that It's still it's still a new project in a sense that no it's not a new project It I think it exists even more than react. It's a small a small project The maintainers are doing a terrific job in you know Not breaking stuff on one hand and be very careful, but on the other hand not being afraid on saying, okay We should change that. I Think what I mean my best argument that I can give you is for my own company I'm using elm form in production. That's my that's my argument. Yeah Thank you. Thank you. Hi, and so I was wondering how How much of the like the time do you spend with like the type checking and the types and at the same time? Like house it for like people which are not familiar with for example Object-oriented code or something in general which is a little bit more high-level than the typical procedural stuff Because I could imagine that like for many people. It's like a high barrier to even work on your projects I'm wondering whether you run into any issues or can give some tips about that So I think in a way you are asking also about the learning curve and bringing like junior developers and I have to admit that this is actually became easier because When we're doing code reviews even for G for junior developers if if it compiled I'm already reassured and it's actually We're seeing it. It's much easier for them and in a way kind of the nice side effect of elm part of our Our job recruiting thing is we are giving people an elm task and it's guaranteed Nobody knows elm so they don't know elm and it's a simple thing usually it's a counter again a glorified counter and they make it so It's possible. It's possible to do it and another another fun thing about it is you know When I was reviewing angular angular web application after two weeks. I lost it I I couldn't review it anymore, you know, I'm banging my head that directive and trans clue than crazy stuff With that even month after that I can still easily review because I really understand the flow of the things Yeah, last question You mean a part of elm using other other stuff. Yeah, so part of headly so headly Basically shows that elm can have interop interoperability with JavaScript Which is kind of again. This is outside of the world of elm elm is a black box So you could think about about it as JavaScript as a service, right? So basically elm has ports so if this entire drag and drop the maps obviously I didn't write All the leaflet maps from scratch. This is basically working from port So headly is really showing you all the use cases that you would that you would probably have Another question. Is there any kind of focus regarding server side rendering of elm? So I know it's I know it's part of the plan. It hasn't been done yet, but Stay tuned. All right. That's there really the last one Make it counted So with JavaScript, we have npm and it's a really giant Ecosystem lots of well-written code. What does elm have to offer for package management? All right. So first of all there is It doesn't it isn't as big as npm with all the advantages and disadvantages so I think in terms of You'd probably find higher quality stuff You wouldn't see all the duplication and a nice thing that since elm is statically typed So the package manager if you try to push a change and you try to do like a minor change It will tell you good You cannot it will it will stop you because it knows how to go through your code and understand the API and will Say this is a major change So this is I mean you have a lot a lot of a lot more guarantees on On the stability and this is one of the important thing you're getting a really really stable web application All right folks. Thank you very much