elm-land with Ryan Haskell-Glatz

We discuss elm-land, how it compares to elm-spa, and its philosophy of making Elm mainstream.
September 11, 2023


Hello Jeroen. Hello Dillon. It's time to take off that face mask, take those cucumbers off
your eyes and get out of the spa because we are moving on to Elmland. Oh Elmtown is back
but you're going to Elmland? Absolutely and no more cringing at my pronunciation of it
because it's just Elmland, simple as that. I mean now you only you always say Elm SPA
so I'm good with it. That's fair. All that work for nothing. All that work for nothing
but if there ever comes a new Elm SPA then I know you'll be good. But now Elmland and
we have a nice guest with us. We have Ryan again. Ryan Haswell-Glass, welcome. Hello.
How's it going everyone? 1000% renamed the project because spa and SPA. Could not, I
didn't know how to resolve that conversation. But yeah, first when you said face mask I
was like oh god it's COVID. Like I was so scared. Like what's happening? Am I not in
the loop? And then the cucumbers. The cucumbers. That would be a weird combo. Yeah that brought
me back. I'm like ah alright I'm getting the visual. This is good. This is definitely better.
I was confused until a little bit later. But no it's great to be back. Thanks for having
me back on the show. Yeah great to have you Ryan. And well so we're here to talk about
Elmland and it is not quite 1.0 but why don't you just tell us like what is the gist of
Elmland and you know in a nutshell how does it compare to Elm SPA? Totally. Yeah Elm SPA
I mean if people walk away from this and be like oh Elmland's the next Elm SPA I'll be
happy with that. Elmland is kind of a I took a step back. I might have brought this up
on the previous episode of Elm SPA but when I first got into Elm SPA I really thought
I was just going to make an Elm package and that's all that I needed to do. I just wanted
to make something to make that boilerplate for like wiring up a browser application easier.
And as I started to like get deeper I realized I couldn't get the ergonomics I was looking
for without doing a little bit of code gen or generating those basically that case expression
in the update or in the view without having the person's custom type in my package there'd
be a lot of like pattern matching with underscores at the end. It was kind of a it wasn't a win.
So I didn't want to have that. I didn't want to have bugs for people forgetting to wire
things up. So Elm SPA was initially just like it kind of brings me back to like the early
days when I was learning Elm where we kind of had one tool for everything and that was
like I feel like a sense of like we had a sense of pride around that. It was like if
you want to use UI we have Elm UI. If you want to use GraphQL, Elm GraphQL. And if you
want to do routing, Elm routing, just kidding. Elm SPA because I had to break the pattern
there. But no like I feel like I wasn't interested in kind of providing answers for those other
areas but as I started to you know talk to more friends about Elm and try to figure out
like you know what's what's keeping you from trying it you know where'd you get stuck.
I started to realize that the holistic experience of building web apps is tricky and I wanted
Elmland to kind of be like hey let's just like handle the whole problem like how do
I do this how do I do that. Not necessarily make tools for everything but I wanted Elmland
to be able to just focus on like the most critical issue and address that. So that's
kind of that's kind of how Elmland spiritually differs I guess from Elm SPA if that makes
Right. So yeah philosophically I hear you talking a lot about Evans let's be mainstream
talk in this context. I believe that's the inspiration for the rainbow logo.
Absolutely. Yeah totally. Yeah that was my first that was my first talk and that was
like what got me hooked. So that always gives me a nice warm fuzzy nostalgic feeling.
That's awesome. Can you summarize like what were your takeaways from the let's be mainstream
talk for anyone who hasn't seen it or doesn't hasn't seen it for a little while maybe.
Totally. Yeah my takeaway was so when I watched that the context was I was a JavaScript developer.
I was working at a web agency and I was using like react and Vue.js primarily. And when
I saw that talk I felt like it was addressed to me and I felt like the gist of the talk
was like hey there's this weird thing called functional programming. And if it's the quote
he had that really like it hit it was just like if it function if type functional programming
is so great outcome no one's using it. And that just like as someone that didn't know
it I was really satisfied to hear that. I was like yeah what's up with that. You know
what's going on over on the other side. The big takeaway for me was that historically
you know these functional languages have been maybe maybe the direction of the marketing
wasn't exactly what we wanted but almost designed for like people building front ends. And so
when I heard that it was like let's let's make a tool for people building front end
UI as opposed to like let's make a nice UI language for functional programmers. And that
really like I think helps like guide a lot of the decisions with Elmland which is like
yeah like if I have the choice whether to make it like familiar and accessible to a
JavaScript developer or make it like the most type safe or the most correct I'll usually
lean towards approachable. Normally I don't have to make a trade off because I'm so so
nice about that but that's kind of that's why we like it right. Totally totally. But
so that's kind of that was my takeaway. It's like what I realized I had been doing for
years as like a community member was that telling not showing and I was really being
like oh like there's all these guarantees and you know you have all this and you don't
like you don't get it. There's you know this is like a whole new level of building things
and I wasn't really connecting with some of those core concerns is like I feel like a
lot of people do get bought into the vision of Elm but they just have a hard time. How
do I use it now. It's like great like this is perfect. This sounds like I don't want
to run time exceptions but like how do I use it. And so I really wanted to start shifting
to focus on how to answer those questions. Right. I've noticed that the way you talk
about it and the way the guide the language of the guide the tone is very focused on the
task at hand and not jargon and not like just high level. What are you doing rather than
how you're doing it and what language features and immutability and even talking about like
custom types and the specifics of how you're doing it. It's more just like hey let's let's
add a new URL to our app kind of general language that anyone could understand. So you don't
mention monads it and we're in the guide. No no I do that. Yeah I do that never. That's
my advice. I still don't. I still feel like after using Elm professionally for like over
five years I still don't feel like I have a good grasp on exactly what that word draws
a line around. Like I know I'm using them. I know that there's like oh this and that
and this and I've heard the rules maybe three or four times and I forget them every time
and it's never matter. Sorry sorry functional programmers. I feel like I've got a good grasp
of what it means. But then whenever people really use it in a context like oh it's a
monadic X or monadic Y. I'm like no you lost me there. Yeah. Oh that's the monadic bind
that I'm like yeah you betcha. Yeah. Monadic bind. Yeah. That is like the literal thing
what it makes a monad in my opinion or in my understanding at least. But then whenever
they use it somewhere else I'm like oh no I don't get it. From what I understand it's
like a burrito and I consider myself an expert on burritos. I'm not very good at binding
burritos but I know that people do bind burritos so that must be why they're monads. So I feel
like the title barista is totally misused on coffee people. That should be on burrito
experts. I just. Why don't we have a word for that. And monad experts. Yes. Baristas.
So you've talked about this sort of like more holistic vision of making Elmland accessible
to people beyond just making a tool making a guide making a community. I think you know
you've really explored like that broader vision which is really cool just to like for people
who are new to Elmland to bring it back to like what it is exactly. There's still an
NPM package at the end of the day just like there's an Elm SPA NPM package. You can NPM
install Elmland as well and it gives you something that you can run commands to give you a dev
server to add new routes and like the actual tool itself at the core of it is pretty similar
to Elm SPA right. Yes that's very true. Yeah the CLI tool it's really just yeah a bit of
scaffolding a bit of code gen and then the only difference is that dev server kind of
got upgraded from Elm SPA. I think that's like the biggest difference in terms of capability.
So when you say that that's or you mean a tool that helps you run it in development.
Exactly. Yeah. Yeah. So I mean this this is a great example of like a difference between
Elm SPA and Elmland in terms of philosophy with Elm SPA. I made my server. There was
an Elm SPA server command. I was like oh it'll be like Elm Reactor. It's not really you're
not supposed to really use it for like you know doing full development because you can't
you know with Elm Reactor you can't like import your JavaScript you know web components or
anything like that. And with Elmland server I'm like why am I why am I asking people to
download this thing and then kind of giving them like half a tool where it's like yeah
you can use this until you like really want to use it and then you should go figure out
here's like a bunch of examples for how to use something else. Then it goes back to like
that core thing. It's like people don't want to pick a dev server. They just want to just
want to build something and just the tool should get out of their way. And I always
thought it was crazy before my days of Elm the fact that like the front end engineers
have to like build their own compilers for like oh this is my SAS pipeline and it's going
to go here. And like in the early days it was like Gulp and Webpack and you just write
all this code about how to like it's like cut it out. I want to make the button round
you know like get out of my face. But yeah. So with Elmland it's there's like there's
a little bit of configuration I kind of put in air quotes that don't probably translate
over the radio if I don't say that out loud. But the thing with configuration is it's like
yeah what link tags do you want to render in the HTML. Do you want the debugger. Yes
or no. You know for development for production. But you can just run Elmland server on a new
project and you don't have to configure anything special. It'll just work out of the box.
Right. And it has a Vite integration built in right.
Correct. Yeah it's using Vite under the hood and I don't expose the internals of that.
I might have like there's some discussion in the community about you know should we
just have that with like a warning. Basically my fear with exposing the internals for the
server is that if I you know JavaScript changes so fast if something happens in six months
and now everyone's using what's the Vercel one turbo turbo something turbo pack. It's
like the whole you know JS ecosystem pivots to using turbo pack for whatever reason. I
don't want Elmland developers to have to do that upgrade by hand. I'm like yeah that's
something that the framework can handle. You just want a really fast development experience.
You want your error messages in the browser. That's a framework problem. That's not a your
company problem or your side project problem. So I've done my best to try to hide that it's
Vite not like hide and sneak away but not have people bound to that technology the same
way that I feel like a lot of frameworks you know before would be like OK like here's your
web pack integration or here's your gulp. You know here's where you put your build tool
stuff because I've just seen how that changes so fast.
Right. So can you if you wanted to use SAS as CSS could can you configure Vite to do
that or I guess maybe Vite has that out of the box. I can't remember.
I'm not sure. They might have SAS the way that you would do it in Elmland is so there's
an example in the repo. I think there's assets and a CSS like folder up on the official repo
but the way you do it is you just compile your SAS to CSS using like the SAS package
from NPM those CLI tools you just kind of would run concurrently with with the server
and then output that in a generated CSS file. But it's not coupled to Vite in any way or
coupled to the dev server in the way that we're used to.
So they have to do it manually or with their own custom scripts next to Elmland right.
Basically yeah. So the example is you run NPM dev and it spins up Elmland server and
it spins up SAS watch or whatever it is. SAS watch.
SAS. Yes. But that allows you to you know in a few months everyone's doing post CSS
for everything everyone's doing tailwind. It's like yeah just plug in whatever you want.
The artifact that Elmland cares about is a CSS file. Give me that CSS file. We'll put
it in the browser and you're done. Everything else I don't think needs to be conflated but
I know I know that's kind of the direction that a lot of the ecosystem is right now.
So I'm curious about something now. So you're saying that the main difference between Elmland
and Elm SPA is the dev server. So so why didn't you just add a dev server to Elm SPA.
I think on the tooling side the big the big upgrade on the CLI side was the dev server.
But in terms of like the scope of the project I think Elmland more so differs in like its
philosophy and the amount of guides and resources and like I think a big example is like the
VS Code plugin. That is not a CLI tool by any means but it's like I watched someone
on Twitch try to use Elmland for the first time and it was an early version of Elmland.
There were plenty of little bugs that I was taking notes as I watched. And the biggest
problem that they ran into is their editor would just kind of be crashing giving them
false positives on errors. And I was like this is the number one problem with Elmland
is that they can't type. So like whatever it takes to make that holistic experience
work that that's kind of what Elmland is. It's not just the not just the CLI tool whereas
Elm SPA kind of was. Yeah. So you felt like a rename was probably a good step. Yeah totally
just just a step back and maybe it's just because I got the domain. Who knows. But it's
definitely a different project in spirit. It feels like. Just to clarify it is
[00:15:23] Yeah. That is pretty cool. That's pretty sick. Yeah. So are you now president
of Elmland or. I am the janitor of Elmland. Okay. CEO janitor. I'm the only employee.
I'm literally anything. So I don't know. I do it all. But we do have a dictator. A benevolent
dictator for life. Yeah. In charge of one person. Yeah. So I don't know. That's like
every political system. You could pick any of them and it would work. Just one guy. It
does remind me of something I heard with with Bunn the creator of this Bunn JS runtime was
talking about how if like since the goal of Bunn is performance oriented like I guess
backward node backwards compatible high performance runtime he was saying that he didn't want
anything to be out of scope of what he would tackle if it was on the critical path for
improving performance. So if it's right to put it. Yeah. There's some like package he
need NPM package he needs to build because that's what's slowing down people's experience
executing JavaScript code quickly. Then it's like OK that's in scope. So your attitude
here reminds me of that in a similar way where it's just like all right let's look at somebody
is maybe somewhat experienced with web development but their interest they're curious about Elm
and how can you give them an on ramp that's going to make it as delightful as Elm promises
to be holistically as the whole experience of getting started using it. Totally. Totally.
Yeah. And there's like so many steps on the way like I when I was first learning it was
like finding the right educational like content the right resources and like wrapping my head
around the concepts and finding like analogies to what I knew. So like I think there's going
to be more development in that space in terms of like what I work on with Elmland is like
just providing more concrete resources like look this is a real app. Here's how it works
you can play around with it. And yeah yeah it's really about that whole that whole experience
just like you said. I really do like I like the like that perspective when you shared
with the bun crater. That's cool. Yeah. Yeah. I mean I've heard people saying really good
things about the Elmland guides and I think that's really cool that you're kind of I mean
you know as as you run loves to quote the Elm philosophy take responsibility for user
experiences. So it is very Elmy to take that ownership and say like it's not enough to
say that someone else's problem. Like if it's if they're experiencing that problem using
my thing then I'm going to take responsibility for that. That kind of ties into like a feeling
that I had early on and I know I've talked to you about this and I've talked to like
Matt Griffith about this. But when the community was so small in the beginning there felt like
there was a contrast of like stepping on people's toes and like it because it felt emotionally
easier to be like oh like I don't want to like mess with UI because that's like you
know Matt's domain or I don't want to mess with GraphQL that's Dillon's domain. And so
yeah there was like I think there was a hesitation initially. So I definitely I definitely get
why that hasn't happened historically in the Elm community because everyone's so friendly
and everyone's so close that no one wants to really be like hey don't use this use this
you know and no one wants to be competitive internally. So yeah I think that was probably
the biggest like emotional hurdle for trying to like make a framework that encapsulated
so many different aspects of building web apps. I'm like am I going to be stepping on
the toes of the people that like helped me get here. You know what I mean. That was like
a freaky. That was a freaky thing. And in talking to you and talking to Matt you guys
were both like no don't worry about it. Like what. Yeah great stuff. We want great stuff.
Totally totally. I totally understand that. Yeah it is true that when people say oh I
want to make this tool for doing GraphQL and like well there's Elm GraphQL that Dillon
made and like yeah but I still want to do like my own thing or like there's something
that Elm GraphQL doesn't support or something like that. The best solution is usually like
go talk to the author and see if you can do if you can improve their solution because
that leaves less choices to the user like which GraphQL package do you want to use.
Well this if there's one and it's great then that's the best experience that a user
can could ask for. If there's like five and they're all like well in this case in your
situation you might want to use this one or this one or these three other ones then that's
not as great. So there's this advice which I tend to give and I still tend to give but
I totally understand that also prohibits people from doing something because yeah you're going
to need to do something new in some cases like with Elmland.
That reminds me of that reminds me of the coolest. Hey coolest is extreme. The coolest
thing I ever heard in a tech talk from the Elm community was Richard Feldman gave a talk
about Elm UI and Richard Feldman most I'm sure everyone on this podcast knows and if
not don't feel bad sorry but Richard Feldman is like he made Elm CSS which was like in
my opinion like the de facto way to do CSS before Elm UI came out. It was you know there
was no alternative besides just not writing not writing it at all. And the cool thing
that he did was in his talk he was like yeah I made an alternative to this but like use
use this guys use Elm UI. I was like that was so cool because it gave us the benefit
of like yeah if you're like new to the community everyone regardless of who made what is like
advocating for you know the whatever the best tool at the moment is or whatever the most
likely to be successful tool is. But it's still allowed like Matt to create Elm UI which
like if you tried to this is maybe a silly example but like if he tried to coordinate
with Richard Feldman it's like hey I think you know like we really want one way to do
UIs maybe Elm CSS should look like this instead. I think that would have been like slower for
him and so I'm kind of glad that he went and said like no I don't in order to like experiment
or explore I don't need to really necessarily coordinate with Richard Feldman in terms of
like the projects like vision you know what I mean. Does that make sense or is it kind
of a yeah. A hundred percent. Yeah. In this example the vision of Elm CSS and of Elm UI
are different. So if the vision is different then you don't want to pursue the same path.
You don't want to have one project or at least if they're two different. Totally. Yeah they're
similar enough. I think it's great to collaborate. So was there like other projects which you
thought ElmLens visions conflicted with or coincided with. I don't think it conflicted
with anything. I mean the only similar tool in the space is Elm Pages and at the time
I mean before the v3 update there really wasn't too much overlap in terms of use cases. Now
the v3 is more like dynamic and it's kind of more like remix like style. There's definitely
overlap there. But I don't know I don't I don't see like I guess Dillon and I will talk
about like hey like this API is what I'm thinking about and we like share share ideas and ideas
from I know like Dillon's error messages for example from Elm Pages v2. That was something
that inspired ElmLand. And was it the shared model or what was the thing that was borrowed
from Elm SPA was the shared. I definitely definitely yeah borrowed shared you know you
doing the file based routing definitely gave me the confidence to be like oh yeah I guess
I guess that would work OK and like because at first I was like all these JS tools that
do it have much more flexible file naming patterns that you can use whereas with Elm
like you can only has to start with a capital letter and the only special character you
can use is underscore but but not at the beginning for some reason. Yeah exactly. Yeah totally
yeah. Yeah. I feel like I feel like that's an example of like two explorations that strengthened
each other as they grew because I mean the culture the culture within the Elm community
has never felt to me like you know X versus Y. Yeah for me the biggest like responsibility
that that I've felt and we've discussed this together is just like how do we explain to
people how to navigate these choices like how do we help them understand what the trade
offs are so that they know going into it how to how to make a good choice. And I think
that's like because I don't know I mean I think we're just trying we're all just trying
to improve the Elm community and strengthen that and having different having different
perspectives out there different you know tools that have a different approach or that
solve different you know maybe slightly different maybe overlapping problems but slightly different.
There's a lot of value to that and the innovation in itself is really valuable too. So even
if something is overlapping a little bit but it's innovating I mean it can get to the whole
JavaScript fatigue level and that's you know that's not ideal but I definitely don't think
we're there and I think there's value to the experimentation too. So is Elmland if somebody
is starting a new project right now should they use Elmland or Elm SPA? Elmland even
though it doesn't have that 1.0 version we have now surpassed the functionality as well
as the I think the quality of Elm SPA. On August 12th I know this podcast is going to
be recorded or posted a little in the future so I'll try to be specific but on August 12th
I released a live stream video on my YouTube of you know upgrading Elm SPA from scratch.
Yerun was hanging out in the chat I think Yerun's the first chatter you'll see if you
watch that but it took about you know an hour and hour 15 I'd say to migrate the real world
Conduit app over and it was mostly half of that was me just joking around and chatting
with people so sorry if you have to watch all that it's it come join the Twitch stream
it's more fun that way but yeah I upgraded the real world app and it was really just
it always comes back to the same thing Evan did such great work with the Elm compiler
I just get to piggyback off of that awesome user experience so if you have an Elm SPA
project and you want to like upgrade it like the Elm compiler will literally just tell
you everything you will in that stream you will watch me use about 2% of my brain and
hopefully the Elmland guide will cover the rest of like what does this error mean kind
of stuff.
So if you thought that Ryan was smart he's actually 50 times smarter than that.
Yeah no I think that what people should know about me is that I choose Elm because I want
to be dumb you know I don't I don't like I don't want to be fancy at work I don't want
to be clever I just I want to just do it the dumbest way possible and that just works and
it's reliable and it doesn't keep me up at night so Elm matches my personality I would
Yeah I would say I like to be smart I like to feel smart but I don't like having to be
smart in order to program.
Fair enough I think it's hilarious to say I'm stupid I think that's just like a funny
sentence and fun to say so like if you just say that a few times it's like all of a sudden
starts to grow on you it's like I'm an idiot you know it feels good.
And that's one of those sentences where the more you say it the more people will believe
I hope so.
Only a fool would think that they're smart though let's be honest.
Yeah there's a name for that thing but I don't remember it.
So you said that if someone went to start with building a new Elm application you would
probably recommend Elmland or at least if they considered Elm SPA.
Do you think that Elmland is also at a point where if you just if you're new to Elm you
should start with Elmland or should they go through the Elm guide first?
I think if you're like me and you you learn with like examples I think Elmland is a great
place to start just so that you can it depends where you're coming from.
So Elmland was designed for for folks working with React or Vue who are familiar with you
know frameworks like Next.js or you know SvelteKit or whatever that just lets them just like
add a page add a button that kind of stuff.
Definitely the Elm guide is like a resource that you should check out but when it comes
to getting a feeling for the language and like experiencing the compiler I think leading
with syntax especially in Elm can be harmful because it gives the wrong idea.
I think we kind of have a culture of like hello world like when you're looking at the
examples how many lines of code is it how weird do the letters look and it doesn't really
capture the feeling of oh I like change this and I got a really nice error message.
So I personally think that starting with examples whether that's Elmland or you know another
framework I think starting with the framework is a really good way to get a honest view
of what it would be like to work with the tool as opposed to comparing kind of snippets
and learning like like whoa they use plus plus instead of plus like I'm out of here
like what is this.
It's like that's not what you're going to hate in a year.
Yeah that's actually true like the Elm guide is amazing but one of the other amazing things
with Elm is the compiler error messages and I don't think the guide mentions it much or
nearly enough like just the fact that you should rely on the compiler error messages
and that this is just great part of Elm.
I don't think it does put enough emphasis on it.
Yeah it's hard because it's like a you know a Gitbook and it's really the goal of that
document is like how does the language work at a fundamental level.
I mean that's that actually really does resonate what you just said with me because when I
was reading the Elm guide I was I was I was I had like one foot out the door.
I remember looking at the syntax being like this is weird.
I don't think even if I could figure it out if this is something that I'd want my coworkers
to be exposed to and then it wasn't until I saw that button example like the counter
you know plus minus and there was a challenge at the end of the guide section was like hey
add reset.
It wasn't until I did that that I experienced the compiler and I'm like oh like this is
I just typed in like some weird alien language and I just added a feature and it was right
on the first guess with no help and I'm like whoa.
And it circles back to I'm not smart like I'm telling you guys this is something you
could do with no experience and the compiler does guide you.
I think yeah I think a lot of people when they see people that can use these tools the
assumption is oh they must be different than me they must be able to do something.
It's like no.
I was a Vue.js developer like we're all on the same team here.
I didn't know you really have to believe Ryan he's really not that's not so dumb.
You guys someone tell me.
I'll just you have to ask my coworkers.
Is there anything else on your radar.
We talked about like that this idea that nothing is out of scope for trying to like give this
easy on ramp for helping people get acclimated to Elm with this goal of let's be mainstream.
Like what other points of friction do you see for users with their on ramp to Elm right
Some of which you might have solved already and some of them you haven't.
Of the things I haven't solved.
So I set out with that like initial like Elm land you know hello world post or whatever
I set out for the goal of like you should be able to build GitHub with Elm and every
you know the framework should be able to handle an app with that level of complexity and without
without setting like that concrete goal I wouldn't have catch all routes right because
you can't have GitHub without that file explorer page where you don't know the depth of the
users you know get repo you don't know if it's source CLI read me or if it's you know
read me dot basically like the depth of the URLs.
So catch all routes was something that was added.
But in terms of things that are still missing like if I wanted to make it up there's two
big things that are missing one you could get around by using you know some type of
I don't know like serverless function or something which is like meta tags for GitHub when you
share a repo you want to see a nice preview of that image you want to see you know you
shared on discord shared on Twitter you need to have meta tags at server render time for
those those meta tag crawlers to work and that's not something that Elm land supports
that's not something in the near term that I think about adding but it would be nice
to have an example of how to do that you know maybe with for sale or with Netlify like hey
if I wanted to do meta tags if someone had I think it was someone at Elm camp that was
I was like yeah I don't use Elm land for anything that needs meta tags and they were just like
can I just do that function I was like oh yeah I guess yeah thanks so that makes sense
the other thing is initially I was thinking about a UI plug-in and a graph QL plug-in
I've since backed off of the UI angle I think making a UI frameworks really hard yeah there's
like ideas I had an experiment that actually is public if anyone wants to play around with
it this is not Elm land related this is at Ryan NHG slash CSS dash in dash Elm CSS and
Elm and what it does is I just write my CSS file and I use this like you know 2 million
plus NPM download package that Svelte uses to just scan the AST grab the class names
and just generate me a file called CSS so I can just say CSS dot row that goes so far
I've been building out like a product with this just like you know playing around with
it and it's insane you can delete a CSS class and get an Elm error message you don't make
typos in Elm it's like you can use Elm review to figure out unused CSS in your dot CSS file
all with the ergonomic benefits of just typing CSS and like getting the auto complete from
your editor and all that I was that was like 40 lines of code and I just published it so
that people could could try it out and it's not it's like not perfect there's like little
like bugs that I work around because I don't care about it being right I just I'm using
it and it's great but I don't want to make a UI package for Elm land I think Elm UI 2
might be on the horizon I don't know the timeline is for that I want to hold anyone anything
but I've heard rumors that that might be a thing and then GraphQL when I was working
at vendor I kind of started that I kind of started the GraphQL project a little bit but
then with like resourcing and stuff Matt Griffith was able to take that and take push over the
line there were some ideas that I wanted to explore with GraphQL that I think would be
really great and most importantly I want to have a really good documentation experience
for people working with GraphQL so if you're making a GitHub app you're going to want to
use the GraphQL API so that's actually something I've been working on in the past like within
the past week I was just kind of tinkering around with that and seeing where that goes
but yeah I think GraphQL meta tags those are the biggest limitations right now and when
it comes to building real things but I think they have a future for Elm land for me is
building stuff and finding those gaps that's been really satisfying I love to start new
projects and I love to like deploy things and share cool cool screenshots and gifts
so I think I'll continue to do that and then that'll reveal more more holes in the framework
but yeah that's cool so it sounds like maybe like the guides fill a big part of that gap
for you of making the onboarding experience easier absolutely yeah I think there's a lot
of stuff where it's like it's doable now but it's not clear how to get there and so like
there's some things where it's like yeah I don't even have to implement a feature I just
have to explain a concept components the component section of the guide is something that it
took me years to really find a pattern that I was happy with when it came to like advanced
you know components that needed to not only keep their own state but also you know bubble
up events to the to the parent and so I think the components section in the online guide
is like one of my favorites because I feel like I could finally share that share that
that problem I had for years solution to that with people what are some of the highlights
of the component section of the guide yeah highlights is you know using using the simplest
component possible so it starts by just introducing you to like if you want to make a footer and
it doesn't have any interactivity just make a function called footer and put some markup
in there and if you want to make something that's highly configurable I recommend using
Brian Brian Hicks had that robot button from Mars pattern so if you just find yourself
trying to do the first thing where you're just making a function but you have all these
optional arguments that you don't want to specify explicitly every time use that builder
pattern very useful and then yeah when it gets in the stateful the there's it's I think
it's called like the one two threes of elm components or whatever in the guide that third
level is the really interesting one which like answer the question that I had which
is how do I keep state private how do I guarantee that like my drop downs closing itself and
you know when I search it's managing that that search string but I'm not making the
the call or wire that up every time and so a lot of that is optimizing for making the
component easy to call at the cost of making the update function do the you know do the
HTML mapping and all that kind of stuff for you doing doing them the mapping internally
so so is this more of a tutorial or a really a guide or does element also do something
special with those components it is just a just a guide or a tutorial and it's in the
concept section if you go to elm elm dot land slash guide it's just kind of introducing
you to components in general but kind of putting in context of the elm framework or sorry the
elm land framework where we have a fact dot send message which is kind of a core core
feature of bubbling up events and things like that but you could use this in a vanilla elm
app you could use this in elm pages the technique totally stands for anyone who has an existing
on project today and it's what we've adopted we adopted at vendor and we are not using
elm land you know at vendor yeah I recognize a lot of patterns that we use at work as well
so definitely good things in here someone tweeted something that really warmed my heart
the other day it was something like this like oh I just wish I knew about this elm land
framework it's like all the things we use at work that it's like public now or whatever
I forget the exact wording but it was cool to like to feel validated by it's like yeah
if you made a bunch of people figure it out on their own and no one coordinated they'd
all arrive at that solution it's a concurrent evolution yeah I think the point that he was
trying to make was something like I spent years coming out arriving at the same solution
so if elm land was here today or back when I started then I would have jumped a few years
already yeah hopefully that's what we're that's what we do we can you know achieve as a community
it's like just building those foundations so people the next wave of elm developers
starts a little bit higher up the rung than we did mm-hmm yeah I mean when I started the
question was like how do you do an elm SPA yeah right and now we're we're past that it's
like how don't you do an elm SPA how do you do a single page app which with literally
one page place great I tried I tried making one page but I had to make two like what the
hell it was very difficult figuring out in those early like the early elm 19 days figuring
out how do you build an SPA I mean because you we really do rely on these patterns and
examples and you know once you've done it you you know what to look for so you can you
know plunk it out but but yeah I mean like how do you approach components how do you
build an SPA you know in the case of elm land it takes care of the routing for an SPA and
all the wiring so that's even better you don't even have to think about it which really is
I think as it should be like it just I don't see any value in manually doing that wiring
yourself personally I think I think that's well done as a solved problem but um but there
are many things in elm where it is sort of like elm is such a simple language that it's
just like there are these patterns and this is the natural way to do it but it's hard
to figure out those patterns on your own so a little guidance goes a long way for things
like how do I do a component and and in this guide you're choosing to use these terms I
think that someone from a JS background would be more comfortable with even though it is
sort of frowned upon to talk about it like a component in elm because it's like well
components are object-oriented things that hide state and we don't do that in elm yeah
I I had like an elm SPA component guy that was with that energy was like well we don't
really do it that that's not the elm way that's the JavaScript way and we do it this way and
then I joined vendor and that's I shared this with Matt Griffith and he's like well then
how do you do this and I'm like well well it's I guess I don't do that then because
I can't with that limited you know I was so now I kind of embrace like no it's fine we'll
do it that way because that's I don't know how else to do it good you know so it's okay
to very rarely I will create a stateful component like that but when I need it it's great to
know how to do it I think that's probably the biggest difference with JS it's like everything
is is that by default one thing I really liked with elm SPA so Dillon talked about that it
does all the wiring for you handle all the boilerplate or a bunch of boilerplate one
thing I really liked with elm SPA is that that boilerplate was made using code gen and
that you could actually just find that boilerplate you could because it was in your dot elm SPA
folder or something and if you were wondering like where is this page used or how is elm
SPA using it in this boilerplate that I don't know well you can look at it and the magic
would vanish it's like oh it's just it's just that simple do you still have that in elmland
yeah still look great yeah absolutely yeah so now there's a big changes instead of an
elm SPA folder I've moved it to an elm land folder and oh my god so sorry I will say the
biggest difference in terms of the generated code is two big differences I'll call out
one elm land doesn't use a package elm SPA did so there was some portion of the elm SPA
generated code that was kind of behind an elm SPA package with elm land it's just using
URL it's just using like all the all the native kind of elm modules that people are used to
so there's no like other thing to look at and there's no confusion when I talk about
you know installing elm land it's like no not the package you can't find it so if you
if you go to the elm packages thing and you search for elm land I didn't make one someone
could please don't it'll confuse people I was thinking of doing it right now no I did
not do this there will be a for this episode there'll be a your own elm land with a reading
that says got him but no the that's one big difference and the other difference is with
elm SPA when I couldn't figure out how to solve a problem I would just make main elm
customizable and what that did was it allowed people to like you know they weren't limited
by the framework and I felt like I would get you know pinged less or whatever but with
elm land I'm really doing my best to be like if you have a problem everyone's gonna have
that problem how do we solve it in the framework in a way where I'm not putting the cost on
each individual company or each individual user using the project so main is no longer
customizable in that same way but now because of that trade-off now pages and layouts they
have access to these hooks they have URL change hooks which in most cases were more ergonomically
beneficial and was one of the requested features for elm SPA so by constraining you know the
ability to customize main all of a sudden oops it's just a better experience out of
the box for everyone and more features that are helpful so you can't eject out of some
parts of well and elm SPA I guess that's because you could configure your view or you can configure
your main or you can configure some things right but now yeah with elm land the only
difference is the main file is not ejectable but view is ejectable effect shared everything
that you you needed to have access to before the 404 page all those are still ejectable
totally customizable except for main main was my name was just like I don't know guys
here you go you know please don't don't yell at me on slack that was just like a I don't
know what the word is can you also define your own index that HTML or something so you
do but rather than specifying at as HTML you're gonna specify what tags you want in your elm
land JSON file and the reason for that is if you have control over the HTML file you
are coupled to beat if you're using a certain module import for example that works in beat
I didn't want anyone to get coupled to the framework so what I did was I exposed those
link tags those script tags those meta tags as data that can be specified in a data format
and then I can translate that into whatever you know dev server we're we're using in six
months a huge example of when this can be beneficial I need to coordinate with Simon
Lydell about this you had a you had a elm radio episode with him about elm watch that
tool is amazing I want that in elm land I think it's like the best elm hot reloading
experience I've ever seen with this approach without being able to customize the HTML file
I can upgrade everyone to use elm watch for the elm files and they can continue to use
beat for their you know npm packages and all that stuff but the but the core could be using
that yeah when you said you're defying your own dev server I was like oh then you can't
use elm watch exactly awesome the trick is we need to you know figure out this there's
some it's like oh I like parcel better like feet better but at the end of the day it's
like performance when you save the file that's another huge thing I need to work on at the
elm land performance when you when you're generating the code but we just want the best
thing it doesn't matter like if people want to argue tabs versus spaces or you know indent
two versus four or like beat versus parcel I'm like that's great for the elm community
if you want that's not great for elm land elm land is like I want to make a button it's
got to be red I'm talking like real red and you got to be able to click it and make dollars
we're not going to worry about the those little those little debates within within the framework
so you don't define your index at html but you define it in some other way and you can
also define your own ports or define your own web components if you wanted to exactly
yep and I think it takes an approach similar to I think Dillon did this in elm pages where
rather than have a html file we're importing like the elm and doing elm main init it's
just a file where you can say hey this is where my flags are gonna go this is where
my this is a function I call when my elm app is ready and they have access to environment
variables and they have access to the app that that second function has access to the
app where you can access the ports and all that kind of stuff I really like that approach
and that does keep it agnostic of the framework or the dev server
yeah no it's it's really interesting to hear how your thinking has evolved with the customizing
main because in our elm spa episode that we had with you a while back you talked about
not wanting to have users blocked on something you didn't think of and I mean I thought that
was a really cool insight in in general this idea that like you know let's not make users
too dependent on me thinking of every single way they could possibly build an app but I
think you've maybe still kept that thinking that you you don't want users to be limited
by your imagination but maybe by providing some hooks and extension points you can give
them all the tools they need to do that in a more cleanly packaged way that isn't as
much of a sharp knife totally I think the I think the big thing is that's easy for me
to make a main customizable but what's really cool in terms of like a social like structure
is if I don't make it customizable I get bug reports and I actually get feedback so maybe
it's a little bit messed up but that's how I get I can get you know hey this how do I
do this and I'm like great if you could customize main you never would have told me that you
couldn't do this and then you'd come in you'd do it you'd have a bad time and that would
be a secret thing that happened at your company that you'd be suffering with for months and
I'd be like if you just told me I could have flipped this switch you know let me know about
it you know yeah and then you could come up with the best solution for everyone and now
no one will have that problem anymore I think a great example is something that I didn't
do is like the a lot of people want to use tailwind CSS and they're like how do I use
that the in the online discord there's a community member Dazoni who just like made a made a
plugin it's just so cool when just having a place where people are like I just want
to build it with this how do I do it and I can like link to someone's repo I feel like
there's a huge weight off my shoulders and people are like working together and that's
like a space where yeah no one's like everyone's like collaborating and I want to see more
of that I want to see more people joining that community and feeling empowered to make
suggestions and even like code changes to the the framework I don't want to be like
the bottleneck in terms of feature development so I try to encourage people when they do
suggest a feature I'm like that's a great idea and I would I'd love to review that here's
here's what I would need like if you just add this example or you know show what you
want we have a really cool test suite this is a bit of a tangent where it's not unit
tests it's not elm tests it is it's called bats and it's bash automated testing something
I don't think that's something but it's something else that starts with s and all I do is I
just have like tests that are like run elm land expect the output says welcome to elm
land run elm land add page blah blah blah you expect an error message it says hey specify
a valid url it's really nice and so with all these examples in the official repo I just
have run elm land build in that folder and that's a part of my automated testing so it'll
catch if I add a feature that breaks interop you know as long as there's an example that
perfect pretends prevents regressions and the cost of adding a test is adding an example
which is also beneficial because then people have something to click through and run on
their computer that is the most happy I've been with tests in my entire life I feel like
I'm not a very good TDD person so like I never really know how to start or how to but those
are like the most payout out of any test I've ever written I'm sure Dillon is like super
proud of you yeah no that's amazing it does sound great yeah and enters are huge I would
like to have actually more of this kind of fully end-to-end tests where it's actually
like running the CLI for for elm pages I do have a lot of Cypress tests where it's actually
spinning up a browser and running through examples and executing back-end tasks and
running tests against them and I mean it's it's very easy to write you know you just
like expect this text to exist in the browser and you know it's like it's it's not rocket
science but it gives you a lot of confidence that it's actually doing this thing it's actually
printing this error message when you go to this route or if you if you remove a route
the 404 page in the dev server correctly guides the user on how to add a new page or whatever
you want to do you know so yeah that's huge it's huge for contributors yeah yeah I think
it's great because it's like the most important thing to me is that the promises that I make
on the guides are kept and so I love that the tests that cover my cover my butt when
uh when there's a breaking change so like I that's that's been great yeah and and I
mean talking about like creating a delightful on-ramp for for users right I mean if it's
if it's janky if it's glitchy it's not gonna be super delightful and at the end of the
day we're we're stupid right that's we're all self-admitted idiots so yeah except for
you and he's like no stop calling that you guys that fool how could he how could he not
think he's stupid but uh Dillon and I are stupid yeah definitely we're very stupid I'm okay
you're in the middle of the road you mean I stand in the middle of the road I don't
know I don't think that would be very middle of the road of you but yeah if you're if you're
stupid then you'd better write some tests to make sure when you make a mistake it catches
it because you will make a mistake because you're stupid right so I wouldn't love the
um compiler so much if I wasn't if I was able to like remember everything about everything
all the time you know like there's a certain like implicit like you know why you're here
because you know you make typo and typo make bug exactly elm is not a very good language
if you are a perfect genius who never makes any mistakes then yeah use assembly like get
out of here imagine the imagine the elm compiler remembered all of your mistakes and reminded
you of past mistakes when you make errors like oh again made this typo again yeah I
want that you know you sorry go ahead do you know you've made this mistake like 432 times
now that would be awesome another type mismatch come on I think what we should actually add
to the elm compiler is uh sometimes I make a typo that's a funny word it should chuckle
it should like ha you accidentally type like fart or something you know it's like I think
you meant to type first but that's hilarious bro I think you should have a sense of humor
the dictionary I often write uh list dot fitler oh yeah I do that too yeah I typed something
live on stream it was horrible oh I I mistyped flags and I'll just I'll stop there I like
screened oh and I just like immediately deleted it I was like I'm gonna get my VOD taken down
I'll get canceled it's horrible I had a heart attack but we should change that for your
name you do not deserve that rainbow logo that's true yeah yeah so earlier you mentioned
someone made a tillwind plugin they made a example repo uh they didn't make anything
too fancy or too specific to the framework but um yeah they basically made a resource
for people to use they click on it and then this is like a just like the examples in the
folder I think at some point I need to work that into the official repo but I haven't
had a chance to run it and play around with the experience to make it like official yet
but it's people have been using it and it's been really nice um allegedly from those people
I haven't I uh as as I told you I'm writing raw CSS and doing weird things that's cool
how do you think about that community so you have you have an elmland discord we'll drop
a link in the show notes to that tell us a little bit about the discord and the community
and and how you kind of think about building that community totally yeah I think so since
we already have the elm slack it didn't really make sense for me to have a separate space
with the same goals it's just like hey what if we had a smaller pool of the existing developers
something I noticed on the elm slack is that there is a big variety of of different folks
on there there are people that are excited about uh functional programming like language
syntax there's people that want to you know uh make cool packages and then there's you
know there's some people that want to like build apps and and get unblocked and do stuff
like that so the goal with the elmland community was to be able to set a tone of you know if
you join this discord if you know whether you're coming from react or view or angular
we don't x versus y here we're never gonna make a a subtle joke about you know oh like
this wow let's look at this new react library this is pretty bad or something like we're
not gonna do that kind of stuff what you come to the elmland discord for is hey I've got
this cool project I want to share it with people that are enthusiastic about you know
using elm to build things I'm looking at the I'm looking at the discord itself on the right
here but like I have a question right I'm a beginner I tripped up on got this error
message so it's really like a practical like troubleshooting as well as kind of celebrating
like real real work but there's no like channel for like you know argue about oh camel versus
you know haskell syntax and I kind of joke about that but like no moral judgment on that
at all it's just like that's not what I wanted this space to be it's just uh it's off topic
I guess is the way to think about it but yeah I mean uh what's come out of that so far is
like my favorite thing about elm favorite thing to see online is when people share like
things they built whether that's like a 3d car or like a website or an app or like a
I saw someone make like a midi app one time I wanted to create a space where people you
know if they weren't on twitter and they didn't feel comfortable doing that publicly they
had like a safe space where they could drop their project and we could all just spam it
with hard emojis and elm land rainbows and just have that kind of energy there so there's
been some really really cool projects that have come out of that and that's I'll post
my projects in there too so it's not just asking people to do it I'll do it too but
yeah I love that I mean I think you know like in in an elm spa or elm land slack channel
I mean I think you're gonna tend to feel a little more constrained if you want to just
spam with a cool project you're working on as you're giving updates on like oh this little
thing because it's like one channel and then somebody else is like asking a beginner's
question or somebody else is like trying to coordinate on like hey I want to add this
feature how can I contribute you know so it just opens up a little more space to give
people the the sense of comfort to just stretch out and do different things there in this
space and really build a community so I think I think that's a great idea to build a little
discord community sweet yeah I mean incremental elms out there I remember that too and it
is cool you have channels for different topics and you can kind of mute what you don't want
to talk about and it's a good vibe yeah which ones do you mute we're gonna judge you now
I'm gonna pull it open and see what I got muted do I have anything muted I don't have
anything muted I was too excited what a nerd anything muted do I no for anybody who doesn't
know incremental elm is a is a discord we have for contributing to the elm ecosystem
so it's completely focused on rolling up your sleeves and building things or giving feedback
less focused on the sort of slack what slack excels at giving help for for user questions
and things like that so yeah that's been a really cool space for us to cheer each other
on as we're kind of building fun projects yeah it's cool to see like all these channels
like cogen and like a forum and like all these different threats where it's like yeah if
you want to contribute to the ecosystem you've kind of got like a channel for everything
here which is great yeah I'm a big fan of these little communities with a very clear
purpose and I think I think communities thrive when there's kind of a clear theme to it all
so we talked about elm land 1.0 and is it basically is the headline for 1.0 that it
will come when you can successfully recreate github with elm land yeah I don't know if
if I'm gonna wait until like like an actual github clone is is out or like a you know
like a basic github clone is out that might that might be what stops the 1.0 release that
might be like a satisfying way to go but I really think it's it's about those features
that I would need to make that possible let me see if I've got it here yeah so like performance
improvements is big I think elm watch is a must it's it's like very very high very high
up maybe not a must necessarily because you still have a dev server but I think there's
a big room for improvement there's some missing guide sections for some reason I just forgot
about the interop section and the environment variables for anyone listening right now like
today you can make a dot env file and it just works it's very good but I didn't write I
didn't put no one I told nobody so that's kind of stupid so I got to put that in the
guide hard dogs are so hard I admire you for putting so much love into these docs because
it really is extremely hard yeah it's been the most time-consuming part of the project
though as they say the code is the easy part and it's really just been yeah a lot of docs
work I want to have like a clear answer to testing I want to like figure out what's the
easiest way like I've got elm review on here like the things like that where it's like
what's the like the normal de facto way to build an app and GraphQL is I need to have
an answer for it not necessarily a library I'd like to make an onland GraphQL plugin
but it does as long as I can point people in the direction of like hey here's how you
write GraphQL code and and make queries without having to write those decoders by hand I think
that's good and then beyond 1.0 I think it's just more more examples and more interactive
videos or more educational videos sorry it kind of feels like minor improvements or not
major improvements so it feels like you're almost there yeah it really is it's a lot
of minor stuff this last released 0.19 weirdly intersecting with elms current version that
was like the big that was the big thing where it was like I'm finally past elm SPA it's
finally like I've got those framework errors and you know it's it's ready for people to
upgrade to and yeah it was such a weight off my shoulders when I when I finally released
that so that was huge but yeah it's much a minor stuff but it's like the little stuff
that I think is really important it's like the remaining the remaining bit but yeah yeah
if you want to help contribute to that hop in discord and help me please we're almost
there then we can be big and exciting 1.0 people that's so cool yeah I mean it sounds
like you know I mean if I were if I were to guess before we had this conversation what
1.0 would involve I would guess like parody with elm SPA and and stability and and not
expecting any like major breaking changes for the sort of core functionality but it
sounds like that sort of 1.0 vibe is is kind of there at this point and you're like let's
be ambitious let's have 1.0 be like the guides are something I can fully get behind and say
I didn't miss any pages I you know people aren't tripping up on anything and we've built
like a holistic onboarding experience that's going to be really positive for people who
are new to elm for me 0.19 just means 1.0 so yeah right I think you're there our brain
translates it yeah well then I'll 2.0 to your own and 1.0 to the world I'll probably I'll
probably have a 20 in there before I have a 1.0 but we'll see but yeah no I'm excited
because I for a while I was streaming and then I was kind of streaming elm land development
and that's fine but like I'm excited about now that elm lands done getting to make goofy
things I was on the house on the way to lunch with my fiance or sorry not lunch I was I
was going for a walk with her this morning I was talking about you know what I want to
make I want to make a pet only Instagram you know you know just a bit goofy or it's just
like you can only have dogs and cats and they're just like doing stuff they're even doing like
influencer things you know like product placement but like only pets or something I don't know
I'm afraid of it and I'm not buying any domain so it'd probably be only pets that
oh that might have bad connotation so we'll think about the name we'll workshop that you
know like a mobile friendly dark mode that movies app that I just released last week
is like I really I really enjoyed that that was like a dark mode using a real rest API
type thing I want to I want to do more projects like that where people can just like have
fun using it you know they don't you don't have to dive in the code you can just be dazzled
that's fine yeah yeah at the end of the day we're trying to build cool stuff not build
cool stuff to let you build cool stuff yeah yeah although we spend a lot of time doing
that the three of us I'd say someone's got to do it you know and it's all right to do
and once it's done though you got to remember what our goal was in the beginning right exactly
yeah well amazing what should people look to to follow you for for future updates and
to keep an eye on elm land and what's going on there for sure yeah yeah if you want to
keep an eye on elm land if you go to join dot elm dot land that's that'll take you straight
to the discord I'm very cool subdomains I figured it out but yeah so elm dot land is
the website and then if you want to follow me on twitter I'm just at rhg underscore dev
I'll post when I go live on twitch on youtube if I have like youtube videos or whatever
but yeah the discord is a great place to see what the community is building so I definitely
if you only went to one of those links I would definitely recommend checking out the discord
or following following on twitter I guess if you're not a discord user yeah amazing
yeah and then I do have a github sponsors page for anyone that's interested in like
supporting the project you can go to l-9's website there's a sponsors section at the
bottom and you can just click sponsor and it'll take you to my face but yeah that would
that that'd be great there's just a few sponsors and they're already and it's just it's such
a satisfying feeling to know that like people are benefiting from it that they're excited
to to say thanks in that way and every dollar means I can like spend a little bit more time
on it it'll be really cool to be able to focus on this full time because there's a lot of
marketing work that would need to go into this before you know before we see that that
mainstream traction that I think everyone's hoping for yeah it's a great way to contribute
back if you if you enjoy the project well amazing stuff thanks so much Ryan for for
coming on and sharing all these thoughts with us it was really lovely having you back on
yeah for sure thanks for having me and Jeroen until next time until next time