Building UIs in the Dark (aka Elm Programming)

welcome everyone this is building you eyes in the dark I'm Richard Feldman this is my first time in Sweden and so far I've learned a couple things one is the saunas are very warm very nice two is the Baltic Sea is very cold in November so I'd recommend the first thing not sure about the second thing all right so let's imagine that you sit down at your computer your laptop you have your hands over your keys and this is what you see nothing just pitch blackness so this is what programming is like for this particular programmer if you look at his desk here you might notice that there's a keyboard and and there's headphones standard programming equipment there's something missing that that you and I might be used to there's no monitor there's no display and this is because this particular developer is blind and he wrote this blog post absolutely fascinating I highly recommend reading it on his company's blog called software development at 450 words per minute and he explains how he programs and basically what he hears in those headphones is text-to-speech reading code to him really really fast I'm gonna do my impersonation of this I mean you have no idea if you listen to it it just sounds like absolute gibberish it's like I don't know how he has learned to to listen to this this fast but he's actually productive doing this and and you know if you imagine like what does flow state like for him that's different from flow state for us flow state when you really get in the zone you're just kind of letting the code flow through you this is this is gotta be a completely different experience and yet he also gets into flow state same ways we do this really fascinated me he said I've had my fair share of angular and react work if you're not a front-end developer these are front-end programming technologies for the web so he's doing UI development blind and you might think like what how I mean its UI work how could you possibly do that like completely in the dark like this and it turns out that is like well you know many web apps today have a lot going on under the hood it's not all layout and visual stuff there's actually quite a lot of business logic that lives in the client of a web application now and this actually didn't always used to be the case like back in the days before web apps what some might call the good old days we used to have basically just static HTML only it was all content that was it no interactivity really not not on the client-side I mean JavaScript existed it was like too slow for more than just like making stuff follow your mouse around for some reason and really people were on like dial-up connections at best like 56k was like yeah that's a good modem right there so the idea of making a web app back then it was just kind of a non-starter so the beginnings of web apps really were sort of like still rendering HTML but it was sort of doing it dynamically on the fly on the server and I kind of sort of oh hey we can actually do this in the JavaScript god fast that's like we can do more with JavaScript and bandwidth got increased and we started to see more and more broadband and this sort of led to the rise of web apps you know we started to see really rich web applications things like the idea of a map application in the browser with no flash I mean back in the 90s that would have been completely absurd but now we're just like oh yeah that's you know I do that my phone right running on smart phones which didn't even exist back in the early days the development ecosystem is really mature it's come a long way for building client-side web applications and servers have gotten a lot cheaper and of course as you might imagine this is sort of changed the nature of what front end code looks like I guess especially as a percentage of code based over time like it's just absolutely taken off I mean the amount of front-end code that we write today relative to how much we did back in the days when everything was on the server is just skyrocketed and we've even gotten to the point where people are talking about things like event sourcing actually I've done this at work in some cases maybe behind my lips event sourcing is you basically log user actions like user clicks on a thing you essentially just send that straight to the server and the server doesn't really do anything it just writes it down in a database and then you can sort of replay those events later on to restore the user state at this point you're basically saying all of the logic is on the front end the server is not doing anything it's just spinning stuff straight into a database and then spitting it back out to the front end which takes care of restoring the state completely and managing everything now the complexity of front-end has also been affected by this as you might imagine as the percentage of the codebase goes up and that's also been actually no it's been more than that it's just been straight up its absolute I mean it's it's completely absurd how complicated front-end code base have gotten and so we've you know there's this natural question that comes with this like how do we deal with all this complexity well one answer is what I've done at work at this company I work for no red ink we used to be using react and now we've been using this technology called Elm so if you're not familiar with Elm elem is a functional programming language that compiles to JavaScript and we've been using it to help us manage our complexity problems it's got its own semantics it's it's not actually JavaScript under the hood it's not even a JavaScript dialect it has absolutely nothing to do with JavaScript except for the fact that it compiles to it so we can use it on the client lots of companies using Elm all sorts of different sizes the ones on the left you may be familiar with the ones in the middle may be less likely to be familiar with it was alright even less likely because they're sort of smaller companies so big little and small it works for all shapes and sizes and one of the things that people have been asking for quite some time was hey yeah is there any sort of single page application example so I can see what an SP a looks like an elm and for awhile there wasn't one because people will say well yes we've got plenty of them they're all proprietary you can't see them so people are asking for an open source one and I found out about this project called real world and it's pretty cool the basic idea behind real world is they have a specification for a clients as well as a server and so you can implement it using different technologies you can use react Elm angular for the front end whatever you want also on the back end you can use Django or laravel or whatever you know back in technology you want so you can see this sort of like mix and match of these different technologies and it's a it's a pretty sizable single page app example it's it's got sort of like a medium clone although they called it conduit instead of medium conduit medium okay and the basic idea is you've got you know enough functionality to sort of demonstrate what a single-page app might look like in each of these different technologies so you got stuff like you can write posts you can view a feed you can look at tags you can edit your settings log in log out sign in sign up all that good stuff so here's a if you want to take a look at this particular one later that's the URL so um a couple years ago I was on this flight where I was working on this and you know if you're like me you think four hour flight and you're like that's not a flight that's a for our coding party yes there's gonna be no distractions I can't check Twitter you know there's no Wi-Fi that's a fee if the plane doesn't have Wi-Fi oh it's like that's $20 I can't afford $20 so I'm gonna have no choice but to focus on one thing for the whole time which will be great so I was really excited about this line yes I'm gonna work on this thing and that that happened to be the project I was working on so I was really looking forward to this until I realize there's a slight problem which is that if you're offline and every single page load begins with an HTTP request to a third-party service that I don't control and isn't on my laptop that means I can't use the browser for any of this for our coding session which if you're doing UI development is usually a bit of a hindrance this is sort of the problem I was faced with and I was like ah there goes my coding party I was like okay well I don't know I'll just like write some code and I'll see how far I can get and it turns out four hours later I the planes landing and and I have Wi-Fi again and it's like yeah I was just coding the entire time as it turns out I I was able to be productive for the entire four hours writing elm code and when I landed and got the Wi-Fi back everything that I had built worked on the first try when I had Wi-Fi again now when I tell people this story I get two different reactions commonly if the person I'm talking to is used on before they're like yeah I know what you're talking about I know I've been there right that's that's good stuff and that's the person does not use them before they're like I don't believe you that's not that's not a true story that could not have happened because it's it's kind of impossible right I mean front-end development right we're talking about building UIs again it's it's it's implausible you could do front-end work for four hours no internet connection not be able to use the browser and still be productive so I thought you know what better way to demonstrate what I'm talking about then to do it live on stage so let's actually add a feature to this without opening the browser so you're gonna sort of see get a feel for at least a small taste of what type of stuff I was doing on this flight so here we see on the Left this is sort of the the my articles tab on your feed so you can click my articles and see a list of all the articles that you've written here's a article that I've theoretically written that just says hello to everyone and you can see this another tab over there called favorited articles and when you click favorited articles it shows you other people's articles that you've clicked favorited on so we're gonna do is we're going to add that feature the the favorited articles features so I've got a build where I've sort of taken that out and we're just gonna go through adding it right here in the editor live alright okay now the first rule of doing live coding is that you make sure that you have everything in your cache right so like you never want to do like RM RF the equivalent of like LM stuff which is like the equivalent of node modules you never want to interesting alright um well let's just see you know maybe I can run this build and maybe it won't take too long do those fast okay so one thing to note about Elm it's really fast and it's also really good at caching stuff so um all the like downloaded modules and stuff I have there just happened to be in my local cache already anyway so when I'm building from scratch even if I have you know my project specific cache deleted that's no big deal it can rebuild it very quickly okay so we have right here I'm not gonna talk too much about what this code is doing while I'm live coding it because I have slides that are sort of explaining in more depth so I'm gonna do is I'm gonna first go through this and kind of show you the process and then we're gonna talk through in more depth in the slide and kind of explain what I've been doing okay so we have this function called view tabs we have right here my articles so that corresponds to the one that we've already got what we're gonna do is we're gonna add favorited articles I already have that my clipboard so I have to type it out so it's gonna hit save and now I'm gonna rebuild by the way I'm gonna throw a QuickTime on this build and we're gonna see that it was able to give me an error message in point two two six seconds so that was pretty quick so that's that's a pretty quick feedback loop there before I know what I need to do next it says naming error I cannot find a favorited articles constructor you can see it's it's underlined up here in my editor so I have you know editor tooling that's gonna give me the full error I'm doing it down here in the console so you can sort of see the the raw thing if you were just running it from the CLI can I find it favorited articles constructor these names even close though okay well it's telling me that I don't have one of those because it doesn't exist I just made it up and all I'm gonna do through this time is just follow the errors that I get from having added this new thing and sort of pretending that favorited articles is already a concept that exists the first thing I'm gonna do is I'm going to say okay so favorited articles I happen to know that's going to be one of my feed types currently I only have one of those defined which is my article so I'm just gonna right click hit go to definition and say okay I need to add some feed articles right here alright our favorited articles rather favorited articles okay great so we've got that added now let's rebuild see what happens okay once again 0.2 to 2 seconds we have our next feed back missing patterns by the way this is about 4,000 lines of code so these are these are not compiling you know hello world exactly this case does not have branches for all possibilities so okay and then we have a second arrow down here which is another missing patterns this other case does not have branches for all possibilities so you see the line number here on the Left 116 so I'm gonna hop over there and again if I were just doing all this in my editor I would probably just be hitting next error but I'm gonna do it with the the console just to show that okay now I happen to know that the way that I'm gonna solve this is I'm gonna add another branch here instead of my articles it's gonna be favorited articles and I know that the only thing I'm gonna change here this is gonna be the part that actually goes and does the HTTP request instead of going to the author URL I'm going to go to the favorites URL okay notice when I hit save by the way the the whitespace changed a little bit I'm using Elm format on save and Elm format as a cool thing that basically formats your code so whenever I save it just makes it look nice this is a feature that pretty much everybody I know who uses Elm uses and one of the cool things about it is that it has no configuration which means your team can't argue about it there's only one way to use it which is you just run it it's really nice okay so that let's see if that fixed one of our errors sure enough it did we're now down to one missing patterns err its line 287 okay and we see we're back down here I'm gonna create a little bit of code duplication then when we get to the slides I'm gonna resolve it so my article is gonna change that to favorited articles and I happen to know that basically what this is doing right here is it's showing which of these two tabs is selected versus not and I'm gonna shuffle yous around a little bit because I want my articles to be not selected and I want favorite articles to be selected the selected one select the one goes in the middle okay so now I have fixed that and now boom successful compile and it successfully compiled it and generated all of the code the output in point three seconds now this is an incremental build so we know that this is now safe so I've guess I've kind of spoiled that but I can RM my local cache and build it again completely from scratch and that brings it all all the way up to one second so that's a complete scratch build incremental obviously is much faster than that so you can imagine if this were a much bigger than 4,000 line of code code base this is still quite a nice feedback loop to have and in fact when I was pure programming with one of my co-workers a while ago we're going back and forth of doing this and just kind of be like oh error fix it error fix it error fix it and sort of like going through the code base and you know working out the implications of the change we made and we finally went back to the browser and hit refresh and actually like used it he looks at me is like this is so slow waiting for the browser to load like that takes like way more than a second Wow oh how did I ever live like this like yes it's pretty cool it's actually this is faster it turns out a faster way to do UI development okay so as promised now let's actually go through that a little bit more depth and kind of talk through what these things are doing okay so so initially the goal was just add a new feed a new tab a favorited articles feed so we had this code initially this is a sort of feed beaut abs and it's got three arguments here and basically the the square brackets are a list and then the the parentheses are a tuple it's like two pieces of information so basically what we're saying here is we have no selected tabs to the left of the selected tab selected tab goes in the middle and then we have a list of additional tabs there are no selected tab unselected tabs after it so what I did was I added an unselected tab after it so my articles are selected and then we have an unselected one after it and that was where we got our first error and squiggly underlined indicating hey this is not a thing you have not actually created that yet and specifically it's a naming error I cannot find a favorited articles constructor and it underlined it as well in the CLI but you know the editor is a little bit nicer and so now we know from this error hey you know what our next step is uh we need to actually define this thing we need to create a thing so that we're not gonna get this error so the next thing we did is I did Oh definition is that okay I wanted to find a new type of feed tab so we have one called my articles I'm gonna make a new one called favorited articles and as soon as I did that I said hey missing patterns this case does not have branches for all possibilities so we had a case in which I was using my articles and it's saying okay anytime you have a case a case is a form of conditional and whenever you're doing a case on one of these things these custom types it makes makes you sort of not forget to handle all the different possibilities so because we introduced a new possibility in addition to my articles we said yeah now there's a new thing called feed articles it says okay this I'm glad that you introduced that but over here I have this conditional that only has some of the possibilities specified you need to specify all of them you need to tell me what to do if I get one of those values in here okay yeah fair enough then it also tells me oh by the way the missing possibilities include favorited articles that's the one that I'm missing like okay cool and it's six really goes on to explain I would have to crash if I saw one of those because I don't know how to handle it as we'll see later elms really big on not crashing this is okay so like just add some branches for them so this is my compiler error and I'm like okay what's my next step oh yeah I'd branch this fit so sure enough that's the next thing I did said okay and add a favorite articles branch to this case and that looks like this I previously mentioned I happen to know that this is the one that works on the end point so it's not just you know mechanical just do exactly what the compiler says I do have to still have some knowledge of the system but when I was on this plane flight I mean I did know I have knowledge of the system so I knew what to do in this case which is to say okay I've specified the HTTP request that this feed is going to use when it's loading the data in the first case it's like oh go get the author endpoint and here I'm like okay I need to get the the favourited endpoint instead now this is logic that I was not allowed to forget to implement I still have to know how to implement it but the important part was that the compiler said yeah you need to put some logic here I don't know what it is but I know that there's some logic that goes here there was no way I could forget to add that and this is the only difference between the two finally we had the last missing patterns error and you know at this point you can sort of see a little bit get a little bit of a taste of like the pattern of doing elm development once you see enough of these errors they sort of start to break down to the pattern so like I kind of know the shape of a missing error like okay I see missing pattern so I know that means I forgot to add something somewhere I'm gonna jump down to the yellow highlighted thing can be like okay that's the thing that I need to add and then I just know that like the the remedy here is I need to add branches so I get pretty fast at these things so the way that I did that in this case I said okay I need to add a branch of favorite articles also to the view tabs function so this is the part where it's actually showing which one's selected and which ones not and initially we did this using code duplication just copy pasted it and and just rearrange them just shuffle them around because I wanted the favorited articles wanted to be selected and this of course is some code duplication so the way we could resolve this is to extract those two common pieces of logic out into top level values and name them so here's what that looks like so I basically say okay my articles is gonna be the one that has the string my articles and then here's what it does when you click on it here's favorited articles which has a different string and does that when you click on it and now we can see a little bit more easily how these sort of correspond to what ended up actually happening in the UI so we had my articles on the Left favorited articles on the right that's true in both of these you notice that in both function calls we have my articles coming first and favorite articles coming after it the only difference is in how they're arranged so in this one we said there's nothing to the left of my articles that's unselected and the unselected stuff to the right of it is favorited articles with the middle one being selected and then here we just had the same number of arguments but they're in a different order so my articles is unselected favorite articles is selected and there's nothing unselected after it okay so for our flight lands I've just done the same kind of stuff that we did there open the browser and it all worked awesome okay so not every feature gets this much help to be fair I mean like this was a pretty straightforward feature to implement I could just make one change they pretend that this thing exists and then just follow all the implications such that it would it would go through and it would all work not every feature gets quite that much help granted but surprisingly many of them actually do it's actually a very common experience to get that much help that sort of level of compilers support for what you're working on and the reason for this is that modifying existing code like we did here is like pretty much the type of stuff that we do all the time this is what I did on the flight and this is what I do at work it's what we spend most of our careers doing this stuff modifying existing code I know that like most tutorials are usually like hey let's build this thing from scratch but that's really like not the type of programming we typically do and part of the my motivation for giving this talk is because if you're doing an LM tutorial and you're you're you know working on it from scratch it's kind of hard to see that like you can't really see the benefit of like what happens when you have a more substantial codebase to the point where I had a co-worker who you know his first experience using Elm was on our like quarter million lines of elm that we have at work and then he went to a meet-up later and he was like teaching some new people Elm and he was like it's really hard to explain how awesome this is at work like from this tutorial it's just this it's not there like the stuff that's cool about this isn't visible at small-scale I was like yeah that's a good point so here we are but adding features you know refactoring fixing bugs to an existing code base that's that's pretty much most of what it means to be a career programmer so at no red ink the sort of our journey to get to where we have gotten we started off back in 2015 we had a pretty substantial react codebase and we introduced a little bit of elm and then you know it sort of grew 2016 like a sort of overtook react in our code base and then it got bigger and now we're basically we're an elm shop I mean to do front-end programming at no red ink means you're you're basically writing Elm all day by the way that sounds cool we're hiring and so so an interesting thing that we've noticed is that our elm code doesn't really do a certain thing that we got very used to in JavaScript and so just give you a little bit of context we have about five billion questions answered we make an application for English teachers to help them teach students writing we got about a quarter million lines of elam code at this point we've been running in production since 2015 about three and a half years and we use rollbar to track errors like our runtime exception so whenever something crashes in the front end we get a roll bar notification about it so this gives us a lot of insight into you know where the sources of our crashes are so here's a graph of our total production runtime exception so we had about 60,000 in JavaScript since 2015 now I apologize I didn't have enough screen real estate here it's not actually zero on the Elm side of zero pixels it did happen we we did something really and it happened and we were very sad has happened last year before I used to get to say we had zero runtime exceptions although weirdly people didn't believe me Ellen people were like oh yeah of course but then everybody else is like now you're logging set up wrong but now that happened people like whoa you've only had like that like it's almost never happened that's incredible yeah for real I mean that's like it's not it hasn't been literally zero but I mean it's not something we think about anymore we just kind of assumed that our front end code will never crash and that assumption never burns us and I've never had that anywhere I've ever worked I mean I've been doing this for quite a while that's never been true in any programming language I've ever used in any environment all right I mean it's it's uh it's unusual and so you might say like okay well what about like null pointer exceptions like surely at least you get NPEs right that's like part of programming you can't not get NPS but I mean as you saw we saw some examples in this live coding of like cases of the compiler just makes it impossible for me to forget things right the missing patterns error like that that was basically saying hey you defined a new thing you need to handle that everywhere it wouldn't let me forget that and so here's an example of how Elm sort of handles like null pointer errors and and makes them impossible for me to forget handling them so if I wrote this code in JavaScript I wrote like an array with 1 2 & 3 and I said bracket 0 it's gonna say okay yeah sure hey go that's gonna give you back the number 1 and if I did an empty array and said bracket 0 it's gonna give me back undefined or if I were in Ruby would give me back nil various languages do this in different ways but pretty much all of them either give me back some sort of equivalent of null or like in Python and give me a runtime exception now what Elm does is a little bit different so LM uses that same case expression which we saw earlier is subject to missing patterns and in elm you say case list dot head and then the name of your list of and then you have two branches nothing or just and as we saw if you leave off either of those branches it's not gonna compile it's gonna say missing patterns hey you forgot one of those two possibilities and this is just how you do these things in elm like anytime you have something that's done with null or nil or undefined in some other language Elmas gonna do it with these types of patterns as we saw not possible to forget that so how would you possibly get to a crashing case here you just can't it wouldn't compile and this is sort of the the key here this is how Elm gets away with not having null or undefined or nil it just has different constructs and as it happens in a very happy coincidence those different constructs don't lead to runtime crashes they just bleed to compile time errors at worst and LM api's are all like this the whole programming language there is no null there's no undefined in the language it's this all the way down the core libraries and everything that's built on top of them is like this so this is sort of how Elm gets away with saying hey we don't have runtime exceptions because there's really not a thing there's no try-catch and elm because what would you even do with that you know I mean it's it's it's like yes it's conceivably possible you can still get a stack overflow you can run out of memory I mean there are some cases where you know a crash is possible but they're so rare they're just like not even worth talking about and they're just not something that Ellen programmers do talk about so this gets to this idea of like what if your compiler we're not just like something that sort of were a gatekeeper what if it was actually an assistant like what if it was actually assisting you in writing code and helping you say like hey you forgot this you forgot this you forgot that and not just saying no you're wrong try again I think as we saw in the live coding demo I was getting a lot more help than that it wasn't just me saying oh wait a minute all right what did I do wrong it was like telling me the next step to go to every step of the way it was like hey here's what to do next here's what to do next assistant so another example of this is like when you make typos like you make a mistake like it said hey model does not have a field named profile it's not just gonna say like so figure that out it's gonna say like hey the type of model is this so you can go look up your type definition of model and it says that doesn't have a field named profile maybe you made a typo and in fact they're in your type definition it's like oh profile oh I see what happened right it's telling me as much context as it can possibly give me about this thing and this is something elms known for us like really helpful compiler errors that are not just like well formatted they're not just you know giving you the bare minimum of information they're like trying to actually assist you I'm particularly fond of this one it's like a little ASCII art if you have circular dependencies it's like hey you may need to remove some of these things remove them around because right now this depends on this which depends this which depends on this and that forms a cycle it's not gonna work out for you this one I should have taken a proper screenshot of this but unfortunately I just reused it from the tweet that I saw which was arguably not the best choice but basically says this type alias is recursive forming an infinite type so a type alias is basically a way of saying I want to just give a name to this type that I've already got does what I expand a recursive type alias it just keeps getting bigger and bigger so d aliasing results in an infinitely large type try this instead and it actually gives you like hey here's some code that will actually compile says this is kind of a subtle distinction I suggested the naive fix but you can often do something a bit nicer so I'd recommend reading more at this link this is like a thing like the home compiler kind of has a personality a helpful personality and the tweet that I copied this from is that should be an inspiration for every error message and this was said by a fellow you may know named John Carmack who's seen quite a few error messages in his time so really at the end of the day like the fundamental thing that Elm is sort of all about here is guarantees about you know what what your program can do like the compiler checks everything it's not just that it's like oh well you owe this and this thing checked out and we haven't any type here that's just sort of an escape hatch doesn't really have that it just yes it's gonna check absolutely everything there's also no mutations this is another thing that makes it sort of easier to enforce these guarantees Elm is designed everything is immutable our whole quarter million lines of code base there's not a single mutation in there you just can't do it Alan doesn't have syntax for mutations also there's no side effects elmo's also full of pure functions it's every Ellen you write has to be pure and again the compiler and the the library design just guarantees that it's pretty sweet you might be wondering okay but how do you possibly build user interfaces in that way like no side effects how do you do stuff without side effects no mutation how do you change state without mutation and the answer is this thing called the Elm architecture so Elm architecture basically begins with a view function it's gonna give you a quick like 101 of how that works and a view function is you give it some arguments and it returns some virtual Dom so a virtual DOM is basically a description of how you want the Dom which is to say that the webpage to look so give it some arguments and it says I'm just going to return how I want the page to look so the Elm architecture is basically taking all of these ingredients on three ingredients and sending them to the L runtime which is basically what the LM compiler spits out on the other side and sort of uses to process all this stuff and make your application work so you start with this thing called the model and the model is basically a description of your entire application state it's one immutable value that represents every single thing that's going on in your application and you pass that or rather the L runtime passes that to your view function so it receives the model and then returns some virtual Dom because that's its whole job so it's a pure function that takes model and returns virtual Dom and then basically the runtime then says okay when I get some user interactions I'm going to send messages to a function called update those messages by the way we just created a couple of those in our favorited articles example the messages are again just immutable values we define them using type we get missing patterns if we don't handle all of them those get sent sorry update gets passed the model the current model as well as that message and then it looks at that and says okay what am I gonna do with this message and the message will say something like oh the user clicked on the favorited articles tab or the user clicked on this button or that button or something else happened it says okay based on that I'm gonna return a new model that's a new description of our application state that gets passed the view view creates a new virtual DOM and then the whole cycle begins all over again so again this is a very 101 kind of like high-level overview I encourage you to take a deeper look at it but fundamentally this is all there is to setting up interactive applications in Elm and our whole code base is built on this whole thing one of the cool things about that message is that it's a it's subject to these same sort of making things impossible to forget pattern matching rules that we saw in the live coding so if I have like click dismiss arrows clicked follow clicked unfollow click tab feed page all those different things I can't forget to handle any of those interactions if I introduce a new one of these and I render it on the page I cannot forget to wire it up to my logic that won't compile if I forget likewise I also can't put it in there and then make it so I've just defined some logic here without defining what shape it has can't do that either so basically it's like this is a complete list of possible user actions and I know that it's complete because any other user action I could define would require adding something to this list sort of a nice hidden benefit to this of one of my co-workers commented on is when you come into a new Elm codebase you're looking at a new page you're like okay what what can the user do on this page you just like oh that's that's what they can do that's right there it's just this one nice list there's a nice little side effect of the way things are organized in Elm L also has its own ecosystem so there's no chance that we would have this much like running in production without crashing if we were doing tons of stuff with JavaScript libraries but we're not because Elm has its own package ecosystem everything in the Elm pocket ecosystem is built on top of these set of primitives with all of these guarantees it all works that way so it's got its own separate package manager everything installs very quickly everything compiles very quickly all of the things on the package manager if you want to publish it it has to have already compiled that's a successfully compile it also just make sure that everything in the ecosystem maintains all of these Elm guarantees like Elm can do Interop with JavaScript but it's in this very restricted way and packages are not allowed to do it so your application can interrupt with any third-party JavaScript libraries you want but the whole elm package ecosystem is all Elm code and finally semantic versioning is actually enforced so what that means is if I publish a library as version 1.2 and then I'm like okay I'm gonna like delete a function and like publish that as 1.1 it's like no you deleted something that's a breaking change you have to bump the major version number and that's enforced across every single package in the entire ecosystem like they cannot publish without bumping the major version number if you make a breaking change it's really really nice makes things a lot easier to upgrade we also saw these like super fast builds again that's something that just really really never gets old and the last thing that's kind of cool about this is that it turns out the overhead on this is like negative like you would think okay we're doing all this extra stuff for like compiling to JavaScript we got this runtime so surely we would end up with like bigger applications but actually it's the opposite so this is the different real world applications like the BJS one the angular react one in the Elm one they're all the same spec they're all this doing the same front-end they have the same logic same Styles same back-end the only difference is what front-end technology was used to build them and it turns out that the compiled asset size which is something relevant if you've got users on mobile and your care about the initial page time the Elm one is just like by far the smallest so it turns out that just because it's this totally different paradigm you're able to express things differently and also a lot of optimizations that the compiler does that are not necessarily safe to do when you don't have pure functions everywhere and things like that these have some really really practical benefits it's not just like oh well this is an ergonomics thing only it's like no it's organ onyx and performance so tiny asset bundles are like another thing that people like about Elm oh it's just fun I guess this I love programming l-like there's a lot of joy the Elm community is around like just bang and stuff out and making stuff work it's just like it's sort of a cheerful like happy group of people throw some resources if you're interested in learning more about Elm I always recommend starting with the official guide this is just on the Elm website if you go to Elm Lang org and walk through the guide it's really well-written it's really complete it's really nice there's also the Elm slack I always recommend people go here especially the beginners channel which is like the default channel you start in the people there are just like unbelievably helpful to the point where I'm like I I just don't even know what to say about how they spend their time because most of what they seem to do is just helping people out on this slack and well I just think we're incredibly lucky to have them in our community because they're they're so unbelievably helpful last of all I have to mention that I'm a the course on front-end masters if you're a front-end masters subscriber also element action I'm writing a book for Manning it's an early access so if you want you can read the first seven chapters which are out right now planning to target ten chapters or depending on when you're hearing this if you're watching it at home maybe it's already out so have a look at that too there's also the Elm town podcast which has lots of like nice interviews it's a kind of a cool way to to keep up with what's going on in the community that's the URL for it and finally meet ups there's meetups all over the world like I said Elm programmers tend to be a pretty friendly Bunch pretty welcoming beginners that's sort of a cultural community value so I would encourage you to take a look in your nearby area and see if there's a meet-up okay so to sum up we talked about front-end code bases are growing this is a trend that's shows no sign of reversing it's just over time they've gotten more and more complex in some cases to the point where with event sourcing they're the entirety of your logic they're just getting bigger and bigger more business logic less as a percentage layout and visual stuff certainly more complexity we need more and more tools to manage this complexity and just more and more code to write so how we spend our time is sort of evolving as front-end developers this is this is sort of inevitable and it's it's making things sort of get harder and I would say that new tools ought to challenge our assumptions about like what it means to be a front-end developer and like how we spend our time as a front-end developer and what percentage of our time even should be spent in the browser even though that's the medium that we're targeting so yeah I mean productivity and flow State why shouldn't they be different now that we have different requirements and doing the job is fundamentally different than it used to be so with the help of modern tools like Elam it's entirely possible we could even be building you eyes faster in the dark thanks very much so we have some time for questions but I'll let but don't wanna keep everybody captive so I will just do those offstage so just if you'd like to have asked a question just stop on by thanks very much

Channel: Coding Tech

Views: 30,385

Keywords: elm, front-end development, ui development, web design, web development

Id: sKxEwjKQ5zg

Length: 36min 48sec (2208 seconds)

Published: Sat Jun 15 2019