Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show, a podcast all about front-end Web design and development. I'm Dave Rupert and with me is Chris Coyier. Hey, Chris. How's it going?

Chris Coyier: Hey! Fantastic! You know we were thinking it just gets drab around here when it's just Dave and I. Doesn't it? Come on. We know it's boring.

Dave: Blah... These guys...

Chris: Yeah, and we reached to the very top of our guest list and plucked off the best possible guest we can get, which is Ben Hong. How ya doin', Ben? Thanks for joining us on ShopTalk Show.

Ben Hong: Hello. Thanks for having me.

Chris: Yeah. Yeah and, in fact, I'm pro-Vue. I feel like everything Vue does has this glow of positivity to it, which is just a little hard to pull off in Web dev sometimes, but y'all managed to do it. You are part of Vue, right?

00:01:13

Ben: That's right. I'm part of the Vue core team. My work specifically usually revolves around the docs, and so I work with Sarah, Natalia, and the team on that. It's been great.

Chris: Yeah. That was a lot of work, right? Somewhat recently, although I don't know how you all think about it, Vue 2 to 3. That was a super-duper big deal.

Ben: Yep. Mm-hmm.

Chris: I think if you go to the Vue docs right now, it defaults to 2, right? What's up with that?

[Laughter]

Ben: Well, what's up with that is one of the choices we made when it came to releasing Vue 3 is that we knew that it was good for new projects, but we weren't necessarily ready for people to do a full migration from Vue 2 to Vue 3, whether it was having migration tools or just better extensions around that because the dev tools are still being developed, Vue X was still being finalized.

Chris: Yeah.

Ben: So, we didn't want people to get the wrong idea, so that's why the version 2 for Vue is the main docs right now. But, in the near future, we'll be releasing those docs merged together - once we have a finalized version out.

Chris: Merged together?!

Ben: Yes. [Laughter]

Chris: Wow!

Dave: Ew... Okay.

Chris: How interesting.

Ben: So, we'll have the V2 and V3 docs all at that same URL, so you don't have to go to V3.vuejs.org.

Chris: Oh, I see. I thought you were saying that there wasn't even going to be a difference between 2 and 3 docs.

Ben: Oh, no. [Laughter]

Chris: They'd just be all--

Ben: No, I wish. If only it was that easy. A lot of it is the same, but there are so many new things with Vue 3. It would be irresponsible to mislead all the V2 users to thinking they had everything that V3 has.

Dave: What's the sentiment around Vue 3? Obviously, a new -- what would you call it? -- hooks-y style API?

Ben: [Laughter]

Dave: [Laughter] But is the adoption, kind of what you're seeing, is that what you expect? Are you in a Python 2-3 situation? What's going on there?

00:03:03

Ben: Yeah. As far as adoption goes, I think the people who were ready to jump in and start experimenting with have gone ahead and done that. But I think the one thing we knew that was going to happen was more like enterprise-level applications are waiting a little bit more on this because a lot of the major dependencies like people using Vuetify or, for example, those who want to use Nuxt for all the static side generation, that kind of stuff is actually still in development. In that regard, we're still in a little bit of a holding pattern as far as the whole ecosystem moving forward as a unit.

Dave: Yeah. I think that's been my experience. I have a couple Nuxt projects, and I'm just kind of like, "Ah! I'm locked." [Laughter]

Ben: [Laughter]

Dave: Until a big update, but I think there's a big update coming.

Ben: Yeah.

Dave: But I'm just kind of stuck, you know, and feeling it a little bit. Not big but--

Chris: Well, let's talk about that kind of "greenfield versus not" idea a little bit because I think that's Vue, but I think all of us just generally, as developers, think about that. If you have this existing project, the calculus changes (as people like to say about what is appropriate and not appropriate to start with). Then you can kind of sit there and fantasize, "Oh, but what would I do if I could just do anything I wanted. Hmm... Anything."

I would definitely use Vue 3, right? Why would I start on the old version? If we scope the conversation to just Vue, are there a bunch of applications that are like, "Why even change at all? Screw it," right?

Ben: Yeah. Yeah, I think that's an important--

Chris: Yeah, and is Vue okay with that? There are definitely some frameworks that are like, "You should definitely move to the new version because we're going to end of life the old version."

00:04:45

Ben: [Laughter] No. One of the things I love about the Vue ecosystem is that we want to let people stay on those versions without feeling like they really need to jump that version. For example, the fact that there is a Vue 2 plugin for composition API means that for those who feel like the composition API can really help them (call it) make their application more flexible, there's a way to do that in Vue 2 without moving your whole application to Vue 3.

Chris: Hmm.

Ben: And so, for a lot of those things like that as well, one of the things we're also planning as a team is that there will probably be one final minor release for Vue 2, which will contain a lot of features from Vue 3 backported. Now, granted, you might lose some. You won't have necessarily the native reactivity that comes with Vue 3 and some of those performance optimizations, but from a feature set and if your site doesn't really need (call it) it's already in a stable version and you're not doing any major feature development on it, it might not really make sense to obviously take a whole effort to do that. We want to give people those options without feeling the FOMO of, like, "Oh, no! I can't use anything from Vue 3," kind of thing.

Chris: I see. That's pretty rad. That seems--

Dave: Yeah, it's not every day people are like, "You know, we're going to put all the features of React 19 in React 16 just because we figured out we could do that." But what are the differences between Vue 2 and Vue 3? What are the "oh, no!"?

Chris: Yeah. I absolutely don't know the answer to this, and I would love to.

00:06:12

Ben: So, I would say there are probably three things, in particular, that would make the difference, the first of which being if you want to use TypeScript in Vue 2 or Nuxt 2, this has been kind of notorious as far as not being the most ideal experience because it needed to be hacked in. Then if you were doing stuff with global stores, it was just kind of a bit of a mess working with that.

Now with Vue...

Dave: Okay. I hate TypeScript, so that's fine.

Ben: [Laughter]

Dave: I'll stay on Vue 2. Go ahead.

Ben: Yep.

Dave: No.

Ben: But at least for those who are -- especially for someone, like, I know people who were considering Vue at the time for building apps, they were like, "We want to use TypeScript, so if the experience isn't great on Vue 2, we'll wait for Vue 3." That's why I think there'll be probably a wave of adoption in that regard.

The other thing, I would say the big thing after that is this new style of architecting your app via the composition API. What Dave mentioned earlier regarding hooks-like (for those familiar with the React side of things). But the thing is that we did want to make it available for Vue 2, so I mentioned there is a plugin, but that's what Vue kind of introduced as an out-of-the-box enhancement.

We're also doing things as well like trying to make it more performant. Actually, I believe, Vue 3, even with all its features, is actually a decent percentage smaller than Vue 2 (out of the box). If you're really trying to fine-tune performance and that kind of stuff, that you would get out of the box with Vue 3 with better code splitting and that kind of stuff.

I would say, honestly, those are probably the main two things or, I guess, three things. TypeScript, composition API, and the bundle size are probably the first three things that would probably stick out to people when it comes to the difference between the two.

Dave: You're saying some of that composition API is getting shimmed backward? Is that sort of--?

Ben: Exactly. Yep.

Dave: But you probably lose the tree shaking.

Ben: Right. Exactly.

Dave: Well, sort of.

00:07:59

Ben: Then there are some new fine-tuning done with Vue 3's reactivity system, so things in Vue 2 that you'd have to set for, like, objects. You had to do a little bit of weird things with some of the nested stuff. It just works naturally (as you would expect) in Vue 3. You do lose some of that as a result but, at the same time, if you're starting a new project and you don't have to worry about all the Vue 2 dependencies, then I think Vue 3 is great, especially with -- we'll probably talk about this later -- the Vite project, which Evan, who created Vue (for those who don't know) started, and that's a whole thing going on right now, too. That's a whole wave.

Chris: There are so many directions to take this, but let's do that. Is that related to Nuxt? Nuxt 3 is not yet out. Is the point of Nuxt 3 that it's going to use Vue 3 and then thus Vite also?

Ben: Yeah, so the thing about--

Chris: Vite. Vite. Sorry.

Ben: Yeah, so "veet," "vite," you know it's all good. [Laughter] For those who don't know, I think Evan takes all his names from the French pronunciations. Vite, yeah, is actually separate from Vue, which is one of, I think, the nice things about the tooling. We'll speak about why shortly.

But for the Nuxt 3 question you had specifically, Chris, Nuxt 3 is not necessarily dependent on the Vite side of things. I think it is going to have support for Vite, but the main thing is that it will use Vue 3 underneath and then will also have a brand new rendering engine underneath. They're calling it Nitro. That's going to be one of the big things coming forward with Nuxt 3.

Chris: Mm-hmm.

Dave: Not a French name there.

Ben: No. [Laughter]

Dave: Didn't go French. Interesting.

Ben: Yeah.

Chris: Yeah, Vite seems like it's a big deal and it's pretty cool that it's not so tied to Vue because it means that other people can take care of it. Is this one of these things that's built on the GO thing, esbuild?

Ben: Esbuild, mm-hmm.

Chris: Mm-hmm. Sweet.

00:09:45

Ben: Yeah. One of the things that makes me really excited about Vite -- for those who don't know, think of it like an alternative to Webpack (a little bit), like a different way of bundling dependencies and that kind of stuff and hot module reloading and stuff.

It's nice to see the Web community converging on this so that it's no longer a Vue tool. The React community seems to be coming in on it, Svelte, and it's nice seeing everyone get alone [laughter] and try to work towards a common goal together.

Dave: For once, yeah. Well, I've been Nuxt, too. Again, I've got two projects right now. I think it was yesterday. It was like, "Can't get property zero of undefined." I'm like, "Where, dude?" I look in the console and it's just like bundle dot line 9000. You know?

Chris: Mm-hmm.

Dave: I just was like, "I'm never going to find this." I just had to do the old HTML thing where you common out big blocks of code to just find out where it's kicking. Then I just was like--

But Vite, I feel like (this is me), I think it solves that because the packing doesn't happen until later. It's very late in the process and it doesn't feel like it chews up all the files every single time or, even in the production bundle, it's a little more linear to what I just authored. I don't know. [Laughter] I'm excited about that because it was just like, "Dude, wherever this error is, it's somewhere." But I figured it out, but I had to do a weird thing. But anyway--

00:11:28

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you by the WordPress.com Growth Summit. It's wpgrowthsummit.com.

I've gone the last couple of years to this and I love it. The interesting voices, they get a lot of people from the WordPress.com side, Automattic, Web Components, and stuff, and then interesting people who have done and are building interesting businesses online. The amount of cool voices I have heard at it has been spectacular.

It's coming up August 17th and August 18th - depending on which day is what part of the world you're in, really. If you're in the Americas like me, it's from 11:00 a.m. to 4:30 p.m. Eastern Time, which translates pretty nicely Pacific Time, too, so it just depends there. the Asia Pacific side is on August 18th.

So, you know, it's kind of a one-day hitter with lots of interesting stories. It'll kick-off and then there'll be personal stories of achievements, dealing with business growth (in the digital world), growing your audience, growing your online business, all kinds of voices to level you up there.

It's just $25 and just a chunk of one of your days. I'm telling you it's a great conference, so check out wpgrowthsummit.com.

[Banjo music stops]

00:12:58

Chris: I got a question for y'all on the Nuxt thing while we're still on it because there are so many things to talk about. In my brain, there are these three Vue projects that all seem super related that I don't really understand what the point is or which ones are blessed and which ones aren't and all that.

Nuxt gets talked about the most. It has a crapload of GitHub stars. I think, of the three, it's the highest.

But the three are Nuxt, VuePress, and Gridsome. Maybe there are even more, but they're all super similar seaming to me, and I just don't get it. Not that there's 20 times more for React. It's not like a Vue problem. It's just what happens in my brain.

Ben: Yeah. I guess the differentiator between the ones you mention, let's start with Nuxt because that's the hard-hitter. That's basically the top meta-framework for Vue, so it really helps as far as routing extensibility from SEO and making things. It's a really phenomenal framework. They've done a phenomenal job with the DX of it. I could go on with the modules they've created.

For example, recently, they came out with Nuxt Image, which makes it so easy to create responsive images with one global component. Dave, if you haven't tried that yet, you've got to get on that. [Laughter]

Dave: I haven't. I need to because I think I have a project that could use it. Yeah, I don't know. It came out mid-project, I think, and that's why I just was like, "I can't do new things."

Chris: Perhaps the obvious thing, too, is that Nuxt kind of takes its name from Next, which Next is a very beloved framework from React and does a lot of similar things: the routing, the images, the static builds, and all that stuff. As far as I'm concerned, is also a phenomenally well-done project, so it's cool that they stay in step like that.

Cool. There's Nuxt, and that's from (for lack of a better word) y'all, right? That's Vue core, or not really?

Ben: No!

Dave: Big no. Okay.

Chris: No, it's not.

00:14:51

Ben: Yeah, it's outside of the Vue core team. Sebastien and Alex, Chopin, they're two brothers who started the project. They've been basically a part of the community this whole time, but they are their own entity. I believe they even raised money recently, so they're actually their own company and everything.

Chris: Oh, fascinating! I love the business angle, the stuff like this because it's always so curious. In tech, people used to make fun of software that was like, "What's your--? You have (seemingly on the surface) no business model at all." I've been seeing it more and more lately. Not necessarily accusing them of that because I have no idea what it is, but it is so interesting.

What if Gatsby took a zillion dollars? It's interesting when frameworks like this take money. It's like you wish you could have their slide deck because you're like, "What did you say? I want to be able to say that stuff." Then knowing Zac from 11ty--

Dave: What did you say? What combination of words gets me $50 million?

Chris: Yeah, exactly.

Dave: I really...

Chris: Somebody tell Zac because he needs to know the words.

Ben: [Laughter]

Chris: I don't think that's what he's looking for, but every time it happens on the Web, I hear him cracking jokes about 11ty like, "Hey, right here. Also have static site generator. Don't have millions of dollars."

Ben: [Laughter]

Chris: Okay, but VuePress has Evan's name at the bottom of it.

00:16:18

Ben: That it does. VuePress, unfortunately, that did not follow the French naming theme because a lot of people were like, "Oh, VuePress is WordPress plus Vue." That was everyone's initial reaction. It is not that.

Dave: That's it, right? No?

Ben: It's the farthest thing from it.

Dave: Oh!

Ben: It's basically an opinionated static site generator that takes a series of Markdown files and just spits them out on the page directory. Then it came--

Chris: Jekyll or 11ty for Vue.

Ben: Right, but one step further in that the theme is opinionated to being more documentation oriented. It was like the built-in sidebar, the built-in search. It's really designed to making a documentation site a lot easier. I think, actually, React's equivalent might be Docusaurus. That's basically what it is, an opinionate doc site generator. VuePress has VitePress, so those are the two parallels.

Dave: O-kay. But every Vue site you go to uses this. I think even the Nuxt site is VuePress. [Laughter]

Ben: So, they are coming out with a tool, actually. Based on their Nuxt content module, they came out with a tool called Docus. They'll be releasing their own opinionated docs generator as well, so that's something we can look forward to from the community.

Chris: Does it hydrate, as they say, VuePress, or no?

Ben: It is supposed to, but the funny thing about VuePress is it was kind of like Evan's brainchild after a weekend of hacking. He was like, "Look at this thing I built." Then it gained popularity.

Chris: Yeah.

Ben: It was kind of funny, but I would say for a lot of people, if they're starting a brand new doc site, VitePress is probably where they want to go because I think VuePress (at the rate it's going) will most likely be deprecated in favor of VitePress - just for internals and that kind of stuff. More importantly, depending on the levels of customization, you may eventually want to look into the Nuxt opinionated side because these are side projects that were experimented with and are very good for the use cases it was designed for but not necessarily designed to be an entirely plugin-able ecosystem.

Chris: Yeah. You've got to be careful when you're a mad scientist genius with a huge Twitter following, Evan.

Ben: [Laughter]

Chris: You can't just tweet stuff. Although, I think he's learned.

Dave: Can't just make projects. Yep.

Chris: He learned that because I remember the first tweet for -- what's the little one? -- Petite Vue, which we'll get to. Maybe let's not go there yet. He was very careful. He was like, "This is not open-source yet." You know? "I'm just telling you about it but don't use it." You know? [Laughter]

Dave: Yeah. It didn't even have an NPM package. He just made it with no NPM package and was like, "Don't. Please don't use this."

Chris: Yeah. He probably learned the VuePress lesson, like, I'm not ready for this to be an entire thing, please.

Ben: [Laughter]

Chris: But I don't know. That's putting words in his mouth. But before we go there, let's wrap it up with Gridsome. That seems more clearly not a core deal.

00:18:58

Ben: Correct. That is another -- a third-party framework that basically--

The Vue community saw what was really great about Gatsby and was like, "Why don't we make a Vue equivalent with a built-in GraphQL API and that kind of stuff?"

Dave: Oh...

Chris: Hmm...

Ben: That's Gridsome. If you really like Gatsby and you want to try the Vue equivalent, then I would say Gridsome is your match.

I would say it hasn't been as actively maintained, so that's the thing about things like Nuxt. Nuxt has a team that's paid to work on that constantly, and so I think that's one of the reasons it's as popular as it is, is because it's just been phenomenal with support and that kind of stuff, and feature development.

Chris: Right, and now they have theoretically millions of more dollars.

Ben: Right.

Chris: Yeah.

Ben: [Laughter]

Chris: All right, so that was a sad day for Gridsome, I'm sure, but still has 7,000 GitHub stars, so maybe they can do something with it.

Ben: Yes. Yes.

Chris: Yeah.

Ben: Absolutely.

Dave: My friend Zac built his site on Gridsome and loves it. He even tried all the other stuff.

Chris: Yeah.

Dave: He just was like, "This one fits me."

Ben: Yeah. There you go. See. I think that's what's great about having choices.

Chris: Cool. Yeah, I like the -- I don't know. I don't know what to think. The Gatsby thing was so interesting. Even as a fan of GraphQL as I am, the forcing of GraphQL in their special way is always--

Ben: Yeah.

Chris: It doesn't sit bad with me in, like, "I hate this" kind of way. It just sits bad with me in, like, I'm not sure that's how I super want to roll.

Ben: Right. It makes it harder for me to recommend, especially for people who are newer ... and say, "I want to build my portfolio, and I'm new to Web dev." I'm like, "I'm not going to add a whole other endpoint system to what you need to learn." [Laughter]

Chris: Even for an image, it's like, "Well, you've got to have a GraphQL file to query for your image." You're like, "No!"

Ben: [Laughter]

Dave: [Laughter]

Chris: I want to link to my image.

Ben: Source static - done.

Dave: I'm tired. Yes.

[Laughter]

Chris: Okay, so that's the three. I think that was explained very well. That's nice. Then we talked about how Vue 3 is smaller. How appealing is that - smaller?

We've had Evan on the show before, too, and he said some really cool things about how Vue is pretty dedicated to being able to work in the browser itself.

Dave: Yeah.

Chris: React can do that too, but it's kind of like wink-wink, never do this.

Ben: [Laughter]

Chris: You know? Like, that's not a good vibe.

Dave: I actually get angry when certain apologists online are like, "See, look. I used React without a build process." I'm like, "Brother, no one does this this way."

00:21:20

Chris: Well, because you kind of need the JSX too, right? You've got to at least do Babel to get the JSX.

Dave: Exactly.

Chris: So, that's not happening.

Dave: Yeah. Yeah.

Chris: There are lighter ways to do JSX. I think they're moving to a more abstracted version. Whatever. I'm not trying to be the apologist. I just say that because I run CodePen, there are lots of React demos on CodePen, and I like to see it because it's a sharing of knowledge kind of thing. But of course, in reality, we're all Webpacking our way through React. That's for sure.

Ben: [Laughter]

Dave: I mean but you're also Webpacking your way through Vue. Parts of Vue, like vue.component, works without it. But the dream state of Vue is authoring in these Vue files, like single file.

Chris: Yeah, they're beautiful. They're amazing.

Dave: I got my template at the top, my scripts, and then my scope styles at the bottom.

Chris: Template up top, a little controversial, I'll say there, Dave.

Ben: [Laughter]

Chris: [Laughter]

Dave: Uh-oh.

Chris: Scripts on the top.

Dave: Uh-oh.

Chris: You've got to have your imports at the top. Otherwise, how do I know what's--? Okay.

Ben: [Laughter]

Chris: Script on top.

Dave: Oh-boy. Okay. Well. Well.

Chris: All you "template on the top" people are crazy.

Dave: Auto-importers, that's what I'm going to say.

Chris: I'm just saying, from the zero Vue projects I run. I have some strong opinions about the--

Dave: [Laughter]

Ben: [Laughter]

Dave: Strong opinions on the zero Vue projects. Yeah, that's how I feel.

Chris: But I always remember that Evan said you can (and many people do) and it's almost a 50/50 thing that Vue is perfectly capable of running as a script tag in the HTML.

Ben: Yes.

Chris: That's a way that you can use Vue and is core to the philosophy of Vue, in a way, and that's really cool. I know that's appealed to you in the past, Dave. It appeals to me, again, as an owner of CodePen, and how you can use it so efficiently in that way. No disrespect to the .vue file and its beautifulness.

Ben: [Laughter]

Chris: But you don't get to use those if you're just running Vue as a script tag.

Then just not so long ago rolls out this Petite Vue thing saying that this is absolutely truly designed to be used just straight up as a script tag in that Alpine.js kind of vibe, like put some directives on some HTML and rock some stuff. What do you know about that, Ben? Have you poked around?

Ben: Yeah.

Chris: He calls it Petite because it's literally very small, right?

00:23:25

Ben: Yeah. To give you some comparison, I think jQuery gzipped is -- oh, gosh -- I want to say it's like 67 kilobytes. Petite Vue is only about 5.8 kilobytes.

Chris: Oof. Okay, so it's order of magnitude.

Ben: [Laughter] Yeah, it's significantly smaller, and so one of the reasons it's so performant and so small is because it literally uses the HTML on the page as the template. It doesn't inject a compiler where normal Vue (and, actually, most frameworks) have to take the DOM. They have to render it into the Shadow DOM, and they have to do stuff with render functions in order to attach things and change things. Petite literally walks the DOM itself and then attaches fine-grain reactivity to the pieces that you declare it to. Then it just walks away after that. I think that's what makes it so effective on the progressive enhancement side of things.

Chris: Wow! Why even call it Vue then? Does it share anything?

Ben: Yes, so it has all your directives, and it has a good number of features that are basically similar to Vue. It's just, to Dave's point, you don't get single file components and a lot of those other things you might naturally do from a vue.component. That would not exist.

Your goal is to attach fine-grain reactivity, then update what you need, and then walk away - really.

Chris: Hmm.

Ben: It's less about rearchitecting your site in a component model, but more like, "Okay, we have a thing built on Rails. Let's slowly enhance it. Then we can eventually move forward."

Chris: Yeah. That's awesome. It's certainly clicking with people. It's clicked with you, Dave. Alpine has a fricken' conference they run now, so there are people that are into this approach. To me, when I first saw it -- again, I'm not a deep user here, so a grain of salt everything I say -- is that there's still an intense not only nostalgia but use of jQuery.

Ben: Mm-hmm.

Chris: Just like this is something HTML and find stuff, do stuff, and all that. And at the same time, a distaste for those "mistakes of the past" in that there were some problems with it. I lived through those problems in a big way. I lived through the success of it on certain sites and I lived through the pain of it on other sites being like this is fragile. This is bug-worthy. This is hard to reason about. There's not enough help for the things I need help for. There's too much weight for the things I don't need weight for.

I get it when people are like, "jQuery is dead to me." That was not a good development approach. Maybe some of it was that (during that era) it was so discouraged to have an inline click handler.

Ben: Mm-hmm.

Chris: You'd have been bastardized. No, you put an ID on the element and then you get element by ID or, in jQuery, you just did the dollar selector thing, and then you add the click element over there. There's a total separation between the code that handles the click and the HTML and everything. That was gospel, like, "You do this. Otherwise, we're going to yell at you."

It's just gone. These days it's like, if you're going to have a button, there's a click handler in the HTML or the pseudo HTML, like the thing that becomes HTML or the DOM later.

Ben: Right.

Chris: I feel like things like Petite Vue embrace that. Let's not separate that crap anymore. The separation of it was a mistake, in a way. It wasn't a mistake or what?

00:26:53

Ben: You know I think, like any technological methodology, the moment you go pure one way or the other it always forgets the edge cases and why the two ends even exist. And so, it's also like--

I know when I was first learning CSS, it was like no inline styles. Right? That was terrible. Like you said, you have a class. You try to represent specificity. But clearly, with more dynamic styling now, especially with leveraging that, inline styles have their place rather than call it using super high specificity.

Of course, anything else, you have to use it acknowledging the tradeoffs and architecting them in a way that doesn't have weird side effects everywhere. But I think that's a key thing with picking these methodologies is understanding the tradeoffs when making them rather than just blindly following dogma, right?

I think the worst is, "Do not repeat yourself," and I just see people arbitrarily abstracting code early on because they're so afraid of repeating themselves. There's nothing inherently wrong with repeating yourself. Just don't do it to the point where it slows down development - kind of thing. I'm all about data-driven refactoring.

Chris: Avoid the premature optimization stuff. Just because I just said, "Oh, maybe that was a mistake to add click handlers over there," now I'm being just as dogmatic as the original thing was.

Ben: [Laughter]

Dave: No, it's interesting. I feel like -- you know I'm a big fan of vanilla JavaScript. Love to write it and use it. But if you write whatever -- document dot query selector my button dot add event listener -- or you loop through a bunch of buttons and add an event listener, if you do that more than ten times, you're just like, "Man, we are just--"

Ben: [Laughter]

Dave: You know. And it's not just that. It's like, on load you've got to do stuff and all that. You do that a few times and you're just like, "Man, we are just writing a bunch." [Laughter] You have these bricks of code at the bottom just to wire crap up - or whatever.

There's some casualness of @click and Vue and Petite Vue where you're just like, "@click, do this thing," and I see what it's going to do when I click it. I don't have to go to a different file to find out what happens when I click that button. It tells me what that button is going to do.

Chris: Right. And you don't have to worry about rebinding it either. You know?

Ben: Exactly.

Chris: I remember when Ajax became more and more popular. There was always that, like, "Sure, you query selected for the element," but there's been some DOM changes since then.

Ben: [Laughter] Yup.

Chris: Now I've got to worry about rebinding. I don't want to. Then we wrote everything with these -- what was it called when you attach a click handler that just would listen to the bubble up of the thing? Delegated.

Dave: On--

Chris: Delegation.

Dave: Yeah.

Ben: Yeah.

Dave: Yeah. jQuery, I think--

Chris: Yeah, and then you're debugging problems because some element somewhere stopped propagation on it (or something) and you're like, "Whoa! That was the worst bug of my life."

Ben: [Laughter]

00:29:51

Dave: Yeah. Yeah. Nah, anyway, I like Petite Vue. My little bookshelf on my website, I added Petite Vue in there. I wanted this little filters thing, like you filter by category or whatever (for a long time). Simultaneously, I was searching for, like, "Oh, I'd like to play with Petite Vue but I don't want to make a to-do list. I want to do something interesting."

Ben: [Laughter]

Dave: Then one Saturday I just was like, "Oh, you know what? I could maybe do the filtering in Petite Vue." Man, it took like an hour and I just had all these hundreds of books I've read now can filter by category and stuff like that. It was cool. It was successful. I don't know. Comparing. It's weird. There are some -- to borrow the French term - je ne sais quoi about the difference between something like this and Alpine.

My experience with Alpine was very much in a Tailwind (because that's kind of the default) -- it was like a Tailwind context -- and I did not have a good time. I don't know if that was because of Tailwind, like hundreds of classes kind of turning on and off, or if it was an Alpine thing. I can't really remember my experience, but my experience in Petite Vue was really awesome because I was working in Vue that week and then I used Vue on the weekend all on my Jekyll site.

Chris: Nice. Nice. You mentioned how fast it was. What does that mean exactly in this case? The DOM manipulation felt fast?

Dave: Yeah. You would think -- I don't know -- you're like inhaling a library to go, like, just do if whatever -- Vue if V if, or whatever.

Ben: Mm-hmm.

Dave: V-if. Go do V-if on hundreds of divs. You'd think you'd see some groans from the browser, just like, "Oh... yeah. I got most of them, but a few of them are coming in kind of late." You know? You'd think you'd feel that.

[Laughter]

Chris: Yeah. No, this does feel fast in that way. But I thought maybe that would be like CSS's job or something, but maybe not.

Dave: Well, yeah. CSS is just display none or, actually Vue is display none.

Ben: It depends. Yeah.

Chris: Really?!

Dave: Oh, really?

00:32:09

Ben: There are two different directives in Vue. There is the V-if and the V-show. It's because, with the V-if, you're actually destroying the DOM element and removing it entirely from. That way screen readers and stuff aren't picking it up.

Dave: Okay. Yeah.

Ben: But V-show will toggle it frequently, so it's basically a performance decision on how often those elements are being recreated.

Chris: Hmm.

Ben: A modal is something you would want to hide and not destroy and recreate from a performance perspective.

Chris: Isn't that fascinating?

Ben: Yeah, so that's why we have the two.

Chris: I remember, in the jQuery days towards the end (not that it's over, but the end of super popular usage) that .show and .hide in jQuery had similar issues and were revamped a couple of times to deal with the complexities of hide and show, one of them being what if your crap is inline-block?

Ben: Mm-hmm.

Chris: Then it has to remember what it was when you show it again because it can't just display block it because that's not the correct thing. I don't remember if that was all it.

This is nicely done, though, Dave. I like how it's input radio, so as you're using your filters, you can even use the arrow keys.

Dave: Mouse. Arrow keys. Yeah, just arrow keys through it. Feel how snappy it is? It's not groaning at all. I am using Vue show, so it's just display none it.

Ben: Yeah. Perfect.

Dave: It doesn't have to reinject it into the DOM again.

Chris: Oh...

Ben: A great example of Vue show.

Chris: I think you should use opacity, Dave.

[Laughter]

Dave: Well, all right. I'll take art direction, I guess.

Chris: Yeah.

Ben: [Laughter]

Chris: Use a transform scale to get rid of it.

Dave: Well, immediately, I made this, and then Brian Kardell was in my DMs saying, "You could use spicy sections for the years," and make tabs like this tabs thing we're working on in open UI. I might make a spicy bookshelf, but we'll see one day.

Chris: It's nice to have side projects, isn't it? I'd hire you just for this, Dave, if I was hiring a front-end dev and was like, "What's an interesting project you did?" I'd be like, "Look, I used this brand new library and I had these ten considerations. I made it accessible. I made it fast." That's impressive, and you just pooped that out in an hour in the afternoon. That's what a senior developer you are, Dave.

Dave: Working on the weekends, yes. [Laughter]

Ben: [Laughter]

Dave: No.

Chris: [Laughter]

Dave: For zero dollars, that's basically a senior developer.

00:34:24

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Hub and specifically HubSpot's CMS Hub. It's a developer-friendly CMS designed to help businesses grow.

On August 3rd -- which, as I record, was yesterday -- HubSpot launched a new tier called CMS Hub Starter for $25 a month. Hub Starter comes with all the features needed for fast, secure, reliable websites including SSL, a firewall in front of it, globally hosted CDN, all really good stuff.

A lot of CMSs can be rather opinionated about how you then build the site around the CMS. Well, not CMS Hub. You're still building locally. Even though this is cloud hosting and the CMS is in the cloud and all that, you're still building locally with all these tools and the frameworks you prefer. However you like to build websites as a front-end dev, you can do it.

From there, if you want to upgrade to CMS Hub Pro or Enterprise for more advanced functionality and develop sophisticated user experience, use stuff like personalization (which is pretty rad), and dynamic content based on CRM data (also very fancy), those kind of features are on higher plans. Learn more at hubspotdev.co/cmshub.

[Banjo music stops]

00:36:00

Chris: We didn't talk about Netlify yet. We do have Netlify people on the show all the time. It's because you all hire a bunch of really good people, I think. You're all very interesting. What's life like over there?

Ben: Ah, yeah. Life's been good. Lately, we've had a lot of exploration. I think we've explored Shopify's new headless cart for their storefront API, so that's been kind of fun, and just kind of exploring the edges of things.

I think one of the tricky things about a team that's either dev REL dev experienced is that a lot of us are specialists in our own areas, so we have Tara who is in Angular, Cassidy in React, and so a lot of times it can feel a bit like a silo when working. It's nice to have these group projects to come in together to bring in all our various expertise. Yeah.

Chris: How does the Shopify thing work? Do they have an API that's like, "What's in my cart right now?" Is the end goal that I would build a literal e-commerce site that's powered by Shopify but deployed on Netlify? Does it go that far?

Ben: Basically, yeah. It's like a headless e-commerce. What's nice is that, previously, to manage a cart, you needed the admin credentials. You can imagine, sometimes in a larger company, you don't want to necessarily share admin credentials with all your developers. It's nice that they have the storefront API that's more like public key allowed to have kind of thing. Then you can manage the cart and do all those fun things using your favorite framework and just deploy it on Netlify and it works.

In fact, actually, Jason, if you didn't see his recent Twitter, is selling his little Corgi toy. He built that whole checkout page using the Shopify endpoints we built together.

Chris: Wow! Shopify wants you to do this. They're not saying, "Hm, yeah. Technically, we have APIs, but happy path is to stay on Netlify - or stay on Shopify." Ooh, God. The -ify is killing me.

Ben: [Laughter] Yeah, I know. I accidentally type "Netflix" all the time, so you know. [Laughter]

Chris: Nerd.

Dave: No, I think it's cool because a lot of companies probably have a system. Then you're like, "Okay. We want to sell stuff," now you're like, "Cool. We'll hire Liquid developers," or whatever. [Laughter]

Ben: [Laughter]

Dave: You know?

Ben: Yeah.

Dave: You can get -- well, back to Petite Vue, it would be great for a Liquid site. But you know, because you're just like, I think my brother works on a lot of Shopify sites and he's just got all this jQuery going just to get these configurable products and all this stuff. It's hard stuff. Yeah, this would go -- I mean I don't know. But if you already had a system or a design system in something else, you could just leverage that.

Ben: Yeah.

Chris: What about the cart? You're saying you have access to cart information, but do you still have to build your own cart then? Do they have a cart component or something you can--?

Ben: Not yet, but that certainly is an opportunity for them to have a cart component library, right? Or even just within the frameworks to help. Yeah, to be honest--

I definitely had to build my cart from scratch, so that was managing everything, so it was a little bit of work but probably should be something that's open-source and shared so other people can leverage it.

Chris: Yeah, I mean Stripe does that crap. Right?

Ben: Exactly.

Chris: "You want a checkout form? Here's your React component," or whatever else kind of component.

Ben: Yep.

Chris: It's kind of nice - kind of nice. I just think it just feels weird for me for some reason. Doesn't that open the door for dark patterns and crap that they wouldn't want you to do through Shopify?

Ben: It is a bit on the newer side, so if you are checking the docs, I believe it's still technically under the unstable API, so they're basically getting ready to finalize it, so we got a bit of a sneak peek. But otherwise, like a lot of headless solutions, the dark patterns always exist in those exploitations, but it's up to the developer if you're going to take that level of freedom to make sure you're responsible with those pieces.

00:39:46

Chris: There are laws of connections between your Vue world and the Netlify world, sometimes, and things like Vite because Netlify has features like -- I think we even had Jason on to talk about it a while back -- on demand builders and stuff, which we're seeing interesting use cases for. But wouldn't that be highly relevant to a framework like Nuxt, too? Like, "I have a 20,000-page Nuxt site and I don't want to build them all."

Dave: Oh, like my 12,000-page website?

Chris: Yeah. [Laughter]

Ben: [Laughter]

Dave: It took 30 minutes, 40 minutes on AWS.

Ben: No?!

Dave: Yeah, I'm curious what's going on.

Ben: You had a 40-minute build?

Dave: Yeah. It was rough. We had to back out and end up doing a Nuxt server because the pre-generation just kind of--

Chris: Hmm. Couldn't do it?

Dave: We couldn't ethically support it. Well, it just slows you down too, you know.

Chris: Okay. Well, interesting. Right? That's kind of what on-demand builders is designed to, as far as I know. I'm not super -- I'm not plugged into the Netlify world. Yeah?

Ben: You know it's funny. I think a lot of the discussions these days around Jamstack and static sites, a lot of people are always like, "Well, we were doing this a long time ago. Why are we making it seem like it's something new?" I think it's less about -- it's sort of taking the retro techniques we used to use but then sort of adding the spin with the new capabilities we have.

Static site generation, for example, we were doing that way back when. But now it's like, as we get more advanced with caching and those sorts of things are more available, then (as you mentioned) the on-demand builders, think of it (for others who are new to this) as incremental static generation.

Chris: Right.

Ben: In the sense that you build your first -- you build the 100 pages that you know are trafficked the most and then the rest of the 11,900 that Dave has, those are basically on the sidelines. When people request it for the first time, it's built and then cached. Then after that, it's basically "statically generated." Then it just pervades from there. That way you have the hybrid approach, which I think is going to be a lot more popular as services offer that for us out of the gate.

Chris: It leverages old ideas, and I think that's a strong point. Try not to--

It's almost like responsible marketing, which is almost weird why you'd even bother.

Ben: [Laughter]

Chris: Why don't you tell people this is the greatest thing you've ever seen in your entire life, and it's brand new, and only we can do it? But anyway, you have to then tell all these frameworks that already exist and weren't built this way, can you please have an API for building one page? I'd say most site builders don't work like that. They build them all because that's what you normally expect, so there's going to be their weird long period if you can convince them that this is a good idea that they do it at all.

Ben: [Laughter] I think it is though because, for example, I think the dichotomy of the old idea was like server-side rendered, right? Which is like, you have a server that's running all the time with the thing to build versus static, which is you build everything upfront.

I think the nice thing about this incremental model is it lives in a bit of both worlds where you don't have to pay the cost of having a server constantly up because you're afraid someone might need to build something. But at the same time, you have the static generation of the stuff you really care about and then layer it on together. I think that hybrid model will become a lot more popular amongst the frameworks.

Chris: I think, just in listening to the Astro people ... a brand new framework that I try to watch because I think it's cool, they have this on their radar. They know. I think they can sense that this kind of thing is a future thing. Now that their framework is so new that they can be like, "Well, we should definitely have an API for page-level building." I think they already do so that it's going to support this. I don't think I've seen a demo on Netlify yet, but it's like, "Don't worry about it." I don't think there's a hell of a lot of 12,000 page Astro sites just yet.

Ben: [Laughter]

00:43:29

Chris: I do have a question for you to help me. This show is not sponsored, by the way. This is just Ben on the show, you know.

Ben: Yes.

Dave: But we do have a buyout price.

[Laughter]

Dave: There is.

Chris: We'll do a full site takeover. Let's talk.

Netlify does sponsor not only this show but other things that I do in the past. I'm forced to write paragraphs about Netlify (in a positive way). Force doesn't sound like a good word. I like writing about Netlify.

Ben: [Laughter]

Chris: I use the word Jamstack because I think people get it, so that's fine. But I do often -- almost always -- end up using the word "static hosting" somewhere.

Ben: Hmm.

Chris: I wonder if that's -- you know? But then I always kind of disclaimer it or talk about how you can do dynamic things, too, and how easy it is.

Ben: Yeah.

Chris: That's the point of Netlify and stuff. Are we going to--? Should we stop saying static or is static still cool? I guess I admit that I kind of like the word a little bit still, but once you're on Netlify, you're starting to do so much. It's kind of the point of Netlify that it's not just static, in a way. You almost reach for Netlify on purpose because of the ability to do non-static things.

Ben: Right. It is a tricky thing, right? Even as I was trying to talk about (call it) the future, it is that kind of hybrid static on-demand generation kind of thing. Right? And so, I think it's hard.

In fact, even with Jamstack because I know that term has also mixed feelings amongst the community sometimes as far as, like, "We were doing that before. What's new about JavaScript API Markup?" I think it's more about being intentional about that decoupled architecture so that you know that when you deploy your front-end, that's your front-end, versus these are atomic deploys, so they're unique and you don't have to worry that you're serving up something that's old and cached by accident by an older CDN and that kind of stuff. And it's all taken care of for you, right?

To your point, Chris, then you combine serverless functions on top. Then what parts of it are static? What parts are being [laughter] like now it's dynamic? It's really a tricky situation these days.

Dave: I started doing -- I'm working on an application and I'm having trouble. It's at the point where I'm having trouble visualizing how it all works. I used Mermaid.js, which I think you've used in your Obsidian trial.

Ben: Yep.

Chris: I've played with it. It's like a chart builder thing, right?

Dave: I love it. I might just put it in every text area I ever write. [Laughter] Yeah, it's basically Markdown for charts, like flowcharts as complex as you want to get.

I started mapping this out and then I got to, like, okay, we deploy via Netlify, then Nuxt builds, and then Netlify builds the serverless function. It was like serverless functions, how do they fit into my front-end back-end chart? Because the code, I deployed it to my front-end boy and now my front-end boy is building out this ghost back-end that talks to the database. It was hard to model even.

Chris: Hmm.

Dave: I wonder if that adds the confusion to just the whole process.

00:46:42

Chris: There's this company called CloudCannon. Again, not a sponsor here. Their CEO Mike is writing a blog post for me. I was like, you know, we were going through the back and forth, what's the point and all that.

It was kind of disambiguating some of these terms a little bit, at least in his opinion, because his company is like a Jamstack agency, essentially. He really disambiguates static and Jamstack, which has me thinking about it. In part of the article, he's like, "Here's some stuff," and then he applies a label to it. It's like, "That, that's static."

Ben: Oh!

Chris: "That, that's dynamic." Then there are these ones where he's like, "That,

Ben: Interesting.

Chris: Those are two different things in his mind. I was like, "You know what, Mike? I think you might actually be right." Not that you couldn't absolutely host an entirely static site on Netlify and have a great experience doing that.

Ben: Right.

Chris: But to be Jamstack, maybe it's starting to mean -- it means you're doing something more than static, which is controversial, I'm sure.

Ben: No, I actually see merit in that, actually, and it might actually help people to better understand that Jamstack is less of a fixed label on things. It's more like a pattern of architecture rather than the output at the end of the day.

Chris: Yeah. It is tricky. I remember a Twitter conversation. This was probably years ago now. They were curious about the word, curious in that kind of like put off developer kind of curious.

Ben: [Laughter]

Chris: Hitting you with extra hard questions kind of thing. I'm like, "Listen. I'm not the Jamstack official coiner, but I will tell you my opinion," you know?

Ben: Yeah.

Chris: He's like, "Let's say it's a React site and it's just a div," div ID root or view or whatever.

Ben: Yeah.

Chris: Something has got to mount, so when I ship my static HTML, it's a file. It's index.html.

Ben: Yeah.

Chris: With root in it. Then from there, it boots up and hits APIs and gets the data and mounts the entire application later. As far as static files are concerned, it's basically two or three files: an index.html file, a bundle.js file, and probably a CSS file. But maybe even that we bundle our styles. Maybe it's two files.

They're like, "Is that Jamstack?" I was like, "Yes." It's not spiritually Jamstack.

Ben: Right.

Chris: [Laughter]

Ben: I mean that's fair, though, right? I think that was one of the challenging things with the way the original acronym was created, right? That's why it used to be spelled J-A-M because it was emphasizing JavaScript, API, and Markup.

Chris: These three things, yeah.

Ben: But lately, I think recently we've changed the spelling to actually go lower case with just the

Chris: The spirit of it, yeah.

Ben: Yeah. Exactly. Right. That's why I like what you said, the spirit of it in that it's really more about your content, as much of your content being static as possible because you're trying to serve things as close to the user as possible rather than having to have them jump through hoops.

Chris: That was interesting. That's tricky. Maybe we could start saying no to that now because it's not in the spirit anymore.

Then I asked this question. I forget who I asked, but it was somebody from Netlify. Is every single site on the entire -- on Netlify, every single solitary one of them Jamstack? I think the answer at the time was, "Yes, they all are. Every single one of them is because that's what we offer and that's the kind of definition of Jamstack." I was like, "That's weird too," but sure, I guess. But maybe we start to rethink that a little bit, but I don't know.

Ben: Yeah. I'd be willing to question that as well, personally. [Laughter]

Chris: Yeah. [Laughter] Well, okay. We spent a lot of time talking. Is there anything else you'd like to make sure we get into this podcast that literally 15, 20 people listen to? This is a big deal.

Ben: Whatever. [Laughter]

Chris: [Laughter]

Dave: Nuxt 3, when is Nuxt 3?

Ben: All right.

Dave: Tell me. Leak. [Laughter]

00:50:31

Ben: Yeah. Nuxt 3 deets. We don't have week-level details but I can tell you that, at this point for those listening, the public beta is slated for September of 2021, and it's currently going through a private beta. Then the stable is still slated for Q4 of release. If you haven't worked much with the Nuxt team, their stuff is really solid when they release it, even in beta, so I recommend once the public beta goes out, be sure to basically start playing around with it because (in my opinion) it won't change that drastically between that and stable.

I guess a resource for everyone listening would be preview.nuxtjs.org. The username nuxt, password nuxt, all lower case.

Chris: Ooh...

Ben: Then you'll be able to keep up with what the team is releasing.

Chris: Juicy. Thank you.

Dave: Nice. Exciting. Then I have another question. Okay, Dave Rupert makes Nuxt sites, uses Vue. I feel like there's stuff I don't reach for, like middleware.

Ben: Yeah. I rarely touch that.

Dave: Yeah, I'm not -- I don't use that. Is there a resource you'd recommend for somebody who knows Nuxt but wants to next level, like maybe the intermediate to expert phase?

00:51:43

Ben: Yeah. There is a course actually right now by Josh Deltener (who is one of the Nuxt ambassadors) called Mastering Nuxt. That's a great resource to check out. I think they just finished the final lessons recently.

Then I guess a shameless self-plug, but we are also doing a bunch of Nuxt stuff on the Vue Mastery site, so if you've enjoyed animation-style teaching and video content, be sure to check us out there.

Otherwise, I do live streams as well every week. If you have Nuxt questions and stuff, come by, hang out. But for those who are experienced with Nuxt, check out Nuxt Content and Nuxt Image. Those two are gigantic game-changers from a developer experience perspective. The docs there, honestly, will do you a lot of good, so that's where I'd start.

Dave: Awesome. Thanks. Appreciate it. Well, I mean I guess on that note, we should probably wrap it up. Ben, for people who aren't following you, giving you money, and watching your Twitch stream, how do they do that?

Ben: Yeah. You can find me on the Internet of Things under the moniker bencodezen on, I think, all of them: Twitter, YouTube, Twitch - you name it - CodePen. I've got it all. [Laughter]

Dave: Perfect. Awesome. All right, well, thank you. Thanks for coming on the show. We really appreciate it.

Thank you, dear listener, for downloading this in your podcatcher of choice. Star, heart, favorite it up. That's how people find out about the show. Follow us on Twitter, @ShopTalkShow, for tons of tweets a month.

Guess what. We've got some merch. Hot new merch just dropped. A brand new coffee mug. You can just enjoy coffee.

Chris: Oh, yeah. That's right. We have a coffee mug now.

Dave: Sip your hot drama in the morning. It's flying off the shelves.

Chris: Yeah.

Dave: Yeah, and if you want to hang out with us, you can head over to the D-d-d-d-discord, patreon.com/shoptalkshow. Chris, do you got anything else you'd like to say?

Chris: Oh, ShopTalkShow.com.