Developer Happiness on the Front End with Elm

Video in TIB AV-Portal: Developer Happiness on the Front End with Elm

Formal Metadata

Developer Happiness on the Front End with Elm
Title of Series
Part Number
Number of Parts
CC Attribution - ShareAlike 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this license.
Release Date

Content Metadata

Subject Area
Ruby and Rails famously prioritised developer happiness, and took the world by storm. Elm, a new language that compiles to JavaScript, proves that putting developer happiness first can produce very different results on the front end! Born out of Haskell, Elm is as unlike Ruby as programming languages get, but in this session we’ll see how its particular blend of design decisions tackles everything that’s painful about front-end development, making it an excellent choice for the curious Rubyist’s next favorite language.
Programming language Programmer (hardware) Computer animation Object-oriented programming Debugger Software framework Mereology
Axiom of choice Programmer (hardware) Web application Programming language Mathematics Building Computer animation Feedback Software framework Measurement Automatic differentiation
Scripting language Programming language Addition State observer Slide rule Java applet Multiplication sign Projective plane Electronic mailing list Mereology Web 2.0 Programmer (hardware) 4 (number) Bit rate Right angle Computing platform
Category of being Programming language Web application Word Run time (program lifecycle phase) Computer animation Source code Control flow Bit Error message System call Compiler
Functional programming Run time (program lifecycle phase) Code State of matter Multiplication sign View (database) Parameter (computer programming) Mereology Computer programming Front and back ends Mathematics Computer configuration Software framework Endliche Modelltheorie Programming language Mapping File format Moment (mathematics) Electronic mailing list Virtualization Bit Complete metric space Flow separation Entire function Type theory Web application Message passing Process (computing) Order (biology) Configuration space Pattern language Text editor Whiteboard Cycle (graph theory) Row (database) Point (geometry) Implementation Mobile app Computer file Web browser Rule of inference Event horizon Field (computer science) Number Wave packet Energy level Computer architecture Module (mathematics) User interface Dependent and independent variables Validity (statistics) Counting Database Line (geometry) Compiler Interface (computing) Computer animation Network topology
Point (geometry) Area Programming language Mapping Code Source code Electronic mailing list Line (geometry) Mereology Compiler Number Computer animation Text editor Error message
Point (geometry) Aliasing Functional programming Group action Greatest element Code INTEGRAL Interior (topology) View (database) Multiplication sign Source code Hyperlink Branch (computer science) Online help Parameter (computer programming) Mereology Computer programming Field (computer science) Software bug Number Expected value Different (Kate Ryan album) String (computer science) Integer Damping Endliche Modelltheorie Error message Programming language Boss Corporation Information Inheritance (object-oriented programming) Consistency Counting System call Compiler Type theory Pointer (computer programming) Computer animation Personal digital assistant Order (biology) Speech synthesis Row (database)
Programming language Information Modal logic Real number Field (computer science) Compiler Software bug Expected value Type theory Computer animation Personal digital assistant String (computer science) Order (biology) Integer Error message Physical system
Scripting language User interface Point (geometry) Area Trail Interpolation Java applet Code Hyperlink Bit Element (mathematics) Software bug Explosion Word Computer animation Software Bit rate String (computer science) Electronic visual display Website Error message Metropolitan area network Physical system
Functional programming Greatest element Interpolation Interior (topology) Multiplication sign Parameter (computer programming) Disk read-and-write head Bookmark (World Wide Web) Computer programming Crash (computing) Object-oriented programming String (computer science) Error message Metropolitan area network Vulnerability (computing) Physical system Electronic mailing list Bit Equivalence relation Compiler Type theory Numeral (linguistics) Pointer (computer programming) Computer animation Right angle
Programming language Code Electronic mailing list Branch (computer science) Disk read-and-write head Compiler Revision control Type theory Pattern matching Computer animation Personal digital assistant String (computer science) Order (biology) Statement (computer science) Pattern language Compilation album
Point (geometry) Functional programming Run time (program lifecycle phase) View (database) Sheaf (mathematics) Branch (computer science) Code Computer programming Element (mathematics) Fluid statics Mathematics Error message Physical system File format Expression Line (geometry) Cursor (computers) Compiler Type theory Message passing Word Computer animation Personal digital assistant Statement (computer science) Vertex (graph theory) output Pattern language
Point (geometry) Scripting language Functional programming Java applet View (database) Source code Bilinear form Computer programming Compiler Connected space Interface (computing) Radical (chemistry) Computer animation Term (mathematics) Code refactoring
Programming language Data management Graph (mathematics) Computer animation State of matter Software framework Line (geometry) Cartesian coordinate system Number
Installation art Functional programming Process (computing) Computer animation Different (Kate Ryan album) Code Website Mereology Equivalence relation
Web page Functional programming Multiplication sign Parameter (computer programming) Cartesian coordinate system Number Wave packet Type theory Word Computer animation Chain Cuboid Website Circle Endliche Modelltheorie Set theory Physical system
Programming language Functional programming Computer animation String (computer science) Electronic mailing list Parameter (computer programming) HTTP cookie Mereology Computer programming
Functional programming Suite (music) Game controller Group action Mobile app Server (computing) Run time (program lifecycle phase) Multiplication sign View (database) Parameter (computer programming) Computer programming Revision control Mathematics Object-oriented programming Different (Kate Ryan album) String (computer science) Software testing Endliche Modelltheorie Error message Physical system Computer architecture User interface Programming language Dependent and independent variables Arm Information Wrapper (data mining) Sound effect Database Compiler Interface (computing) Type theory Message passing Computer animation Hash function Personal digital assistant Order (biology) Pattern language Resultant Row (database) Library (computing)
Functional programming Programming language Confidence interval Code Characteristic polynomial Debugger Similarity (geometry) Web browser Computer programming Front and back ends Computer animation Integrated development environment Object-oriented programming Internet service provider Problemorientierte Programmiersprache Error message Spacetime
Computer animation Front and back ends
but around here and alright so I think or make starches the last few people trickle in but my name's kevin Yang is developer happiness on the front end with L the so I think
we are all of us here to get today together at least in some part because the Ruby programming language was written to make programmers happy and as he touched on in his keynote yesterday DHH when he describes the design objectives for the Rails framework he put optimizing for programmer happiness right there at the top the and in this article the rails doctrine DHH describes what he means by developer happiness it gives us a few examples and the 1 that's that to
me was these array accesses we all know about array 1st an array last well rails ads array 2nd 3rd 4th and 5th and for good measure throws in 42 and there is no reason for this feature to exist except to make programmers like a smile when we find it in the documentation and so that's what I think of when I think of programmer happiness we now I work at a company
called cultural down in Melbourne Australia we build a big web-app that companies like adobe AIR BnB and slack used to measure the company culture to collect feedback and data to drive positive change in their workplaces and so as you might imagine at culture and we take our company culture very seriously and are development culture to so we value programming languages that make programmers happy and for that reason we made the choice early on to use Ruby and more recently we've been adding some elixir to our back and as well because these are languages that make programmers happy on the front and we shows reacts not too long ago and up until about 6 months ago we had 3 teams all building there you i in reactor and the thing about react is it's a JavaScript framework and so
this is probably in the top 10 list of cheap Conference Slide laughs but when all adds to this unoriginal observation is yes the book on the right is actually getting bigger with new additions to the language in yes 2015 and later JavaScript is getting better it's getting some nice programmer happiness features the thing about java script is it's part of the web platform so you can never take anything out of JavaScript and so the book on the left is getting thicker at the same rate and so for all its strengths and I will certainly acknowledge the JavaScript is an amazingly versatile and powerful language is not I think a language designed for programmer happy and so for that reason when it came time to light up a
4th project team at culture and we were open to other possibilities and a possibility we decided to experiment with was l the so in this talk
I'll give you a brief introduction to L and then will dive into some things about found that I think are great sources of developer happiness L. break these into 2 big categories the lovable compiler and elms radical simplicity and will drilling to each of these a little bit and I'll wrap it all up by coming back to why we're all here today we'll talk a little bit about rails and how it compares to l the so let's go for an introduction to ELM it's my distinct pleasure to provide I hope the 1st real glimpse at Elm for many of you in the room today and and that makes me very happy
I Elmo calls itself a delightful language for reliable Web apps and I think a lot of Hayes made of that word reliable you'll probably if you've heard about ELM you've probably heard of its claim of no errors at runtime but were here to talk about developer happiness today so we focus a little more on the delightful aspect i l is a language that
compiles to JavaScript so when you write a now map you write a number of modules in separate files you feed those files to be on compiler what comes at the other end is a big blob of JavaScript that is ready to run your program in a web browser and when you write a noun now you will be following this architectural pattern called ELM
architecture all L maps in practice are structured this way so you'll start by writing an init function and that functions job is to generate the initial model for your app and when I say model I'm not talking about like an Active Record model that's like a single entity in your database this is a complete model of the current state of your front-end as it's running in the browser and then you write a 2nd function called view that takes that model whatever it is at any given time and generates the HTML interface for your webapp now if you're familiar with something like react at all you might know the way it lets you generate virtual Dom so every time you're front-end is rendered it calculates the entire user interface and then the react Framework takes responsibility for that intelligently and efficiently updating just the changes in the actual browser ELM does the exact same thing it has its own virtual DOM implementations so you get all those same benefits and as part of your interface you'll declared the events you're interested in and if the user does something like click a button the ELM runtime will send your program a message so you need to write a 3rd function to handle those messages and that'll be your update function and its job is to take the message incoming your programs existing model and a put them together in order to generate the new updated model approach which the ELM runtime dutifully feeds to your view function to generate the updated interface and your program ticks along through the cycle and that's how ELM programs work so let me show you what this looks like in code Over here we're going to start by gluing together all the parts of our program so I've got a main function here and I'm calling HTML begin a program and I'm saying my model will be provided by my init function my update function is called update in my view function is called view so we will start by writing that init function I mentioned it will generate our initial model which is just a hash or as we call it an elmo a record with a field called count and the value 0 will then write our view that takes that model and generates are interface and so that'll be a dead and that they will have no actually it's that's what the 1st empty array is there and then the 2nd array is the child nodes of that do so inside that you all have some text which will be the count from my model and then of an HTML button that generates on click and increment message and inside the level of the text common the so I just made up a name there that increment message so I need to tell what Elmo I need tell them what that is so all say my message types will be this new type that can be only 1 thing it'll be increment the and then I write my update function that receives that increment message and my current model and it generates a new model which is a copy of the existing model but with the count updated to be count plus 1 so there we go we have a complete account programming whenever you click that button the number will go up by 1 and I'm only lying to you a little bit here and that is with the formatting of this code of formatted this code so it's easy for Ruby developers to read and JavaScript developers to read In practice in the wild ELM code is usually format in this way so it's quite a bit taller ELM likes its vertical whitespace but the other thing you'll see going on is these weird but comments so in both of the lists the commas instead of being at the end of each line there at the beginning of the subsequent line and NL does this in order to get really clean gifts you can add new entries to this these lists without modifying any of the existing lines languages like Javascript and Ruby do this by supporting trailing commas ELM prefer to do it this way i've seen the argument made that if you if you forget to type a it's a lot more obvious when your code is formatted this way but I have to admit this was a sticking point for me when I 1st started playing with L I thought I could kind again on board with reading code in this format but you know enemy of the tree ed train my trusty old fingers did type code in this format the good news is you don't have to learn to type code in this format because if you're writing any amount of ELM code you're probably going to use a tool called ELM format it integrates right in with your editor and every time you save your changes it will snap your code into this community guidelines approved format and there are no configuration options so there's no RoboCup winter rule wars to go on in your teams it's really satisfying this you apply the tool and follow the rules and and it takes care of the formatting for you and that this actually provides a really satisfying moment of developer happy it's when your 1st learning the language you find yourself typing a lot a code kind of sitting back in your seat thing I'm not sure this is quite right and when you say the changes in the cold snaps into place you get that nice feeling a validation that what you typed at least syntactically does make sense and that was the 1st experience of developer happiness that I had with L so that's a brief introduction to ELM and what it looks like
and uh at this point will delve a little deeper into sources of developer happiness you get with him the 1st being elms lovable compiler the so if you've heard much about known you probably also heard that it has a reputation for great error messages and I'm here to tell you today that ELM has the most amazing error messages I've ever seen in my career here's an ELM error message for example are
it's as cannot find variable list . now and it shows my line number which is my actual line of code if that's a red jaggy underlined under the part it's objecting to and it even goes on it says lists does not expose now maybe you want 1 of the following and its 1st guess is actually right here I meant to take list dot maps I made a little typo it's able to fuzzily search the API and guess that what I meant was probably list dot maps this is what areas look like at the command line if you're like me you probably have a nice editor with an elm language
integration and so this is what the error messages look like in action for example so you get them as pop overs when you hover over the red underlined code they're very nice we errors are also extremely specific so in this case it's saying the 2nd and 3rd branches of this if produced different types of values the 2nd branch has the type strain but the 3rd is a float hand all the branches of and if need to match so that no matter which 1 we take we get back the same type of value overall so the error message is not only telling us what we gave it and what it expected but it's also telling you why it had that expectation and even how the language is designed in order to create that expectation really really specific and especially as your 1st learning languages is really helpful stuff speaking of beginner friendly errors here I'm trying to concatenate 2 strings using the + operator and that's not how you do it in ELM ELM has a plus plus operator you can see the hint at the bottom to append strings in L. meaning to use the + + operated not plus and there's even a hyperlink to the relevant documentation and so when you get something wrong as a beginner as often as not the compiler will guess what your intent was to give you a pointer to the right thing to do the so in the program we wrote before did anyone happen to spot the bad because the young compiler spotted the bug but I'm not carried out this error message because this is actually not that great of an error message it's pointing at this part of my code is the source of the problem when in fact the bug is down here I'm passing model account which is a number to the text function which is expecting a string and the reason that ELM is not able to pinpoint the source of that error is because it doesn't have enough information to do so I've giving given it conflicting information and all the best you can do is point to the part of my program where those conflicting things come smashing together and I tried upon them together into a coherent program so the issue is that I've written and in function that has account that's an integer and you function that expects account that's a string the and ELM doesn't have enough information to know which 1 of these is correct ELM is a strictly type language which means the compiler decides for you what all of the values in your program what types they are and if it finds inconsistencies it gives you an error like this 1 so what you can do to get a better error messages to give em a little more to go on by providing some type information I'm going to declare this type alias called model and what I'm saying here is any time I say model what I mean is a record containing account field that's an integer and the Kabbalah goes right 0 gotcha boss and then I can annotate my init function and say in it returns a model and it goes pool that checks out but that matches my expectations and now my view function I can say it takes a model as an argument and returns HTML and the Kabbalah goes but no sorry
that's not quite right and it gives me now a much better error message it's as the argument to function text is causing a mismatch function text is expecting the argument to be a string but it's an int and that makes fixing the bugs super easy I can just wrap my model count in a call to to string and we're done so ELM has great
error messages especially when they're powered by static types and you provide the necessary amount of information for the compiler to understand your expectations about the types flowing through your program so thank a little more about static types because when I showed you
this body you might justifiably have thought what kind of modern languages this that it can automatically convert an integer to a string for me when it leads to some well in order to explain why this is the case I'm going to give you a slightly more real world example of a subtle bugs that elms really strict type system protects us from the this is a search field
that that we might have on our site and what I've done is I've put a hyperlink under it that you can probably barely read and it's suggesting that I might wanna repeat my most recent searches by clicking that link and if I were to implement this in Java script I might have some code like this where I've got my search history in an array and then I'm outputting a string where I use string interpolation to put the 1st element in the array rate in the string and the problem here is that I may have never done a search on the site and so a battery might be empty and what then happens is my user interface displays the word undefined JavaScript helpfully converts that nothing into a string and displays it for all my users to see and this is an especially devilish kind about because John script is operating as designed here there is nothing wrong and so this isn't the kind of thing that that'll turn up in your error checking software this will just be delivered to your users as business as usual you'll never find out about this until you happen upon it yourself and and in fact if if I give you people and the curtain here a little bit this is
culture ramps javascript error tracking system as about 2 weeks ago and if I zoom man I can show you that every single 1 of these areas has something to do with the null on undefined value making its way through our system and exploding at the point that we try to use it when I was taking a screenshot I couldn't resist going in and trying to fix 1 of these bugs I couldn't do it these bugs are really hard to track down because the place where undefined explodes often has almost nothing to do with the place where it actually gets set in year system so these are really hard bugs and the reason
that the person we have the blame for these is this man Mr. Tony Hoare who in 1965 invented the null reference and the inner reefs recent conference talk he said I call this my billion dollar mistakes at that time I was designing the 1st comprehensive type system for references in an object-oriented language ALGOL w everyone's favorite right my goal was to ensure that all use of references should be absolutely safe with checking performed automatically by the compiler but I couldn't resist the temptation to put in a no reference simply because it was so easy to implement this has led to a numerable errors vulnerabilities and system crashes which probably caused a billion dollars of pain and damage in the last 40 years and as you can see from our error tracker the legacy continues so let's look at the equivalent ELM program this is an
ELM list at the top and then in the suggested search function and doing a bit string interpolation to up to take the values returned by list . head and plug it into the strength and the thing is this sound program will not even compile when I try to compile this this the compiler says that it's expecting undependable and hint at the bottom says undependable might be a string for example it's expecting a strange but the left argument is a maybe strings so what is a maybe string for this is a maybe this is a type that's built into ELM and and maybe something is either just something or it's nothing so maybe strain is either just a string or it's nothing and if we look at the API docs for list . head you can
see that if we call it on a list with things in it it returns just the 1st thing but if we call it on an empty list it returns nothing and so by exploding on the
compiler here's forcing us to handle both of these possibilities list start head isn't guaranteed to return something so I need to handle it if it returns nothing so in order to do that I can just change this to a case statement the selector switch statement in Ruby and I'm saying that if the list but had searches history returns is just the latest search then use the latest search in my string but if it returns nothing but uses alternative string no previous searches the so the compilers forcing me to handle both cases because we're all Ruby assume we like some elegant code of show you a slightly more elegant version of this we can use pattern matching in L 2 to just match on the the pattern of the search history and if the search history is a list starting with the latest search and followed by the rest of the list we can use the latest search but if it's an empty list then we return no previous searches and the thing is that the maybe type that I showed you before isn't any kind of special case even if I'm doing pattern matching here if I remove that 2nd branch of the compiler catches it and says this case does not have branches for all possibilities you need to account for the following values the empty list at a branch to cover this pattern the so through and through language the compiler is watching our backs and forcing us to handle every possibility and for this reason ELM is able to make that remarkable claim of
no errors at run time Due to its strong static type system in which nearly is not a thing I I to wrap this section a talk up I'm going to give you a sense of what it is like to build new features in an element so we'll
go back to this uh program that we've been working on and when I add a new feature to it and then go to the view function here and I'm going to add a 2nd button this button will be called decrement and generate a decrement message and right away I've got a red underlined because the compiler doesn't know what I mean when I say decrement because it's a new name that I've made up so that's easy to fix all just go to my message type and say is no longer just 1 possible message I now have 2 possible messages that I might receive in this program and the biases OK great but then you need to update your update function and says the pattern does not cover all possible inputs you need to account for the following values main . decrement switch to a case expression to handle all possible patterns and so sure enough i've hard coded the word act increment in my function definition there so I can replace that with a variable and then I'll do it said and add a case statement here at this point you can see where my cursor is up to the next step here would be I go down to the next line and reinvented under that new branch but because I'm using ELM format I can just hit command asked to save my changes and it will do that indenting for me so it's also a really nice development tool this elm Indian at this uh elm format but my codes now underlined in red so just in case I forgot what I was doing Elmer saying this case does not have branches for all possibilities you need to add 1 4 main . decrement so I'll go ahead and add that 2nd branch and when I say my changes from format puts in the requisite vertical whitespace and I'm done that's how you add a feature to an elm program and the reason I took you through this was to highlight the fact that
all I really came up with on my own was adding that but I just imagine the feature that I wanted to exist in my interface and I added it to my view functions and from that point on the compiler was leading the by the nose step by step through my base telling me what needed to be added for that feature to exist and this is what adding new features dome programs feels like and more importantly this is what refactoring in Elmer feels like you can just grab a a function that's gotten too big for its britches and repair that and put it in a new module and from that point the ELM compiler will point you to all the broken connections year program that you need to go and fix the lovable compiler that you get with ELM is like this a perfect pair programming partner that is always guiding me to the next step that you need to move forward rather than complaining about the thing that you just change it's really nice and that is 1 of the 2 big sources a developer happiness for me now the other is elms radical simplicity so Elmer has a batteries included philosophy and as Rails developers were quite familiar with this rails is this big collection of lots of tools that come all bundled together configured to work nicely together so that we don't need to learn them separately and that is surprisingly rare in the JavaScript ecosystem if you've been watching JavaScript lately you may have heard of this term called java
script 50 or read an article like the 1 in the
background here complaining about the dozens if not hundreds of cleverly named frameworks and languages and dev tools that you need to get your head around and understand how they relate to each other and install them separately and configure them to work together and read the docks for each 1 separately it can be a nightmare to try and get into JavaScript development for this reason and if we look at the stats for
NPM the node package manager it's no wonder this is the state of affairs JavaScript is really a victim of its own success here your is 1 is NP and the blue line is RubyGems I don't know if you had this experience to but when I 1st got into Ruby even in Ruby I was like put off by the sheer number of cleverly named gems that I need to get to know what is the vise and why am I supposed to care and why is it called that if you look at the graph here it's telling us that the problem is about 4 times as big in the JavaScript ecosystem end up in my experience that's no exaggeration so if I'm looking to build a modern JavaScript application I'm probably putting
together some collection of tools like the 1 on the left here and Elm seeks to address this issue by providing all of those things or their equivalents anyway built in with a single installer install at once and you've got equal and all of these things configured to work together as a single site with a single tutorial that you can follow to learn how it all works and it is nite and day difference the and so as Rails developers we probably have some that
sympathy for this batteries included approach and it's 1 of the reasons I like elm so much especially for built bringing juniors onto our teams it is amazing how quickly juniors become more productive on our own code base as opposed to our react redox codebase that often can still be bamboozling them weeks into the new job I find it a big difference it functional programming the good parts so this is evidence
that we keep the creative L a proper should mention before now but in the official ELM tutorial on the site on the very 1st page he says forget what you've heard about functional program fancy words weird ideas of bad tooling box so this is an opinionated fellow and his opinion is that ELM doesn't need to be any more complicated than it has to be and that is what he sought to create l is a functional programming language and if you've doubled in functional programming at all that can be a daunting of set of words because functional programming languages are often full of these weirdly named concepts but on
tries to be different and I'll try try to illustrate how here this is a feature of all functional programming languages including ELM called partial application so declared a function here called add that adds the 2 arguments it takes together and returns the sum and so I cannot I add 1 to and I get a number 3 that of course but I can also just type add 1 and when I get back is a function that still waiting for another number before it can return a number 2 so this is a partial application of the and function and this partially applied function is now a value that I can pass around in my system and you somewhere else so for example I could write a new function called increment and increment is just add 1 and it's uh it takes a number and returns a number so now I can say increment 5 and I get 6 and hopefully this serves to explain why functions like additive my multiple arguments express their types definitions like this as like a chain of values that you pass in 1 at a time leading to a return value so in functional programming circles this feature has another name and its courier and training is a weird name it is hard to understand why it's called that it's hard to form a mental model around this feature when you're learning functional programming and so in our In the on community they don't use this name they just call it partial application the clearest label they could come up with for this feature but features they don't need to they
removed so features are constantly being removed from ELM with each subsequent release is an example in it before the recently released ELM 18 it had this feature where you could put a function in between back backticks and that would let you put the name of the function between its 2 arguments instead of at the start of the argument list this let you create these readable formulations like by milk and then dipped cookie but the problem with this syntax is that those backticks are really confusing if you've not seen them before to beginners these look like strings and so what they figured out is that they could change how and then works and instead use another feature of the ELM languages they already have the pipelining operator and if anyone here is played with ELM at all elixir at all the ELM pipelining operator is the exact same thing it's 1 month their features of both languages and so using the pipeline operator we you can still say by milk and then give cookie and they get to drop the backticks syntax and as a bill making that syntax simply doesn't exist in the language of the more so wherever they can they're removing features to make
sure that l is just functional programming the good parts lastly ELM programs are made up of just 2 things mutable data and pure functions and this contributes significantly to the simplicity of the language so let me tell you what I mean by these before I tell you why it's a good thing immutable
data if I give you a Ruby are for rails that and I said user . update prams probably most of the people this room have enough experience with rails to spot that this is an active record object and calling the update method on it will change that user object in place if I still wanted the old version of user well I better have made a copy of it before I made this method called because it's gone the but in the very same control or action I might also call don't merge which is designed to different way hashed out merge doesn't modify the hashing place instead it returns a new hash with the updates applied to and the reason these 2 things might exist in my parameters because these are 2 different API is designed by 2 different people with 2 different design sensibilities and we Israel developed reservoir operas just Over time start to navigate these design differences and understand why different functions work different ways but this is confusing to beginners and it's not an issue in L because an ELM values are immutable and so I can pass my user to this update function safe in the knowledge that update function not only will it not a change that uses it couldn't if it wanted to because ELM values are immutable they can't be changed all you can do is create a new value with some changes applied to it and so I know for a fact that my update function will return that new updated user I don't have to learn that that's just how all ELM functions work because that's all they can do with mutable data going back to this Ruby function though this Ruby method called if you know your Rails you also know this update function does something else which is persist changes to your database and this is what we call a side effect it's you call uh method and besides returning new its return value it also has some impact on the rest your system or the outside world the ELM function simply can't have side effects because all ELM functions are what are called pure functions and a pure function means that they function but all it does is to calculate its return value for you and the only information it can access in doing that are the arguments that you passed to it if you pass the same arguments you always get the same value back and that function can do anything else to the outside world it can't make an AJAX request that can assist anything your database it can't even tell what time it it's because that would be information from the outside world that might change the value it returns on any given day so all ELM functions are pure functions they cannot have side effects that is the restriction of the language so you might be thinking hang on I'm I wanna make an AJAX request to my own program can l not do that will cost can but in order to do it we need to expand our view of this elm architecture that I showed you before you might have guessed that from the name that HTML begin a program gives you this simplified version of ELM architecture and the main restriction it gives you is no access to the outside world and you can often actually start the guild be building your app with beginner programming when you're ready to graduate to something that has effects you can switch your function called H that and the compiler will guide you through all of the API changes you need to conform to but when you do this you get a more advanced version of the ARM architecture and it looks like this you still right an init function that creates a initial model but that function can also optionally return a command to to the ELM runtime so that might be a command like say make an AJAX request the ELM runtime takes that command and actually does that thing for you In the meantime your programs view function will have to render a user interface and if you don't have any data yet in your model than that will probably be some kind of loading view and then when the Ajax requests completes the on runtime will let you know about it by sending you a message this is just like the messages you get from the user clicking a button in your interface but now this is a message generated by the on runtime and so you handle it just like any other message with your update function but that update function can also now return optionally a command and this is how you for example kick off and AJAX request in response to the user clicking a button in your interface and so that's what the more complete the AJAX enabled ELM architecture looks like so I'll show you what this looks like Co we're going to go back to our
in function here and this function now needs to return both a model and a comment and if you don't want to do a command well you can just return command of none to say I have no comment for you but if you do wanna do something like send an AJAX request where you can call a function like http . send and I'm passing to it got data which is the name of the message I wanna get back when this request completes and get data which isn't a function I will write to describe the request I wanna make I'm using HTTP GET string which makes a GET request expecting a string back from the server you can imagine this things like post J. Song and stuff like that and we provide the URL and so all we have to do now is I handle that you got that message so we need to get your message type and add got data to it and got that is a wrapper around a result which can either be an HTTP error if the request failed or the strain that we have successfully received from the server and then we need to handle this message in our update function we but go back there so there's the update function we just add a couple of cases using pattern matching we say if it's a got data with OK inside it we handle the successful data if it's a got data with an air inside it we handle the error and there you go that's how you do Ajax requests in L and importantly both of these functions are pure functions which means you can call them and they will not actually generate an AJAX request all these functions do is generate a command they return a command and what causes an AJAX request the happen is when you return that in the on run time but you can safely call these functions any time you want for example in your test suite these functions are really easy to test all you do is call them and see if they give back the command you expect and because no Ajax requests will actually occur these are really quick fast tests and you don't need anything like mocking in your test library the on test library simply doesn't support mocking because it's not needed in a world where
all of your programs are made up of immutable data and pure functions so that sounds radical simplicity just to wrap up here
will take a look at rails and L. because they have some similarities both
rails in ELM have this batteries included philosophy and they both pride themselves on their clean language syntax but there are some trade as well Ruby on Rails is a dynamic object oriented and very flexible language and that's what you want in your back in language you want a general-purpose programming language that could conceivably do anything and we've seen some talk to this conference showing just how versatile ideas but on the front end in the hostile environment that is today's modern browser and might be sharing space with ad blockers and who knows what else do you want a simple language and 1 that gives you as many guarantees as possible and so am has chosen this trade off and that has designed itself to be static functional and relentlessly simple and because of these characteristics ELM can give you those guarantees that let you develop with confidence and provide develop happiness and finally there's at least 1 clear when I can cause that's sounds amazing error messages I think every other programming language could learn at least 1 or 2 lessons from what ELM provides you when you get your code wrong and I'd love to see Ruby adopt some of those now if you wondering how we bring these 2 worlds together how we build our how we integrate our ELM front-end with our Railsback and well I will refer you to
this talk coming up this afternoon by my colleague Joe Cranford she's talking about react on rails in the journey we took that adding a rich front-end to an existing rails out and all the same plumbing and machinery we use to integrate our react front-ends rails it's the same stuff were doing for l and so if you're interested in how that works please come along to that talk I'm sure it'll be great I'll be here to and with that I will
thank you for your attention and take any questions at the cost of the