Back to overview

User Experience and Web Development with Ryan Florence

In this podcast episode, Ryan Florence and Kent discuss the intersection of web development and user experience, covering topics such as the upcoming Epic WebConf, integrating React applications with new frameworks, the role of bundlers, and the importance of prioritizing reliability and intentional design in web applications.

In a conversation with Kent, Ryan Florence, co-creator of Remix and React Router, discusses how web development and user experience intersect, and the impact of personal interaction at events like the upcoming Epic WebConf. He updates listeners on the Remix singles project, which integrates extensive open-source work with his business ventures, and tackles the complexities developers face when merging existing React applications with new frameworks. Ryan also addresses the double-edged nature of bundlers in web development, providing performance benefits while obscuring the underlying API. The episode concludes with a call for web applications to prioritize reliability, speed, and intentional design, as Ryan emphasizes the consequences of misleading UX design, highlighting the overarching goal of enhanced user experiences in the web development sphere.

Watch this episode.

Meet Ryan at Epic Web Conf.

Guests

Ryan Florence
Ryan Florence

Transcript

Ryan: Hey, Hey, Kent.

Kent: Hey, what? You jumped in front of me. Good

Ryan: Say hi,

Kent: one.

Ryan: Kent.

Kent: That's hilarious. Maybe we should make this my episode, because I'm also speaking. Just

Ryan: Oh

Kent: kidding.

Ryan: yeah.

Kent: No, no, no. Ryan, I'm excited that you're going to be speaking at Epic WebConf in April. I want people to want to come and meet the speakers. I think that... For me myself, I have had job opportunities from relationships that I built at conferences and being in person. I'm glad that we're gonna be live streaming the conference and the videos will go up and everything. I think the knowledge should go to everybody, but the experience is something that you can only get in person. So I want

Ryan: Totally.

Kent: you to give people as much FOMO as possible by introducing yourself.

Ryan: I actually, I wanted to, I want to say something about that. Uh, earlier in my career, I remember going to a conference and there were some people that I wanted to talk to. They're like, who were some of the speakers and online personalities that I knew. And, um, they were not very personable and they were hard to approach.

Kent: Hmm.

Ryan: And, uh, and I kind of thought, wow, they're kind of jerks. Um, and like, that's why I was going to the conference mostly, uh, was to meet them and talk to them about stuff. And then, uh, And then I was at a conference myself. I think it was EmberConf long time ago. And there were some people that I wanted to talk to. And I could never talk to him because I was constantly like being followed and talk like, like a bunch of people were approaching me, right. And trying to talk to me. And then it clicked. I'm like, Oh my gosh, I'm one of those people to this person. Right? Like this person came to the conference and they were like, I want to go talk to Ryan about whatever weird Ember thing I was doing at the time.

Kent: Uh

Ryan: Right.

Kent: huh.

Ryan: And like it clicked. I was like, Oh, they want to talk to me. And so my whole mindset at conferences completely shifted. Once I realized that like people wanted to meet me. So I'm gonna, I'm going to be meetable. Um,

Kent: Hmm.

Ryan: I think you had that shirt that says like, you can sit with us or something like that.

Kent: Yeah, yeah.

Ryan: Um, and so that ever since that conference, um, I've always tried to be really mindful of like, people might want to talk to me because I do some stuff that they've used or heard of. So I'm going to, I'm going to try to be meetable. So come to the conference, come say hi to me. Uh,

Kent: Awesome.

Ryan: if I, if I don't want to talk, I will be like in my room or in my car, just like sitting there trying to recharge my social batteries. But

Kent: Hahaha.

Ryan: if I'm out in public and I'm around, absolutely approach me and I will try to approach you.

Kent: Super, yeah, I love that invitation. As like you've already kind of turned the conversation the opposite direction starting by being the one to start the conversation and that's actually a question that I ask later on in the interview is like what do you want to talk with people about? So I'm gonna save that till after we get to know you a little bit. So Ryan, what are you into? What are you working on?

Ryan: Um, I'm working on getting this office better cause I want to make more videos. So I'm like sticking sound

Kent: Oh yeah, oh

Ryan: stuff

Kent: nice.

Ryan: on all the ceilings. I've got piles of sound things everywhere. Um, I've been having a blast making the re the latest remix singles, um,

Kent: Hmm.

Ryan: did the one on Trillix to show off how remix can be built with, uh, can use be used to build apps. Lots of like, it's like about as. Except for Figma and like canvas or charts. drag and drop Trello boards like are pretty close to the limit of what web apps do in complexity of like user experience. Right.

Kent: Yeah, yeah,

Ryan: Um,

Kent: for sure.

Ryan: and, uh, so anyway, that's, that was that one. And I did all the crazy data loading and client side caching with our new client loaders and stuff in remix, um, made those videos. So yeah, I'm, I'm having a blast, having a blast making demos that like teach a pretty advanced user experience. Um, I mean, the apps aren't complete. but what parts of the apps I have implemented are pretty advanced. And so I'm just having a blast showing off how well Remix handles that stuff.

Kent: And just to be clear, so, cause there are some people who may not know, but you're the co -founder and creator, co -creator of Remix.

Ryan: I

Kent: So

Ryan: am.

Kent: just so people know, and that's why you're doing all of this work on making Remix awesome and teaching people why it's so great.

Ryan: See that empty space right there?

Kent: Yeah,

Ryan: That's

Kent: yeah.

Ryan: where my glowing remix sign is going to

Kent: Oh

Ryan: go.

Kent: nice, yeah. I joked with Zeno, one of the other conference speakers, that the entire reason I'm doing the conference is so I can get an epic web neon

Ryan: Oh, a

Kent: sign.

Ryan: big one of those. That'd be cool.

Kent: Yeah.

Ryan: Yeah, so yeah, I'm one of the co -creators of Remix and React Router. Michael and I have been partnering on both businesses and open source for about a decade now.

Kent: Wow.

Ryan: So yeah, that's a long and solid relationship. We've actually been pairing. As you know, we've been trying to do this interview, you and I. And every time I'm like, nope, sorry, I'm writing code with Michael. And we're working on the next pretty major iteration of remix with some of the features that React has been shipping, like server components and server actions and form actions. A lot of stuff that smells a lot like remix, but fundamentally, they kind of change what we can do with remix, both as just developers and as a framework. And so, yeah, we've been having a blast. writing

Kent: Mm.

Ryan: some code, it's going to be, I don't want to hype it too much, but I'm, when we ship it, I don't think that I'll ever be more proud of code than what we're working on right

Kent: Wow,

Ryan: now. It's so good.

Kent: that

Ryan: It's

Kent: is

Ryan: like,

Kent: awesome.

Ryan: it's like the pit, like react is so good now react has so many cool capabilities. Um, uh, we'd learned a ton with remix and then, uh, uh, with a 10 year old relationship of working and building together. It's kind of like magic right now. It's super fun. I don't think I've ever had this much fun in my career.

Kent: Well, that is awesome to hear.

Ryan: Yeah.

Kent: I know that when you were working with Michael on remix originally, you spent a ton of time pairing and I could just, I think you may have told me this, but I could just tell that you were having a blast. That's the most creative time is when you and Michael are pairing on something new.

Ryan: Yeah, that was a little bit under duress though.

Kent: We gotta make money.

Ryan: Yeah. So there were, there were some corners cut and we didn't get on the same page with everything. Um, and, uh, yeah, we just didn't, we didn't take enough time to

Kent: Hmm.

Ryan: really get our, the, the primitives as well as we could have, but, uh,

Kent: Hmm.

Ryan: but also now two, three years out of building remix, um, we know a whole lot better of, of what we need.

Kent: Well, and Shopify too has reduced a lot of the stress around like, how are we going to make money and stuff like

Ryan: Yeah.

Kent: they've been really good stewards of the project since the acquisition.

Ryan: Yeah. Yeah. Working at Shopify is absolutely fantastic. Normally, normally when you ship a new tool or framework or something, you're like your user base and their requirements and their scale grow with you. Right? So

Kent: Hmm.

Ryan: like remix has some rough edges, but like the apps are not very big yet. The people are

Kent: Hmm.

Ryan: building. Um, and then, uh, remix, the apps need more remix gets better and they kind of like, they kind of like grow together.

Kent: Yeah, yeah,

Ryan: You

Kent: sure.

Ryan: get dropped into Shopify and it's like, Hey, we've got a 5 million line react app with react router. How do we get this on remix? And it's like 5 million, like literally 5 million lines of, of react. Let's get it on remix. And so it's just sort of like, yeah. Or like here's, here's 20 merchants that, um, have shipped with a hydrogen one, which had, uh, probably the first production deployment of a react server components. It's like, okay, now hydrogen two is on remix. Let's bring these, all these merchants over. And it's like, well, they've all got, they're talking to three CMSs. They're talking to Shopify. They've got like, anyway, like promotions

Kent: Hmm.

Ryan: and all this stuff and how are we going to do I 18 N. And

Kent: Hmm.

Ryan: so it's just sort of like remix was growing and then we got it to Shopify and now it's just like use cases are through the roof. And

Kent: Hmm, yeah.

Ryan: we've had to like, try to keep up with them, which has been, it's been really good. It's helped me to like know what to focus on. better

Kent: Mm -hmm.

Ryan: than just like a Twitter poll or something,

Kent: Yeah,

Ryan: right?

Kent: that's very cool. I'm excited about the stuff that you and Michael and the rest of the team are working on and I know that there's lots to be excited about. So what are you planning on talking about at Epic Webcom?

Ryan: I keep forgetting what month Epic Web Comp is because I'm so busy

Kent: Well,

Ryan: right now.

Kent: we're

Ryan: So

Kent: three

Ryan: is it?

Kent: months and a

Ryan: Three

Kent: week and a couple

Ryan: months

Kent: days

Ryan: away.

Kent: out now, so April 11th is the date.

Ryan: That's an eternity. I have no

Kent: As

Ryan: idea what

Kent: long

Ryan: I'm going

Kent: as

Ryan: to

Kent: it's

Ryan: talk

Kent: in

Ryan: about

Kent: your

Ryan: yet.

Kent: calendar and blocked out, then I expect

Ryan: Uh,

Kent: that you'll be there.

Ryan: hang on, let me see.

Kent: For those listening, Ryan is literally checking his phone right now to make sure that it's blocked out on his calendar.

Ryan: Yep, I got it in there.

Kent: Oh, phew. Totally. So Ryan will be

Ryan: I

Kent: there, confirmed.

Ryan: will be there. I have no clue what I'm going to talk about. Depends on what we've shipped. I like talking about... You always want to talk about the thing you're, you're trying to ship, right?

Kent: That's

Ryan: That's when you like most

Kent: the thing

Ryan: hyped

Kent: you're most

Ryan: about it.

Kent: excited about, right.

Ryan: Yeah. And then by the time you're done, you're all like bruised and you know what trade -offs that you had to make and you wish you didn't make those, you didn't have to make those trade -offs. And then you're just like, yeah, I built a pretty cool thing. I can tell you about it, I guess, if you want,

Kent: Uh huh,

Ryan: but

Kent: yeah.

Ryan: you're not like as hyped anymore. Right?

Kent: Yeah,

Ryan: So I'm

Kent: that's

Ryan: trying to,

Kent: true.

Ryan: I'm trying to shift that and. And that's, like I said, the beginning of this, like the remix singles, building Trellix and building the movie app. I'm trying to get back into like hyping the stuff that we shipped a long time ago and it's actually been a lot of fun.

Kent: Hmm.

Ryan: So let's see, things that we've recently shipped is, we're calling it, well, the feature is SSR faults, but

Kent: Hmm.

Ryan: we're calling it spa mode. So a big requirement. for embedded apps at Shopify. So when you log into your Shopify admin, because you run a store, you can install a bunch of third -party apps where it has to do with some sort of labeling or shipping, tracking, or whatever. And we actually build first -party apps, too. So we build a lot of extensions to the Shopify admin the same way that third parties would extend it as well. So we call these embedded apps. And, uh, they have to run in an iFrame and iFrames enable annoying people to track you across the internet and build a profile through all the ad networks that are served over iFrame. So Safari and now Chrome have said, you know what? We're not going to let iFrames set cookies inside of themselves. Cause

Kent: Mm

Ryan: that's

Kent: -hmm.

Ryan: how you get tracked. Um, so you can't set a cookie. Even on your own, like you're a remix app, you're sitting inside of an iframe and you're just like talking to your own action and you're trying to set your own cookie, you can't do it. And

Kent: Hmm.

Ryan: so it makes it kind of hard to do authentication and stuff inside of those iframes. So this was a big, there's a lot of other reasons that we did this, but this is the use case that kind of kicked my butt,

Kent: Hmm.

Ryan: like stick it to the top of our roadmap was. We still want to use remix, right? Like you still want to be in that flow with loaders and actions and fetches and all the pending states and the forms and requests and response. Like I just, I still want to like think the server client paradigm because I

Kent: Mm

Ryan: like it

Kent: -hmm.

Ryan: and it's, and it's flexible, right? Like you could write it that way for a single page app. And then maybe someday you can move it over to server stuff. So, um, We built spa mode that allows you to run remix without a server, which 90 % of remix has already react router and already runs without a server. Like it's already a single page app that can just server render.

Kent: Mm -hmm.

Ryan: So spa mode is really just saying, all right, we're just going to make a single entry HTML file out of your route route, sort of like an SSG thing. And then, um, from there, it's just like remix normally. where we sent all the assets to the browser. And so now if you visit the page, you get the static HTML thing that we built at build time when you do remix build. And then from there, it's all getting client bundles and it's just, there's no server rendering, there's no server. It's talking to client loaders. But you're in that, you're in that remix flow and it's super fun. So yeah, might talk about that. I took, you already know this, but I took your Epic React app. that you build the bookshelf app. And I just barely five minutes before this call converted it completely over to remix spa mode. I'm going to make some videos about how to do that. So that'll be cool.

Kent: Mm -hmm.

Ryan: What else have we shipped? Vite, we got Vite now. That's mostly for us to just like shed responsibility.

Kent: Share responsibility.

Ryan: Yeah, that's true. That's true actually.

Kent: because you're contributing back to VEAT as well. And I think that's a

Ryan: Totally.

Kent: good thing.

Ryan: Uh, speaking of which a really dumb little feature, something that I really liked about remix is when you import an asset, like it just gave you an href to like include however you want.

Kent: Mm

Ryan: Like

Kent: -hmm.

Ryan: CSS, right? When you import CSS into remix, it doesn't just do some magical who knows what to get CSS on the page. You actually got an href and you put it into a link yourself. Um, and, uh, V couldn't quite do that the way that remix could, but now it can.

Kent: Mm -hmm.

Ryan: And I know that our team helped contribute some of that stuff. So yeah, you're right. It is, it is two way, but I'm trying to get away from bundlers personally, completely. So I probably will never be very involved with RV

Kent: Yeah,

Ryan: stuff.

Kent: but this is the real world and lots of people want and use bundlers. So I appreciate

Ryan: Yeah.

Kent: that that is a priority for the remix team.

Ryan: Yeah, absolutely. Yeah. Thank you

Kent: Yeah.

Ryan: for clarifying that. We will always support bundling because there are performance improvements that

Kent: Mm.

Ryan: you only get with bundling.

Kent: Yeah,

Ryan: So yeah,

Kent: but

Ryan: no,

Kent: you

Ryan: no

Kent: know,

Ryan: bundle is a pipe dream.

Kent: I think that having a focus on how do we do this without any magical tools actually leads to a simpler API and implementation as well. So I think both goals are important.

Ryan: Yeah. Then the bundlers can just target the real thing instead of like that. That's, that's a big regret I have of remix is that the first thing that happens is a bundler looks at a config and some magic files and

Kent: Mm.

Ryan: then remix goes. Um, you know, there is no real, I mean, your server files and entry point, but you import your build at the top of

Kent: Yeah.

Ryan: that thing. Right. And it's like just this something else made this. I don't even know what it is kind of

Kent: Yeah.

Ryan: thing. And that like stuff. Stuff always bugs me. So that's actually kind of what I'm saying where we probably didn't spend enough time on our primitives, even though we had the knowledge and the skills and could have had the foresight if we took a little more time, but we were in a hurry.

Kent: Yeah, well Ryan, it's been awesome to chat with you. I do want to ask you though specifically, is there anything that you're particularly excited to talk with people about or that you hope people come and talk with you about when we're at the conference?

Ryan: Um, user experience, like I just want really good web apps. Like I'm tired of tired of jank. I wanted to just be like snappy and tight and like intentional, right? Like when

Kent: Hmm.

Ryan: you're using the web and you're clicking it, you're like buying a flight or you're putting some money into an ETF or like whatever you're doing, or you're just trying to pay your dang electric bill. You're just like never, I don't know. I don't trust. most websites that I have to use.

Kent: Mm -hmm.

Ryan: I'm always afraid. Like, uh, you know, I've been, I've been charged. I think it was, my wife is trying to buy something online and we got charged, uh, $700 14 times.

Kent: Whoa,

Ryan: Cause

Kent: yikes.

Ryan: she clicked the button and like a spinner came up and then the button just showed up again. And she was like, what the heck? Why didn't it work? And so she clicked it again and she ended up doing this

Kent: Yikes.

Ryan: like 14 times or whatever. And then. Credit card company calls me and I checked the thing and it's like, what are we doing?

Kent: Oh my

Ryan: So

Kent: gosh, yeah,

Ryan: it's

Kent: yeah.

Ryan: just, we should let's, let's, let's build better UX. Come and tell me what you're building. Um, and what part of the UX you don't like and let's, let's think about a better way to do it.

Kent: Love that, awesome. Well Ryan, thanks for giving us some of your time. I'm really looking forward to seeing you with a crowd of people asking you questions about UX and just the way that you do it, being totally there for people to chat with them and make them feel welcome. So I appreciate your presence at the conference. I think you're gonna make it a special place and I hope to see other people there.

Ryan: Thanks man, I'm glad you're throwing it.

Kent: It's gonna be a good time. Thanks everybody, we'll see you at the conference in April.

Sweet episode right?

You will love this one too.

See all episodes

Featured episode

Journey of Web Development with Jacob Paris

Season 5 Episode 13 — 10:02
Jacob Paris