Ryan Haskell-Glatz talks about making Elm mainstream, learning through iterations of elm-spa, and how experiences at Vendr shaped Elm Land.
Ryan Haskell-Glatz talks about making Elm mainstream, learning through iterations of elm-spa, and how experiences at Vendr shaped Elm Land.
Note: the quality of Jared's recording is off and there are technical difficulties with the video at the end.
Thanks to our sponsor, Logistically. Email: firstname.lastname@example.org.
Music by Jesse Moore.
Recording date: 2023.06.05
[00:00:00] Jared: Hey folks, welcome back to Elm Town. I'm your host, Jared M. Smith. We're going to be talking with Ryan Haskell Glatz today.
[00:00:11] Jared: So to introduce him a little bit, you might've heard of him, but if you're new to Elm, you might not have. He's a senior front end engineer at Vendr. He's recorded Advent of Code and other Elm learning videos on his YouTube channel. He makes some games in Elm. He's the author of Elm packages and tools, including Elm Land, the successor of elm-spa, ryannhg dateformat package, and the ryannhg graphql package. He writes mostly about Elm related stuff on his blog, he recently talked about growing programming communities on Software Unscripted with Richard Feldman.
[00:00:49] Ryan, welcome to Elm Town.
[00:00:51] Ryan: Hey, thanks for having me. It's great to meet you face to face.
[00:00:55] Jared: Yeah, yeah, you too.
[00:00:57] Jared: So, to get started, I wanted to ask you how you got started in computing and programming. Now I know, uh, before we get into it too much, that you did explain a little bit on Software Unscripted about, uh, your introduction to Elm and how that went about. So we don't have to talk about that particular scenario.
[00:01:17] We can point people to that episode, but, um, if you want to kind of go back a little bit before that and just kind of what inspired you to get started in general.
[00:01:24] Ryan: Sure, that's good, because I made it all up and I'd have to remember the lie and it would be a whole thing. So, that's fine. Um, no, everything on there is true. Uh, I, uh, I got, uh, interested in programming. I think, uh, I've heard a lot of, like, guests on the show say a very similar story. Um, where it's, uh, video games.
[00:01:45] So, when I was a kid, uh, played a lot of role playing games. Um, and I was in high school and my buddy Scott, um, uh, and I were trying to, trying to make a Legend of Zelda clone. He was really big into Legend of Zelda. I was always too dumb for the puzzles, so I kind of hated, hated it, but, um, I really liked RPGs, so we kind of tried to make a myth, um, um, mix match or whatever that word is of, uh, uh, Legend of Zelda and like a.
[00:02:12] Uh, RPG where you get experience and stuff. So that was called Veril. Um, and he had already made Veril So by the time I hopped in, we were making Veril 3. I was doing game art, he was doing the programming. Um, we had, uh, we had learned Java in high school. Um, and I don't know, uh, if you Did you have to learn Java as a part of any of your education?
[00:02:33] Cause, it was a nightmare.
[00:02:35] Jared: Yeah, it was in college. That's the first programming language that I learned. Yep.
[00:02:39] Ryan: Yeah, I just remember, um, the way they introduced it to kids was not It didn't really, uh, communicate directly to what I was excited about. It was like, alright, we're going to make a savings account class, and it's going to extend the bank account class, and, you know, we're going to have a deposit method, and it's like, what are we talking about?
[00:02:57] Like, how do I make a game? Um, so a lot of my free time, uh, was hanging out at my buddy Scott's place, and we would just make, you know, we'd be learning, like, uh, how to do UI, because everything was pretty much terminal commands in Java, uh, back then. So we made a really, really bad game. Um... Scott, Scott was brilliant.
[00:03:15] He knew how to, like, architect it all together. Meanwhile, I was kind of stuck with, uh, I know how to make an actor class, and I know how to inherit things, but I didn't really understand how to put things together. I just kind of knew, like, the rules. Um, but yeah, I, uh, applied to, uh, U of I down in Champaign Urbana for computer science.
[00:03:33] Um, I got waitlisted, uh, so they were like, we'll get back to you, maybe you made it, maybe you didn't. And when they got back to me, they, uh, accepted me into the... Computer engineering program, which is kind of more hardware focused. Um, and so there I, uh, Yeah, there I was like, that's, that's fine. I'll do, I'll do hardware.
[00:03:51] Um, and then I'll just transfer to computer science. You know, after they see how good I'm doing, I'll just do that. Maybe sophomore year, the semester after that. And in the first semester, we made like a robotic car that followed a track with like sensors. And I'm like, I'm staying here. This is cool. So I got, I got into that.
[00:04:07] Um. And then I think it was like junior year, I, uh, took like a database class where we made like a web app that talked to a database and it was in that moment where I was like, wait, I can code something, have it show up on like my buddy's iPhone, like my Android, uh, my PC, their MacBook, like code at once.
[00:04:27] That was like right when responsive design was like in the spotlight, like bootstrap and all those things that made it kind of like more accessible. And so yeah, it was like jQuery and bootstrap. I think I had some off brand bootstrap that I was learning called Foundation CSS. But that was like, that was like my intro to web dev.
[00:04:46] And ever since I was like, this feels like the platform to build stuff for. Yeah, and I was fortunate enough to like get some jobs after college that were, that were web based. Seemed to be a market for it. So I lucked out.
[00:05:00] Jared: Yeah, and so yeah, this is a familiar story, right? You know, you're interested in games and and then through that you want to make your own and you realize oh I have to learn how to program. What's that like?
[00:05:11] Ryan: Mm
[00:05:13] Jared: so I alluded to this initial Elm discovery, right. We don't have to, to explain that particular scenario.
[00:05:18] I really want folks to go to, uh, the episode of Software Unscripted to hear about that and more. Um, but let's say that now you, you have, uh, come to Elm. Um, and you know, it was this kind of like, this functional programming, uh, set of, A blog post Right. That you were reading. And, and so you're, you know, you're kind of going through this and, and eventually you're like, okay, now I, I guess I'm gonna figure out what Elm is.
[00:05:48] Ryan: Yeah.
[00:05:49] Jared: and, and so you've done that. Let's see what comes next after that for you.
[00:05:57] Ryan: Yeah, after the, after those blog posts and after seeing the "Let's Be Mainstream" talk by Evan, um, It was like, I think the first thing I tried to do was make a, was make a game. Um, there was a, my dad had a Palm Pilot when I was a kid. Um, and there was this game on it called Seven Seas. Um, and I think it's somewhere on my GitHub.
[00:06:15] I don't know if it's featured or pinned on my repo. But I made, uh, the first thing I made in Elm was this game where it's basically you're a little, a little boat in the middle and it's a turn based game where as you move the pirates kind of close in on you a little bit. Um, and you can tap your ship to fire cannons out the sides and you, you basically try to get the, the pirate ships to crash into each other or you try to knock them out with cannons.
[00:06:54] But, um, that was a really good, like mini, uh, like not, not so simple where I didn't learn anything, but simple enough where there was like a clear like start and finish. I felt like that was a helpful thing for me. And it was also visual, I'm a very like visual, um, Like Lerner and stuff, so. Yeah, Seven Seas, um, was my kind of first thing that I did.
[00:07:16] Jared: Okay. Yeah. And that's on your website, right? Your version of that?
[00:07:20] Ryan: Yeah, yeah, that's right, yeah, I got the little arcade section on my website, yeah. I think that might be a, um, It might be the original, or it might be the rewrite, I don't remember. It's probably on there, I forget. But yeah, uh, yeah that arcade section's fun. Um, I feel like I make a lot of little things and I forget to share them.
[00:07:38] Um, and so it's nice to have that, that website where I can just do a little iframe and have, have something playable. But
[00:07:44] Jared: Yeah, yeah, I played that a little bit. That's cool. Um,
[00:07:47] so check
[00:07:48] it out folks. Um, okay, so you are playing around with Elm at this point. What is your motivation to keep going?
[00:07:59] Ryan: Yeah, so I was working at a web agency. Um, where we, uh, when I joined we were kind of all over the place. We were doing a little bit of jQuery, React. It was like a project per project basis. Um, each... Each new project we were kind of picking whatever the front end engineer was most comfortable with. But what was interesting about our web agency was we also maintained the apps afterwards.
[00:08:43] And so when I joined, I, um, I made a lot of really great friends there. And one of the, the friends, um, my, my buddy Alex, um, Alex Hawley. There were, there were two Alexes. But he was, uh, starting a new project, and I was like, You gotta check out this thing called Vue. js. Um, and so we kind of started to standardize.
[00:09:01] It was an experiment we tried, and that, and that worked out really well. Um, and then we, we loved Vue.js and, uh, kind of made it the standard thing. Um, and I got exposed to, like, the Vue ecosystem, uh, and everything, like Nuxt, which is their, their way to build, like, uh, uh, applications. Like, here's where you put your files, here's where you, you know, organize, how you organize your code, we'll give you the build tools and everything.
[00:09:26] Um, and then after that, when I found out about Elm, I was like, My motivation was like, oh, I want to get Elm here at work. I want to use it because I experienced the, um, the friendly compiler where it would tell me all the dumb things I forgot. And it was like super, uh, nice. And I hadn't experienced anything like that before.
[00:09:43] So initially I was like, I want to use Elm at work. Um, well, you know, what would it take to make Elm as easy as, you know, Vue and Nuxt. That was kind of my initial motivation, um, to, Kind of contribute to the Elm ecosystem, I guess, um, and continue to learn. But, yeah.
[00:10:04] Jared: yeah, and so then you were also recognizing the ability of Elm as a tool to Have great maintainability is what I'm gathering from that, right?
[00:10:17] Ryan: Yeah, absolutely. Yeah, the, yeah, the biggest thing is, um, Yeah, that compiler just gave me kind of a unreal view of what it would be like if we had to go and fix a feature or go and fix a bug. Um, what kind of feedback you'd get. Especially in a web agency setting where you have no, no, no context necessarily.
[00:10:35] You might have just got hired. The project was made three years ago, they throw you in, um, You know, docs were, uh, expensive, expensive to write, um, Cause you have to do it for every single project, so yeah, um, Yeah, I was excited about the idea of that, um, Uh, it worked for sure.
[00:10:52] Jared: Okay. And so did you see that come to fruition there?
[00:11:32] So, like, to our, to our customers, they wanted, you know, when you, it was a lot of law firms you were making websites for. So if you, like, search, you know, this person's name, you want them to show up right away. Um, so what we wanted was a lot of control over, like, meta tags. Um, a lot of control over, uh, how things are rendered, like what time they're rendered, and all kinds of, kind of, complicated stuff.
[00:11:54] And what I started to see Elm, uh, was really helpful for was kind of like the tools that just happen to be web based, like, uh, like our content management system, for example. Like, that would be a really great fit. Um, so... The longer I worked at that web agency, I was like, I don't think I'm going to... I don't think it would be easy to use Elm here.
[00:12:14] There'd have to be a lot of work that I'd put into it. Um, and we actually see like community members like Dillon Kearns putting in that work right now with elm-pages to make it, you know, more accessible for those, uh, those areas of the web.
[00:12:27] Ryan: But yeah. So I joined a product company called Hubtran. Um, and that was the...
[00:12:33] After, after that, that's where I was getting to use Elm at work. So I kind of got my goal, but not exactly the way I initially planned it, I guess.
[00:12:42] Jared: yeah, I understand that. And so when you joined Hubtran, was Elm already there or did you introduce it?
[00:12:52] Ryan: Yeah, no, Elm was, Elm was there. They actually hired me because I think it was elm-conf. I met, I met Michael. I think he was the principal engineer at Hubtran. And he was like, hey, like, you should come work here, and I'm like, ha ha ha, good one. And then, like, I saw him at another conference, he's like, hey, I'm serious, you should come work here.
[00:13:11] And then, um, yeah, I, I applied, and it, it went great. And I got hired, um, and so they were using React, er, they were using React for a bit, and then they switched to Elm. So when I joined, it was kind of a hybrid. Um, and we were on Elm, uh, 18. Um, and, uh, 19 was out. We had done a bunch of really, like, custom stuff there.
[00:13:35] Um, where there was a, kind of, the upgrade path wasn't as easy as if we hadn't done, like, I can't even remember what they were called. There was, like, the thing you could do in Elm18 where you could kind of do, like, fancy port modules, but I don't, I don't remember what those were.
[00:13:50] Jared: stuff?
[00:13:51] Ryan: It was native stuff.
[00:13:52] Yeah, I think it was effect modules or something. I don't
[00:13:54] Jared: yeah, right.
[00:13:55] Ryan: we were doing something and it was like, Oh no, we were doing kind of, it was like intense. And so the upgrade path wasn't very good. And, uh, um, uh, what we were running into there was, uh, it was, uh, the React app, the performance, uh, when it came to like make a change, see it in the browser, that was a lot faster.
[00:14:12] Elm 19 was the version that really fixed that. Um, so Elm development there was kind of slow and clunky. Elm wasn't, you know, mainstream. It's still probably not as popular as React, huh? But, um, heh, the, it was a, it was a weird sell at Hubtran to be like, Hey, we should write everything in this thing that, um, You know, needs to get upgraded, uh, pretty bad, and it's kind of slow to work with, And if you want to, like, change a, a class, you know, uh, it's gonna, you're gonna have to wait a little bit.
[00:14:40] So, um, they have since upgraded, uh, to 19, uh, after I, after I had left the company and joined Vendr. But, um, But yeah, I remember that was like a weird time. Uh, it was like, we should be using this, but it's not great, but we want to get there.
[00:14:53] Jared: Yeah, and so, you found a place with Elm, and then they had, uh, used some undocumented, um, you know, so called features, not really a feature of, uh,
[00:15:06] of Elm, am I correct in saying this, that prevented them from upgrading?
[00:15:10] Ryan: Yeah, it made it hard. I think they actually, uh, hired Aaron Vonderhaar, uh, of elm-format fame to help with the upgrade, and he did an awesome job. I think he made a tool at the time to help folks, uh, upgrade, so he was kind of the expert in that area. But yeah.
[00:15:23] Jared: Awesome. Yeah, I didn't know that either. Good insider knowledge. Okay,
[00:15:28] so you're,
[00:15:29] you're, at Hubtran. Um, you've been using Elm at that point. Um, and then, you know, you at some point go to Vendr. Did you have any mentors throughout this process?
[00:15:44] Ryan: Uh, mentors in terms of, uh, like folks at work that were,
[00:15:48] Jared: Anyone with regard to Elm that kind of helps you learn.
[00:15:56] Ryan: Um, I feel like when I was learning, uh, like the big, the big mentor, I guess, was really just like the, the Elm Slack Beginners Channel and the, I feel like it was a collective, I, I'm thinking of like Joelle and like names that would pop up frequently, um, like jessta or, uh, I'm trying to remember, but, uh, it wasn't exactly a one on one mentorship.
[00:16:16] Ryan: Um, I put a lot of. My free time into like, building little things, you know, working on like elm-spa and stuff. Um, and then, by the time I got to HubTran, I was already kind of like, um, I had already like, had a few versions of elm-spa under my belt, so I was comfortable by the time I got to work with it in a professional setting.
[00:16:38] Um, which was nice.
[00:16:40] Jared: Oh, wow. Okay. So you had already built elm-spa at this point, or at least some version of it.
[00:16:45] Ryan: Yeah, I think an early version, maybe version three, um. Where we don't talk about it, but that was the version we had transitions, and I have not yet brought those back and they probably won't come back because They're uh, really flashy and shiny for simple use-cases but nightmare when you want to build something real. I didn't do a good job. But yeah, the old old version of elm-spa I think it's still available if you go to v3.elm-spa.Dev you'll see my face. I'm wearing a Hakuna Matata shirt. I still have that shirt. I still have that face. But, uh, it should still be up there.
[00:17:21] You'll see how, how different things were. But, yeah.
[00:17:24] Jared: Okay. Yeah. And if folks want to hear more about some of those differences in different versions of elm-spa, I recommend checking out Elm Radio episode with elm-spa V6. I think it was the title of it. Um, where describes some of stuff. So yeah, that's really cool. Um, so we've been talking about elm-spa.
[00:17:48] Um, I've mentioned Elm Land at the beginning. Um, I guess, uh, you were talking about this, this part earlier that you started pretty early on where you wanted to get this experience with Elm. Um, uh, you know, that, that was maybe available in other ecosystems. Um, And you wanted to bring that into Elm, um, and, Duncan Malashock actually, uh, ask me to, or I'd asked them about that.
[00:18:21] And, uh, they had said that, uh, you know, to ask you about the experience of, of learning Elm and how it kind of transitioned Elm Land. So I think we're kind of there, but then there was one other question that they, they told me to ask you, and it's about, uh, a date Zazzo's.
[00:18:39] Ryan: Ah, Zazzo's. Zazzo's, yeah. There's a giant black death castle on a busy street that I've been wanting to go into for a while. That's Zazzo's. Yeah, that's a weird one. They
[00:18:52] asked about that. Yeah, I took my, uh, so first of all, Zazzo's is this restaurant near me. I live in a suburb of Chicago. And, yeah, it was, every time I drive by, it looks like vampires live there.
[00:19:05] I don't know what it's about. It was a very weird kind of space. I finally went there. Took my fiancé. We had some pizza. Uh, what else? It was very good. Yeah, I'm glad Duncan asked. It was delicious. I finally been to Zazzo's. I just liked it because of the name and the scary vibe. But it was actually very nice in there.
[00:19:22] Jared: Okay. Well.
[00:19:24] Ryan: Duncan.
[00:19:25] Jared: Milk it till it freeze, right?
[00:19:27] Ryan: There you go. Yep. Geez. Duncan's got a bunch of weird.
[00:19:31] Jared: Yeah, I
[00:19:31] don't even know what this means, but you know, hey, cheers, right?
[00:19:34] Ryan: Cheers. Duncan. What a, what a human being.
[00:19:39] Jared: Ha
[00:19:40] Ryan: Yeah. Easy cheese milk 'til it freeze. I don't know what that means. Sometimes at work we'll be on a call and I'll be like changing some code and it goes well and I'll just say some noise like, uh, me buttoned up in a podcast is very different from me.
[00:19:53] Like talking to a human being at work. I'm just. Just slapping random phrases left and right. So if you ever had had the privilege of experiencing that you'll you'll you can attest to it It's very real. It's a very real problem But yeah
[00:20:07] Jared: Sounds like a good time. I don't know that I'd call that a problem.
[00:20:10] Ryan: Yeah, yeah, it's a good problem But yeah,
[00:20:15] Jared: With Elm Land, what is it that you were trying to solve or solve differently than what you were doing with elm-spa?
[00:20:22] Ryan: Every time I tried to make a web app. For example, we mentioned briefly like the CMS. Like oh, this would be really great for a CMS, maybe not so great for the actual website. Um, I would, you know, try to roll my own CMSs or you know, make my own app in Elm.
[00:20:35] I would always kind of do the same initial stuff. And I feel like with elm-spa, I was like, ah, boilerplate, that's the problem. And I'm gonna make a thing that does some code generation 'cause like, If it's repetitive for me, that's kind of like a signal that, Oh, a computer could do this. Like, I don't want to do this anymore.
[00:20:52] I don't want to, you know, make the say, okay, the home file route that from the home page and like do all that stuff every time. So elm-spa was like, initially I didn't want to do any code gen. I was like, I want to make a really nice Elm packaged and it's pure Elm. And I was really excited about like, you know, um, constraining myself in that way.
[00:21:42] Like, routing isn't enough. Like, it doesn't really help answer what I think is the hard part of building a single page application in Elm, which is like, how do I connect pages together? And like, how do I share information across? You know, if you've got a signed in user, or you want to, um, you know, write to local storage, or do all that stuff.
[00:22:03] I feel like Elm does a really good job of, um, making it so that you can have like a page. That has it's own model, it's own message. And you can think about that, like, without having to worry about the whole universe. Um, but, there's not like a clear path forward. At least there wasn't for me. Um, for like, okay, how do I get my homepage to send information to my, like, settings page or vice versa, that kind of thing.
[00:22:24] So elm-spa was like, I try to make a package, there's a few iterations of me basically being like, ah, I think I need codegen for this. Um, and by the end of it, it was like, okay, here's how you do like the... Scaffolding and application part. Um, Elm Land, uh, is more of like a holistic, like step back. Like if the user is someone coming from React or Vue or, you know, Svelte, what are they looking for?
[00:22:53] Like what problems do they want answers to? And kind of leading from, uh, um, how do I do X, uh, mindset where it's like, how do I, you know, talk to an a REST API? Um, elm-spa didn't really answer those questions. Um, So I, I kind of wanted to make like the Rails for Elm with Elm Land. That was kind of my vibe where everything has like a convention and a, a simple way to do it.
[00:23:33] Run this, you're done. You know, and it was a very different relationship with the, uh, with the newcomer, so. So yeah, Elm Land is, yeah, kind of shifted towards, uh, solving the mainstream adoptability problem, uh, at, at all.
[00:23:48] Jared: Yeah.
[00:23:49] Well, that, that sounds really nice. I, I think one of the taglines is something like beginners welcome. Right.
[00:23:56] Ryan: Yeah, yeah, exactly, with a little cute little, uh, seedling emoji. You know, you start small, you'll get there. Uh, totally.
[00:24:03] Jared: Let's talk a little bit about what happens once someone has started with that. Right? Like you say it's production ready.
[00:24:11] Ryan: Mhm.
[00:24:12] Jared: is that? How's that scale someone?
[00:24:16] Ryan: Yeah, production ready is, uh, it's kind of a weird, vague term, um, that I threw right on the homepage so that people would use it. Uh, but when I, when I say, uh, with, with Elm Land, um, maybe it'd be helpful to kind of contrast it with, uh, a similar tool in the space, like Elm, elm-pages, elm-pages, uh, provides more, uh, more of like a platform, uh, for, for writing Elm, so you can do things in elm-pages.
[00:24:41] Uh, like, you know, meta tags and SEO and stuff that's just not, it's not possible with Elm. Um, Elm Land is, it's, it's trying to stay, uh, true to the core of Elm, so it generates some code, it puts it in this folder. Um, but at the end of the day it's just Elm code, and the difference is a computer typed some of it.
[00:25:01] Um, and if you ever say like, screw Elm Land, I don't want to do this anymore. Uh, all that code you just move into the source folder. And that's it. You're completely decoupled. There's no like, uh, Uh, missing features of like the Elm platform. So, when it comes to like scaling, um, the only things I have to worry about is like development server performance because Elm Land comes with its own built in dev server.
[00:25:24] But when you're like hosting and deploying an app, it's just an Elm app. There's nothing fancy about it. Nothing, nothing special. Um, it's just typing some of the annoying stuff for you and giving you patterns to follow in case, uh, in case you don't want to make them up from scratch, which, uh, was my experience at each company I worked at.
[00:25:41] We'd try to take our best guess and, you know, hope that it, hope that it scaled.
[00:25:45] Jared: Right. Okay, so yeah, this makes a lot of sense. So you're saying that this is not creating a separate platform elm-pages. It's not adding in additional features that are not available with Elm, like SEO that is available with elm-pages. Instead, you are generating some Elm code in the background, wiring some things up, then providing some tooling to make it easy to get started to learn these patterns, and, and then at some point, if you want to, you know, so called eject, or what's the term you use? Customize?
[00:26:21] Ryan: Yeah, customize, yep.
[00:26:23] Jared: Yeah. Or if you want to customize some of that, then you can bring that code and own that code yourself. And then at that point, will you know, like, will some tooling then not be available? Like, you know, I'm guessing you couldn't generate a route, um, if you've ejected your main. Is that
[00:26:41] Ryan: Totally. Yeah, elm-spa, uh, would allow you to eject your main. Elm Land is, uh, a little bit more, more opinionated. Um, there are a handful of files you can customize. Um, kind of the, the scenario I described earlier where you say like, I don't want to use Elm Land anymore. That, you'd be completely just like taking the files and maintaining them.
[00:26:59] Uh, the files that you can customize, uh, in Elm Land are really just like the Shared module. Um, Shared is what we use to kind of share data across pages. Uh, the Effect module, which is like custom commands specific for your application. So rather than saying like, Oh, I need a, you know, on the sign in page, I've got to like, call the sign in API.
[00:27:18] Um, and you can do Http.get, here's my password, username, whatever. You would just have like, Effect.SignIn. Um, so that module's customizable, and you can kind of define your own things there. Uh, 404 page is one, and what is the fourth one? Auth. There's a weird user auth, uh, thing, um, that got, got inspired by a buddy of mine who, uh, was trying to actually make an app and was like, how do I do authentication in elm-spa?
[00:27:42] And I was like, Yeah, good question, buddy. Uh, I gotta do some work. So, Elm Land fixes that. But those are customizable, and all the routing and stuff is completely... As long as you're using Elm Land, um, Yeah, there's no way to really opt out of the routing and stuff like that. Um, that's all kind of built in to the tool.
[00:28:01] Jared: Right. Yeah. So I guess at the, like you said, at the, at the very, um, highest level, if you wanted to completely remove yourself from Elm Land, you said, you know, we have some weird scenario, whatever we want to do something
[00:28:14] Ryan: Totally.
[00:28:15] Jared: that you don't in the Elm Land tool, but as you could do with Elm, then you would just say, okay, we're going the. You know, we're going full in with Elm and we're going to understand this code. Um, the generated code now, is that something that, um, how does that look? The maintainability of it.
[00:28:33] Ryan: Yeah, I, uh, there's a... At Vendr, we were using Dillon's elm-graphql library. Um... Uh, this is, sounds like a weird tangent, but, um. There's a bunch of generated code in there, and what we learned is it's really important that the code you generate is just as readable as the code you type. So in Elm Land, the code is designed to be, uh, understood and, um, like for example, the way that you'd, you'd connect a bunch of pages in a standard Elm application is you'd usually have a custom type with like, you know, page model, home, here's the home model, settings, here's the settings model, not found, here's the not found model.
[00:29:08] And you'd have a big case expression in your init, you'd have a case expression in your update. Um, it's the exact same pattern. There's no fancy, fancy stuff. elm-spa tried to do some cute, cute stuff where it tried to type less for the code gen. I moved away from that because I'm like, if someone ejects this, they're gonna need to know what the heck's going on.
[00:29:25] I don't want any special you know, Elm Land specific patterns. So it's, it's really just um, you know, a standard case expression. Uh, what you'd probably do if you were following um, Richard's elm-spa example or kind of rolling your own app um, at work.
[00:29:39] Jared: Okay. Yeah. Well, that makes sense. So you could start with Elm Land and then if you felt like you outgrew it, you would be comfortable to bring that in and start maintaining that code and you would have a pretty good time.
[00:29:54] Ryan: Exactly, yeah, that's the goal. I don't want anyone to feel like, um, if I try this, am I going to be, you know, screwed? Am I going to get cornered? The whole, if Ryan gets hit by a bus, I hope I don't. But, uh, I want you to feel like you, you know what's going on and it's not, it's not too much magic. Um, but yeah.
[00:30:12] Yeah, hopefully, hopefully you never need to eject. Um, I think the, the undersold benefit of Elm Land that I probably need to do a better job of highlighting is, you know, I'm sure you, cause you, you're using, um, Elm in production right now at work, right?
[00:30:27] Jared: Correct. Yes.
[00:30:28] Ryan: Yeah, so like the onboarding and like showing new hires the patterns and stuff.
[00:30:34] There's a lot of like, there's a lot of effort you don't think about until you're trying to scale a business. And you're like, Oh yeah, how do I do routing? Well, we didn't write that down. We were building, you know, and there's a bunch of, um, things like that where having, having a framework that just like, it's.
[00:30:51] Not only does your company use it, but all these other companies use it, where it's like written down and the docs are good and you can search. Um, that's like a huge benefit. Um, there are a lot of things at work that, uh, we've, we've, at Vendr, that we've done a lot, a lot of, uh, great work to document, and then there's kind of other areas of the code base that are missing.
[00:31:10] Um, and if, if I had a time machine, if we had Elm Land, I think that would have been one of the ways we could have prevented a lot of the confusion, uh, for new hires. Um, though it is getting better every day with, uh, more and more docs we're adding.
[00:31:22] But yeah. Mm
[00:31:23] Jared: Yeah. Well, I'm glad you mentioned Vendr because I wanted to ask about that. And it sounds like, of course, you've taken what you've learned from elm-spa and taken a step back and then, and then built Elm Land from that. And I, and I want to say, I love the documentation. I've been going through that, uh, recently.
[00:31:42] And I like that you start out with just a couple of files, right? I mean, there's a lot of stuff that is being done for you that is hidden by default, but it's available for you. It's not magic, right? Um, you can get to it. And yeah, like you said, I mean, it's, it's code that you can read. Um, the documentation explains things, um, succinctly, but clearly. And I think that as you progress through that documentation, you see all of the great patterns and, and things, principles and philosophy of Elm, uh, come out. And one of them that I wanted to bring up is you mentioned, "pretend you have the function you need", uh, and this is in the REST APIs, docs, if folks wanna go check that out.
[00:32:29] Uh, but that made me think of what, uh, Dillon Kearns, who you mentioned earlier, um, talked about in Elm Europe 2019 in his "Incremental Type Driven Development" talk, which. Yeah, thumbs up for that because I think it really clearly explained some of the things that I love about Elm. And, and so the fact that you built it into the documentation that, hey, you know, it's, it's very subtle if you don't already know that pattern, you kind of don't realize that you're getting taught that, which I
[00:33:01] love as well. You're not like explicitly being like, Hey, this is the thing, you know, and you need to, you know, do this, but it happens, um, through that process. And I think that is, uh, quite, quite well done. So, uh, kudos to you for that.
[00:33:14] Ryan: Thanks so much. Yeah, the docs are like the hardest part. And the next release, Elm Land 19, the tech stuff is done. And I just am like, bullying myself. Like, this isn't good enough. No, this isn't clear. Um, so there's a lot of big improvements coming in the docs. So hopefully you like, like it even more. I think there's a lot of, from my perspective, like there's a lot of gaps I gotta fix.
[00:33:34] But, um. Duncan's always actually telling me I gotta talk more positive about it. Stop, stop putting so much, uh, uh, negative weight on it. But, I'm, I'm really glad to hear that you enjoy that. That means a lot.
[00:33:45] Jared: Cool. Yeah. Um, and so having that all packaged and, you know, the tooling around it is really great. But
[00:33:54] Jared: was there something with Vendr, something that you learned with Vendr that, helped you Elm Land? Because you mentioned a minute ago that, you know, if you had been able to take a time machine and go back, that you...
[00:34:07] I feel like you could have used Elm Land Vendr uh, had great success. You didn't use those words. Those are my words, but I'm
[00:34:14] Ryan: Yeah, yeah. Um, no, totally. I, uh, when I first joined Vendr, I got to work really closely with, uh, with Matt Griffith, uh, the creator of elm-ui. We're kind of in, like, um, separate teams now, so it's not so one on one anymore. Um, but back when I joined, there was three of us, so that was something that was, like, uh, kind of like a daily thing.
[00:34:33] And Matt gave me a tour through the code base and Matt had all these ideas for like things he would do different and things like that. And Duncan too. Duncan had a lot of suggestions for how things would be organized. We, I mean, we took our, we took a stab at like, what is like, um, Like, you, have you used, you've used elm-ui, right?
[00:34:54] I'm just gonna make that assumption.
[00:34:55] Jared: I have.
[00:34:56] Ryan: Yeah, elm-ui is like, you know, what if we didn't have to do CSS? So a lot of the, um, the first, like, uh, iterations of things were like, Alright, what, like, what if, like, routing, we could, you know, do this better? And there was a lot of experiments there that kind of were of the elm-ui mindset of, like, We can make this, like, fundamentally different.
[00:35:15] We don't have to play by the old rules, that kind of thing. Um, so there was a lot of experiments that, uh, went well, and then there were some that were, like, Yeah, we shouldn't have done it this way. And I feel like, uh, like the way we organize pages and, and things, uh, the way we share, uh, state, uh, it was like kind of a, uh, a bunch of different ideas from different, uh, almost Elm conference talks kind of glued together in our code base and we were just, you know, doing our best.
[00:35:40] Uh, we did have a taco module at one point. If you remember the taco, uh, pattern. So we actually had a module called taco. That was like a thing in production. Um, so, uh, Yeah, there's just a bunch of little things like that. Um, so working at Vendr, um, it was really good to see. I'm trying to think of a concrete example that would be helpful, but it was really cool to see, like, patterns that didn't, uh, that didn't seem to scale well or that started to bite us.
[00:36:10] Um. One thing that might not be related to app architecture that we kind of learned, or that I learned from Vendr is, um, we were using Dillon's, uh, elm-graphql module. And we were really, uh, um, we were reusing, um, selection sets. So for those of you who aren't familiar, it's kind of like JSON decoders that are type safe, uh, specific to your GraphQL API.
[00:36:36] Um, We were trying to reuse those as much as possible because we didn't want to like type it all out a bunch of times. And what we were running into was performance issues where the we wanted to reuse the detail page query on the on the listing page The listing page is getting all these relationships, you know N times and stuff.
[00:36:52] So there were like things like that where You learn a lot of like practical lessons when you start using it at scale, so yeah, that's one of them. But doesn't really tie, tie into Elm Land, uh, enough, I don't think. but
[00:37:07] Jared: Well, You obviously had some patterns then that you saw some experiments you said that that were already at Vendr and so did those shape how you designed Elm Land at all?
[00:37:20] Ryan: Yeah, yeah, one, one pattern we have, uh, that we still have today was in the update function. Rather than returning a Model and a Cmd like you're used to, we had, um, I think there's a package for this, like return, elm return or something. Um, we had kind of our own return type, we call it Page.Update. Um, and so what we have is like Update is parameterized the Model of the page, the Msg of the page.
[00:37:44] Um, and so we use that. There's something similar happening in Elm Land, but it's a little bit, um, Uh, it's a little bit, it's a little bit different, a little bit closer to what you might expect from vanilla Elm. So Elm Land has Model and Effect. And Effect is that kind of like, uh, layer on top of Cmd that we talked about, uh, briefly before.
[00:38:02] Um, We, we, uh, one of the things we ran into at Vendr is the, if you have a special update return type, uh, we also had a special init return type, and in a lot of cases I just kind of wished I had the same thing there, so I could be like, yeah, do the request. That doesn't matter if I did it when the page loaded or, you know, after a button click.
[00:38:22] So little things like that, where I'm like, make sure that that, that kind of part of Elm remains. Um,
[00:38:27] Our view function, um, returned Html, uh, you know, Html Msg, but we had like a wrapper around all the messages, um, and one of the things, uh, that we ran into was like, everything was like HTML message message, HTML message message, no that's not an HTML message, that's a message message, map, message map map, it was like a bunch of zany stuff that I'm like, I'll try not to put that in the framework, that was like a, a point of confusion.
[00:38:54] Um, for our own sanity, we just made a type alias called, you know, Ui.Html that did the wrapping for us. Um, there, there are some benefits to doing things that way, but I think they, they might be outweighed by all the zaniness, uh, of the error messages you get when something goes wrong. But yeah, yeah, little stuff like that all kind of added up, um, but definitely did have a big impact on, on Elm Land's design for sure.
[00:39:20] Jared: Excellent. Yeah.
[00:39:21] Jared: And so Before I forget, let's talk about our sponsor, Logistically. At Logistically, we make intuitive software for the logistics industry to help logistics professionals make better decisions and spend less time on manual tasks. From quoting to tracking, our transportation management system helps squeeze every drop of efficiency from logistics teams of all sizes.
[00:39:42] Logistically pays me to record Elm Town episodes, as well as pays for our production and hosting costs. We build the front end for all new features in Elm. Please drop us a line, elmtown at logisticallyinc. com. I'll put a link in the show
[00:39:55] Jared: notes. And so I haven't published it as of we're talking. So you, you probably don't know the details here, but I did speak with Wolfgang Schuster, uh, who also works at Vendr. Um, and, and so he had explained, I think he said, he thought there were around 10 to 15 full time front end Elm developers, um, across I think seven or eight teams.
[00:40:20] And then maybe one team who didn't have any dedicated Elm front end developers, but, uh, you know, were able to kind of get by on their own, um, as mostly back end developers. Um, does that sound like an accurate statement to you?
[00:40:34] Ryan: That sounds about right. Yep.
[00:40:36] Yeah, I think
[00:40:36] Jared: growing
[00:40:36] quickly, so that could have changed the past few weeks, but, um, but yeah, I guess, you know, kind of knowing that size and scale.
[00:40:44] Um, like, how do you feel about the position of using Elm, like choosing Elm as the technology, even outside of, you like Elm Land? I'm just saying Elm in general.
[00:40:55] Ryan: Yeah, Elm, uh, is like by far the most successful experiment that we had at Vendr. Uh, it's just, there are so many harder things at work, um, than front end programming and it, you know, maybe the front end could be equally hard. I don't know what life would be like if we chose something else, but I can say that, you know, trying to, uh, Figure out how to do serverless, uh, functions with TypeScript and SQL and, you know, Postgres and all this stuff.
[00:41:27] Try to get all that together and make a GraphQL API that doesn't accidentally lie about what it's returning, because the types didn't quite match. The, the really hard challenges to solve, uh, all feel to be, uh, on the, on the back end. And Elm has been, like, the thing we can trust, you know, um. I feel like, yeah, I feel like I hear that message from a lot of people.
[00:41:49] It's cool to see it at this scale, um, with the amount of lines of code that we have, and being able to kind of witness it, um, yeah. The hard parts are not the code, the hard parts are, uh, making sure that everyone is on the same page of, like, what the patterns are and things like that, so. Maybe that's why I have such an emphasis on that for Elm Land, because I'm like, this is the, once you get past all the silly stuff, that's like the real challenge.
[00:42:12] Jared: Yeah, yeah, I think that makes a lot of sense. And. Because it's built in and because it progresses, right? It's kind of incremental in the way that you are taught those, those pieces with Elm Land. If you are just learning Elm out there and you want to build something that is, you know, kind of, I guess, Production ready, right?
[00:42:33] It is, um, something that you can put out there and know that it can scale with you as you're building your product or whatever it may be that you're building. Um, then Elm Land seems like a good tool, um, to use, to be able to ensure that you are using those patterns. You're not going to fall into a, uh, a pattern that, you may be more difficult to back out of later, right? I mean, not impossible, right? We can, we can use the Elm compiler, but, um, the deeper that things go, then the more effort it is to, to undo those,
[00:43:06] um, even with the Elm compiler.
[00:43:08] So, um, yeah, that makes a lot of sense.
[00:43:12] Jared: Um, so what do you think you, you mentioned the documentation with Elm Land 19, correct?
[00:43:20] Ryan: Yeah.
[00:43:21] Jared: is there anything else that you're excited about? With Elm Land or
[00:43:27] Ryan: Yeah. I feel like, yeah, um, I mean, for, for this new release coming out, I, uh, I think by the time the podcast airs, we'll be all right. It should be out. Um, it's really just me twiddling with the docs. I just need to ship it already. Um, it's gone, uh, there's a lot of missing pieces from elm-spa, uh, that have kind of gotten you to the part where you need to eject.
[00:43:48] Um, a lot of people kind of run into, okay, my page needs to know if the URL changed. Like, why can't I know that? Uh, so like Elm Land, this new version, has like URL hooks for pages. It's got a layout system that you can actually use. The layouts that I kind of did in elm-spa, um, they were very simple. They were kind of like, uh, components with like little slots in them that you could, you know, put a little bit of a, you could put your page in here, have a nav bar.
[00:44:13] But when it came to doing like, you know, a state for that, that nav bar, you know, and I signed in as the menu open, that kind of thing, um, it was very hard to, uh, to use. You kind of had to wire it up a bunch of times. Um, it was pretty much just like components, um, was the solution for, for layouts. Um, and yeah, the, on a technical side, I feel like Elm Land is like, maybe I feel this every time, but I feel like it's like.
[00:44:41] Finally, I'm like, ah, like, I did it. Like, this is good. At least the app framework part. And then there's the whole, like, future of it, where I'm, uh, thinking of exploring, like, plugins, and having, like, kind of going back to, like, the first class, like, conventions, like, this is how you should, you know, um, like, if you want to work with, you know, uh, REST APIs or GraphQL, these are the ways that I recommend to do it.
[00:45:03] Um, and just having that be something that, that people can use. Um, That's kind of, uh, later down the line. But once this 19 comes out, I feel like it'll be like a big, like, weight off my shoulders. I feel like the reason to eject is no longer like a feature reason. It'll be like a preference reason, you know?
[00:45:21] Like, I don't wanna have a build command, or I don't wanna, you know, I want underscores in my URLs, not dashes or something like that. But, um...
[00:45:29] Jared: Yeah.
[00:45:30] Ryan: Yeah, Catch All Routes is a huge thing that was missing from elm-spa. Um, if you've ever used, like, GitHub's UI, right, where you have the file explorer, you don't know how long the URL slashes are gonna be.
[00:45:41] So, that's like a must have feature for a lot of apps. But yeah,
[00:45:45] Jared: Oh, really cool. Yeah. And so you've, uh, tackled the technical problems. You feel pretty solid with those. You're doing documentation with 19, um, and then plugins. I think plugin sounds really neat because, um, yeah, some of those, those questions that may not be. For every app, but those, those questions may come up for, you know, 50% of the people.
[00:46:13] Right. Um,
[00:46:15] so, yeah, maybe that's something that doesn't make sense in the core, but could be a plugin. I think that would be really neat. Um, "I can't keep pouring milk like this." I'll tell you that much.
[00:46:26] Ryan: Oh my goodness, you got all my phrases. Now that one has an origin I can remember, alright. That phrase, the Notion, if you use Notion, there's like those images you can put at the top. There is this picture of the, it's like from the, I can't pronounce it. I'm gonna butcher it. It's like the Rijksmuseum or something.
[00:46:45] Alright, but if you go into Notion today and you go add image, you scroll down to the Rijksmuseum. There is this lady who looks so miserable and she's just pouring milk into a jug. And it looks like the kind of feeling you get where it's like day in day out, you know. And so I was pairing with Duncan, and I, like, look at that picture and I just say, like, God, I can't keep pouring milk like this.
[00:47:08] And it just became, like, an emotionally meaningful thing, where you're just, like, This stupid bug, or whatever. Can't keep pouring milk like that. That's one for the whole Elm community to share. You guys can have it.
[00:47:18] Jared: Awesome. Yeah, that, uh, sounds like it should be a meme, I think.
[00:47:21] Ryan: It should be. Yeah. It's, it's a good one. That's, that, that one's... I still like. I, I just love that I can still find it on Notion and always kind of go back to that. So. That's my shout out for the podcast. Go check out that image on Notion.
[00:47:35] Jared: Awesome. Yeah. Well, is there anything else that you want to talk about before we get picks?
[00:47:42] Ryan: no. I think it's good. No, I think we covered a lot.
[00:47:47] Jared: Awesome. Yeah.
[00:47:49] Jared: Well, Ryan, picks do you have for us today?
[00:48:19] I really wanted to continue that message. Um, and then my other pick is, uh, "On Storytelling", which is another talk by Evan. That is my favorite. Um, Uh, just a really good, uh, really good stuff on there about, you know, like, How two people can be talking about the same thing, but have two different experiences on it.
[00:48:38] And so, sometimes using words like types, you know, doesn't, not always gonna mean the same thing. So you can be arguing and both be agreeing completely. So, I really love that talk. Um, yeah, I think those are my, my big two picks.
[00:48:51] Jared: Yeah, that's awesome. So, um, Both talks by Evan. I love those talks. Yeah. Um, we'll put links to those. Um, "Let's Be Mainstream". How do you feel about that today? I've heard folks say that, you know, they feel like maybe that, um, that was not the way that it is really going. I mean, how do you feel?
[00:49:14] Ryan: yeah, I think, I think the history of Elm is, uh, pretty interesting. Because you have, I think, uh, From what I see in Elm Slack, there's a lot of people that are really enthusiastic about programming languages, and really enthusiastic, uh, there's a lot of, uh, people that are like backend engineers that want a frontend language.
[00:49:35] Um, and I think, I think we're still relatively young, I know it's been like 10 years, or we're gonna, we're gonna die or whatever, like everything's fine, but, uh, I think there's a huge opportunity to change the tone, um, Back in the "Let's Be Mainstream" talk, Evan really focuses on, like, sharing results and, uh, really having a focus on building things.
[00:49:57] I think that's, like, the biggest thing that gets me excited, um, when I see it online. When people are like, "Hey, I made this really cool animation", or "I made this really cool app". I feel like that's the thing I always want to click. Um, I know there's a lot of, uh, I don't want to say academic content.
[00:50:33] Um, and if I didn't think that, I wouldn't be working on Elm Land because, uh, that would be a huge waste of time. But no, I, I think, I think, uh, we're still in early phases and, uh, yeah, it's just a little bit of a extra marketing push is all we need in the right direction.
[00:50:49] Jared: Yeah. Yeah, I like that. You know, it's like creating that story. And Storytelling. Right. I mean, you, you need to not just compare and contrast things. Right. You know, it's, it's not necessarily on the perspective of, or the scale of like, okay, these are all the things that it can do. It's like, well, what does that give me?
[00:51:13] Right. That's the thing that I always come back to you. Like, what do I get out of that? You know, functional programming, who cares?
[00:51:18] Ryan: Totally.
[00:51:19] Jared: do I get with functional programming? And that was what I realized when I first started introducing Elm at company was. The, the way that I went about it, if I was just like, hey, here's curry and here's, you know, blah, blah, blah.
[00:51:31] And people are like, glazed over
[00:51:32] and like, I don't care, you know. And if I'm like, no, hey, wait, now I, I'm, what I'm trying to get at is, you know, you get reliability. You know, it's, you get, uh, no runtime exceptions. You get, um, you know, uh, packages that can be semantically versioned. You know, enforce semantic versioning.
[00:51:52] Now, um, I want to bring up my picks, and we've mentioned both of these things already. uh, the first one being Elm Radio. Um, of course you have an episode or multiple that you've recorded, uh, with Dillon Kearns and Jeroen Engles, but, um, I just want to... Shout that out in general. I don't know if I've done that.
[00:52:15] Um, I love it. I listen to every episode. You should, too, if you like Elm. And it differs from Elm Town. We're talking about people. Elm Radio is about the tools and techniques. And they can really describe code much better than I can. Um, it's really interesting. Um,
[00:52:34] Ryan: It's a hard
[00:52:35] problem. It's, uh,
[00:52:36] Jared: and I didn't think at first, I was like, Nah, that's not, you can't do that.
[00:52:39] It's just not possible. You know, I need to see it. Um, but they do a great job. And, um, and opaque types. I mean, you got to, you have to mention opaque types. It's Elm, Elm Radio. Um, Gotta do it.
[00:52:54] And so, if you're wondering what that's about, go check it out. Um, Software Unscripted. The podcast that goes beyond Elm, but definitely is Elm friendly.
[00:53:05] Hosted by Richard Feldman. Uh, Ryan, as I mentioned, has been on there. There are other great episodes as well. Um, check that out. And yeah, thanks to all the folks listening out there. Please rate and share Elm Town if you're enjoying the show. Thanks, Ryan, for coming to Elm Town.
[00:53:24] Ryan: Thank you.