Back to overview

Shipping Reusable Full-Stack Components with Fran Zekan

Kent sits down with Fran Zekan, an engineer with a diverse background spanning hardware, robotics, and full-stack web development. Fran shares insights from his experience working with both JavaScript and Rails and discusses how React Server Components (RSCs) are enabling fully encapsulated full-stack components—something that Rails developers have enjoyed for years. They dive into the evolution of full-stack components, their impact on web development, and why Fran is excited to share this topic at Epic Web Conf.

Fran Zekan, an engineer from Croatia with experience in hardware, robotics, and web development, joins Kent to discuss his talk, Shipping Reusable Full-Stack Components. Fran explains how React Server Components (RSCs) allow developers to build truly self-contained, reusable full-stack features—something that has long been a staple in the Rails ecosystem with Rails Engines.

In this conversation, Fran and Kent discuss:

  • How RSCs simplify full-stack development by eliminating the need for multiple setup steps.
  • Comparisons between RSCs and Rails Engines, and how they bring backend-like encapsulation to React.
  • Real-world examples, including a Stripe Checkout component that can be dropped into any app.
  • The evolution of scaling strategies across different web frameworks, from serverless to Astro’s CDN-first approach.
  • The future of modular, scalable web apps and the potential for Rails-to-React migration.

Fran also shares why he prioritizes in-person conferences, the value of deep technical discussions, and why he believes the Epic Web Conf community is a perfect space for these conversations.

Watch this episode.

Meet Fran at Epic Web Conf.

Guests

Fran Zekan
Fran Zekan

Transcript

00:00 Hey everyone, my name is Kent C. Dodds, as usual, and I'm here with my friend, Fran Zekan. Did I say your name correctly? It's Zekan, but this is, I think, the closest someone not from the Balkan region pronounced it. So amazing. Zekan. Yes. Perfect, actually. Awesome. Well, hey, thank you so much

00:18 for being a speaker at the conference. Your talk is titled, Shipping Reusable Full-Stack Components. That was one of the, I think you maybe submitted like seven talks or so. Something like that. You submitted a lot. And actually, so I actually posted while I was going through the submission process

00:38 that I could tell people who just like dumped a whole bunch of proposals onto the conference because they just like, they don't really fit. It just seemed kind of copy paste, low effort stuff. But yours were absolutely not that way. I didn't feel that way about any of yours.

00:56 In fact, there were several of yours that I was like, that would be a really good fit. And it was hard to choose between those because yours were very like thoughtful and you know what we're looking for. Like even if you just read the homepage where I say what I'm looking for, like so many people just didn't read that at all

01:16 and they just dumped a whole bunch. But you gave me a whole lot to choose from. And this is the one that I was really hoping that we could get in. I'm glad that we did. So before we get too far into what your talk is about, I think it would be great for people to get to know what you're about. So Fran, can you give us an intro to yourself?

01:33 So I'm an engineer from Croatia and I specifically said engineer and not a developer because I've co-founded a hardware startup. I've worked on robotics things. I've built electronics for kids that were then used in schools, taught them AI and machine learning,

01:51 like built courses for kids to do AI and machine learning and scaling of that. Plus the typical full-stack web dev and everything. So it's not just this. And I think one of the reasons I had these low-level talks and perfect explanations of how to do things

02:12 is because I've reached a bunch of people who are great web developers, like a person who's a great React developer but doesn't know how the entire stack works. And I think that that's something that really helped me is working in a bunch of different startups where I had to do everything.

02:28 And that kind of gave me bits and pieces of different parts of the stack from like embedded things, soldering components, like building PCBs, ordering them from China, assembling all of that, to like actually building servers, communicating through all of the things like different protocols and everything.

02:47 Right now, like my daily job, even though I attend a bunch of React and JS conferences is actually Rails. The funny thing is like Rails is actually paying for everything because JS before that wasn't really paying for everything. But it just means that you need to get a better job to go to a bunch of conferences. But that actually gives me a perfect viewport

03:06 into the current React ecosystem because everyone is trying to do things that were pretty much a staple of Rails for the past eight years or something. And that perfectly brings us into my talk, which is how to ship reusable full-stack components. Some of you that like wrote Rails before

03:25 probably know about Rails engines, which is essentially a mountable piece of your application that you can inject and just include into any application. And that's essentially an RSC because RSC comes with like server logic, client logic. It can or you don't need to include styles, but you can include styles.

03:44 And more importantly, like mutations back. The only thing missing to actually make it a proper Rails engine would just be to add models into it. But if we just standardize and say like, oh yeah, we have two components. One uses Prisma, one uses Drizzle. Just pass the database provider in, we essentially get a Rails engine. And this is, I think, the first time

04:04 we were able to have this perfectly encapsulated. Like, yes, in the past few years, we do have things like, for example, NextAuth, or now a different alternative called AuthJS, which is a thing that you mount into your next remix whatever app, part of the API routes.

04:24 You just pass everything and say, okay, that goes there. And you import their components. And then they kind of talk to each other. But I've seen so many foot guns with that. With people, for example, in the next middleware, just like specifically blocking a part of that. And then things not working. RSCs kind of fix that because RSCs are self-contained.

04:43 There is no like three different pieces you need to set up for them to work. You just take a component and put it in. I think one of the best RSCs examples I've seen is just Stripe Checkout. Because how you usually do Stripe Checkout is you have a route in your front-end application where you click on it, it goes to your backend,

05:02 it generates a Stripe Checkout session because that needs to be done with your private key on the server. And then you get redirected somewhere. That can just be a component you put in. And it will just, you can either do it while rendering and then just stream down that, run it on the server.

05:19 It can call an action and then just pull a thing, action, because now they're renamed to server functions and you will be able to use it. Get for them, but you could abuse them right now with a post. But all of these things were possible before in a kind of janky and hacky way of just putting it in places

05:38 and now we can very easily just combine them and finally do something that was a staple of Rails development for years. And now they're coming into React and I'm really happy with that because I love React. I kind of like the JS ecosystem more than Rails and I kind of want to write more of these things

05:57 but I'm missing things that I was taking for granted in Rails and now they're finally here and we can just ship a bunch of things that can be included and you don't need to set up five things. Now we just import one component and put it there. Before it was set up four things, then import the component and put it here. Now it's just one component. Yeah, so much better.

06:17 I'm so very much excited about this. Full stack components. I had a pattern, a blog post called full stack components that I posted a couple of years ago. But again, it was using Remix and there were a couple of things you had to wire up

06:35 to make it work and now with RSCs, it's just like render it like you do with any of your other components. There's nothing special there and I just really, really appreciate that about this new technology we have and I appreciate you coming to talk with us

06:51 about how this relates to prior art and what we can do now that we have this in React and it's just awesome. So super. So I wanted to ask you, it's not like a short trip for you to get to the United States.

07:07 So what is it that motivates you to make it out to Utah to be in person? Because of course you could record this talk as a video and just publish it online and reach the entire world that way, but you're coming out to Utah, why? I think that the biggest reason is,

07:26 I think that was like two years ago now. I went to Next.js Conf, so that was 2020 or 2023. No, so it's not 22, it's 23. It was in SF and the perfect description of that was, it wasn't a conference, it was a meetup of 300 people.

07:46 And just meeting a bunch of people there, talking with people with like-minded JS developers, just going deep into discussions and just having access to so many people there in one room and being able to talk to all of them was something that I haven't seen at other conferences.

08:06 I'm not saying that other conferences are bad. I've just been to way bigger conferences, way bigger React-specific conferences, and I just didn't have that feeling. It was partially because they were in Europe and a lot less developers come here. And people that are here weren't as interested in talking about all of these things.

08:24 But that kind of changed my perspective on conferences in the US. And even though it's super far, I just realized like the community effect of that was just next level. The year after that, I went to React Conf and that was just three times as big, but same feeling. It was like a big meetup. I got to meet so many people,

08:44 got to talk to so many friends that I made at previous conferences. Absolutely loved that. And I think the same is gonna happen now with Epic Web and I think like at React Miami and other similar conferences where the idea is just to go there and meet more people

09:02 and not to just go there and watch talks because I don't think that's the value I get from a conference because specifically, for example, for like Next Conf and React Conf, I can watch the talks on the plane back. Like my plane is 16 hours. Like I have time to watch everything twice.

09:21 I can just download them on YouTube and watch them. It's not the point. The point is to go there and actually meet people and talk, have different discussions about things that like before all of these people were just avatars on Twitter. Now you get to meet them in person and I get to discuss all of these things

09:37 in like way better of a medium than Twitter. It is great, but this is something else. And I think that like Kent is one of the best people in the space to organize something like that. And I really want to go to like his webcam because that's even more of a meetup than this.

09:56 And I think like that's just a place to connect with a bunch of other people and do crazy things in JS. And I think that's the reason to go to things like this, not to see talks. If someone is like, oh yeah, I want to see talk. Okay, you can watch them on YouTube when you go back. Yeah. Yeah, I really appreciate it. Even though, yeah, come to my talk,

10:16 but come to my talk, it's going to be interesting. But also you can watch it later on YouTube. We can talk later, so yeah. Yeah, yeah. I really appreciate you saying that. Nice reference to Epic Webcamp. I'm wearing the shirt from last year right now. It really is going to be fabulous. I would love to have you there. This year is going to be even better,

10:36 but I completely agree with you. It's really just about those connections that you can make with people. And I think there'll be plenty of people who look forward to making connections with you, especially other folks who are traditionally Rails developers who are coming into this React ecosystem. On that note, let's say that you're at the conference

10:56 and you're standing there in the hallway track. We have extended breaks, so people have plenty of time to chat. It's single track, so it's not like people need to get from one room to another. It's just long breaks, so people have time to chat. And so somebody comes up to you, what is a topic that they could bring up that would get you really, really excited to talk?

11:17 Scaling web applications, because it's an interesting thing we've been doing recently at work and how the entire JS community kind of has it solved for them to one degree with serverless and a bunch of other things in that regard. And I've been really deep into that right now

11:36 because scaling Rails, since it's a big monolith app that doesn't start that fast, isn't as easy. And just all of the patterns that I've seen recently sprawl up are just really interesting from some frameworks doing essentially infra-based scaling

11:52 where, yeah, RSCs and rendering things on the server is a bit slow, but if you have infra, like Vercel and Netlify have, you can do PPR and things like that where you just do a bunch of things. But then there is Astro who's handling that part of scaling completely differently

12:09 where they just make a bunch of requests and they return you a thing from a CDN and then all of the islands, instead of streaming them, they just make regular requests and you can cache that better. But the Vercel and Netlify thing is faster and a bunch of nuisances here where how to scale things and so on and so forth.

12:28 And that's something I've been diving really deep into recently, Anne, because we have problems like that at work. It's not one of those, some people on Twitter will be like, oh, but you don't have that use case. We have millions of users and we have problems scaling Rails because of the way our app was written four years ago.

12:46 And if I had serverless, I wouldn't have those problems. I would have different problems, but other interesting problems. And I think also one of my other thoughts that I submitted was rewrite or how to do a partial migration rewrite or whatever. We're thinking of how to move our Rails app

13:06 and maybe rewrite a part of it in JS and how to do that migration and all of those things. So there are a bunch of things that you can do in the JS ecosystem right now that you couldn't four or five years ago. And now you can very easily do all of these things with Edge workers and things because before you would have to set up

13:24 really complex NGINX proxies to actually do those redirects and things. And now it's literally free on Cloudflare. You just set up some redirects inside of it and it just uses workers to do all of those redirects. And you can have like one entry point and then half of the traffic goes to Rails, half goes to the JS server or whatever.

13:44 And things like that, like opportunities that we have right now are just magical, like allowing us to do so many things that before were extremely hard. Now they're just, in some cases, expensive. But if you architect them correctly, not even that. And yeah, there's a bunch of things you can do right now.

14:02 And I'm really, really happy with what we've achieved, even though everyone is saying like, oh yeah, you're still moving rectangles around and it's not that fancy, it's just still web. No, we've managed to build magical experiences. And I think that's something that's really interesting that we've been doing recently.

14:21 I like the trajectory we're going as and I hope to see more. So yeah. Yeah, well, I hope that you get plenty of conversations around that at Epic Web Conf. The type of people that we have at this conference are definitely fall into that category that you're talking about. So I'm really excited to see you there in March. This is gonna be a really epic experience

14:41 and thank you so much for giving us some of your time so that we can learn about you. Thank you for the invite and hope to see everyone there. So yeah. Okay. Bye everybody.

Sweet episode right?

You will love this one too.

See all episodes

Featured episode

Building Accessible Web Apps with Shruti Kapoor

Season 6 Episode 13 — 10:54
Shruti Kapoor