49: Learning Elm For Better JavaScript with Jamison Dance

Link:

Tags:

podcast

Ember

Show Notes:

00:58 - The Elm Programming Language
01:36 - Who should try Elm? What is the attraction?
03:09 - Scaling an App Across a Team; Conventions
06:19 - Routing
07:48 - Writing Tests
09:38 - Jumping Into Elm from a Component-based Framework
12:20 - Tooling
17:28 - Productivity
19:21 - The Elm Community
25:13 - Could Elm Replace JavaScript?
28:28 - Lessons Learned from Elm to Write Better JavaScript
33:45 - The Elm Syntax
35:49 - Checking Out New Languages and Communities
37:31 - Data Modeling

Resources:

Transcript:

ALEX: Hey, everybody. Welcome to The Frontside Podcast Episode 49. I am your host, Alex Ford, developer at The Frontside. With me as well is Chris Freeman. Chris, do you want to introduce yourself?

CHRIS: Hi, everybody. I'm Chris. I'm also a developer at The Frontside.

ALEX: We have a really special guest for today. I'm really excited. Jamison Dance is with us.

JAMISON: Hello.

ALEX: Jamison runs Fivestack Software Consulting Company, hosts Soft Skills Engineering Podcast, organizes React Rally Conf, and spells 'array.length' incorrectly sometimes. Is this true?

JAMISON: It is true, yeah. I think I have a special ESLint plugin to yell at me now when I do that or something. But that has caused some pain in my life.

CHRIS: Oh, that was very brave. Thank you.

ALEX: We're going to be talking Elm today and writing better JavaScript with Elm. This is really exciting for me. I've gotten the chance to dive into the Elm tutorial a little bit, which is an absolutely beautiful tutorial if you haven't checked it out yet.

JAMISON: Yeah, Elm is a programming language that runs in the browser and compiles down to JavaScript. It's a pure statically-typed programming language, which if that doesn't mean anything to you, don't worry. The take away for you is that Elm tries really hard to make it easy to write programs that don't crash and are easier to refactor and easier to work on and maintain, basically.

CHRIS: And Elm is a language in of itself but it is pretty specifically intended for front-end development. Is that correct?

JAMISON: Right now, there are some long term plans, but yeah. For now, it's front-end for building UIs and applications in the browser.

ALEX: I heard about Elm. When should I check it out? Who do you see jumping into this language?

JAMISON: I think it's aimed at people that want to build robust applications which is so vague, it sounds meaningless. Maybe I talk about what attracted me to it. The two things where I was interested in functional programming -- that's kind of like the technical language wonk, like geeky side of it. But the other side is I've worked for a while in some fairly large JavaScript applications and I've seen the nightmares that I can create for myself In just building something that works and is just really hard to work on.

So the idea of a language that's focused on keeping your productivity high as the application skills and as the team skills was really attractive to me. Like the bio says, if I spell array.length wrong, sometimes I catch it, sometimes I don't, then my program breaks. Elm has a compiler that runs on all your code and basically, make sure that your code cannot crash. You could still have bugs and you can still just make your code do the wrong thing but it helps eliminate whole categories of errors. It just makes them impossible to create in Elm.

If you're interested in functional programming or if you're interested in just building stuff that is easy to work with, like this kind of this curve of productivity over time where some environments and some languages start out really high, it's really easy to build something fast at the beginning and then maintaining it is just really hard so the productivity drops over time. Elm is trying to kind of flatten that out so your productivity stays high throughout the lifetime of your application.

CHRIS: I actually have a question about that. I'm planning on bringing this up later but you gave me such a good segue that I feel compelled. You mentioned that one of the things that is nice about Elm-type system is that it helps scale an app, especially when it comes to a team. My experience there are kind of true different facets to what scaling an app across a team looks like.

One is the categories of bugs that something like [inaudible] compiler helps you catch. But the other is, and this is totally coming from the fact that I use Ember every single day, that conventions also help scale across a team. I'm curious like what I've looked at with Elm, it looks like they definitely have the type system there and error messages there to help quite a bit. But I haven't seen conventions arising yet in terms of a lot of things, about how you build a front-end application.

I'm curious, is it that those conventions are there and just haven't found them yet or they're still very much in development? Or is that not even really a goal for Elm in the same way that it might be nothing like Ember or Angular.

JAMISON: You mentioned first the kinds of bugs that the compiler will help you catch. I want to talk about that really quickly. If people aren't familiar with what a compiler or type system will do at build time, it checks all of your code to make sure that all of the variables and inputs and outputs from functions match up.

So you say this function takes in an 'int' and returns a string and it will go find everywhere that calls that function and make sure that they're always passing in an 'int' and return it, so that it always return a string. It kind of does that throughout the whole flow of the program. It eliminates those kind of areas where you just get the interface wrong.

The program is huge. You don't remember all the inputs to a function so you just like passing an object when it expects a string or something and then later on it will explode. You don't get those errors with Elm which is the first kind of thing you're talking about.

You mentioned that conventions and I'm not on the Elm core team or whatever. I don't have any special insight but my experience is Elm very much wants to create strong conventions around how you build applications. The Elm architecture is kind of a way to build front-end applications that is basically baked into the language. There isn't like a UI framework for Elm. It is Elm. That to me is a huge point on the strong convention side. There isn't like an Elm fatigue because there isn't a choice between a hundred different UI frameworks in Elm.

Some patterns around how you build apps this small, I think are still being established but I think there are strong conventions already and the trend of the Elm community is towards picking strong conventions. You’ll see Evan, the creator of the language, He'll talk about how he wants to have one really good library instead of 15 overlapping libraries of varying quality to solve the same problem.

Elm has conventions already. The places where it doesn't have strong conventions are I think places that will get filled in but the goal is to pick up the language and you get everything you need to build an application attached to it that's all kind of figured out for you.

CHRIS: It's been interesting you mentioned the thing about it's better to have one good library, rather than 15 libraries of varying quality. I've seen that a little bit in practice. One of the things that I started looking for pretty early on when I was messing with Elm was what client-side routing look like. There are a couple of different routing libraries. But if you look at them, you can see that they're actually kind of this progression, like you can see how they have built on each other and they're kind of like building up the stack of abstractions toward one final solution.

It’s very interesting because it's not like those other libraries that are still there. If you really wanted to use just a regular URL parser and build your own, you could. But you can also see this development towards something that anyone could take off the shelf and start using.

JAMISON: Yeah, and Elm has been around, I think it was 2011 when it first started. But really, Elm as like a popular thing that people hear about and use in production is only a couple of year’s old maybe. There are still some things that are evolving like that. I think you're right that they're evolving towards convention instead of, in my mind JavaScript values, the proliferation of tons of different ideas and just wild exploration. Elm seems like it values a little more consensus and aligning the community behind one solution. I think it's happening, if it's not there yet, it'll get there, I guess.

ALEX: I have a question about writing test in Elm and how that feels different than writing tests in JavaScript because the way I find myself writing tests right now is I understand the language to be fragile and I understand some frameworks have some fragility because of that language so I find myself writing really strong tests that are easy to break. I imagine that maybe in Elm, that's a little bit different with this very strong convention that you're talking about.

JAMISON: Yes, some of it is around not having to be as defensive in your testing. If you wanted to get really, really down in the nitty-gritty in JavaScript, there are just an incredible array of different inputs you would have to test to make sure someone doesn't pass in like [inaudible] to this function where you think it's an array or whatever, like you just don't have to write any of those tests because the compiler catches that.

We haven't talked about purity at all and this concept in functional programming where your functions can't cause side effects. They can't just go make a network request or write to disc or console.log like right in the middle. The functions take an input and return an output. You can do that in JavaScript. You can write your functions that way but because that feature is built into the language, it's the only way to write functions in Elm which makes it really easy to test functions because you just pass them stuff and you check what they return.

In my experience, that makes them easier to test. You still build UIs and you still make network requests so you still construct some HTML at some point in your program. You can if you want to test that the HTML looks right or that elements have certain classes and stuff. But I guess what I'm saying is the tests feel like they're testing the behavior more than the edge cases when I write tests in them just because the compiler eliminates a bunch of weird edge cases you don't have to worry about.

ALEX: Coming from a component-based JavaScript framework, what is going to be my experience jumping into Elm? How is that going to feel different for me?

JAMISON: That's a great question. Myself and almost everyone I've seen get started in Elm that comes from something based around components that the instinct is to create components in Elm for everything. You have a select box in Ember or React or whatever and you wrap it in components. You can just reuse it everywhere.

In Elm, if you try to do that, you will hate it and think Elm is broken and horrible and just sucks. It’s because the Elm architecture comes with, I guess, you could call it boilerplate, there's some work you have to do to build a component that can do IO and respond to events and stuff. That work is... I don't know, maybe like a dozen lines of code.

Then there's some work to wire those components up together, that's maybe a couple more lines of code. So if you have like 300 components in your Elm application, you'll have... I don't know, like thousands of lines that just wiring stuff together code which won't really buy you that much because in my experience, using components is an attempt to make things understandable and isolate concerns. You get a lot of that from having peer functions and having a strong a static-type system.

In Elm, you end up making a lot wider components, instead of having this deep tree of lots of components nested inside of each other. You'll have a much flatter but wider tree. That took a while to get used to but I think it makes sense for the language now. You can still create reusable things but you focus more on creating reusable functions instead of creating components that are black boxes, that you kind of package up and pass around. You can still do reuse but it's a little bit different than reuse in a component-based framework.

This is a thing. I would say, in the last year, there's been a lot more discussion on blogposts and screencasts and stuff on a year ago, a couple of people were talking about it but there weren't really lots of great examples of this and now, I think, even the Elm Guide has some examples of reuse without components.

ALEX: Yes. One of my favorite things about component-based JavaScript is because I've learned to test them so well. Even though, sometimes they can turn into a configuration ball, I've been able to make them very reliable, even if they are deeply nested so going away from that scares me.

JAMISON: Yeah, it totally scared me. It felt wrong and weird and bad. But now, it doesn't. I don't know, I'm used to it, I guess, and I still write a lot of JavaScript. It’s not that hard switching back and forth between those two mental models but I definitely had to develop a different mental model when writing Elm code.

CHRIS: I'm interested in talking about some of the tooling. I know Elm has a lot of tooling. They have elm-reactor and they have the compiler. But I think I know that you also do the kind of dip into some of the JavaScript tooling if you are getting into bigger Elm application. You're probably still going to need something like a Webpack or Browserify, I guess. I'm curious what's your experience with that has been?

JAMISON: You can definitely just write an Elm application and then compile it into this JavaScript file then drop that in a script tag on your page and it will all work. The complexity can get very low. If you want to do more advanced stuff like talking to JavaScript, You can still do all that without any additional tooling, if you would like.

If you have a lot of dependencies in your JavaScript or you have a large JavaScript application or code base that you want to integrate with Elm, then you can use something like Webpack or Browserify. In my experience, it's no more painful than Webpack or Browserify. All the rest of that stuff already is. I don't know, there's an Elm Webpack plugin that will run the Elm compiler and allow you to import your Elm application into JavaScript file and I think there are similar stuff for Browserify and some of the other module bundlers.

I don't think there's anything radically new on the Elm side as far as bundling up your application or anything like that. It just kind of works like you expect. The places where, I think Elm tooling is cool in ways that I haven't seen that much in JavaScript are in the Elm package manager. If you are building a package yourself, it has automatic semantic versioning built in so they have a type system. They can detect when your interfaces change automatically. If you try and release a version that you change the interface and you don't bump the version, they will like yell at you because that's a breaking change. There’s some cool stuff around that that you get with the language having a static-type system.

The debugger is a new thing as of a couple of weeks ago. That's built into the language. You might have seen similar stuff in other frameworks but it's all kind of extra add-ons. In Elm, because it has kind of a framework built into the language, they can also build in a debugger for that framework in the language. You can enable debug mode, pull up an application, click around, do a bunch of stuff, and then it'll record a log of all those actions and you can scroll back through them and jump to any point in that timeline to reload the state of the application to that point. You can export that log to a JSON file and then kind of send that around, have someone load that log in, and it'll get your application back into the same state. It’s a really good for creating bug reports.

You click some button 15 times and then it breaks -- do that, export the logs, send that to someone else. Instead of having to follow all the steps, they can just load your state and then figure out what's broken about that.

I think that there are some tooling advances that are enabled by both the language itself, like the static type system and also the focus on strong conventions and frameworks built into the language. Does that makes sense?

CHRIS: Yeah, absolutely. As you were talking, I thought about was that some tooling that you lean a lot on in JavaScript is kind of rendered unnecessary by the error messages in Elm. All of the things that you may bring in an extra tool to catch in JavaScript when in Elm will just tell you when it compiles and it will give you this just unbelievably friendly, informative, and easy to diagnosed error message that tells you like, "This is the exact line where this happened. Maybe you mean to do this instead," because it can make all sorts of inferences about, like what you probably meant to do based on the type signature you gave to a function or something. I could see that going a long way toward making a subset of tools just unnecessary in Elm.

JAMISON: Yeah, a lot of tooling around JavaScript has sprung up to address... I don't know, not weaknesses but areas where people have identified JavaScript needs a little help now. If that's passive aggressive enough way to say it. The language is 20 years old. It was created way before people were building giant, million line code bases in it. But Elm is much younger and has the benefit of a lot of history and hindsight. It turns out you can avoid a lot of tools if you eliminate their need.

I have had that weird feeling where I'm building a JavaScript project and it feels like I'm flying a 747. There's a thousand switches everywhere. I'm like powering up a bunch of different things. It feels like I'm being really productive because I'm configuring ESLint in Webpack, in Flow, and all these different tools. Then I go to Elm and I just start typing and it feels like I'm less productive but I've just skipped so many steps. It is a different feeling.

ALEX: Would you say that maybe you feel so productive in JavaScript because it has such a strong community, with so many examples and so much shared code? Elm being a younger community, and this is strictly an assumption, may not be at that maturity level where you can share code and have that particular level of productivity.

JAMISON: Yes. There are definitely third party libraries in Elm. There’s probably a few orders of magnitude difference in the community sizes between Elm and JavaScript. There are just way more people writing JavaScript. The likelihood that someone will have ended up at your weird feature that you need for some random program is probably a little higher. There are some numbers differences.

In my experience, the people that are really into Elm right now enjoy solving their own problems because it does feel like they're a little bit more of your own problems to solve. It’s a tradeoff. I was going to say, if you value 100% focus on building business features, JavaScript might be better but I don't necessarily think that's the case. Using a bunch of third party code comes with a cost and some of that cost is you have to understand the API and some of it is you have to kind of take some responsibility for knowing where it breaks down.

In Elm, I think that responsibility is lessened by the language because the API is a lot easier to understand when you can look at the types that the API creates and uses. It’s a lot harder for it to just break your stuff. I think you could make the argument that even though there's a giant repository of JavaScript code out there, a lot of it might not be great for your program. But if you're using Elm, the smaller amount of code that is out there already could be easier to use and help you even more productive.

ALEX: I would like to try to segue into the Elm community now and what that looks like? What is this Elm community? How do you get involved, say, I'm coming from JavaScript or any language and I love it? Maybe my work doesn't use Elm just yet but how can I contribute? How can I continue to write more Elm code for not just my specific use cases?

JAMISON: I think my favorite thing about the Elm community is its focus on friendliness and learnability. I call it 'ruthless focus'. They are aggressively committed to building a language that is easy for people to pick up. If you are coming to Elm for the first time, you're pulling your hair out because it looks totally different from JavaScript. That might not make any sense to you.

But a lot of the ideas that Elm has come from other languages like Haskell or ML languages and those languages, I would say, are proudly hard to get into. It’s like a badge of honor to learn Haskell and then you like bleed to do it and then you enter this elite club where you got to talk about monoids all day.

Elm is like a strong negative reaction against that, like they want this to be a language that people can learn and get some of the benefit. Because there are cool things in languages like Haskell so the goal is to take some of those cool things and other cool things from other places too. But put them in a package that is easy for people to pick up without devoting their life to an arcane branch of mathematics.

I think they do a really good job of that. I've done Haskell pretty hard a few times and I'll bounce off it some more. I don't feel confused about Elm at all in anyway. In Elm, it's not like I'm some genius that can pick it up. It's that they have eliminated a lot of complexity and made it friendly and easy to learn.

I think that carries over into the community. They’re really interested in helping people who are new to functional programming or are new to programming in general. They’re also just nice. if there's an Elm Slack channel that you hang out in and like any internet chat channel, sometimes people will get a little testy and in the Elm one, they're so good at defusing situations, calming people down, like apologizing, and like being human beings. You don't see a lot of rage-y arguments where people say mean things about each other. I've been really impressed with that.

I want to talk a little bit more about what the community is like and then maybe talk about how to get into it, if that's okay. I would say the community is -- I know, it's evenly split but it seems fairly evenly split between people coming from JavaScript’s who don't have any functional programming experience and people coming from functional programming who don't have any UI experience. It’s interesting seeing those two very different groups come together and they're both attracted to Elm for different reasons and they kind of pull it a little bit in different ways. But it makes an interesting group of people to be around because you learn a lot of cool UI stuff, a lot of cool functional programming stuff.

ALEX: Sounds like a recipe for success, really.

JAMISON: Yeah. I think if they can make functional programming not have the snootiness that it has sometimes in genders and people, then I think functional programming is great technically. I think the culture around it can be just obnoxious. So I think if Elm can take the good things without the bad things, that’s amazing and that's kind of what it's trying to do.

As far as getting into the Elm community, are you talking about writing open source or contributing to open source or just where they hang out?

ALEX: Yeah, I was talking about contributing to open source but maybe Elm is just a better community for a certain style of contribution and maybe that looks like a blogpost and a coding example of how to do something yourself.

JAMISON: Like any new technology, there are definitely in the kind of evangelism phase. If you do write a blogpost that says nice things about Elm, there's like a horde of people that will swarm all over it because they like people to say nice things about Elm. There’s a bunch of people like writing books, doing screencast, speaking on it, introducing people to it, and that's well received very well. I think there's at least one podcast on Elm already.

So all that to say that I think the community receives kind of education and I guess, you can call it evangelism stuff very well and they're excited about that. If you are interested in contributing to open source, you can actually go to Package.Elm-Lang.org and you can see all of the Elm third party libraries and they all have these GitHub for the backing of its package manager. They all have source links right there. You can just find any random library and get to its source.

I think the community is pretty open to contributions from people. If you want to see Elm source code and contribute to it, they’re very open to that. This is kind of a culture shock to me coming from other communities where you can't just like show up, submit a patch to Elm core, and then have a discussion, and get it accepted or rejected. They’re not super open to direct code level contributions. They would prefer more use case feedback, discussion, and suggestions. Then the core team will take all these feedback in, think about it, come up with a plan, and then implement it, instead of take a lot of little patches from people.

Some of the core libraries are a little bit harder to directly contribute code to but they are very open. If you try and use it, you run into something that doesn't work the way you expected and you can create a small example that demonstrates that. They’re super open to discussions about that to influence the direction of the API.

CHRIS: I think over the course of JavaScript and front-end development, there has been kind of waves of abstraction over JavaScript. There were just libraries and there were things like backbone and then it kind of moved into doing something like CoffeeScript or TypeScript and a couple others where the idea is --

ALEX: Good old Objective-J.

CHRIS: Yeah, exactly. You might be transpiling down a JavaScript but there are still very much a clear link between something like CoffeeScript and JavaScript. Elm seems like it is one of a new batch of approaches where we're actually going to just sidestep JavaScript almost entirely. Like it is going to be like JVM bytecode or a browser and we're going to build an entirely new language on top of that.

I know there's also a bit like ClojureScript, Scala.js, and PureScript and I'm curious, do you think that is going to be a continuing trend that front-end development is going to land on a mainstream solution that might not actually be JavaScript at all? Or do you see it as eventually circling back and pulling a lot of these features into JavaScript itself?

JAMISON: I don't think that front-end development will be Elm in like five years or whatever. I don't think it's going to replace JavaScript at all. I think it might definitely influence tooling libraries or the language itself. The Elm architecture looks a lot like Redux because the Redux author read Elm and they're like, that's cool and then they wrote it in JavaScript.

There are other places where like time-travelling debugging. I believe the JavaScript thing came from the Elm time-travelling debugger as well. There are cases where it has influenced JavaScript’s already and I think that will continue to happen. Flow is a gradual-type system. You can lay it on top of JavaScript and they have done a lot of work on their error messages influenced by Elm. It’s super cool to see all those influences back into the JavaScript community as a whole.

I think there are classes of people who are more interested in doing some sprinkling of JavaScript on to pages. They might not even be like programmers really. They’re kind of like designers who do a little bit of coding and I don't know if Elm makes sense for that kind of role where you just need to add a little bit of interaction. You can do that but it doesn't seem like a thing that group would focus on.

It’s just really hard to change the world. I write a lot of JavaScript so I'm bias but it feels like it's the most popular language in the world and being the most popular Language in the world is not a thing that's easily overthrown. But I think it will grow, like programming will look more like Elm does just in general in the future and I think JavaScript will as well. But I also think Elm will continue to grow. There’s a lot of excitement about it and there's not a ton of people bouncing hard off of it. There's some people they're looking at it and they're like, "Eh, not yet." Some people just look at it and hate it.

But from people that use it, I don't see a lot of those people dropping out. I've seen most of them sticking around. I think the trend is definitely -- Elm will grow. But I don't know if that will take over the world.

ALEX: Then what lessons are developers bringing back to say and to write better JavaScript?

JAMISON: I think a lot of people are learning about types and data modeling. If you learn programming through JavaScript, the idea that there's this defined shape that your data has and some tool will help you make sure that your data always looks like that is kind of like strange and foreign. I think a lot of people are learning that there's value in that.

If you grew up in the MongoDB / Angular world like everything is schema-less, you just kind of slam some JavaScript objects everywhere, it all works, then it breaks, and you don't know why and you need to track it down. But I think seeing the value and thinking a little bit more clearly about what your data looks like and then forcing that through tooling is one lesson. That is taking a little bit more root in JavaScript.

All the stuff around functional programming in JavaScript is like achieved buzzword status by now. But there is definitely still some education happening around how it's easier to test peer functions, how they're easier to understand and reuse, and how it's good to write them. I think Elm will continue to push that.

Some of it though is there are some ideas you can take from Elm but it's just so much easier to use them to their fullest potential in a language and environment built around those ideas. You can kind of like cram a type system on to JavaScript. It's still really easy to get around and it does not model side effects at all. The elm type system modeled side effects so it helps you reason about where my program can talk to a network, where it can do things that are going to take a while to come back, and kind of sandbox those things into a place where you expect them, instead of have them sprinkled all over your program.

CHRIS: I definitely feel that uncanny valley of trying to bring FP -- functional programming -- things back into JavaScript when it comes to pattern matching. That’s something that in Elm or Elixir or any number of more functional languages. Pattern matching enables a lot of these higher level patterns that don’t always translate super great back to JavaScript land.

JAMISON: Yeah, the uncanny valley is a great way to put it. There are a lot of things that you can do that will lead to better JavaScript. But you always have to take the environment that you're working in into consideration. There are just some things you can't do or some things that are going to be more pain than they're worth to do.

On the other hand, it is kind of nice to just type console.log wherever you want or type like '$.getJSON' or whatever. The added security that Elm brings comes at a cost of locking you down a little bit and that can be a little frustrating to people sometimes. But I think the payoff is worth it.

ALEX: A side story. About six months ago, I tried to get into the Haskell programming book. That’s currently being worked on. That’s because I want to learn some functional programming lessons, maybe bring them back into my JavaScript, or just learn something new. It’s useful to learn a new language and bring it back to your work.

Of this 1300 page book, I got just past Chapter 2 and I was in a Haskell book club like everybody held each other accountable to finish this book. I did not make it. I could not figure out how to bring any of these lessons back into my code which is what I wanted to do here.

Elm takes that functional programming concept and says, "We're applying it to UI right away." There's no, "How do I apply this? How do I side step this?" No, you're doing it immediately.

Really, you're getting me excited to jump back into this tutorial and learn it and check out the community, just to be able to bring this back to my day to day and bring those lessons and do it.

JAMISON: Yeah, the first time I tried to learn Haskell, I learned that I could sort an array of integers in memory and that was it. That was as far as my Haskell skills took me so I definitely feel you there. In Haskell, they'll tell you it's a research language so they have a lot of reasons why it kind of works the way it does and learning it takes the pathway it does.

Elm is definitely not a research language. It’s trying to be incredibly pragmatic so you build UIs. In the guide, that's how they teach you the language. It’s the stuff you normally build. Thank you for bringing that up. I think, it's a thing that they focus on. I'm glad you picked it out.

ALEX: Yeah, at the learning curve is the syntax but you're still solving those same problems. If you're coming from UI, you already have that context. That is probably the majority of the hard work -- it's solving problems that are meaningful to you.

JAMISON: Yeah, for me the syntax, I had learned enough Haskell that the syntax wasn't hard -- how to make HTTP requests and do site-affecting things like that. It was the hang up for me but Elm, there is a way to do it and they show you and that's how you do everything and it all works the same way and it's fairly easy to understand. I don't want to call it easy because that makes people that struggle to feel that but they put a lot of work into making that both robust so it won't break your program and also learnable.

CHRIS: One thing I would love to mention about the syntax, I have learned a number of languages, I guess and the Elm syntax was definitely one that threw me the most and it put me off for, I guess it wasn't so much just the syntax, it was the syntax combined with how people do things that I would call more like style choices.

JAMISON: The formatting?

CHRIS: Yeah, Elm formats things in weird ways. Except that there is a tool called 'elm-format'. Once I've discovered that it has a really great editor integration for a lot of editors, it effectively remove that problem because I discovered that I can essentially write garbage basically in my editor and I can say that anything will make it look beautiful. It's fantastic. It removes such a big barrier for me when I was trying to learn it.

JAMISON: Yeah, elm-format, there were some great debates about it while it was being created but now that it exists, it's awesome. Speaking a little bit more of tooling, Elm comes out with new releases of the language with some backwards and compatible changes. But along with that, they release a tool to upgrade your Elm code automatically.

It’s not perfect and it won't run on 100%. It won't fix everything but with most projects, it fixes everything. Again, the benefit of having such a strict language is there's tools that will just upgrade all your stuff for you. That’s pretty awesome. It lowers the cost of evolving the language because they can keep adding new things and changing things without just leaving the community in the dust like we've seen in some other stuff. That’s kind of an Ember-ish thing, I guess. Ember has the whole stability... What is it? Something without stagnation? Stability without stagnation?

CHRIS: Stability without stagnation.

JAMISON: Where you just get all these free upgrades that are really easy to opt into and Elm has that same philosophy.

ALEX: What made you decide to check out Elm, to check out this community? Do you like to jump into new languages, new communities, and poke around and see what sticks? Or is there something that attracted you to Elm in particular.

JAMISON: Yes to both of those. I do poke around in a lot of new languages. I have a good friend, Sean Hess who's really into functional programming and he's a Haskell true believer. I am not but he is, so he teaches me stuff by Haskell. I think, he told me about it. I might be misremembering though. It might have been just some random blogpost or podcast somebody did a few years ago. But I was already excited about new languages and functional programming and I had tried to learn Haskell and bounced off so the idea of a functional programming language that takes some good ideas from Haskell, that runs in the browser that's new. It was like all the shiny things that I look for altogether in one thing. I tried it and I liked it.

I, also was really impressed by Evan Czaplicki, He's the creator of Elm. His philosophy around creating a language and the goals he wanted to accomplish with it. There's a really good talk he gave and called 'Let's be mainstream' which talks about some of the stuff we talked about around if functional programming is pure statically-typed functional programming is so amazing and it has all these people that love it and swear it's the only way to write software, why no one does it? Why the number of people use it is so small?

His thesis is basically because the languages that do this are kind of user hostile so he's trying to make it a user friendly, the one that takes all those ideas. I just really liked that philosophy.

CHRIS: I want to go back to something that you mentioned a little bit ago and that was data modeling because that is definitely something that I noticed being extremely helpful, any time I'm using a statically-typed language. It is very much something that I brought with me back to JavaScript. But I was wondering, Maybe you could talk a little bit more in depth about what data modeling really means in terms of Elm, the type system, the record type, and that kind of stuff.

JAMISON: Yeah, if you've worked with statically-typed languages like Java or C++ or something, you might have an idea of things like classes as a way to model data where you create a class and you say it has all these fields on it. I think, in the Elm type system, I'm going to say it's a lot better than those languages because it has a lot less ceremony and it is a lot more powerful.

Elm has type inference which means you don't have to declare the type of everything. It can just figure it out from a lot of places. That’s the thing that makes your code a lot friendlier to write. To model data in Elm, there are two main ways to do that. One is with these record types that you mentioned, Chris. You basically declare an object that has a certain shape like I'll make a type called 'user' and it has a user ID and a hash password and... I don't know, a list of my favorite cats or whatever.

Then you can just refer to that user type in function arguments or in return types or anything like that. In Elm, because you created that type, it knows that these are all the fields it has. If you try to access a field that's not on there, it'll yell at you because you're doing something that won't work. Because you have to think through all of the different fields that are on your types, it forces you to do a little bit more. It's kind of like the other side of TDD instead of writing test first. You have to think about your data first. You could call it type-driven development, I guess.

CHRIS: That's awesome.

JAMISON: In my experience, that's helpful. In the same way, TDD is, right? It helps you to do a little bit of design first. Think about how you're going to interact with the program in some way. Instead of writing tests, you're thinking what data do I need here.

They also have these things that you could call them -- there are a bunch of different names for them: algebraic data types, I guess. Some people call them tagged unions. They're kind of like enums where you say this type can take any of these finite list of values. But instead of an enum being like an integer, like it is in some languages with a fancy name wrapped around it, the enum types can contain other value.

You can say... what's a good example for this? You could say a user is either an authenticated user with a user record inside it or an unauthenticated user. Then when you're using that type in your program, you check, "Is this user type the authenticated user?" Then, if so it has this user field inside of it that you can pluck out and use. Or, "Is it an unauthenticated user?"

Those two different things, the super enums, the algebraic data types plus the record types are really powerful for modeling what data looks like in the real world. I haven't run into that many issues where it's been hard to do something I want to do with just those two concepts. Type systems are hard to explain over the air but hopefully, that helped a little bit.

ALEX: I thought that was great.

CHRIS: I think a good example of the algebraic data type thing is looking at messages in Elm versus actions in Redux. If our listeners are familiar with those, they are very, very, very similar at a high level. But in Redux, you just have string then you do a switch statement or something and you match on some strings. You hope that you synced everything up correctly.

JAMISON: Yeah, you say, "This action has a message and then has a payload that looks like this." See if it match against the message and then hope that the payload somebody sent actually looks like you expect it to look.

CHRIS: Yeah, whereas in Elm, you can actually say, "My message type is a union of all of these different things," and now, Elm knows exactly what you're saying and you can't accidentally send the wrong payload to the wrong update function or something. It's one of the cases where I found that there's a very, very clear similarity in JavaScript and it highlights, I think a lot of the nice features that Elm brings to that equation.

JAMISON: Yeah and there's even more strictness around that, like you have to handle every message type in Elm. So if you say, "This function takes in a message and does something with it," and then you check against what kind of message it is, you have to check every case or Elm won't compile because they don't want you to just blindly miss something, I guess.

But in Redux, you could just happily forget a thing in your case statement and then you send a message and it doesn't do anything and then you have to kind of trace through it and debug why that's happening. There’s just more helpful stability stuff built in.

CHRIS: Cool. I am so incredibly happy with how this podcast went. I'm just excited to start coding and start getting into Elm. I think people and developers maybe at an inflection point with JavaScript and just going and checking out something else that they can immediately apply back to their day to day. I think, it's so incredibly valuable and something that I'm going to be looking to explore very certain.

JAMISON: The value pitch is pretty strong because everyone that's written JavaScript has just written code that breaks when things get passed around that they don't expect. I do that all the time and Elm makes that impossible. You can break it in other ways but you just eliminate this class of errors that plagues your existence in JavaScript. If you want to experience that life, check out Elm. It's got a lot of other good things too but just writing code that does not crashes is a pretty strong pitch, I think.

ALEX: Jamison, are there any resources that you might recommend for someone who wants to get started with Elm?

JAMISON: Somebody mentioned the guide a few times. Everyone says that about every language, check out the official tutorial or whatever, and they have wildly varying quality. The Elm guide is the thing that worked a ton on. It’s pretty good, I think and geared towards people that have no knowledge of Elm, no knowledge of functional programming stuff. That’s a Guide.Elm-lang.org.

Then there's a Slack channel. If you just go to Elm-lang.org, it will have links to the Slack channel and there are lots of helpful friendly people there. I think those are the two best resources because with those, you can find all the other stuff.

CHRIS: There's also another one that I really like to mention which is the elm tutorial. I think, it's Elm-tutorial.org. I found it to be a really great compliment to the official Elm Guide. I think it walks through a little more in building a full app where the Elm Guide kind of touches on a bunch of different related topics. But they're not necessarily one narrative. The Elm tutorial did a really good job of tying all that together for me.

JAMISON: Yeah and this is been around for a long time and has kept it up through the evolution of the language. This is good stuff.

ALEX: Jamison, thank you for coming on the Frontside Podcast. We really appreciated talking to you.

JAMISON: Thanks for having me.

ALEX: If you love Jamison's voice, you should check out his React Conf talk from 2016 also about Elm. It's a wonderful talk. Go check that out as well.

JAMISON: Thank you. Can I pitch my other stuff too? Is that kosher?

ALEX: You can absolutely pitch it.

CHRIS: Soft skills engineering!

JAMISON: Yeah, I do a podcast called Soft Skills Engineering with my friend Dave Smith where we talk about all of the non-technical stuff in writing code. It's like you [inaudible], you can submit questions, and we answer them. If you're interested in talking about building software together, you should talk to the Frontside first. But after that, you can find me at Fivestack.computer. That's where my consultancy lives.

Consults is maybe a strong way of describing it. That's like saying the three toddlers standing on top of each other in a trench coat is like an adult. But if you want to work together, then check that out.

ALEX: Great. All right. That wraps it up for us. Thank you very much for listening and we'll talk to you next week.

You are here

49: Learning Elm For Better JavaScript with Jamison Dance