 All right so welcome to texting while driving from zero to hero and We actually have only 25 minutes. So it's gonna be in turbo mode. So Elman Haskell. So That's PHP actually who can spot the mistake Yeah Yes, there's another one. So Yeah, I have a typo over there. So here. I'll just jump so indeed. I have a typo in the word message I'm passing the node ID instead of the user ID because I'm just passing an integer and the template I'm just suggesting that there is no existing template and some existing template And I have here in my speaker notes a note to myself saying roll your eyes and even for the people in the back Please watch It's it's magnificent how I'm rolling my eyes and I'm kind of want to retitle and repurpose my The title of the presentation and call it get out of your comfort zone I just want to say that in from my perspective Drupal has reached Drupal is now in a comfort zone right and it's awesome business wise But in terms of technology and development It's a bit from my perspective again a bit too much in a comfort zone And the way I see it the really interesting stuff slash the non-boring stuff Technically wise are kind of happening where when we are outside of our comfort zone So in this specific presentation, I'm going to show you a lot of a lot of elm code And I try I'll try to do my best in explaining it But there is going to be some value actually if you're not going to understand everything And I'd like you to when you see that you're not understanding everything kind of try to tap into your inner newbie and kind of explore what you're feeling because That's where some kind of growth and interesting thing is happening And this is kind of awesome because for me it's going to be a win-win situation if you understand it It's awesome if you don't understand it. I can still enjoy it. So Types and modeling the problem modeling the problem kind of in Elm or Haskell talk It's the way of saying if there is a problem we think about the types the type system and how we model it how we build this kind of data structure and everything else is kind of Derives from that. It's kind of an implementation Details so jumping right into elm types. We're going to see it quite a lot So here is the type Boolean it could be either true or a false That's it and I can define my own arbitrary types for example here I have my type Drupal con new Orleans Dublin Baltimore and so on and so forth and then I have my function get name Which is getting a Drupal con type Property and obviously there is the compiler whenever I'm gonna pass it something wrong It's gonna bark at me and I'm gonna return a string I don't have to write the types elm and both Haskell are in third types They understand it by themselves, but it's kind of considered a good practice and for us as humans We can really understand what is written over there because in the end I don't really care about the body of the function I really care about the type signature what it's getting and what I'm gonna get back So then inside the function I have this get name and then we have what we call pattern matching So case Drupal con off and then if it's type new Orleans then return some kind of a string And again if I have a typo or if I forget Vienna then the compiler will not compile and it will show me an Arrow message let's say Just for I don't know some business requirements We actually want to differentiate between the Drupal cons the one in the US and the one in Europe in that case I will create Two more types con EU. I call it naming is hard, but still con EU Dublin and Vienna and the con us and then my type Drupal con is now Drupal con EU Which is wrapping another type called con EU and the same for the US And then the function would look the same type signature However, you will see that we actually have two pattern matching over here case Drupal con off The first time I'll get maybe Drupal con US and the argument that I'm getting the con US This is actually this type this con US which I now need to pattern match again The compiler will not allow me to do any mistakes. So by having those types in place. I kind of indicate What I want how I want to Structure my application. So let's say we have some kind of a site that is showing different people and which Drupal con they are attending. So I'll have this record which is type alias. This is just an alias, right? I'm just saying there's a thing called person which will have a property The name would be string and the Drupal con property is of Drupal con type So for example Tom here is I'm creating a new record I call it Tom the name is equal Tom and Drupal con equals Vienna But obviously one person could have attended several Drupal cons So my record will change in Drupal con will be a list of Drupal cons So in that case Tom has attended Vienna and Baltimore and Sue She doesn't have any Drupal cons under her belt. So the list is empty Let's continue the business requirement says that we want to know and show if a Certain person was a speaker in one of those Drupal cons in that case what I will do I'll say okay. I have this type alias called is speaker, which is just a Boolean True or false just for readability. I'm saying this there's a new type alias Which is is speaker and then I have this Drupal con dict again This is just aliasing just to make things a little clearer later on in the application Which is actually a dictionary, right? There's a thing called dict in Elm It's a dictionary you can think about it like PHP when we have associative value associative array Sorry, we have a key which we can get and then we have the value I'm writing every dict over here because really quickly in Elm a dict can the key can only be some Comparable a string or an integer with this every dict package I can make it every arbitrary type in our case the Drupal con so it means that Drupal con dict will be keyed by the Drupal con type and the value would be is speaker so the person the person alias has changed as well Drupal con is now a Drupal con dict and then This is how it looks so we'll start with sue on the bottom. She has no Drupal cons under her belt So it's every dict empty. It's completely empty. Whereas Tom for example We're just creating out we're creating this dict out of the list So when we are saying here is the list the key is Drupal con EU Vienna and the value is true The true means is a speaker us or not is a speaker Who is slightly confused already? Great success Even if you are remember Hold treasure treasure that feeling and the thing is that the key over here. I couldn't just write Vienna I actually tried writing Vienna in the beginning, but then the compiler reminded me. Hey, I don't know what Vienna is Because you told me everything is keyed by Drupal con which is Drupal con is Drupal con us and Drupal con EU So let's continue. Let's say again from the this site is actually getting the information about which Drupal cons I've attended through calling a rest API issuing a get method into API Drupal cons Then in that case when I just initiated my application, maybe I don't know I got information about the user I know what's the user name, but I don't know yet. I Have not fetched yet the Drupal con Information and this brings us to a very handy type called the maybe type and this now already It starts to look a little strange. What is this a that we saw this a is Representing some kind of arbitrary type. It could be integer. It could be string. It could be our Drupal con This is basically saying Listen, maybe you don't have nothing and nothing is nothing. It's not wrapping anything. It's just nothing and above it We have just a just your Arbitrary value that you wanted in PHP. We don't really know we don't really have this notion And this is why our code is scattered with those checks of the is set and not empty because this idea of concept of saying That property is optional or required Does not exist in PHP over here in Alvin asco This is very like this is part of your data structure. You are saying this one is gonna be Optional so for example, I could Structure my data like that and say the Drupal con is actually a maybe Drupal Condict and see something interesting both Tom and Sue just for this example have no Drupal cons right, but we can already understand by their state that For Tom the Drupal con is nothing and in this case it signifies that I have not yet even Contacted API slash Drupal con. I just don't have the information yet, right and For Sue I'm saying this is just Just an empty dict meaning I contacted the server. I brought back the Drupal con list But it's empty. So if I wanted to show all the people that Have not attended any Drupal con. I would probably show just Sue because about Tom I don't have that information yet and this is kind of encapsulated as part of the property Now what if I wanted to I don't know show a spinner or know if there was an arrow fetching You know HTTP request. I mean, I know that we always assume that what could possibly wrong Why wouldn't I get an answer from the HTTP but in some obscure world in Developing countries, I don't know not in our life that could actually happen. So I could sorry I could do something like that. I could say, okay, I have this person and the Drupal con This is a maybe and then I'm gonna have a loading property and I'm gonna have a failure property both are Boolean Maybe it could work out, right? I could say for Sue, you know, Drupal con is nothing yet And yeah, I see that it's loading and there's no failure But that's problematic because I could very easily Because I mean human do a mistake and somehow reach a state where I have both the loading here You can see the difference what I've done It's both loading true and failure true So what what is it like? It's an impossible state and this is kind of a phrase that we have with type system and it's about making impossible states impossible I Don't want to reach a point where I could have this loading and failure True because it's representing something that just could not be and in case you weren't confused up until now This is probably a bit more confusing So let's try to decipher what we have here and this is yet again It's just a common pattern that raises and we have like a package called remote data Remote that is basically saying you have some remote data that you want to fetch and it actually has four different states It can be not asked. It could be I mean I just initialized the application. It could be loading I'm in flight. I'm currently fetching the information and then it can be a failure or a success What are the e and the a in the beginning? This is again, this is arbitrary types We don't know exactly what they are, but they are different They is representing an error over here You can see it next to the failure and the a is representing the success and just to specialize a bit This type we have a thing called web data web that is just an alias for remote data Which is saying I don't know what the value of a success would be But I know what the error will be and the error would be of type HTTP So in that case our person would look like that So I have the name and I have Drupal con which is web data wrapping Drupal con dict So for Tom I can know I don't need to say nothing Which is not enough. I can say not asked or I can say loading I know the exact state of the information that I'm getting from the server and as for Sue again I get a success message as success message Message which is an empty dictionary So this is from an application. We're building in Gizra It's called I Hanagana project. It's basically an NGO in Rwanda for mother that have AIDS that our AJV positive And they have babies and they are coming to the clinic once a month or so to get some physical to get some physical checks and some for Consulting so basically every mother could have several children And if you can see through the user interface, basically, we're having different checks weight weight height nutrition Uploading photos and so on and so forth and obviously each mother can have different babies and what you're seeing in this gift is basically I could have I have this Existing examination for the child for the baby and obviously I had past examination so I could know what The recent weight was and I need to to register to register the new weight So just to understand the business logic for now for just for the example. I Have many existing Examination, but I must have one single new examination that I'm starting I don't want to start like two examination think of a piece of paper that a nurse might have They don't want to like have two pieces of paper for the same for the same kid So before starting of thinking how to implement an HTML and whatnot. We're starting to think about the types How can I represent this business need of saying I could have unlimited existing? examination, but only single New property and that's again with types. So I have this new type called storage key and instead of writing a I just called it record ID so it's clear what we're dealing with so I have existing Which is wrapping some kind of a record ID Maybe an integer maybe something more complicated or one single new so just by writing those three lines I'm guaranteed to have exactly what I want and Then it will look a bit something like that. So I'll have type Examination ID equals examination ID integer. What's that? You remember in the beginning in the PHP. I showed you how I'm so elegantly passing the node ID instead of the user ID because you know It's just expecting an integer, but with the type system I can have types safe values and I say you know what that examination idea which in the end It's just a node ID. Maybe but Sorry From L perspective, it's not just an integer. This is an Examination ID that is wrapping an integer. So all my type signatures when I'm saying I want to have an examination idea I cannot suddenly pass a user ID or an article ID So this is the type safety that I'm getting and then I'd say type alias examination again a new record which would be a weight or a height of type float and then I build this Slightly crazy maybe looking dictionary which is basically saying this is a dict or an everyday like we saw earlier And the key here is more involved This is the storage key the newer existing which is wrapping the examination ID which is wrapping an integer So basically we're stacking those types together and the value is some kind of an examination and the child will have this examination property and Just to show you that if we wouldn't if we wanted to have for example like offline capabilities saying we would like To allow the operator to enter many examinations even Offline meaning it's gonna be saved locally to the local storage and only later saved to the back end then still I could Say I have only one new thing and then I would model it and I just say type storage key with local Let's say let me pass a record ID the one in the server Let me pass a local ID the one that I'm gonna save locally Which is probably gonna be just an incremental integer that I'm gonna that I'm gonna Increment so again just by thinking those types. It's the entire implementation Could change and if I wanted to start with new and existing just with the storage can later on refactor my code I will just add this local new type That's how I would start and then I would just let the compiler Make sure that I wire rewire my application accordingly with almost no cognitive load because again the compiler is taking care of things So we saw that we have this idea of you know entering the measurements that they had the height or the weight Over here. We have a nice pattern called editable. So editable look at it It's getting type editable a again a specific arbitrary type, which I don't know what it is It could be read only a Right or it could be editable a a meaning it could help it could hold two values But it must the values could be different, but it must be from the same type It could be a four and four or four and five, but it cannot be four and hello world It must be on the same type. So we can see some examples. So If I have editable read only which is wrapping an old String and I'd say give me the edit editable value I'm getting the response old and if I have editable editable Which is all the new and I want to fetch the value. I'm getting new Meaning that same property that same type is actually holding Both values and you know when we're dealing with JavaScript and we're dealing with application It's everything about holding as much state and controlling the state and knowing what information That you have so basically I could say okay. I've started with a default value let's say four and I'm typing five right now and I want to hold that information before I want to hold until I'm saving it to the back end I got everything is working unless somebody is clicking cancel and then I will just revert back to the to the Initial value. So then my examination could look something like that editable is Wrapping the float But the thing is that right now I'm actually holding only the old value and the new value right I typed for I typed five Whatever I'm I'm holding that but I have no notion of am I sending it to the back end was it safe successfully or not? So for that we can actually continue and stacking our types and we have this Package called editable web data remember editable from literally two seconds ago. Remember web data from four minutes ago Now combine it in your brain, and this is what we're actually doing over here. So editable web data is getting some kind of a So editable web data the first value. It's gonna hold is actually editable of a that arbitrary Type float whatever we are using along with web data and those Have you call it? Brackets, sorry the records that you are seeing we call it unit. It's just an empty value I don't care about it, right? I'm not I'm not wrapping anything important I just want to know the state am I loading success or failure So now it's gonna actually look like that So a weight or height has all the information it needs to know about itself Is it an old value? It is it a new value is it loading is it succeeding and so on and so forth Decoders so basically when I'm doing interviews for M developers in Gizran My first question is do you understand the coders if the answer is no is bye-bye? If the answer is yes, then I investigated investigate a bit more. So the decoder is that All the guarantees we're getting from a type system is just because it know exactly which kind of data It has so I cannot longer like if you know some crazy language I don't know let's think about something random JavaScript. I have HTTP I got the JSON and I'm just assuming that everything is right over here We have this notion of decoding if I'm getting a JSON I need to decode it and make sure it matches my different record shapes aliases whatever you're gonna call it So for example, I can say I have this JSON x3 and I want to decode a field called X into an integer. I'm gonna get a response. Okay, three again. It's not just me It's an okay I get the type which is wrapping which is telling me was it successful or not if I have a longer JSON still It's working, but if I'm passing it to true value and I'm expecting an integer I'm gonna get an error again the compiler will make sure I cater for those cases because it's There's otherwise it won't compile. It's working for a string and this is like a very simple example But in the end when you have like really bigger Aliases like we have a sale alias or whatnot then in the end I would have to do Decoding when I get the JSON whatever the form is I need to make sure that everything matches This type alias that I've had so over here. We can see It's required. I'm Expecting to see a label property of type string if I'm not gonna see that then it's gonna fail It's not gonna crash. There's zero runtime exception in Elm But it will go to part of the code which is dealing with what happened if the decoder has failed So Haskell I decided not to talk about it much It's for me to decide apparently so I will just run it really really fast Haskell is way more complicated from my perspective than Elm Elm. I find it. There is some learning curve It's a new language, but it's much more approachable and actually it made Things that are happening in the browser JavaScript more predictable than Drupal let that sink in right things that happening in JavaScript more predictable Haskell is From my perspective more complicated, but again after coming from Elm and seeing Type system and compile system and starting to think that not working with those system hardly makes sense I've just started working with that. We don't have anything in production yet, but definitely dabbling with that and and Here is a quick example. I have API slash login token I'm just I don't know sending some access token and the way it will look I'm using a framework called you sawed So there's some magic involved. I could have done it in a more Explicit way, but I'm using some magic But what's interesting to see for example in the user is I'm saying a password is of type text But this is a maybe right just because I don't know that's the example So again from the minute I've defined something I've already already very explicit if it's a required or optional and I have this access token over here that I say belong I have some arbitrary token and some user ID I'll define my I will define my routes and then the handler would look Something like that and I don't expect you to necessarily know Haskell, but what's going on over here, and I'm saying, okay You're required. I'm required to be logged in at this point, and I want to get the user ID It's not just an integer. This is a user ID type I cannot pass it to an article type and then I'm gonna run some DB query and Bring me select something like where the user ID matches my user ID and The answer that I'm getting is actually a maybe Because again, I'm calling the database Something could have gone wrong So I cannot assume again PHP doesn't force us to assume it and we forget it sometimes, but Haskell doesn't let us Break from that. It's gonna be a maybe value that nothing and that just and I'm returning it and What I wanted to reach is the fact that actually when we have Decoupled application right client side and backhand side then usually the the places it breaks is obviously in on the edges on The peripheral right where we're sending the request or when we're getting that so there is a nice like Implementation called the Elm export where I when I'm defining my data on Haskell I'm actually adding this Elm type which in turn will export the decoders that we've just seen Into Elm meaning there's a really tight connection between what's I'm what I'm doing on Haskell side and on Elm side and the chances of things breaking is being reduced So Elm you could use in so many different ways. We have like headless headless Drupal where we have this Auction real-time auction sales that we are that we are running and this is like Real-time with pusher and whatnot like really fancy Elm, but it could be also like hybrid application I expect you all to read Hebrew But basically this is Drupal serving the page along with some tiny Elm application So whenever I have those cards and I want to start filtering them everything is happening in Elm I don't do a special request to API slash something It's just Drupal passing on the information through Drupal edge Yes, and I just inject it into Elm and we actually have unit tests for this searching over here because I can do those Unit testing in Elm and I would never write any test for that probably if it was jQuery or whatnot So Drupal is actually passing the the data into the Elm so even the translation that we are doing for those Three cards over here not of the content, but all the wrapping which time are you opening or whatnot? Even the translation is happening in a type safe manner Meaning when I add a new translation key I cannot forget to translate it to Arabic or to English because again the compiler will not compile and We have other examples like I don't know our Jekyll site for the gizra.com site You won't see it on the phone But if you go from desktop then we have this about page, which is a distinct page, which is like I don't know some Elm application so for me This is mostly not that you need to understand exactly what editable is but just to repeat my previous Remark about getting out of the comfort zone I do hope that you were slightly confused And if so that you were able to tap a bit into that feeling and I encourage you to tap more into that because I do believe Honestly, this is where the interesting parts are happening Boom, I think we have like two minutes. So make the questions either bullion or really really short All right, no question. That's better. All right guys. Thanks. Cheers. I told you Wow, I need to chill now