Ben:
Hello, and welcome to PodRocket. Today, I'm here with Dave Rupert, who is co-founder of Luro, also a developer at Paravel, and host of the very popular podcast, ShopTalk, which I'd recommend everyone check out as their second favorite podcast after PodRocket. How are you doing today, Dave?

Dave Rupert:
Hey, thanks for having me. Excited to be here.

Ben:
Yeah, so a lot of things that we can cover today because you have your hand in a lot of interesting projects, it seems. Maybe we could start with talking about web components. I know you recently launched a new master class talking about web components. So you want to give us a quick rundown of what that's all about?

Dave Rupert:
Sure. Yeah, the course is over at Frontend Masters, and they brought me in to talk about web components. I am a fan of web components. I'm a member of the Web Components Community Group, which is a group of, I don't know, advocates for web components that try to influence the roadmap, if you will. We can't propose anything, actually. That's legally through the W3C or whatever. But we can say, "This is really important to us," and make documents about that and dream up specs and APIs that might make web components better. So I did a course for Frontend Masters. They didn't have a course, so this is the first big web components course. And I think it dropped in May 2022, and so really cool to have that out.

Ben:
Got it. And I'm curious for a quick overview from you, what is the state of web components in 2022? I mean, I know the technology seemed like it had a lot of buzz, maybe four or five years ago, something like that, maybe even a bit more, and then React and Vue came onto the scene, and they have their own notion of components. And I know they're not mutually exclusive with web components, but I feel like they may have stole some of web components thunder. But yeah, what does it look like today to use web components? Where are people using them? What's exciting there?

Dave Rupert:
Yeah. I mean, I'm not the president of web components or anything, but if I were, I'd say the state of web components is good. You're right. It's been a long, sordid history. Web components were actually proposed in 2013, which is before React, before Vue, before Svelte. This was even around the era of Bootstrap. So people are building things in Bootstrap. Angular, I think, also came out in 2013, or maybe Angular was 2010 or something like that. But it came out, and Polymer was the flagship framework from Google, and it was like use Polymer to build apps, stuff like ... I think YouTube was built using Polymer and stuff like that.
So it had some, I guess, backing. But it was also pretty immature back then. And it wasn't until very recently, actually 2020, when Chrome, or sorry, Edge switched over to the chromium browser, or Chromium engine. It wasn't until 2020 when all browsers supported web components. So I'm of the mindset, if you were using web components before 2020, you were an early adopter, and you were just getting cut to pieces by all the weird support issues or cross-browser things. There was a Polyfill that worked in IE and stuff like that, but your mileage can vary there.
So it wasn't until recently stuff worked. And since then, the spec has matured a lot. The first version had these HTML imports, where you'd just link up to an HTML file and a style tag, and then like, bingo, bingo, you're using web components. But now, that didn't get picked up by Mozilla and WebKit. They didn't pick that HTML import thing up. And so it's shifted into an all JavaScript thing. And so the Polymer team even, not shut down, but just said, "How about this idea of Lit, which is a library, more. It's like seven kilobytes or something, but it's a library built on top of the Web Component foundation. It brings a reactive DX to web components.
So I'd say it's good and it's heating up. A lot of companies are adopting it. I think it's something like 18% of all page loads in Chrome show a Web Component, like YouTube, some Salesforce, and Microsoft, and Adobe. They're all starting to pick up on web Components. So an exciting time. I would say in 2022, now is a really good time to start looking at web components.

Ben:
Enjoying the podcast? Consider hitting that follow button for more great episodes. And for folks who maybe aren't as familiar with what web components are, what does the spec look like today? What are the core components of the spec, and what makes a web component, a web component?

Dave Rupert:
Yeah. So web components, themselves, are actually a combination of four different specifications. There's the template API, which is the literal template element in HTML, and then there's another one that's a sister to that slot, which allows you to pass your content into the template. The second one is custom elements, which is what you think of when you see a web component. It's like my hyphen map, or custom dash button. It has to have that hyphen in it. And then you register that custom element to the browser, and the browser says, "Oh, I know what to do with that. I just run this bit of JavaScript whenever I see that element." So that's the custom elements.
The third part is shadow DOM, which is simultaneously the coolest and dorkiest thing we have in web development. But it's a vague word for encapsulation. So I think of it as an egg. So you have styles and scripts on the outside, and styles and scripts on the inside, and you don't want them bleeding out of the egg. You don't want the styles from the outside getting on the inside of the egg, and you don't want the styles on the inside of the egg going outside of the egg. So that's what I think of shadow DOM, like just an encapsulation of your component. And then the fourth thing was the HTML imports, but that's pivoted to, now, ES modules, and there's new specifications out to extend that, like you can import CSS and JSON, and maybe even HTML, one day, into your JavaScript, just as like, I don't know, just as an object.

Ben:
And is there a story for using web components with React or Vue, or other frameworks, or is it one or the other?

Dave Rupert:
Yeah, totally. So I think what's important, too, is there's a lot of overlap with a modern component system framework. They're going to give you a little bit of a life cycle, like a created and updated, like a render. And so web components do that, and so you can offload a lot of componentry work to a web component if you were to use web components. But there are ways, like let's say you built a system in React because you didn't use web components because they weren't ready until 2022. There's starting to be some rappers, like Lit Labs has one, which is through the folks at Lit. Even React, itself, has an experimental branch that you can use web components in. React, Svelte, Vue, they all support web components first party, so you can actually build your web components and use them in your JavaScript app.
Honestly, I would not recommend that. If you have the Vue app, just use Vue components. Don't over-complicate it. But if you're in a situation, and what I find is a lot of companies, they're in a situation where like, "Yeah, we have the Vue app, but the marketing site is on WordPress," or "We have this Rails app that could use a lot of love, but we don't have the budget or the time and the money to flip it into a whole single-page app." So that's a situation where web components might be really good, is because you just write the web components, so your JavaScript app consumes those components, like your design system components, and then your Rails app can also use the web components really easily without additional build tooling and all that stuff.
So I think it's easy to think of JS versus web components, but I don't know. Web components are part of the web platform, and they're a slow moving part, but they're part of the web platform. And I think like they are probably ... Again, now is a really good time to start looking at them because I think a lot of these components may be able to start offloading some idiosyncrasies or normalize around the web components spec.

Ben:
Yeah. Well, thanks, Dave, it's been cool to get a quick refresher on the state of web components. I mean, as I mentioned, definitely they have had, I would say, waxing and waning interest over the years, but it's definitely news to me that it's really only now that they are finally ready for prime time with the browsers officially supporting them. So excited to see what the space holds in the future. And quick reminder for folks, Dave has a new course on web components. So if you want to get a deep-dive and really learn how to master web components, we will put a link to that in the episode description.

Emily:
Hey, this is Emily, one of the producers for PodRocket. I'm so glad you're enjoying this episode. You probably hear this from lots of other podcasts, but we really do appreciate our listeners. Without you, there would be no podcast. And because of that, it would really help if you could follow us on Apple Podcasts so we can continue to bring you conversations with great devs like Evan You and Rich Harris. In return, we'll send you some awesome PodRocket stickers. So check out the show notes on this episode and follow the link to claim your stickers as a small thanks for following us on Apple Podcasts. All right, back to the show.

Ben:
So Dave, you are also the co-founder of Luro. So could you give us a quick overview of what you're working on there?

Dave Rupert:
Yeah, so I've been working with these two yahoos, Trent Walton and Reagan Ray, for 15 years, and we started a web design agency called Paravel, and we've built websites for, it feels like, hundreds of companies now. And so we've started taking that knowledge, and we started rolling that into an application that we're building called Luro. And we're calling it a product development system, which is something we made up, but it's also very descriptive about what it does.
A lot of design tooling for design systems or what have you, it usually focuses a lot on designing code, like, "Hey, here's the components in Figma, and here's the components in Storybook or something." We're doing that, but we've also realized that building a product is a lot more than just designing code. There's a lot of people that work on websites, hundreds, sometimes millions, but hundreds of people have input and insights that fit into your product. And so it's not just designers and developers. It can be business people. It can be the one person who just has to run all the AB tests. And so Luro is trying to solve that issue where everyone works in their own silo and they all do their thing, and they work with their little pieces of software, and that's good, and we want people to do that, find tools that rock for you, find tools that are really good for you.
But I like to say we're solving the problem where you have to ask Sally to ask Bill to ask Jim to ask Carl, "How many hits does the homepage get every month?" So I think we've all been in that situation where you're just like, "I just need this answer, and it's going to take two weeks." That's a long time to wait when you're building a product, just to figure out, I don't know, "What AB tests have we run on the about page or something like that?"

Ben:
So help me contextualize, how does Luro fit in with existing project management tools, like a JIRA or Linear, Trello, something like that, that helps teams manage who's doing what and what works is in progress, stuff like that?

Dave Rupert:
Those tools are all great, I'll say. Those tools work fine, but for me, it's like plugging into a fire hose, right? So you're just blasted with issues. And if you want to find something out, good luck. You have to dig through every single sprint that's ever happened to find every dead, closed issue to find out why the buttons on the homepage are purple. Again, you want people to use the tools that make them feel good and productive. Love that, absolutely. But finding out why that work happened is really hard to do.

Ben:
Got it. But is it the right way to think about Luro as an alternative to those existing project management tools, or is it something that integrates and plays nicely with folk's existing stacks?

Dave Rupert:
Yeah. It's something that tries... we're trying to. It's always big theoretical, but we're really trying to... and we have some good momentum right now of plugging in to the tools you use in surfacing that information in a better way in Luro.

Ben:
Got it. So in terms of plugins, I'm looking at the website. I see it looks like a Figma, perhaps a Figma integration. Is there a matching, maybe a GitHub integration or something like that?

Dave Rupert:
I can't talk about future features at this stage, but I think what we want to do is listen to customers. What do they need? What do they work with? What are they using? And then help build something that fits people.

Ben:
Got it. But with the existing Figma integration, when I plug Figma into Luro, what is it showing me? What's that feed or that fire hose light that Luro produces that ... Just help me think about that.

Dave Rupert:
Yeah, totally. I mean, right now, if you need to know some colors for your design system or something, you have to go into Figma, find the right file. Good luck. But now you found the right file, and then you have to know where it is. Offhand, do you know where the colors are? No, right? So they're in the right sidebar somewhere. I can't even tell you with good confidence. But Luro is going to help surface that. And then even just getting an index of all your components, understanding what components you have, what different states they exist in, Luro tries to surface that in a way to where you can just use Figma, like you use Figma, and you probably, if you're a designer, you understand this. You're very fluent and comfortable navigating around, and this is where that silos thing comes in.
I, as a developer, have zero comfortability when I use Figma. And so when I switch over to Figma, that's lost time and lost money for me to dig around and find a color. The way we're thinking about our Figma integration right now is just, "How can we make it easier for both designers to do what they do, and then developers to get the information they need out of that?" So without I don't know, boiling the ocean inside Figma.

Ben:
Makes sense. And yeah, very exciting. It sounds like you're in beta or in development phase. If folks want to check out the product, can they do that yet, or still have to join the wait list for a bit?

Dave Rupert:
Not quite yet. Yeah, you have to join the wait list, but I think we're going to hopefully start this fall, start bringing people in, more intentional at first, but then rolling it out to as many people as we can. Again, we want to get people on, we want to make sure nothing explodes, and then we want to make sure that we can scale up and handle all the load. So, yeah.

Ben:
And building with design partners, like folks who are using it, giving you feedback, or is a lot of it coming from your work with Paravel and the actual problems you've faced, or how are you thinking about figuring out what to build in the product development life cycle there?

Dave Rupert:
Yeah. No, we have design partners right now. We just want to make sure we have them and then, in a broad sense, the right design partners that give you good feedback and stuff like that. So that's how we're approaching it. I mean, we have a big history of working with, like I said, dozens and dozens of different teams and products and companies, B2B, E2E, all kinds of different companies over the 15-year lifecycle of Paravel. So we have good guesses, but again, I think we want to have some design partners giving us really good feedback on what we're doing.

Ben:
Yeah. Well, super exciting to hear about Luro, and we are going to put a link to join the wait list in the episode description for anyone who wants to get on the wait list and perhaps get towards front of the line for when it goes public later this year. So I think next should be cool to learn a bit more about ShopTalk. You guys have built a pretty incredible audience there, and it's definitely a podcast. It inspires us, for sure, as another developer-focused podcast. So would love to learn a bit more about the show. Maybe you could give a quick overview for folks who haven't heard it and yeah.

Dave Rupert:
Sure. Yeah. ShopTalk is a podcast I started about 10 years ago with Chris Coyier, formerly of CSS Tricks and CodePen. Yeah, I mean, we sit at the intersection of fart sounds and web development, and we have done this weekly show here. We're on, I think, gosh, episode 525 or something like that. So we've been doing it a long time, showing up every week for the last 10 plus years. So it's great. We enjoy it. We have wonderful shopamaniacs who tune in every week, so we appreciate them. Yeah, it's fun.

Ben:
And what kind topics do you like? Is it frontend-focused or general things that are interesting to any developer? How do you think about choosing topics, especially you've now done 500 episodes, so what's your process there?

Dave Rupert:
When you've done 500, you've talked about a lot. I would say just by the nature, Chris and I are probably both generalists. So we're not React stars, although Chris does React. I do Vue and web components, but we're generalists by heart. So we work on WordPress sites. We work on Craft, CMS sites. We work on Webflow sites. We have this broad experience that we bring. And Chris has been more on the product side and I've been more on the agency side. historically, although that has shifted. So I think we've brought, for five years there, he was on Mac and I was on PC, so we've tried to bring some differences in, in that way.
Yeah, it's more in the front of the frontend, to borrow a term from Brad Frost, but probably more in the making client sites or HTML, CSS, and JavaScript stuff. But then, there's times you have to get deep into database queries and the impact that has on a website. So I think we try to do that best we can. I shy away from the term full stack, but that's probably what it falls into.

Ben:
Yeah. Well, we will definitely put a link to ShopTalk on some of the platforms, like I guess, Apple Podcast, Spotify, et cetera. We can put a few of those links, or is there a website, actually? We could probably a better place a link.

Dave Rupert:
Shoptalkshow.com. Yeah.

Ben:
Shoptalkshow.com. So we will put a link to shoptalkshow.com

Dave Rupert:
We also have some amazing guests that drop by and dispense actual knowledge. So it's fun and worth it, in my opinion.

Ben:
Cool. Well, Dave, thank you so much for spending some time on our podcast, especially when you have your own that is probably even more popular than we are.

Dave Rupert:
No, no, no, no.

Ben:
Well, thank you again, and it has been really great learning about Luro and web components, ShopTalk, and as I said, we're going to put links to all of your projects in the episode description and, yeah, it was really great speaking with you.

Dave Rupert:
Well, thanks for having me. Appreciate it, and yeah, thank y'all.

Kate:
Thanks for listening to PodRocket. You can find us at PodRocket Pod on Twitter, and don't forget to subscribe, rate, and review on Apple Podcast. Thanks.