Coding Blocks - JAMstack with J.A.M.

Episode Date: February 4, 2019

We learn all about JAMstack in real-time as Michael lowers the bar with new jokes, Allen submits a pull request, and Joe still owes us a tattoo....

Transcript
Discussion (0)
Starting point is 00:00:00 You're listening to Coding Blocks, episode 99. Subscribe to us and leave us a review on iTunes to hear more using your favorite podcast app. And visit us at CodingBlocks.net where you can find show notes, examples, discussion, and a lot more. Send your feedback, questions, and rants to comments at CodingBlocks.net. Follow us on Twitter at CodingBlocks or head to www.CodingBlocks.net and find all our social links there at the top of the page. With that, I'm Alan Underwood. Oh, I'm Joe Zach and I'm a millennial. What? And I'm Michael Outlaw. What?
Starting point is 00:00:36 This episode is sponsored by Datadog, a monitoring platform for cloud scale infrastructure and applications. Datadog provides dashboarding, alerting, application performance monitoring, and log management in one tightly integrated platform so you can get end-to-end visibility quickly. Visualize key metrics, set alerts to identify anomalies, and collaborate with your team to troubleshoot and fix issues fast. Try it yourself today by starting a free 14-day trial and also receive a free Datadog t-shirt. Head to www.datadog.com slash codingblocks
Starting point is 00:01:14 to see how Datadog can provide real-time visibility into your application. Again, visit www.datadog.com slash coding blocks to sign up today. All right. So today we're going to be talking about a subject that Joe has been excited to talk to us about for a while, and that's all things Jamstack. But first, let's take a moment to say thanks. Yes, let's do.
Starting point is 00:01:43 So as always, for those that took the time to leave us reviews and several of them actually mentioned that, you know, after months of being asked, I finally did this. Thank you for doing this. So in iTunes, we have Scooby Bee Jesus, Mike McDev, and Krausling. Yeah, on over and can't say Stitcher, but you can probably say the say the names. Yeah. So, yes, Stitcher. can't say stitcher but you can probably say the say the names yeah so yes it's a stitcher you've got uh machiavelli askarov and brick gw man that's machiavello man come on yeah and macco yeah i'm sorry all right and then one that uh i found that had slipped through somehow i wanted to say a special thank you from an email review that we got from Travis T. Yes.
Starting point is 00:02:29 Not Travis T. No, yeah. He didn't say whether or not to specify his full name, so I'm doing him the favor of assuming that he doesn't want his full name mentioned. But Travis knows who he is, and we thank you, Travis. Yep. And this Jamstack, is that people that like to eat pancakes with jelly on them or is this? Yes.
Starting point is 00:02:47 Did anybody else think that? Chocolate chip pancakes. I hope that you're listening, that you are ready for a night full of jokes just like that. Classy. They're always classy. Wait, are you trying to say that they're not going to get any better? Hold on.
Starting point is 00:03:04 I mean, it's only going to go down from here. I do have some jokes for you. Hey, are you trying to say that they're not going to get any better? Hold on. I mean, it's only going to go down from here. I do have some jokes for you. Hey, do you? I do. Let's get one. Oh, you want one right now? It's been a while, man. Okay.
Starting point is 00:03:14 So this will be, I'm going to give some credit where credit's due on these jokes as we go through these. So from Nathan, these are old too. Like we received these a while back, long time ago. So Nathan wrote to us and said, a guy walks into a bar and asks for 1.4 root beers.
Starting point is 00:03:33 The bartender says, I'll have to charge you extra. That's a root beer float. The guy says, in that case, make it a double. I like it. That's good.
Starting point is 00:03:43 Very nice. I'm setting the bar for where the jokes are going to be for the evening. That's a perfect one. Prepare yourself. All right. All right. I don't know if I can. Okay.
Starting point is 00:03:53 Let me say this. You've been warned. All right. And speaking of warnings, I just want to let you know ahead of time, this episode does heavily reference front-end coding. So if that's something that offends you or triggers you, then you might want to skip this episode. That's ridiculous. Oh, you know what we didn't put in the news that we should?
Starting point is 00:04:12 Because this is going to be leading up to it, I think all three of us are going to be in Orlando March 30th. Is that right? March 30th? One of the marches. It's either 29th or 30th. Don't quote me yet. But at Orlando Code Camp, we're going to be down there. So anybody that wants to come out and say hi to us, we're actually doing a booth at Orlando Code Camp.
Starting point is 00:04:35 I think Joe and I might be speaking and Outlaw might get roped into a talk. So, yeah. I mean, if you're down that way, definitely come say hi to us. Kick Joe in the shins. I'll watch and laugh. And, yeah, I mean, if you're down that way, definitely come say hi to us. You know, kick Joe in the shins. I'll watch and laugh. And, yeah, that's it. Hopefully that'll give some time for people to know to be there. Yep, and looking forward to that.
Starting point is 00:04:54 And so that's going to be fun. I'm going to be hopefully talking about search stuff. I was tempted to talk about Jamstack, actually, but I was afraid that with people in the actual audience that I might get called out on my jam stackiness. So I don't know about that. I don't know what I'm talking about. I submitted the topic and I honestly forgot what it is.
Starting point is 00:05:13 So I might talk about something. What would be hilarious is if you forget what the topic is and can't go back and find it. And you come up with another talk on something else. And then everybody shows up and they're like, wait but it would be like hilarious in like a really bad way so i say that that's like really disturbing that i would find it funny but there would be some humor to it i think that might actually in like a very dark way i think it might happen dude because these forms that you submit online to these places they go off into the ether and unless you copied and pasted that stuff somewhere it's gone like i
Starting point is 00:05:45 have no idea what it is all you know it would just all you got to do is just ask i'm sure they'll tell you like what you signed up for or better yet it's probably listed on the site hey don't talk sense to me yeah whoa hey this this is not some backbard this is orlando you can log in and see exactly what you submitted and you can even edit it right now. See? I don't believe that. See? Yeah, man, totally. And Santosh, if you're listening, Alan is totally kidding about not knowing what he's talking about. You just got to be resourceful. That's all it is, man.
Starting point is 00:06:13 Whatever. And the website for the conference is actually all open source. So if you want to add some features in there, you can actually do that online. Excellent. Or some crypto mining. Yeah. So sorry for the derailing. Definitely sneak in some crypto mining. Yeah. So sorry for the derailing. Definitely sneak in some crypto mining.
Starting point is 00:06:27 All right. So speaking of crypto mining, and actually this has nothing to do with crypto mining, we're going to be talking about Jamstack tonight. And if you're not familiar with the term, then you're in good company because a lot of people haven't heard of the term. It's kind of a newer kind of way of dealing with creating websites and web apps that's gaining popularity. And I'm really excited about it for various reasons which we're going to get into but i also could see why it's kind of controversial and so i thought
Starting point is 00:06:53 it would be a fun topic for the show cool and actually i think uh glanks i think we owe glanks g flanks for uh this idea actually so it wasn't so much my idea but he got me into it so So thank you. And first of all, what Jamstack stands for, right? So there's the jam in there. And we've got JavaScript, APIs, and markup. And these are three words that you probably know, even if you're not familiar with Jamstack,
Starting point is 00:07:19 because it's really common. These are things that we know how to deal with as programmers, right? Doesn't that sound like just all the normal stuff that we already do? Yeah, I was going to say that's kind of what it is. Yeah, absolutely. And so there's really nothing groundbreaking or crazy about this approach. It's just kind of taking away a few things that are outside of that that are typically involved in web applications, getting rid of those things, treating them like third parties, and then using some kind of modern tooling and some services that are out now and popular
Starting point is 00:07:50 in order to really make these things kind of gel and excel. Sorry, you guys aren't laughing. I thought it was pretty good. Gel and excel. All right, sorry. I'm trying. Hey, man, I set the bar for where the humor was supposed to be for the evening.
Starting point is 00:08:07 What are you doing? Yeah. Starting off 2019 with a wah-wah. All right. So the definition of JAMstack as given by the JAMstack people over at Netlify who actually coined the term is modern web development architecture based on client-side javascript reusable apis and pre-built markup same thing kind of said earlier but um i think it's really important there to highlight that this was done by netlify this is coined by netlify and really promoted by them heavily and they're a company that we've talked about before that does
Starting point is 00:08:40 basically static site hosting and they they have a couple services that they use to make money. Like you can do forms or they'll actually make your life a little bit easier for some serverless functions type things. And they can do auth for you for a little bit of upcharge. But for the most part, they're kind of a CDN company, right? Maybe I'm getting ahead. And if it is, then you can definitely delay the answer to this question. But how is this different than like a React app? And if it is, then you can definitely delay the answer to this question.
Starting point is 00:09:11 But how is this different than like a React app, for example? React would be a great way of building a JAMstack site. Right. So I think – So we're just giving a name to something that already exists is what we're saying? Sort of. What wouldn't be a JAMstack would be mvc standard dot net application right like that's probably an example of of one where your where your server side's kind of bundled to your front end code right yeah so like in 1998 if you
Starting point is 00:09:39 would ask me you know joe you're building a website. What are you doing? And I would have told you, you know, HTML and maybe, maybe if it was late 1980, 1998, 1999, I might've said DHTML, right. Or, uh, you know, 4.0 transitional or something, right. XHTML. But, uh, pretty much from like 2000, you know, 2001 on, if you would have asked me what I'm building my site in, I would have said Cold Fusion, PHP, ASP, Ruby on Rails. But hold on. Let's back up, too, though. What you said about React is true, except for this little thing there at the end that I think we should have an asterisk on, which is the pre-built markup. I think that's where this sort of diverges a little bit, and I think you're probably
Starting point is 00:10:22 going to jump into this here in a minute, right? Well, I read that as that would be like your JSX, right? No, no. Yeah. Yeah. I did a little bit of reading on this.
Starting point is 00:10:33 I was curious. So yeah. See, I wanted to come into this completely dumb. So I'm doing this on purpose. This is nice. Yeah. Yeah.
Starting point is 00:10:41 Cynical dev style. Love you, James. Yeah, so the deal with the markup is that's just a structured way of kind of storing your content. And then you then kind of go and mash in with your layout and generate those pages. And really the contrast there is just that you're not doing it in HTML. You're trying to keep it separated from the look and feel of your website. And you're also not tied to some sort of backend service
Starting point is 00:11:07 like a Ruby on Rails or a WordPress or something. I mean, even when we did the coding block site, I don't even think we really considered kind of hand rolling HTML, right? It was kind of a foregone conclusion that we'd either be building it on our own
Starting point is 00:11:19 and like ASP, or we'd be using something like WordPress, which is what we ended up doing. Yeah, basically, so we can focus on the content and not worry about the development because we all know how that goes. But hey, backing up real quick, and we've probably said this in previous shows, you threw out CDN out there. For those that aren't aware of what a CDN is, it's a cloud delivery network.
Starting point is 00:11:40 It's AWS has their own. It's called CloudFront. I'm sure Azure has their own. CloudFlare has their own, it's called CloudFront. I'm sure Azure has their own, CloudFlare has their own, but it's basically companies hosting your files that are, you know, so that you're not serving them up yourself from your own servers. They're, they're hosted from other places and they're typically faster and closer to where people are. So if you're not familiar with CDN, that's what it is. I do want to make one correction. Did I say it wrong?
Starting point is 00:12:07 I'm sure that somebody out there probably just like they're twinging and like they forgot their medicine, their medication, and they're tweaking. It's like seven-minute apps. Did I miss one piece of it? Well, it's content delivery network, not cloud. Content delivery. I mean, it is the cloud. It is, yeah. But it's technically content delivery network.
Starting point is 00:12:25 So yeah, it's just files being hosted all over the place, just not being served up directly from you. I just helped somebody stop twitching. So thank you. Yeah. Yeah. We say all over the place. We mean typically in like edge locations. So your same copies of the files might be on a server in Singapore and New York and Australia and different places around the world that are like physically located closer to people browsing the website. So like we're literally cutting the, you know, the light speed that's required to get stuff to people. Yeah. Yeah. It's all about speed and it's also about bandwidth too, right? Like you don't want to have to serve up files from California over to China. If you can have those same files located
Starting point is 00:13:04 in China somewhere, it makes sense for network congestion and everything else to be serving them up from as close to you as possible. So yeah, it's just one of those things, like when we throw out acronyms, it's easy for us because we're always in them, you know, I didn't want anybody to be lost on that. It's definitely, and there's definitely been more players in recent years too. I mean, like I can remember when, like, like you know when you talked about cdns it felt like you only ever talked about akamai or level three and that those were those were your big ones and now like you said there's cloud flare aws is in there like well pretty much any of the cloud providers are in there now yep or have something similar you know yeah yeah and i
Starting point is 00:13:40 just think it's a particularly interested to talk about jam stack today because you know just like talked about five years ago six years years ago, that's debatable. Anyway, when we started CodingBox, it was kind of a foregone conclusion that we would do WordPress or something like that. And I think for many years, that has been the question is like, what framework am I going to use? And I feel like that question has changed a few times. Like in the early 90s and 2000s, the question started to become, can this be a website first? And that started to become the main product aside from the way we used to do things with desktop applications. And then even further, after that, it started to become, should this be mobile first?
Starting point is 00:14:16 And so that was really the focus because that came to be the primary devices for most people in the world. I feel like somewhere in between there, though, there was like, well, can it be a Java applet? Yeah, that was definitely in there. And so now I'm starting to think like maybe the question we should ask before asking if it should be mobile first or if it needs to be a website is maybe, maybe it should be, we should default to static sites.
Starting point is 00:14:42 Yeah. That's one thing I was going to ask about this. Is it, is it, is the idea here of like flattening the site to where everything is already static? It's pre-genned. Yeah. Yeah, and that's what that asterisk at the end, the pre-built markup is. And he'll get into some of that in a little bit, but that's the whole idea is you don't deploy something like a live breathing site attached to a database or anything. It's not that.
Starting point is 00:15:11 You're just deploying the files that are going to be served up how they exist. Yeah, I mean, you might hear me say to that, refer to that as flattening on because like, I don't know if that's's used elsewhere but i know definitely way back in like the 90s uh you know you'd pre-gen things yeah we called it we had everything like you know yeah you had things being served off of a database and everything in the queries and whatnot but you know it was too slow to do that so to get the page views that we wanted you know to get the performance that we wanted out of the web server, we had a Perl process that would go and walk the site, and it would save off what was generated, and those flat files were the ones that were actually getting served to a user.
Starting point is 00:15:56 They didn't know behind the scenes what was really happening. We're regressing. So I'm just saying, if you hear me refer to it as flattening again, that might happen. That is what it is. That's what I'm referring to. Yeah, if I, if you hear me refer to it as flattening again, that might happen. That is what, that's what I'm referring to. Yeah. Yeah. And I definitely think we've kind of come around full circle and then that kind of begs
Starting point is 00:16:11 the question is like, well, why were we using WordPress? Why were we using Ruby on rails or cold fusion? Like what were we getting out of that? I would guess that, Oh, was that a rhetorical question? No, no, no. The real question. I was going to say, like, I guess, I think that we, we, we are cyclic, right? Like, uh, things were slow.
Starting point is 00:16:32 And so we did the flattening, like I described, but then as things got faster, we're like, you know what? We can actually take the hit of trying to serve this in real time and without having to bother with the flattening process. And then we start cramming so much into it that, you know, we start squeezing everything out of it. It's like, oh man, we've gotten slow again. So we have to like flatten again.
Starting point is 00:16:54 And so we start to lean more towards static again. So like, it's just like, I mean, you remember like back in the day, for example, like you tried to prefer HTTP over https every opportunity you could like you literally only used https for just the authentication part and then you like page you got back out of it as quickly as possible because you just didn't have the processing power to keep up with it but now we're like well let'sPS everything. And if you don't, then you get downgraded. Yeah, but the point being is like the processors and everything have gotten fast enough to where that extra cryptographic step is no longer a thing. And now we're like actually trying to, you know, like remember the speedy protocol from a few years back where like we're trying to prefer it.
Starting point is 00:17:44 And actually it's now being you know improvements are being made to make it faster right um i don't know if we're going to come back to the cyclic point where we you know god i would hope that we don't go back to non-htps but well i think with that question you asked i i think it's even worth maybe talking about wordpress and what it is and and, because I think it'll help sort of paint the picture a little bit, right? Like we chose WordPress for the very reason that anytime you create, if you create a static website, it's typically a lot of work, right? A lot of people don't realize it, but you know, you've got your headers, you've got your secondary
Starting point is 00:18:20 nav. If you've got that, you need consistent footers, you need all that kind of stuff. And really the only thing that you're changing most of the time is the body in the middle and then styling all that, making sure it's all pretty. Right. And, and WordPress sort of takes that away in that you can just go download a theme for WordPress and that'll make your site pretty. And it can standardize your navigation on your left and on your top and all that. And then you can get, you know, the various different pieces you want to fill in stuff. And then all you have to worry about is putting together your content, right? And so if we write an article on how to make SQL Server faster,
Starting point is 00:18:58 then all we have to worry about is what we want to write and what we want to show up on the page. Now, behind the scenes, WordPress is calling some PHP things that are basically saying, okay, he called the page that we just called, you know, how to make SQL Server faster. So it's going to go load up the headers, and it's going to place those, and it's going to load up the navigation bars, and it's going to load up the content, and it's going to put that in place. And it's going to replace all the date tags,
Starting point is 00:19:22 and it's going to replace who the author was. And it's pulling all this stuff from the database and putting all this stuff together and putting it in content on the page. Right? So the reason we have those applications is we don't want to, we don't want to mess with that. Right? Like, I don't want to have to worry with what am I going to name my page? What am I going to name my file? Did I link that properly for my index page to this one? Right? Like my homepage is index.html. And did I name that how to make SQL faster.html or did I make it how dash to dash make it? You know what I'm saying?
Starting point is 00:19:56 Like there's all these little bits and pieces that require a ton of work when you're creating a static webpage. And that's why people use things like WordPress. You don't have to worry about it. You log into the thing and you type in your content and you hit save. And then every time somebody hits a page is running some PHP. Nobody cares about it. As long as it loads, then you don't care. But to outlaws point and what Joe's probably getting ready to say is now this stuff is being served up on devices that we didn't anticipate a few years ago, right?
Starting point is 00:20:26 Now it's mobile phones loading things. Now you're loading something across the U.S. Now you're loading something across the world. And so now speed matters again, right? You can't just load up 100 different things and hope it's all good enough. And so I think hopefully that draws the picture of why we're using those things. And now I think we'll get into why maybe, why maybe there's another way to go about this.
Starting point is 00:20:50 Do you want to hear some interesting WordPress stats? I would. All right. Uh, I'll include some links to these, but 27% of the internet is powered by WordPress. Oh my goodness. So it's estimated that there are over 172 million active websites with 75 million of those being on WordPress and 30 half of those 337 and a half million of those being hosted on WordPress.com itself.
Starting point is 00:21:27 Wow. Right? And this one is dated from, this is a stat from 2014, 22% of new US registered domains run on WordPress. It's not surprising. Now, here's another one that's dated, this will be the last one I'll give for dated to 2014. WordPress.com gets more unique visitors than Amazon in the US. Wow. As of 2014, WordPress.com was getting 126 million uniques per month.
Starting point is 00:21:59 Amazon was getting 96 million. So it was a considerable difference. That's impressive. And, oh, I'm sorry. That was also with only 229 people employed by WordPress. Wow. I mean, when you think about it, again, we actually
Starting point is 00:22:15 made the conscious decision when we started coding blocks. We're all developers. If we start writing something, we're never going to finish it because it's never going to be good enough. And we're going to code it and code it and code it and code it. And we're going to spend all our time coding. We wouldn't be making content. We knew that.
Starting point is 00:22:29 So that was kind of the reason we went that route. And it's just sort of interesting to know. That's also why a quarter of the world's websites run on it, because you can get a site up and running in 30 minutes and have all your plugins and everything you need, and you got something. Do that. Make a website in 30 minutes and see if that's real. Yeah, it's very user-friendly. It looks great with the theme. It's much better than I probably could have done by myself.
Starting point is 00:22:57 It was also a great user experience for me to be able to go log in and just write a post and focus on the things that I care about. I don't have to be messing with footers. Can you imagine we've got 99 episodes now if we had to go change the footer on 99 HTML files for every blog post. That's the kind of stuff that we used to do. I used to get paid back in 1998 to do crap like that. Right. Right. But aside from WordPress, why did we used to reach for the ASPs and ColdFusion? What did we get from those technologies that we didn't get with HTML files? A framework.
Starting point is 00:23:32 A framework is part of it. So some sort of consistent way of solving common problems. But two big things for me that kind of spring to mind were server-side includes. So I could have that footer and include it on one spot and only change it in one spot and then kind of have that, you know, like Alan said, kind of poke a hole in there for the content that I cared about, like the author or the body or whatever. That and also easy database access. So I could have dynamic content, throw it in a table, and then I wouldn't need to have all these different pages, right? I would have kind of one page template and it would get filled in automatically and the URLs would route to it automatically. Yep. Yeah. And that was, that was huge. That was really good. So, you know,
Starting point is 00:24:10 what have we done that's come full circle? You know, we kind of said that there's not really been any like super new developments. There's not like a new feature of JavaScript that suddenly enabled this and made it important. Right. So why are we talking about this now? And, uh, I think a big part of it is actually the static sites have gotten a lot more powerful there's more stuff that you can do in javascript a lot easier so it's not like there was one easy new javascript feature but things like um progressive web apps and um bower not bower um babble definitely bower kind of newer features bower uh yeah react stuff like that um has kind of made things more powerful and made us be able to do more stuff with JavaScript, but also things like serverless functions.
Starting point is 00:24:54 So those are really cheap and easy functions where we can kind of forget about the operating system, focus on the little tests that we need to do. Microservices is another good example of something where we've got these kind of easily consumable APIs that I can call from JavaScript very easily. And now I've got things like in JavaScript, like Fetch or whatever, that make that a lot less painful than it used to be. And also, I really want to point out, this is kind of the big one for me,
Starting point is 00:25:21 is that there are more and more software-as-a-service and cloud components that are kind of commoditizing things that I used to do. It used to be a foregone conclusion that every time I would work on an e-commerce site, that I would spend a lot of time on the billing aspects. I would find that billing API, and hopefully it was one I'd worked with before, but there would still just be kind of custom things I would have to hook in to make it work for Braintree or PayPal or Authorize.net, whatever. And nowadays, if I was starting an e-commerce, I would just use Stripe or PayPal. Right.
Starting point is 00:25:52 Right? I am curious, though, as we're going through some of these things, like I know we mentioned you got React, Vue, that kind of stuff. And this is where things were fuzzy when I was reading through some of the jam stack things is I know the notion is the static files get generated at deploy time, right? Like that,
Starting point is 00:26:14 that's kind of what you do. Like when you're ready to push a site out, these things will run through some sort of processor. It'll take all that, create HTML files and throw them out there. Right? Like in a nutshell, is that right? That's what static site generators do, but HTML files and throw them out there. Right. Like in a nutshell, is that right?
Starting point is 00:26:25 That's what static site generators do, but that's not a requirement. Okay. So I guess that's where I'm sort of curious is like, this sounds great. Fine and Danny for just content based sites. Right. So like coding blocks would be a perfect example. We don't, you know, ours is mostly just content that's out there. However, what about an application? So like you're talking about, you just talked about Stripe. Stripe is going to be something that you're going to put on, you know, you've got content to sell or something like that, how does Jamstack fit into that world? Yeah, and that's a really good question. I think that it basically suffers from the same problems that any spa-type app would have, where if you've got some sort of spa application that's dealing with a lot of stuff from endpoints and kind of filling in the content like that's not great for all use cases like i used to work with a b a lot of b2b e-commerce sites and you would log in before you could see the products because the
Starting point is 00:27:32 pricing would change because each individual company would kind of negotiate the prices and so we don't want customer a to necessarily see the prices for customer b and so we may not even want to show you the products that are available because it may be different based on our contract. And so that kind of thing is not so easy to do in a spa because it just means slinging a lot of stuff. And so I think that there are still applications that are just better off being kind of traditional back-end-y Django Ruby on Rails type sites. And I think that's totally fine. And the kind of things that I came up with were basically things that require fine-grained permissions. Also, things with a lot of real-time persistence
Starting point is 00:28:12 or database stuff going back and forth or things with a lot of admin-y, kind of control panel-y type things. I wouldn't want to build a Jamstack site for the WordPress back-end where you can log in, see posts, approve posts. There's permission and stuff going on. There's widgets.
Starting point is 00:28:30 There's plugins. There's all sorts of stuff like that that interacts at all different levels of the application from the JavaScript all the that down to to what i'm thinking in my head is as long as basically every user would have a similar view or the same view then maybe it's a jam stack viable option if you've got something where you're switching based off a user's role or various permissions or where you're toggling things all over the place because of that, then it's probably not a good thing, right? Well, am I wrong? You're not going to have any dynamic content.
Starting point is 00:29:11 So you can interact with APIs. So that's the A in the JAM stack is those third-party APIs. So if you want to have that Stripe or if you want to write your own custom third-party APIs and that's also doable. No, no, no. wait, wait, wait, I don't mean, I don't like you talk about that and you're talking about like authorizing a payment
Starting point is 00:29:30 or, uh, authenticating, right. When you talk about like Stripe or OAuth kind of things, I'm talking about like something dynamic to where like take an amazon.com where if you go look at a particular product and they're like only nine left in stock right and the next person that loads that page it might be only seven left in stock right that's the kind of thing that i'm talking about like something dynamic on the page that's going to change every time the page is loaded you're not going to have that in a jam stack application you could you could because of what he's saying so and this is where things would get really tough and i don't know the lines blur on how far you'd want to push it now and how much effort you'd actually have to go through.
Starting point is 00:30:09 So your page itself, the HTML is rendered, right? But you can make an API call on that product and that, that product information and come back to you and say, Hey, there's only seven left. Right.
Starting point is 00:30:22 And that would just plop on your page somewhere, right? How would that be differentop on your page somewhere, right? How would that be different than any other page then? At that point, because now you can say, okay, I could do the same thing for the description of the product. But you're going to have a particular product page, right? So the difference is, I think, and correct me if I'm wrong here, Joe, you'd probably have something like, I don't know, the new MacBook Pro.
Starting point is 00:30:49 There's going to be a MacBookPro.html. And when you load that page, it's going to make a call to go get the latest information for that product and then bring it back to fill in that page. You're not going to have a generic product page that says, okay, go pull all the information and then build all the HTML on this page. I think this is the difference, right? I mean, regardless of what the name of the page is, that can – oh, thank you, Google. You can create – you can solve that problem by having like a page that might not – there might not be a physical file on disk that matches that name of that. But at runtime, you're like, oh, well, that's the product. So like, you know, your MacBook pro dot HTML, you're like, okay, you know, that is the product name. I'm going to go query that. And it could be like just the one generic thing. Cause we've done that. The three of the
Starting point is 00:31:38 three of us I know have done that. So, you know, like that's just creating like a canonical URL that's SEO friendly at that point. Right. I'm trying to figure out like where do you draw the line of like the dynamic content that can appear? I don't know. But yeah, pages can make calls to APIs to get that data, though. Yeah, absolutely. So the question is like what is the difference between like Jamstack and any other app that we've done over the last 20 years? And I think what you said is totally right.
Starting point is 00:32:06 Like it's just a matter of kind of where you turn that dial. But I do think in the kind of traditional ASP or, you know, PHP kind of setup, like you would have like one kind of page template that would pull that information from a database or from a cache and put it in there. The difference here, though, is that we're emphasizing this static generation so that we can throw these files on the CDN. So what's the difference between having like product.aspx that goes to the database or having 10,000 static HTML files? The difference is the CDN. And you can get clever with CDNs. You can kind of cache stuff or whatnot. It's just kind of the notion here that we're kind of taking that approach up front and starting with things and going at it from that
Starting point is 00:32:45 angle. So tell me this then, if we're talking about statically generated files, like what he just said with a canonical URL, if you've got something like IS or Apache or whatever, you can have these rewrite rules is basically what they're called, right? To where it says, hey, look for a pattern in the URL. And if it's this, then serve up this file. Is that part of this whole Jamstack notion to where you're dealing with that, or is it literally you go to this page, and it's going to go find that on a CDN somewhere? So that's what we're getting rid of. We're saying static first, no Apache.
Starting point is 00:33:17 And when you think about it, even talking about things like Apaches or the web servers, it's kind of coming at it from uh like a very like web app centric single project kind of way of thinking about things like the like back in the day i would create new project i would select asp and now i would think of this whole thing as my website but now i'm saying it's like you know what microservices are a thing i've got all these cloudy and software as a service products going on. Like I can't really put my finger on exactly what my web app is. It's kind of like this interconnected kind of mesh of services. So why not have one thing?
Starting point is 00:33:52 My web app is this set of static files and it pulls the data from however many APIs I want. And that way, if I want microservices and my, my, my app is three or four different services or however many, and that's fine. It's all just about where I'm coming from.
Starting point is 00:34:08 So rather than me be going into Visual Studio and saying new project, I would go into VS Code and say new directory, and maybe I would open up Visual Studio on the side and create a web API or whatever I need to for third-party services. It's just a matter of kind of thinking about things differently and coming at it from a static first angle. Okay. So that's really interesting. So what you just said forced me to go to jamstack.org and click on the best practices at the top. And what you said at the very beginning of that is exactly what it is. So outlaw, I think it answers our question here,
Starting point is 00:34:38 the entire project on a CDN. So, so basically there is no server side. There's no canonical URLs that doesn't exist. You can't do it. You're serving up whatever page you go to has to exist. So it's not like you've got some sort of Apache or Nginx or anything like that behind the scenes that's doing any interpreting and routing. Um, everything lives on get or in get. So basically source control. I don't think they're really trying to say that that has to be it. But, but basically all your codes there and it's going to get generated using a build tool and then spit it out into a CDN is basically what it sounds like.
Starting point is 00:35:15 Right. Go ahead. Well, I was just going to say like, I'll, I'll keep listening. Cause I'm still trying to understand like, where do I draw the line?
Starting point is 00:35:24 Like, and to me, that example of, like, the Amazon one where it's like only six left in stock, you know, that's the one where I'm, like, having trouble because you can't pre-gen that. No, no, but you can pre-gen the page. You can pre-gen the page that has the images and all the text about it, the description, all that. But on that page, there could also be an API call to say, hey, go get the latest inventory for this product and plop that into the page. Like fill in this space over here that says inventory on hand. Here it is.
Starting point is 00:35:56 But then at that point, it's not pre-generated markup. It is. Joe? Yeah, I mean, if we're just talking about, or rather I should say we're not talking about 100% static sites because then we'd just be talking about HTML. We've got this A in there, the APIs, that's really focused on getting that sort of live content. So if we need to have a sale or the product runs out or we need to take it offline or something, then we have an API that we can do set up for that in the background. And the webpage can load and it can go pull that stuff and can change its content as needed. The difference is rather than having kind of one page template that pulls that stuff from the database or from cache real time, we've got thousands and thousands or however many products we have.
Starting point is 00:36:39 Same copies of the code that all know how to do this one thing and know how to go look up their extra information, which seems ludicrous if you're maintaining this by hand to have all these duplicate files, but it works out really great for CDNs. I want to keep listening to how the thing's constructed. We can move along.
Starting point is 00:37:02 We'll keep talking about it. I definitely think the important thing to think about with Jamstack, or the so we can go move along and we'll keep talking about like i definitely think it's kind of the important thing to think about with jam stacker the the reason that we're even talking about is basically this controversy this questioning this this wondering whether we've been doing things right for years and whether we should continue to do them the way they are and i don't know what the answer is but i think that jam stack asks some interesting questions well because for example you know one of the questions that is kind of on my mind that, you know, I'm going to throw it out there now so that you can answer it eventually. It doesn't have to be right now, but, um, you know, like I was
Starting point is 00:37:33 thinking like, okay, well, how is that going to look right? Because if we're not talking about it being like a react and GSX kind of thing, right. Are we talking about like, I'm going back to jQuery and jQuery is going to like make that api call and it's going to like manipulate the dom on the fly for that single page like and every time i reload the page i'm reloading another copy of j or every time i go to a new page i'm reloading whatever my app was be it you know a jquery library or whatever i don't think that's it right like you're building your app in react or you're building your app in all those things. The step for deploying is what's going to take those and turn those into the static files.
Starting point is 00:38:11 So you're not jQuerying it. You still got React in there. I still need some JavaScript, though. Yeah. So that when it runs on the client for that API call, that's the part that I'm asking for. But that'd still be written in React, right? That doesn't necessarily have to get rewritten, I wouldn't
Starting point is 00:38:28 think. So I've got an application, a Jamstack application, devpodcast.app. And it uses the QIT search engine to pull podcast data for programming podcasts, right? And I do those searches up front when I do my build, and I generate this stuff. So I don't have to hit
Starting point is 00:38:43 the search engine over and over and over again. As you browse the pages, I have that pre-generated. However, you can also do live queries from the site, which go out and they do Ajax calls via jQuery to the search engine. And so it can kind of populate with up to the date, up to the minute information or custom information. If the person doesn't have the information that I haven't pre-genned, whatever they're looking for. Man, I'm going to ask a dumb question. What was that URL again? Devpodcasts.app.
Starting point is 00:39:13 That's what it was. I knew I was typing something wrong. Yeah, and so I'm kind of cheating a little bit. If you go to the top and if you hit the hamburger and you hit the search bar, it actually redirects you to QIT. But that's a feature that i want to get into the site so it all kind of keeps you there and i i don't think that's cheating for jamstack at all it's using a third party api and actually if you go to jamstack.org and look at their examples a lot of sites are actually built with static site generators and search engines because it's a really nice pairing
Starting point is 00:39:43 where we can have all this content that you don't need to render and do all this work for with the server side, but we've also got a search engine that lets you find that content or redirects you to some other spot. So it sounds like, and I might be wrong, you wouldn't use this for an e-commerce type application. It would be overly complicated to generate
Starting point is 00:40:05 that many pages. If you had something simple or more simplistic, like maybe even the podcast app, like what you're talking about, the QIT, right? That could sort of be it because you only have a few sets of things that you're trying to do dynamically, right? Like pulling in the latest dev podcasts or whatever. I don't know that there's a limit though. And actually, um, the e-commerce sites are one of the applications that they give as an example of good transitions to eat, to a jam stack, because you can generate for all those products. And who cares if you're dealing with tens of thousands of HTML files, we're still talking about like, I don't know, megabytes to do for the whole site.
Starting point is 00:40:46 I've deployed sites that are much bigger than that with just the binaries. It's not crazy to think about you uploading 500 megabytes of binaries in an install for a large.NET website. So how many text files does it take to get up to that level? And I think it would be a whole heck of a lot. So that's interesting. I mean, I just, just for kicks, I Googled jam stack, uh, e-commerce and there's one Netlify has one on their GitHub called go commerce and all the codes there.
Starting point is 00:41:19 So if we're kind of curious or if anybody's curious at some point, where do you draw the line between the static versus the scripted API loaded stuff, then... Yeah, if you look at just kind of some of the Hacker Noon sites or Medium.com sites on Jamstack, you'll see a couple other examples of applications and tools
Starting point is 00:41:40 that are kind of aiming for specifically for e-commerce situations. Now, they're not talking about the Amazons of the world, which have millions of pages or whatever, so it's probably not appropriate for there. And certainly the tools like Gatsby or Hugo would probably not be appropriate for that because a lot of those tools are built around
Starting point is 00:41:58 regenerating the whole site at once, which is not something you would ever do for Amazon every time you add a new product. You can't imagine generating the whole thing. That would just be crazy. So they would need some sort would ever do for Amazon. Every time you add a new product, you can't imagine generating the whole thing. That would just be crazy. So they would need some sort of custom thing for that. But for a lot of smaller purposes, or if you've got a boutique e-commerce site with 500 products, why not?
Starting point is 00:42:15 So this is interesting. I'm looking at the code on this one, this GoCommerce thing, and what they've got is they'll have a page and it says, this is what your static site must support. Each product you want to sell from your static site must have unique URL where GoCommerce can find metadata needed for calculating pricing and taxes in order to verify that the order is legitimate, right? Before sending it over to Stripe.
Starting point is 00:42:42 So this is interesting. The way they set it up here is you'll have a page that has content on it, but the metadata about this thing is in a script tag. So it's got script and then class equal go, go commerce dash product, which means that means there's something that's going to be looking up that particular, you know, Dom element on the page, which in this case is a script block. And then it's got a skew, a title, and then the prices, which means that it's going to know to take that metadata and then go look up some additional information to fill in the page. So, so it's definitely mixing the static data with stuff that it plans to go get more information about from a server
Starting point is 00:43:25 call, bring it back in and then enrich that already static template. We'll call it basically. I mean, I guess that's how you're treating these pages is more as like templates where data can just kind of be plugged in. Right. Yeah.
Starting point is 00:43:39 And I think there's different ways to kind of approach that problem. Um, but I did want to mention that there's a site called content full2, which is a content management kind of storage site. What it'll do is you kind of like in your HTML or whatever, you kind of tag it with IDs and it'll go out to that service and fetch the content and populate it into the site. So it's kind of like this weird kind of, you know, it fills a certain kind of niche for sites like this that need to be able to pull their content dynamically. And maybe you do your localization or whatever there,
Starting point is 00:44:07 and they just kind of specialize at taking your content and popping it into your HTML pages. Content content full, not, I thought it was full, like F O O L it's content. I thought you said full as well. Yeah.
Starting point is 00:44:22 Content full. All right. So where does, and you know, again, stop me if you're going to get to this eventually, where does WebAssembly fit in with this? Or do the two coexist? Or do they solve different problems and you wouldn't try to do both at the same? That's a good question. I definitely think of it as solving different problems just because you know the WebAssembly I think is of being able to reuse code that I've written
Starting point is 00:44:50 in other languages and be able to run stuff fast and this stuff is really focused on on client side JS which is what we're talking about with WebAssembly too so I think that there's you know possibly some some stuff that can happen, but I haven't seen any sort of connection between those, like made any blogs or anything. That would seem kind of odd though, right? Because the whole thing with web assemblies, you're downloading the DLLs,
Starting point is 00:45:14 the C compiled things. So I don't, it's compiled. It's like, it's compiled down JavaScript, right? Or like it's, it's the safe parts that get compiled down so you could write it in
Starting point is 00:45:28 c yeah yeah i don't know so i guess you could still put that dll out on a cdn cdn yeah i mean technically i don't think there's any reason you couldn't but it seems like that's more app specific i don't i don't know yeah i don't think that's much different than like bringing in a third party kind of library like a j jQuery or something like that. It's just a different language and a very good, efficient way of doing certain things. Yeah. Oh, I did want to point out, too, just really quickly, as far as kind of tools, we talked about Stripe and OAuth as being solutions for things that have kind of come along in the last 10 years or so that have made working with static sites easier. But I also wanted to point out that a lot of sites like Cloudflare and Netlify specifically come to mind, interact with Let's Encrypt.
Starting point is 00:46:13 So normally, if I wanted to have a static site that was HTTPS, I would have to go and, you know, say 10 years ago or five years ago before Let's Encrypt existed, I would have to go buy a cert for like 99 bucks a year or whatever. I would have to go set it up on my server. I would have to have a server in order to do that. And it would be some sort of pain in the butt. But with services like Let's Encrypt and with the integration points that they have with Netlify or Cloudflare, it's a checkbox for me to say, I want HTTPS. And they own that. And that's totally out of the scope of my application so now I can have HTTPS devpodcast.app
Starting point is 00:46:48 or QGIT.cloud without having anything to do with the server which is something that you know you couldn't really have and that makes it so my cost for hosting both of those applications stays at zero okay
Starting point is 00:47:04 yeah so I think that's pretty much the both of those applications stays at zero. Okay. Yeah. So I think that's pretty much the gist of what the Jamstack is. We've got a couple more things to talk about, but I just want to kind of blow through those letters real quick. JavaScript, when I say that, we're talking about client-side JavaScript, although most of the tools that we've kind of mentioned, like Gatsby and some other ones,
Starting point is 00:47:24 still are, and even React have like a node lineage. So a lot of the build tools and CLI tools that you deal with that will still be server side. It's just the output of your build is going to be client side JavaScript. So it's not cheating to use tools.
Starting point is 00:47:40 I just wanted to draw that distinction. And actually Netlify is really good about running its node on the server to do your build. So Netlify builds QIT.app and Netlify builds devpodcast.app. It runs Gatsby for me and puts those files up somewhere. I think the key point that you're hitting at, though, is it doesn't matter what the build tools are built with. It doesn't have to be javascript it's just the output of your javascript is going to turn into static files through the build tools regardless whether they're c or ruby or whatever it doesn't matter yeah and just because we have
Starting point is 00:48:16 those tools it's not required like you could just do this via vanilla js and in fact you could do this with just static j sorry static html and c, but then you're not going to have that access to those APIs. So you need the JavaScript for that. And you need that JavaScript for transforming any markup into content. So no server-side rendering. And by that, I mean there's no back-end kind of middleware server that's running. Everything that I'm doing for the podcast app is actually rendered out to HTML file. So it's not like I'm just sending you kind of a blank div and then JavaScript is responsible for going out and populating that stuff.
Starting point is 00:48:54 I think that would probably still be valid. But you're just missing a lot of the benefits of running on a CDN there if you're going out and dynamically fetching all your stuff via API. So basically what you're saying is, though bought uh dev podcast app and now you're pointing it at netlify netlify's server yeah they're named servers okay so their name servers are what are them resolving your request to their cdn hosted, basically. Yep. Okay. Yeah, they're a CDN that's got some nice tools for looking at GitHub webhooks or whatever to notice when there's a change. They've got the node side built in,
Starting point is 00:49:34 so they'll go ahead and do my build, and they'll throw stuff up on the CDN for me. And so I can't FTP. I can't do any of that stuff. That's all managed by them. All I do is basically configure my build, click the checkbox for Let's Encrypt. I've got some optional stuff there for forms or auth if I want it. And then at the end of the procedure, I get a domain, you know, I get a website. So I see that your next bullet
Starting point is 00:49:56 point, and I'm going to jump the gun on this one because I'm sort of curious how it works. It says auth is handled outside the app, like through an API. Does that mean whatever your build tools are? So you have an app that says, Hey, you can only come to this page if you're, if you're authorized, right? You've authenticated and you're authorized to hit this page. Does that mean the build tools themselves are going to spit out the stuff that, that, that is going to somehow not allow you to land on a static page that you're not allowed to hit.
Starting point is 00:50:26 Like how I think that any privileged information that you're going to have is going to be stuff that you do not want statically up there. Okay. Whatsoever. Cause there's going to be ways for people to access to that. So if you've got privileged information, that stuff needs to come in to your application over HTTPS from an API. Okay.
Starting point is 00:50:44 So what you're saying though, is like, if you have an admin page, you're not going to statically generate that thing. It's not going to exist anywhere because, because it's on a CD. And if you figure out what that file location is, you can just go straight to it.
Starting point is 00:50:56 Yep. So not unless you're doing it badly. Okay. Okay. So, so you might have your jam stack as your front end type stuff, but as soon as you need to go do anything that requires any kind of role or permissions or anything like that, that's going to take you to a live, standard, old app that we're used to.
Starting point is 00:51:15 Well, you can still do a Jamstack. You're just going to be doing a lot of stuff like fetching the data that you need and kind of populating it into the data, but you're not going to be doing that stuff on the CDN. Well, I guess that's my question. How do you know that you're authorized? Is it setting some sort of cookie in the app? Or are you going to have to know how to code that the Jamstack way versus the old time server side type thing where you just say, hey, I know that I'm authenticated. These people can come in. I don't have to do anything special. This is really nothing too different other than who owns that
Starting point is 00:51:47 code for generating those tokens and whatnot. So if you're using something like JWT or whatever, or OAuth, then you're basically getting some sort of token that you're going to pass to your third parties, and the third parties are responsible for authorizing that token and saying, okay, here's the information that you can see. So that's out of the hands of your static files,
Starting point is 00:52:03 and it's all on the third party APIs to be responsible for returning the right stuff. Okay. Which is no different than it is today. It's just kind of a, you know, just kind of a mindset shift there. And could you imagine if you were like building the next amazon.com or something like going into visual studio and kind of doing new project and like having that be the website, like we probably wouldn't start things that way or at least we would probably end up with something that had multiple different projects and APIs and different services. It's just kind of
Starting point is 00:52:31 a way of saying, you know what? This website should be completely separate from all my other services. It shouldn't be coupled to one project in particular. That makes sense. On the API, so all service high processes or persistence are
Starting point is 00:52:49 abstracted into APIs. So that's really not anything new there other than just where that stuff is running. Now you're going to be hosting that stuff on a separate process. And so when you think about deploying the website and deploying your API, those are two separate steps. That's not something that's going to be bundled together like it would be in a traditional
Starting point is 00:53:07 ASP kind of site. Everything should be done over HTTPS, all the APIs. I think pretty much everything should just be HTTPS from now on. Yeah, I think that's about right. Yeah, and Jamstack doesn't mean that you don't have a backend. It's just a matter of kind of how you think about things so you can still build your own services you're just going to kind of treat them like third parties and you're going to go and request the data you need and handle the authorization all that stuff just like normal it's just not going to be bundled
Starting point is 00:53:40 together with your website deployment well we say just not like normal. I think going back to Outlaw's thing earlier is if you've been doing SPAs, single page apps, then most of this is sort of familiar in terms of how you go get data from a server, right? You're making some sort of API call from your JavaScript, your HTML page. The difference is this whole statically generated thing where these files exist out there and they're not being created when you request the page. And that's, that seems to be the big, I think there's connect.
Starting point is 00:54:12 I think there's a couple of different extremes here, right? So, so with the spa, you take the one time hit of loading the application and everything after that is an API, an API call to get data for whatever the screen is that you're trying to paint. Right. But you're not re-downloading your JavaScript
Starting point is 00:54:32 over and over and over again. Like all of those assets are already loaded. Uh, and that includes whatever HTML, whatever markup is baked into it. It's all of that is already preloaded. So typically it's like heavily minified so that you can do that. Right. So that's on the one extreme. Then there's the, the old extreme where you had your, your, and let's talk, let's not talk about like when I say old extreme, I'm not referring to static sites. So, so the old extreme was you, every time you would go to a different page, you were reloading the markup, reloading the HTML, as well as redownloading all the JavaScript. And then any API calls that that JavaScript need to make would also get made. So that was on the one extreme. So, so we're, we're somewhere
Starting point is 00:55:23 in between there. Right. And I think what we're saying now is that Jamstack sits somewhere in the middle now where we're offloading the responsibility of the HTML off of like a web server that we might own. And we're saying like, Hey, that, that's just going to sit on, on some CDN, right? So if I'm understanding this so far, so the HTML and the JavaScript that's out on some CDN and that HTML, uh, when you go to a particular page, it'll load every, you know, every, every new page you go to, it's going to reload that markup along with whatever JavaScript resources it needs, right? Because this isn't a spa and then you'll make those API calls calls so it is it is closer to that older version except instead of having a single server load do it we're spreading that load across the across the cdn
Starting point is 00:56:15 am i am i getting this that's that sounds right to me yep there's caching involved so theoretically you're not re-downloading the css files and all that stuff over and over and over again. Well, sure. Okay, so there's caching within at the CDN levels, but also within the browser itself. How the browser works, right. So, okay, fair enough. I'm not sure, but I'm guessing the whole point of this is time, speed to load, right. And the fact that there's no CPU involved really is what it is. It's just IO. Right. Well, yeah, that, and it's kind of like the ultimate scalability,
Starting point is 00:56:55 right. Cause we're talking about static files that are hosted on CDN. It's redundant, right. It's spread out all across the world and the chances of your you know static file hosting going down are pretty low and so we're talking about really great scalability essentially for free or for very cheap compared to every other technology well there's a big one here too though that has been said and that's that it's someone else's computer and therefore someone else's problem to maintain yep and security like you know you're not going to get into my database from my static files, right? You may be able to get in some other way, but there's a couple other advantages we've
Starting point is 00:57:31 got in a section coming up here. But everything we're saying is absolutely good. Like there's a lot of advantages to static files. Ah, your next, go ahead with your next stuff, because I think this is where it kind of gets into things that'll make a little bit more sense. Cool. Yeah, sure. So first I want to just hit on markup.
Starting point is 00:57:49 So that's the M. And that's actually the one I have the most problem with because, you know, for me, like markup, like why don't I just stick it in a database and just gen it in my, you know, my static site generator and why not just have it hit the database? It seems like a more convenient storage mechanism for me. It's just, you know, I guess the idea with markup is it's easy to check in with your project. And so anyone can modify it. You don't have to worry about setting up a Postgres or a shared server or anything like that. And so it's just a convenient mechanism to store content that's rich content, but not HTML, because theoretically, you know, we could have different things accessing this stuff and not necessarily HTML websites.
Starting point is 00:58:26 All right. I need an example here. I'm not following what you mean by this. Which part? You mean like why we would ever use markup rather than stuffing stuff in the database? Wait, when you say templated markup, are we talking about like markdown? Oh, yeah. Or J templates or something like that?
Starting point is 00:58:47 Yeah. Markup. When I say markup, it could be yaml so uh the jamstack.org site actually has a yaml file for like their example sections where they basically have some kind of content defined in different spots and the html parts are done in uh are done in in markdown but the other parts are just kind of structured with YAML. And so you can have like a image file or URL or these different things that you can kind of populate. But all of that data is associated with the GitHub repository. So anyone can go check it out
Starting point is 00:59:15 and they don't have to worry about getting data in. Like think about like if Jamstack.org had a traditional database backing it and I wanted to get the podcast app listed i would look for some sort of form on the website or maybe an email address to email and say hey can you please add my site but because this is all in markdown or markup in the yaml and it's all checked into github i was able to do that via a pull request and actually if you guys if you're listening jamstack.org i would love for you to merge that pull request. That'd be great.
Starting point is 00:59:53 So, yeah, what you're saying here then, I think I know why Allah was confused, is because we're not talking about templated markup, HTML markup now. You're just talking about some abstracted language that says the title is this, the header is this. And if it's HTML, we get rendered out to HTML. If it's something else, it'll get rendered to something else. Yeah, just the idea of keeping your content separated from the design. That's really kind of the point there. So going with your commerce example then, are you saying that like every product would already be in this format?
Starting point is 01:00:24 So what I mean is like in the e-commerce example, and like say your GitHub repository, I wouldn't have a thousand files for each of my thousand products. I would probably have maybe one file that's got all my product descriptions there, things like that. And then I would use my static site generator to read that markup file. So whether it's GML or XML or whatever, and use that to generate those 1,000 pages.
Starting point is 01:00:49 Okay. Okay. And if I was building, say, like a blog, a Jamstack blog, I might have a directory where each file in there is a markdown file that is a blog post. And so the generator would then loop through that directory on the server side on the build machine and generate an HTML file for each of those. So this goes back to what you were talking about back in the old days where you'd flatten something, you go get all that information from a database and then you gen it anyways. Yeah. I think one part that I might've missed here then is it sounds like this by template markup, you mean this is only used by the generator, the site generator, or the flattener, as I was talking about earlier. This markup isn't something that is sitting on the CDN that the client in any way retrieves.
Starting point is 01:01:40 This would be in Git, is basically what this would be. This would be code that would be executed by your generator. Yeah. If you did like a NPM build, like it's going to use that markup and then generate a file. So your Mac book pro dot HTML example from earlier, right? In,
Starting point is 01:01:57 in your products dot YAML file, you might have data about a Mac book pro and then npm build would take that data create a file a static file called macbook pro.html with that data in it yep yep okay and so that that was the kind of the hardest one for me to kind of wrap my head around because just because i wanted to store stuff in another mechanism, like, well, why not an Excel document? Why not a CSV? Why not a database somewhere that I could hit? And the best I can tell is just they kind of encourage markup.
Starting point is 01:02:33 And really, I think they wanted to make the acronym. So, like, this is just a way that you can store your static content with your checked in code. And it's convenient. Static content. convenient static content so in real life example in real life if we were to back up here if you had a if you if you were going to do something as wacky as try and create this jam stack for your 10 000 product thing you'd probably generate that markup from your database and then run the build tool right yeah that's kind of sounds kind of weak though man like i i like what joe said when he's like they only did this to like finish out the jam acronym.
Starting point is 01:03:06 Cause it really feels weak. You would never hard code 10,000 products into a file for that thing to happen. If you're going to do it, you Jen that thing. And then, and then you, then you use the build tool to create your static files, right? Yeah. Cause it doesn't make sense otherwise.
Starting point is 01:03:26 Well, I don't know though. It does specifically say though, going back to your point where you're talking about the best practices no databases to clone no complex installs so i guess then you wouldn't be able to just do your npm install yeah i don't know yeah and this is like one of those examples it's like yeah the, the best practice is you've got to kind of weigh which is worse, like a quick one-step checkout build and everything is with that build or managing 10,000 projects in a JSON file. What's the greater evil there? Right. Well, I mean, at that point, too, it sounds like you're... Okay, I really like our Amazon e-commerce example here. If we were to recreate Amazon here in 2019, instead of doing File, New, and Visual Studio, we do a Jamstack app.
Starting point is 01:04:15 So it sounds like at that point, if you were to try to shove all of the products that Amazon has into some kind of file, or let's be honest, at that scale, you're talking about some kind of file, or let's be honest, at that scale, you're talking about some kind of file system, then you're just recreating databases. Like, what's the point? Well, no, back to what he said. You wouldn't do that.
Starting point is 01:04:34 No, but back to what he said. The point is now, you don't worry about scale because it's just hosted files everywhere. No, no, no, but we're talking about the markup, though. Oh, the markup. The markup wouldn't be as... So that's what I'm saying. You wouldn't... At that point, you would have gotten to ludicrous
Starting point is 01:04:49 level of just trying to like recreate a database so what would be the point in having those products in this templated markup it it doesn't seem like it would make sense yeah i don't know unless maybe it's a prescribed way of yeah just a recommended kind of best practices like but yeah absolutely if you've got an extreme use case like an amazon or thousands of products then i think that the m doesn't hold water but i still think the jam stack is a good option for you but maybe not those products right or not not doing it the prescribed way maybe just the jet yeah the jet just the jet jaw yeah J. Just the J. Ja. Ja. Okay, so it's the Sweden take. Swedish take.
Starting point is 01:05:31 Yeah, and I do think some technologies and stuff like Docker has made things a lot easier. So it used to be back in the day like, okay, I'm going to make a ColdFusion website. You guys are coming on board, working on the team. Here's the download for ColdFusion. You're going to need SQL Server 2018, whatever.
Starting point is 01:05:47 And here's the NIST script that you can run to get your own database. But here's a shared database in case you're working with somebody in QBA. And there's all those little asterisks and questions and little things that you need to kind of tell someone when they're coming on board compared to a perfect kind of textbook jam stacker website
Starting point is 01:06:05 where you basically just clone it and build. And hey, here's one. This might bring back some memories, guys. Like, oh yeah, and here's the payment gateway processor that you need to install, but be sure to install the dev tool version, not the production version. Otherwise, you might actually be charging someone.
Starting point is 01:06:21 Never happened. Yeah. Not twice. Not twice. Not twice. All right. Yeah. So I mentioned what about CMSs?
Starting point is 01:06:30 You know, we mentioned with WordPress like one nice thing is that we can go download those themes and we've got consistent tools and plugins that are nice. There's also
Starting point is 01:06:38 just that kind of our ability as people to kind of log in. So if if I'm a developer writing Markdown or editing YAML files isn't a big deal, right?
Starting point is 01:06:49 And running Gatsby Build isn't a big deal. But if you're someone in like marketing or something like that, I don't relish the thought of teaching someone in marketing how to use Git and how to edit Markdown files and how to preview the changes before they push it live.
Starting point is 01:07:06 Type in VI space. Yeah. And then they'll never be able to exit. Exactly. How do I get out of this? Oh, we're not going to be here all day. Yeah. So I think that's kind of like the most – like the biggest kind of reason you wouldn't want to use Jamstack side or something is
Starting point is 01:07:22 if you've got people outside of your kind of developer application that need to do stuff, then I think that Jamstack is currently not a good idea for that. Yeah, I mean, you can do stuff actually, headless CMSs are becoming more and more a thing where you kind of like edit your content offline
Starting point is 01:07:39 or in some other service, and you've got your application which kind of pulls from an API, which is totally separate from that. And then it's going to gen those files for you, I guess. Yeah, depending on the CMS. I guess it depends though because I'm thinking of it like, well, at what point
Starting point is 01:07:55 in terms of scale? If your use case has gotten to the scale to where you have employees who like your marketing guy, I think was the example you gave, that needed to access that, then at that point, maybe let's revisit this templated markup conversation. Maybe at that point, you're not using that. So you would have some other system where users can access a database to do those kind of things.
Starting point is 01:08:26 And then your Jamstack build process queries that database to get the content that it needs. Well, that's what we talked about earlier. That's what you probably do in a realistic term. But if you're following the Jam prescribed method, that's not what it is. You're going to have a file with that markup in it. But yeah, a real-world scenario, if you were doing a real-life CMS that people needed access to, you'd probably do something like that. Yeah, because the deal there is like in a non-Jamstack scenario, if I'm building a small CMS website to be used by marketing, then I'm going to build a small Ruby application or Flask application or Django,
Starting point is 01:09:06 and it's going to be one website. If I'm going the Jamstack route, now I'm building two applications. I've got my Jamstack website, and I've got to build the backend too, and it's going to be separate. Right. So I think that would not be a great choice for Jamstack. And that was kind of the prime thing that I came back to is the reason why I wouldn't do a Jamstack site for something. Yeah, at this point i think i've
Starting point is 01:09:25 gotten to where i think static first and if there's a compelling reason for me to not make a static website or a static focus website then you know fine i can do that but we still said though that you could have components of this page that are still dynamic yeah that's where i'm still struggling with like where do you draw that line yeah i don't know like well i think my whole argument with the jam stack is like maybe the line is closer to static than we thought five years ago that's the real lesson of jam stack is like maybe things can be more static than they used to be i think for anything that doesn't require permissions based type things that might be true or authentication based type things, because that's where it starts to fall apart. My mind is,
Starting point is 01:10:10 you know, like even an e-commerce thing like that still bothers me. Like, okay, so you want to order this page or order the product off this page? Well, the next page you go to is going to be asking for billing information. I don't want to type that stuff in every time if I'm a customer of the site. You know what I mean? I've been to the site before. I don't want to fill in my billing information again. It's the reason why I buy everything from Amazon.
Starting point is 01:10:36 I just click buy. Send it to me. I don't want to have to go through this whole thing of fill this out. All right, send it up to an API. All right, now take me to this other page. So I don't know. It feels to me as if the content can be static. Codingblocks.net, perfect example. Most of the content is static. Something like that could exist, right? An ordering site
Starting point is 01:11:00 or something where you interact with a bunch of things doesn't seem like it makes sense. And I may be completely wrong, but that's where my head is. I mean, we talked about making a static version of Coding Box a while back. And at the time, part of the reason that we opted not to was the search. That's the only reason. Yeah, that was the thing that was like, well, we could create a flattener that we could go and walk the site as is, but how do you deal with the search? I think what we came up with is you'd have to know the URL, and then that would always have to go back to your server, and it would search your database and then serve that stuff up, but everything else would be served statically, right? Which it's not Jamstack because the whole,
Starting point is 01:11:50 the end result is similar to Jamstack, right? Which is static files being served. But the whole point of the Jamstack is approaching this from the, Hey, think about your APIs being completely separate from your development process or your front end, right? That's, I think in the,
Starting point is 01:12:08 in what jam stack is trying to achieve is saying, Hey, how can you build these things completely separate to where you never have any kind of back and forth with the server? Like you don't know about the server back in, right? I think it's fair to say that the static site would still be jammy jam stacky.
Starting point is 01:12:25 And there's just the search feature wouldn't be a third-party api and if the search feature goes down so what the site still works no but it would be jamstacky because the only thing you truly have there is nothing i mean so jamstack is javascript apis and markup right you literally have none of that you're not going to be writing your content pages for job for coding blocks in, in JavaScript. We're not doing that. Like we're not going to react our app or anything. Uh, the APIs it's tightly bound to the backend, right? Like when you go to a WordPress site, it's actually calling the PHP to generate the content that goes back down and the markup, you know, again, the whole reason you use WordPress is you save the content, it goes into a database and that stuff gets gen.
Starting point is 01:13:10 So I think the output similar to what you get in a jam stack app, which is static files, which I think, uh, heck, I think Carl and those guys actually from MS dev show, they do something. It might even be Gatsby, right? I don't, I don't remember exactly what it is. Um, but you can take a WordPress site and have it generate the static files. The output similar to the jam stack thing, but it's not jam stack because you're taking, you're taking something that's truly just a website and flattening it. I think jam stacks, the approach, right? It's not the output. It's the approach right it's not the output it's the approach unless i'm i think it would still count as kind of like using a static site generator tool like there's headless cms uh headless wordpress where you can kind of generate your static files and
Starting point is 01:13:57 then it would uh use the api for whatever like you know or search or. Well, we'll check it out. When is your site not built with the jam stack? So with the jam stack means that methodology and it says a site built with a server side CMS, like WordPress, Drupal, Joomla, Squarespace. So, so yeah, they're basically calling it out. Yeah. But I think if you used WordPress and like the output, the files that you put up all lived on CDN and raw HTML, I think you could make the argument that it's jam-stacky.
Starting point is 01:14:30 I don't think so. I don't think so. Because you're not doing the NPM. You're flattening it, but you're not doing the NPM install kind of process. You don't have everything in the templated markup. And you're not writing your UI files with React react or view or vanilla js or anything it's you're really doing nothing except saying hey take what wordpress has and spit it out into some static files right like you didn't do any of the development stuff which i think is what jamstack
Starting point is 01:15:00 is right it's developer focused ui split from the other stuff, unless I'm completely wrong. Well, not to mention like, yeah, I mean, cause there's a total difference here between a flattened site. If everything that I'm understanding, there's a total, there's a complete difference from a flattened site, which is what you're describing with you were going to go and flatten a WordPress versus what I'm, I'm understanding Jamstack to be where you could still have elements of the page that are dynamic based on some API call. Yeah. Yeah.
Starting point is 01:15:34 We use discuss to fetch the comments, for example. Right. So you wouldn't have that in a, you wouldn't have that in a flattened site, but in a Jamstack world, you would. Right? And the Disqus one might not be the best example. I kind
Starting point is 01:15:50 of like that example of the inventory count on Amazon, only because that's staying within, that's your API. Right. Whereas the Disqus example is someone else's API. That goes back to your OAuth kind of scenario, right? Yeah. I still think if your OAuth kind of scenario, right? Yeah. I still think
Starting point is 01:16:05 if your output of your build process, whatever it is, is a bunch of JavaScript, HTML, static files, and you've got maybe a couple APIs that go back and fetch whatever you need, and it's still hosted on a CDN, I wouldn't argue it's jam-stacky.
Starting point is 01:16:21 You should let us know in the comments. I think they're going gonna argue with us yeah yeah i mean if i'm under if from what i'm gathering from you about jam stack is that it wouldn't classify and part of the reason why it wouldn't classify as jam stack is that there's a different mindset about thinking about a Jamstack application that is more than just saying, Hey, I'm going to use my old tools of like, you know, some kind of database with some kind of server side stuff. And then I'm going to write up or write or use a flattener that'll go and walk my site and, you know, save out the, uh,
Starting point is 01:17:05 the generate, you know, whatever HTML was generated at runtime. Right. If, if I'm understanding correctly. Yeah. I mean,
Starting point is 01:17:15 I think that would be a pretty jammy, pretty jammy output. Uh, yeah. We'll agree to disagree. All right. So you're the one supposed to be telling me about this thing. Okay.
Starting point is 01:17:29 This episode is sponsored by Clubhouse. Clubhouse is the first project management platform for software development that brings everyone together so that teams can focus on what matters, creating products their customers love. While designed to be developer first, the UI is simple and intuitive enough for all teams to enjoy using. And just like Outlaw said, the favorite part for me is that it's been designed for developer first. So it's got cool things like Git tips that are built in to the UI because it's really focused for us, although it's intuitive enough, like you said, just for anybody else to use, but developers first. Yep. And you can log in and immediately see your work queue, your active tasks, upcoming due dates, your activity feeds. You can go to story views. There's all kinds of different ways to be able to look at your particular work queues.
Starting point is 01:18:20 It's easy for people on any team to focus in on their work on a specific task or project while also being able to zoom out to see how that work contributes to the bigger picture using the fast interface. And with a simple API and robust set of integrations, remember developer first, Clubhouse also seamlessly integrates with the tools you already use every day like Slack and GitHub, for example, getting out of your way so you can focus on delivering quality software on time. Yep. And you can sign up for a free two months of Clubhouse by visiting clubhouse.io slash coding blocks. Again, visit clubhouse.io slash coding blocks to get your two free months and see why companies like elastic full story and launch darkly light clubhouse. All right. So it's that time of the show where we always ask if you haven't and, and you like us or, you know, whatever, please do go leave us a review. We've got it. We've made it pretty easy to go to www.ctingblocks.net slash review. And again, it truly does make our
Starting point is 01:19:26 day. We appreciate it. And we love seeing what you guys have to say and anything, any suggestions or anything you like about the show, throw it in there and we pay attention to them all. So, I mean, we've, we've molded the show over time. We're almost a hundred episodes, so we definitely read the reviews and, and we greatly appreciate them. So thank you. And I've said it before, I'll say it again. If you haven't already, share us with a friend. We would appreciate that as well, too.
Starting point is 01:19:54 Yeah. All right. Well, it's time for my favorite portion of the show. Survey says. All right. So, uh, a few episodes back during at episode 96, we asked,
Starting point is 01:20:14 how do you plan to spend your holiday, your time off this holiday season? So now that everybody's back from the holidays, let's see how they lived up to their expectations. So the plan was your choices were spending time with the family because the holidays are all about the memories or I'm not avoiding the family. I'm building my next great project or escaping the family and the keyboard or lastly what time off all right so you know what i'm not going to go with captain carmudgeon first so so we'll hit
Starting point is 01:20:57 because i want an optimistic start to this one so we'll go with alan all right so i'm going to give you my optimism i'm hoping people said spending time with the family because holidays are all about the memories. Now I'm going to go with 39%. Okay. Now it would have been hilarious if I said Joe first, right? Should have done that. I know what he's going to say here. Yeah.
Starting point is 01:21:22 I mean, I think that everyone everyone's gonna say the family thing but you know wait hold on it's anonymous so i'm gonna say escaping the family and the keyboard okay what percentage uh 34 percent four 34 so alan is spending time with the family because it's all about the memories with 30%. 39%. Oh, 39%. I'm sorry. And Joe is escaping the family and the keyboard with 34%.
Starting point is 01:21:57 Do I have this right? Yes. Yep. All right. Well, by Price is Right rules or our mixture of Family Feud, Price is Right rules, whatever it is. All right. Well, by Price is Right rules, or our mixture of Family Feud, Price is Right rules, whatever it is, Alan wins. Sweet. It was even higher. That's awesome.
Starting point is 01:22:15 Yeah. What did it ring in at? About 52%. Nice. Nice. Wow. Yeah. Curmudgeon over there.
Starting point is 01:22:24 No dedication. I was actually kind of surprised about that one. I assumed that people were going to say they were going to be spending more time with the code. So I expected it to be more like building my next great project kind of thing. I thought that was going to be the winner, but it wasn't. What was the second highest? What time off? Yeah. Really?
Starting point is 01:22:44 Surprisingly. At what? It was like 27%. Okay 27 okay so yeah we're over 60 yeah we're close to 70 on those first two i like it i guess i was the only person hold up with smash bros no you do that with the family man you do that you beat up the other people in the family with Smash Bros. My family's not that cool. But that would require multiple switches, too. It would. So there's that. We're developers.
Starting point is 01:23:14 We can afford those extravagances from time to time. Oh. Well, okay. I guess maybe I was mistaken. All right. Well, then, today's survey will be, what do you think of Jamstack? Your choices are, it's like the future, yo. Or, eh, I'll let this front-end fad pass and maybe grab onto the next one. Or lastly, you can pry the back end from my cold dead hands.
Starting point is 01:23:53 Yeah, I know where I'm going. Yeah, it'd be interesting to see. All right. All right. So we've already hit a lot of the points that I've kind of gotten notes for here, so we'll kind of move quickly
Starting point is 01:24:07 through those parts. And then I've got some interesting questions I think at the end that I hope you will also think is interesting. So what is Notch Amstack when your view is not fully client side, meaning it's got a tightly coupled backend? By the way, that debunks
Starting point is 01:24:24 the WordPress thing. Well, well no because it's not tightly coupled if it's totally separated dude that's it's generated to not tightly coupled wordpress is not jammy well the third bullet point here that i actually typed up was uh things like wordpress are not jammy yeah it even says so on their front page. Just saying. Building views at runtime, things like ASP, Razor, Ruby Node, stuff like that.
Starting point is 01:24:54 Definitely not jam-stacky because it's just totally coupled to this middle tier. I don't know what hosting costs are nowadays. I think Linode, I've got a Ruby app posted for like five bucks a month. So I think you can get stuff pretty cheap. I don't know what hosting costs are like nowadays. I think Linode, I've got a Ruby app hosted for like $5 a month, so I think you can get stuff pretty cheap. I don't know about Windows hosting, but.NET Core fixes that,
Starting point is 01:25:11 but you're still looking at some sort of cost there, even for the most basic of apps. And if your app actually does well, then crash-a-roni. I am curious, though. You said Netlify was free for CDN-hosted files. Yep. That doesn't make any sense. Because even Cloudflare used to pay for, right?
Starting point is 01:25:31 Cloudflare has a free tier. They did have a free tier. That's right. That's right. I do love Netlify. I actually would totally use their upgraded services. I would pay for it off. You give me, I don't know how much it is,
Starting point is 01:25:43 but say $6 a month and you add off to my site and i don't have to worry about kind of the tokens or the passwords or any of that stuff and you just give me a token that i can use to uniquely identify like that sounds like a great deal to me yeah that's awesome i'm looking up to see like how cloudflare even makes their money because i remember it used to be like if you wanted ssl that was something but i think they might have added that now. Yeah. And they also, at one point, you'd have enterprise type stuff too where it would also try and make sure that malware and stuff didn't make its way into it. So I know they had those offerings. Okay. I see.
Starting point is 01:26:17 Okay. So for Cloudflare, it's like if you have a personal website or a blog or whatever, then I guess honor system here, it's free. Right. But if it's a professional website or blog or portfolio or a small e-commerce site, like that's where the costs start coming in. So I guess it's like, I guess technically like a coding box wouldn't count as a personal website.
Starting point is 01:26:43 So we wouldn't be on the free tier. Right. Oh, by the way, we totally missed this in the news. You guys saw that GitHub now has unlimited private repos? Yeah. Yep. Yeah, man. Crazy talk.
Starting point is 01:26:59 Anyways, all right. So back to our regularly scheduled program. All right. And so why would you consider something like Jamstack, even though it's kind of weird? You can't beat the web performance. So if you want to get out to a billion users, this is a great strategy for doing that.
Starting point is 01:27:16 And especially if you're doing a side project or something, then there's a good chance that you don't necessarily need a backend if you're doing some sort of thing. Like I did a color website a couple of years ago, ASP.net, I paid 20 bucks a month for years and the whole thing could have been done totally client side. But tell me this.
Starting point is 01:27:33 So we say that you can't beat the performance via static files and CDN for jam stack. But I want to go back to what outlaw said with the two extremes, because I feel like you almost could, because if you have a spa and it's one page, right, you have an index dot HTML, and then there's some JavaScript that comes down.
Starting point is 01:27:56 That's going to be cached by the browser and the CDNs. Like that's a one-time hit. Whereas with the static files, as you bounce from page to page, you're getting multiple hits. Now, granted, they might be cache hits in the browser, but if they're new pages. Well, not for the markup. The JavaScript might be a cache hit, and the CSS might be a cache hit.
Starting point is 01:28:16 The HTML could be, too. If it's a static file, it can cache that in your browser. Well, you're not going to have the same page over and over. Even the name of it would be different. Right. If you went to the homepage and then went to another page and went back to the homepage. Yeah, if you go back to the same page. Yeah. Okay. Fair enough. But that's what I'm saying. If you're in a spa, you take that hit the one time that you download it and then the rest of it's golden, right? Now you're going to take the hit on any kind of client side rendering on processing. So I just wanted to point out here being devil's advocate.
Starting point is 01:28:45 Okay. I think, I think I can, I'm going to try to answer this and Joe can slap me around and tell me where I'm wrong. I think you're going to get two, two areas of performance here though, is that one, these static files are going to be much smaller in size than what a downloading and a whole spa would be. Maybe. So there's that. And then you don't have that same processing on the client side.
Starting point is 01:29:16 So the memory footprint of the application in the client itself, I imagine, would be nil or next to it because it's just a DOM. I completely agree with that. Your memory footprint will likely be much smaller and your CPU utilization will probably be... So responsiveness of the client is amazing. But it's not necessarily faster. Just saying. Well, so what we're saying is like Jamstack
Starting point is 01:29:38 may not necessarily be faster than SPA. But what I'm saying is static hosting is going to beat just about anything except for like local file access right so whether it's spars or or jam stack either way like this this is the just about the best hosting that you can get maybe the best hosting uh yeah and uh for me as a developer there's sites like netlify out there and in cloudflare that i can run and do my start projects for free and that's actually a really big deal, I think, because over the years, I've created tons of websites and I've taken them all down eventually because over time, you just kind of have these sites that build up and build up and build up and you just get tired of paying for them.
Starting point is 01:30:15 But now we're living in a world where suddenly 2018 or realistically 2016 and on, you could put out your projects for free And all you're doing is just keeping those domain names up, which we accidentally do all the time. So tell me this though, when you say that you get scaling for free, do you actually get that for free with Netlify? Like they're not edge hosting that stuff all around, are they? Yeah. Really? So you get it in regions around the world?
Starting point is 01:30:42 Yeah. For free? For free. You just. I know. Like, how am I supposed to start a company if, like, there's all these companies doing amazing things for free? Oh, man, my battery on my mouse died. And I also feel like, you know, come on, Netlify.
Starting point is 01:30:57 So if people see your service and they realize that you're doing all this stuff for free and it's amazingly usable, like, how are they going to pay 99 cents for my fart app or whatever it is and they're like well shoot netlify is free how dare you charge 99 cents for anything yeah that's that's crazy um yeah all right anyways so that's uh i'm color me impressed yeah so it's perfect for side projects uh it's a really good developer experience the tools have gotten really good and it's not necessarily the best developer experience. Something like WordPress or depending on the type of application you're doing, it can be better. But I will argue that tools like, there's a bunch of them. I got a list here coming up of static site generators that are actually pretty nice to use and don't necessarily require a huge learning curve for a programmer.
Starting point is 01:31:45 Loose coupling is nice. So you've got a totally separated, you know, Bob, Uncle Bob would be pretty happy, I would think, with Jamstacky type things because it's a separate thing and it's got an API that it can talk to as long as you've got a nice API layer in JavaScript. Hey, I wanted to add on something here
Starting point is 01:32:02 just to like to Alan's question a minute ago. On the site here, I was looking at the pricing, and the headline of it is, Deploy your site to a global infrastructure in seconds. And they say a simple Git push will publish it to their global content delivery network spanning seven cloud providers. Yeah, I'm actually reading more information about it. Not because I didn't believe you, Joe, but because it was so shocking that it hurt my head. They call it an application delivery network. So not a CDN and ADN. So the multi cloud thing that he just said, they they offer full on atomic deploys. So if you have 1000 files that need to be deployed, it'll actually do it after they're all done as opposed to,
Starting point is 01:32:46 you know, slowly leaking them out. Um, yeah, it's crazy. And it's amazing. And it's even way better. You might think like,
Starting point is 01:32:55 uh, so QIT is using Netlify and I've got, uh, different branches hooked up so I can like the master goes out to QIT. Cloud, but I can also make branch deploy. So you can go to like backend or alpha. Uh, uh out to QIT.cloud, but I can also make branch deploys. So you can go to backend or alpha.qit.cloud and I can hook up subdomains.
Starting point is 01:33:11 But also it does previews on every build. So whenever someone does a pull request to QIT, it actually does a deployment preview and will tell you if the build passes or fails in Netlify for free every pull request. That's crazy. Another thing that's on here that's pretty nifty, and we're talking about Netlify.
Starting point is 01:33:30 I don't know about any other of these ADN type things, but cache invalidation. Like we've worked in CDNs before, and cache invalidation can be a bit of a pain, right? Like you got to check and see if the hash is the same and various different things. The cache invalidation on the ADN is instant. No risk of stale content. of pain, right? You've got to check and see if the hash is the same and various different things. The cache and validation on the ADN is instant. No risk
Starting point is 01:33:48 of stale content. I don't know what they're doing there, but that's really cool. Do you know what else I do with Netlify that's ridiculous? I have custom environment variables set up for my build. So if things like if I had a database or if I have a search key or whatever, I could pop that stuff
Starting point is 01:34:04 in there rather than checking that in. So I can keep my keys in one place, and that stuff will be used during the build and not deployed. That's pretty nifty, man. Yeah, it's crazy. And it's all free. Yeah. There's something else I really like, too, that I forgot. Oh, it's got snippets.
Starting point is 01:34:17 So if you want to do Google Analytics and you don't want to check that into your public code, you can do the snippets right there. And it'll just depend on the end of every file. file man they're not even sponsors of the show we need to reach out to them you're like look dude we just gave you like 30 minutes of love 30 minutes it's like the whole episode like they are kind of they're the company behind jam stack like they're they're pushing this it's pretty cool all right absolutely mentioned a couple examples there i like that a simpler um less stuff to learn to maintain. So, you know, if you talk about like doing a Django site or something, then you're just kind of bringing on like a whole big framework that's got its own quirks and stuff that you've got to learn to work around. And so it's kind of refreshing to just be able to focus on front end technologies and whatever build tool you're using so that, you know, there's no getting around that unless you're just you know yeah tough and doing this all in pearl or something and uh security so uh i wanted to touch on security
Starting point is 01:35:12 because if you think about like how you know a lot of websites are built including wordpress lamp is a really popular option what does your security footprint look like for your LAMP, which stands for Linux Apache MySQL MySQL and PHP. There you go. That's big. That's huge. There's all sorts of vulnerabilities built in there. I can't believe I forgot that.
Starting point is 01:35:37 App to get this upgrade. You're done. You don't need to worry about it. Oh, man. Yeah. You think about the things you have to worry about there oh man yeah but it's just you think about like you know the things you have to worry about there is compared to you know this static which you can't even access the directory directly and on lvi so it's just off in the cloud somewhere yeah and you got no sql injection because it doesn't exist unless the api but that's not your problem right that's some third party agnostic api that you don't care about. Yep.
Starting point is 01:36:12 So, yeah, I think those are pretty good reasons for using Jamstacks for certain things. Best practices, we mentioned things should be hosted on a CDN. The more edges, the better. Using modern build tools. So they recommend actually using things like Gatsby you know, Gatsby or hex or whatever. Um, just, you know, why not?
Starting point is 01:36:28 Uh, I thought it was kind of even a weird thing to mention. It's like, you should use modern tools. Like, you know, God tell me twice. Uh,
Starting point is 01:36:36 in fairness, there are an ungodly amount of tools for JavaScript. It is, it's a little overwhelming and very frustrating. Yeah, for sure. Uh, one mentioned to,
Starting point is 01:36:50 they recommend having everything in a single get repository. And that's kind of like we talked about having those markup files in there too. It's pretty nice. And, uh, remember FTP, that's a kind of a thing in past.
Starting point is 01:37:00 Like we've got web hooks, which are even like kind of not that popular. I think a lot of things will just log in with your GitHub credentials or you do the OAuth thing and it'll just kind of watch your repositories. I don't know if there's some sort of watcher API or if there's dynamically webhooks going on,
Starting point is 01:37:17 but it's kind of nice to not have to log into my repo and paste a URL there for it to update. It just kind of takes care of it with the click of a button. Just watchers are really common, so I just. It just kind of takes care of it with the click of a button. So just watches are really common, so I just thought that was kind of a cool side note. Focus on automated builds. I think that's kind of a given using the tools.
Starting point is 01:37:37 They recommend doing atomic deploys, which is interesting and kind of, we talked about the Amazon example. That's an example of something where if you were doing that in Jamstack app, which is controversial at best, then that is probably a case where you might want to consider doing file-by-file replacements. But for the most part, most smaller sites, Atomic Deploy just kind of makes sense. Like why not deploy to another directory and swap rather than kind of having this period of downtime?
Starting point is 01:38:03 Why have any downtime at all, right? Yeah, and it also keeps your site in a consistent state, right? Like you don't want to be hitting new stuff, mixing with your old stuff. They may not jive well. Yeah, and it's kind of file by file too. So like, you know, I might click on the homepage and get the old version, and I click the next page, I'll get a new version. But assuming I haven't broken links or something, so what?
Starting point is 01:38:26 No, that's kind of nice. You don't have to worry about like, yeah, I guess you always worry about versioning APIs and stuff. You don't have to worry about your HTML and stuff like that. So that's nice. Yeah, I just want to mention too that stack sites don't mean you don't have any sort of tests. Like Gatsby has a big focus on testing. A lot of these tools have a really big focus on kind of UI testing. And so that's not something that you're giving up.
Starting point is 01:38:46 So I just wanted to mention that. A couple of downsides. We mentioned it being great for users and scaling really well to consumers of your website. But large sites, you know, we talked about the Amazons, or if you've got 100 developers working on a static site, you know, probably not going to work out too well. I'm curious. Did you play around with some of the examples that they have on the,
Starting point is 01:39:09 uh, notify site? Nope. Like one of them that they had on here was the Marvel search. And I'm trying to figure out like, okay, what makes this thing Jamstack? Because like,
Starting point is 01:39:21 if you, if you open up the dev tools, Chrome dev tools, Chrome dev tools, and you watch, you know, your queries be happy, you're like, okay, well, I see my traditional kind of queries, right? Like page loads up, bunch of images populate, you know, some content loads up.
Starting point is 01:39:37 And then if you start typing in a letter, you know, letters, it's doing like a type of head search kind of thing. So you're seeing like multiple API calls getting, you know, sent along API calls getting, uh, you know, sent along the way, you know,
Starting point is 01:39:47 depending on how fast you type and, you know, images that are coming back to match some of those responses. But I'm like, yeah. So like your point there, I think is that they're not necessarily generating all these thousands of pages for every comic or whatever.
Starting point is 01:40:02 They're still making a big use of API. So it seems like they're not really getting a whole lot of bang out of that CDN, right? If there's just kind of a traditional spa, what's the difference? Yeah. I mean like,
Starting point is 01:40:13 yeah, that's where I'm like, I'm, I'm lost again because it's like, okay, yeah, you made the front, the front page could definitely be static.
Starting point is 01:40:20 What was, where did you find that? Uh, if you go back to jam stackack.org and click on examples right there's a there's a whole bunch of different things in there and one of them if you scroll down it's called marvel search and i mean it's it's a nice looking little site here. But then open up Chrome DevTools and watch the network tab as you do things, right? Because what I was expecting, based off of what I was understanding how this thing would work so far, right, is I was really expecting not to see a lot of network traffic.
Starting point is 01:41:04 Or maybe I'm thinking of that wrong. As I went from page to page, right? Because I was thinking like, okay, you've already preloaded this, but I guess now that I say that out loud, I'm thinking no, that would be more spa-like, right? Yeah, I don't think that you have to, I don't think that Jamstack is at odds with spa. It's just
Starting point is 01:41:19 kind of encouraging you to generate the things that make sense and do that stuff up front. It's kind of like a dial from like Django to Jammy it sounds like this this particular API is more you know it's kind of more in the middle or maybe closer to Django even so an interesting thing here is though they have a single page the Marvel search page but every time you click like to go to a next page it's reloading the page. There's no hash up there in the URL.
Starting point is 01:41:48 It's actually going to another page. And I'm assuming there's some JavaScript on the page that, that parses the URL stuff and then sends off the API calls to load this stuff. So it's, it's a templated page is really all it is with a bunch of toggles. Now that makes me wonder though, like the stuff on the left where it
Starting point is 01:42:05 says x-men avengers all that that was probably pre-genned is my guess that'd be my guess i don't know for sure all the toggles yeah yeah so i don't know well kind of like i do with um the podcast app which is another app that's like heavily built on like a search api i do a lot of pre-genning of things like categories and technologies and stuff and so I do a lot of pre-genning of things like categories and technologies and stuff so that I can pre-generate navigation. Those are actually facets. If you click on Teams and you're like,
Starting point is 01:42:34 okay, show me X-Men, all the powers change. This is, I don't know if it's handlebars. It sounds like just a traditional spa, right? It's like a single-page application that kind of fetches all its data via API. Well, clearly it's not a SPA if it's listed as an example on the Jamstack.org page. But why can't a SPA be Jamstack?
Starting point is 01:42:56 It could be. It totally could be. And that's... Just a matter of... Like in this case, they said, you know what? We don't need to do a lot of generation. But maybe they're doing... I don't know why they chose to use this as an example. It
Starting point is 01:43:07 seems like an odd example to me, but maybe they do a lot of their static content and markup files or whatever. Maybe there's, you know, there's a big focus on API. Clearly there's a big focus on front end JavaScript. So the really just all we're saying that the thing that is not so jammy about this is that it's not making a big use of like static files and CDN generation. But I think it still hits the first two letters pretty strongly. Yeah. I mean, it's the UI, the UI is there, but here's the thing. And this is what I'm not exactly, it looks like they're using the handlebars. So basically just whatever comes back from the API call gets filled into the handlebars template.
Starting point is 01:43:47 I mean, that's, again, like that's where I think that you can't draw too many lines. Basically, you can have a templated page that you can fill data in. And in theory, that's the same thing, right? Like you're not generating things server side. You're just plugging in things from an API call into the template. Yeah, I just got a pitch too. CodingBlocks has a couple videos where me and Zach Ratty went and we took this Marvel search
Starting point is 01:44:11 API and we built a little React app. It was all in React. There was no middle tier there. Anyways, where were you on this? The downsides. The steep learning curves. Yeah, so if you're talking about having your stuff in some sort of market files
Starting point is 01:44:30 or checked into Git and that's not something you want to turn over to marketing department. Also heavily dynamic pages if you've got a lot of stuff like adminning and then not so great. But it sounds like there's a steep learning curve for devs. It's been a while getting it yet. Well, I mean, you get it. It just a matter of like where's the distinction we're trying to kind of like clearly define something that's a little bit nebulous right i agree yeah so it's just a philosophy but yeah i think you could argue that the marvel ed by is not a very good jammy example because it doesn't make use of the static generation. I don't know.
Starting point is 01:45:06 I mean, it's statically generated that one file and then the rest of it is a single page that the template just fills in depending on the toggles you do. Like the page isn't changing. The structure of the page is exactly the same and it's just filling those in. So I get it. I mean, it's a very limited jam stack app, but it's. I don't know man i my understanding from before though was like spas were not jams were not jam stack apps or pages right i thought that you were like pre-genning things so that you could push it out to a cdn now we're talking about just pushing out your javascript application to a cdn for your spa that doesn't sound but every click reloaded the page every click loaded the page again
Starting point is 01:45:50 not yeah not in my case look up the url there's no hash up there it's actually it was adding query string parameters i don't think it's illegal but the page wasn't reloading you'll see the flash on the images it It's apps. No, no, no. If you clear your network tab and watch what new network history comes in, all I ever see is a new image
Starting point is 01:46:15 get populated in. But the page itself is not reloading. It's not reloading that page? No. Yeah, but why does that matter? They never really said that a Jamstack app can't be a single page. Right. It's kind of going against one of the best practices and philosophies of statically generating sites. There's no hard and fast rule that says you're not allowed to have a spa.
Starting point is 01:46:37 If anything, it makes me feel better about the JAMstack thing because it doesn't make sense to generate a page for every combination of those toggles on the page right it makes more sense for that to be api driven and just fill in a template and that's what they're doing i mean like i said it's very simplistic but that makes more sense to me well maybe where i got confused is i thought that that's where like the market the templated markup came in right like i thought that's part of where that conversation came in is you were going to flatten all your content out, I thought. Yeah, but this is a case where the API, there's so much data there and so many different combinations that we wouldn't want to generate all those permutations. So that's a case where we're saying, we're not going to pre-generate this because it's too crazy to do that for every search. So we're going to use an API for that.
Starting point is 01:47:28 I was just emphasizing different parts of that jam. So it's, it's heavy on the J it's heavy on the a, not so much the M. Right. Yeah. I mean, cause this specific example looks to be powered by a search engine. Yeah.
Starting point is 01:47:39 Specifically. Yeah. So this looks like every other spa. Well, not every other other spa because think about how many spas like if you're like working in a company you say okay we're going to create a new app it's going to be spa first thing you do is go into file individual students say file new project asp.net or you know web api or whatever where you kind of start from that angle. And in this case, we're saying the application here may only be a single file, but it's going to be up there on CDN.
Starting point is 01:48:12 It's going to be client JS focused. It's going to focus on using APIs for doing whatever it needs to do that can't be genned. You've totally lost me. Now we're back to square zero because now what's the difference between this and amazon.com? Amazon.com is definitely, I guarantee you, absolutely hosted across multiple CDNs, right? And we agreed that they probably don't flatten every product page
Starting point is 01:48:42 out there. So they're making API calls. So you go to amazon.com, you're probably getting like some kind of a template of like what the homepage should look like with the rest of the app. And then everything else is making API calls. No, but the difference is different. So the difference is the amazon.com has URL rewrites, right?
Starting point is 01:49:00 Like I guarantee you, if you go to amazon.com slash and then whatever the bin number is for the item and then, you know, whatever comes after it, that is an Nginx or a Java lookup that's basically saying, all right, now go get the content for this. With the jam thing, there is none of that. You're going straight to a static file, which is why you're describing using a canonical though. That's not necessarily a rewrite. No, no, there is no server though.
Starting point is 01:49:26 There's a big difference. There's no server here at all. This is serving up that static file. So that page, I forget what it was, um, which, uh,
Starting point is 01:49:34 it's Marvel dash search. That's an HTML static file that's being served up. Everything else is being pulled from the API, but this page that loaded came from a static file, right? That's not going to happen. There's no server. Literally you made a request to community.algolia.com slash Marvel dash search. It went resolve that host then said, okay, go to this page. And then it went and pulled up the static file for Marvel dash search. There's no, there's no lookup for that information
Starting point is 01:50:05 it's going to that file so i think that's the big difference is yeah amazon.com is going to have cdn type stuff but if you go to any amazon url i guarantee you it's going through either engine x or some other thing that's doing a url rewrite and saying go load this data. I'd lay money on it. They're not, they're definitely not got static files. There's no way. I guarantee you there's no way they have rewrite rules for every one of those. We're getting way in the weeds. I don't think
Starting point is 01:50:35 it really matters if Amazon has redirect rules or not. I think we can comfortably say, though, if you're developing a Ruby on Rails app that you didn't deploy onto Heroku, that it's not Jamstack. I don't know about Amazon, but we're saying that there's this kind of
Starting point is 01:50:51 there's a set of tools that we're kind of leaving out. So if you're Lampstack, if you're Mean, if you're ASP, Ruby on Rails, Django, you're not Jamstack. So it's not so much about whether it's a spa or not. It's about what are we not doing?
Starting point is 01:51:06 What tools are we kind of leaving out of the equation? If you're starting from a single file or your markup files and you're using just JavaScript, whether or not you're calling APIs or not, it sounds like you're a Jam application, right? Like in a nutshell, that's kind of what it boils down to. Yeah, you're pretty jam application, right? Like in a nutshell, that's kind of what it boils down to. Yeah, you're pretty jammy. You're ignoring any kind of server side stuff at all.
Starting point is 01:51:31 You just assume the API is something you can call and you get stuff back from it. You're not writing any middle tier code that exists with your application. I think that's how it's boiling down in my brain right now. Yeah, if you think about like back in the day, I would start an ASP website. And then when I would go to deploy it, I would RDP into a Windows box. I would set up IAS. I would deploy my web application with like WebDeploy. I would go in and I would set up my bindings and all that stuff.
Starting point is 01:52:00 And if there's a certificate, there's this whole kind of class of stuff. And if there's a certificate, there's this whole kind of class of stuff. And then, you know, ultimately whether, you know, the HTML files live on a kind of a CDN or however that, that ends up being, I still have this kind of coupled application where I've got a backend server that's strictly bound to the front end and the front end is strictly bound to the backend. You can't separate those. Now we're saying like, why do we need to do that? Can't we just do a bunch of the work up front, toss out that middle tier, and focus on the client experience, and then whatever middle tier parts that we need, why not have those as third-party microservices? You're saying they have to be third-party, though?
Starting point is 01:52:43 No, they don't have to be third-party, but you want to treat them kind of like third-parties. You want to treat them as URLs and not be totally bound to the experience so that if certain features are down, if certain services are down, the main user experiences or other experiences that aren't bound to that don't need to be. It's basically a separate project, right? It's not going to be included in your jam a separate project, right? Like it's not going to be included in your jam application basically. Right. Right. So if the shopping cart's down, I could still browse the site or, you know, whatever. It just kind of, it ties in nicely with that, uh, the, like the microservices kind of philosophy of like not everything having to be up all the time and things kind of working progressively. So this is a nice philosophy that works well with that because it's focused on that
Starting point is 01:53:28 JavaScript and APIs and things being client-side and hosted on CDN. And we're kind of cutting out that traditional middle layer that we used to take for granted for so many years that would just be there. That make sense? I think I'm getting it. I mean, I thought I was, but it's great at the Marvel app. Yeah. I wish I'd never seen that Marvel app. Then I was like, I don't, I don't get it.
Starting point is 01:54:03 I don't get how this is a thing. Yeah. So the static generation is a best practice. I mean, it seems like... Not baked in. There's no S in jam. Wait, say that again? Wait. There's no S in jam.
Starting point is 01:54:15 No, but hold on. No, no, no. Before that, what did you say? Static generation is a best practice that ties in nicely with the CDN hosting. Well, I mean, according to one article I found, it's basically like an evolution. So backing up, we had the LAMP stack, then the MEAN stack, and now there's JAM stack.
Starting point is 01:54:36 Yeah, and remember how I kind of mentioned the reasons that I used to use ColdFusion for building websites is because I had those server-side includes and database access. Now, the database access, that's still kind of a problem. But what we're seeing is things that I used to use that middle tier for, like layouts and footers and headers, I can do that now easily with front-end tools like React or Vue. So I'm cutting out the need for a lot of the backend servers for applications
Starting point is 01:55:06 that we used to take for granted because we wanted stuff like that. And we didn't really have good tools for doing stuff like that. Now we're saying we can get around it through static generation or in some cases, spas. Maybe. Yeah. Hmm. All right. maybe yeah all right fill us in on the rest yeah just a couple common tools i wanted to mention uh so you know talked about a lot about netlify let's encrypt github and node making a killer combination
Starting point is 01:55:38 because you can do your builds it's https everything just kind of flows nicely and it's all free there are also a lot of really good static site generators i mentioned gaspy a few times there's also jekyll hugo hexo middleman pelican if you've heard any of these then we're talking about static site generators i want to mention discuss because that was a common way of getting around some sort of problems through an api because that's something that's traditionally been a problem it's like well i want live comments i want people to have interactivity with the site. And we can say, well, why not slice off the parts that need to be interactive
Starting point is 01:56:10 and up-to-date and keep those separate? And so this is like an older service, but it plays in nicely with this kind of philosophy. Well, I mean, going back to our – I hate to keep bringing up the e-commerce example, but there are similar services and APIs for product reviews. To where you could have your product page could be mostly static. It's probably not going to change that often.
Starting point is 01:56:38 You're not going to change the description that often. So maybe you would have that in like a, some kind of a solar index or, you know, elastic index. Uh, but the other pages, the other parts, like the reviews you might have served from this other API. Yep. yep and search engines too are a common use case although we mentioned it's kind of you're dipping into spa land heavily because it doesn't make sense to necessarily generate all the different things that you can get different permutations and filtering that you can do but it's often cited as a kind of a good pairing there so this year i'm all about jam stack and search uh hello cms is that's kind of a a newer term that's being bandied around,
Starting point is 01:57:27 but it's just the idea that your site is the output, and it's not necessarily married to what you use to generate it. So that's kind of tying into this philosophy. There's some overlap there, and you'll be hearing more about things like WordPress headless and things like that, I think, over the next couple of years. Dude, there's actually a headlesscms.org
Starting point is 01:57:50 that is all about this for Jamstack. Interesting. I still think that we're in early days for Jamstack, but I personally think, you know, if I were doing this survey, I think that it's going to be even more popular over the years. And I think that we're going to get around some of these humps like the usability problems and things like that.
Starting point is 01:58:08 And I think the static site generators are going to get better and better because they're so useful. I still think we've got to come up with a clear definition of what makes it Jamstack and what isn't. Yeah. JavaScript, APIs, and markup. There's a definition. You say that. I'm not big on and markup. There's a definition. You say that. I'm not big on the markup. Google Docs, I wanted to mention
Starting point is 01:58:30 because a lot of people are doing things like you'll have a form and it'll end up just kind of dumping you into Google Docs or you could do something like SurveyMonkey or whatever using something else for that interactive content. So that was interesting.
Starting point is 01:58:40 And we mentioned Contentful earlier as being a way to kind of host dynamic content and be able to pull that stuff from a static website without you having to host that or have a database or whatever. And so you can still get that dynamic type stuff and people can go in like a marketing team can go in and edit those content snippets and your website is responsible for like arranging those snippets. And so it's a way of kind of solving that marketing problem that we talked about. So I expect to see more services like that in the future. And I thought that was kind of a good example of attacking that problem. And so what tools are in the outs?
Starting point is 01:59:12 And these are the ones that are losing ground to Jamstack. So if Jamstack is going up, what's losing ground to this? And that's where I think it's like the CMS is like the WordPress ghost, Embraco, Drupal. There's sites that used to be done in those technologies that are going to be done less as people do more stuff with static site generators. I'm sort of shocked about the WordPress thing, seeing as though we just found out that a quarter of the internet runs on it. Yeah, man.
Starting point is 01:59:41 It's not going anywhere. Yeah, I don't think that one's dying. Maybe some of the other ones. I don't even see these other ones going anywhere. Yeah, I don't think that one's dying. Maybe some of the other ones. I don't even see these other ones going anywhere. Drupal's still a... It's a big one. That's a huge one. I don't see that going anywhere. I think it's going to depend... It might
Starting point is 01:59:56 fall out of favor. Developers that want to stay on the bleeding edge of technology, it might fall out of favor with those developers. But in terms of businesses, it might fall out of favor with those, uh, developers. But in terms of businesses, I don't see the businesses are necessarily going to be like, Oh,
Starting point is 02:00:10 well, jam stacks now a thing. So let's get rid of Drupal. I think that was a key differentiator that you just said right there with developers. I think we might be gaining ground and something like jam stack. Cause it makes sense. Right.
Starting point is 02:00:22 But for people that just want to go do things that are not developer savvy, they're not going to be doing it. It's like you said earlier. You're not going to have a marketing crew come in and do Jamstack. They will set up a WordPress site in 30 minutes and be up and rolling, but they're not going to be able to do that. Yeah. I think I know Orlando has a WordPress user group.
Starting point is 02:00:43 I know that. I'm sure Atlanta has one too. And I just think that there's going to be some fraction of those people that are making websites for restaurants or whoever else are making small kind of mom and pop websites. Some portion of those is going to say, you know what, maybe I should just do this, you know, static site. And I don't have to worry about it going down in the middle of the night and not finding out. I don't have to worry about a plug in going out of favor. There's gonna be some percentage of people that start swapping over to technologies like that or like this. And I hope that over time that, you know, that number
Starting point is 02:01:12 increases and, you know, WordPress is, is good. There's a lot of reasons to use it. And certainly that momentum behind it is a reason for it. But I think that there's some percentage of that that doesn't need to be WordPress. And it's good to have options. So we kind of talked a little bit about what those kind of out tools buy us, whether it's usability for the management of the content or there's some features and stuff that we get out of the Drupals of the world, like plugins or whatever, uh, that, that are nice to have. And I, I still think that there's a need for those and you know what, we're going to see the table shifting there. So maybe over years we'll see more services that kind of fill in those blanks and maybe not. And, uh, we talked about, you know, maybe this is the first question you ask when you
Starting point is 02:02:01 start thinking about a website. So like I've been talking about making a conference website that tries to bring together like dev conferences. For me now, the question is, should it be static first? And I may say no to that, but that's the question that is now, you know, absolutely in my list of things to think about when coming up with a new project. And it wasn't that way five years ago. I would never have considered this. And then here's the tough question for me, because I've always been a backend kind of focused person. I want to know if our backend island is shrinking. I don't think so. Only because if anything, it's going to put more importance on it. Because if you're trying to make it to where people can write these UI things completely separated, then you're going to have to put more thought into how your backend is created, how it's exposed, how people use it, all that.
Starting point is 02:03:01 So I think it just adds more importance to making stateless backends that people can use in their applications, right? It might actually make it more difficult, to be honest with you. I think that the reality of our current world is that the favor is that our backend island is actually a bunch of islands. It used to be one big island.
Starting point is 02:03:28 So you had one server, and everything was on that one server. But now that's not the preference anymore, right? Like serverless, for example, right? Just functions that sit on someone else's server, and they get spun up as needed, and they scale as needed. That's just one example, right example of how there's many islands. So I don't know that it's going away or shrinking. I just think it's like we're distributing it. And it's getting more complicated because of that distribution of it.
Starting point is 02:03:59 You definitely have to change your mindset about things. You can't just assume, well, you got here to this server, so you must be authenticated. Right. I do think that backend work has changed a lot over time. It used to be a lot of my time was spent with CMS. He typed things where people wanted to be able to pop content in. I would build a lot of those forms and things.
Starting point is 02:04:19 So like whoever in marketing could do that sort of stuff. And now the, the marketing people got tired of paying my salary and said, yeah, I'm just going to use WordPress or whatever. And so I think tools have eaten that space and that work that I used to do. But all I do is just work on other things. Now I do more work in other areas and things that are unique to my problem domains. And I feel like overall more productive. But I don't know. I'm still not sure. I think that the back end island might be shrinking because of those commoditized services, because of things like Netlify and the clouds and stuff. So I think that every day I'm seeing more and more stuff that I used to do
Starting point is 02:04:53 being kind of transitioned to a third-party service that you can get for $5.99 a month. So I don't know. I think it's getting smaller, but I don't think that's something to be afraid of. It's just evolution. It's like you said. You change from one thing to another, right? You start working on different pieces. So, yeah.
Starting point is 02:05:10 Yeah. I am curious, now that you've done a Jamstack thing, because we've derailed you 900 times throughout this conversation, what did you find was good and what did you find was sort of annoying or challenging when you were doing yours? So for me, for sure, Gatsby has been a big learning curve. And I haven't liked the way that it's worked in certain aspects. And I do a little bit of React, but not a whole lot. So there's some kind of toe stubbings there. But there's just some other stuff like it's really biased towards GraphQL and a couple other things and kind of a plugin economy. And so there was just a lot of having to learn about that specific tool.
Starting point is 02:05:54 And I wouldn't have predicted that. I think, oh, it's a JavaScript site and a static site. I kind of assumed it would just kind of spider through my React app and do everything. But that's not how it worked. It was very much more like me telling it to create this page, create this page, and some other type things and chaining plugins together. And so it was a much more like me telling it to create this page, create this page and some other type things and chaining plugins together. And so it was a lot more work than I expected specifically for the static generation. What I didn't expect though, was to like the output so much, being able to host something for free, to be able to pump out hundreds of pages in no time and just have that stuff work reliably and amazingly has been fantastic. Gatsby almost makes it sound like the M is supposed to be mobile.
Starting point is 02:06:36 If you didn't know anything about it, like if you look at Gatsby, they say the future of the web is mobile, JavaScript, and APIs. That's the jam The Jamstack. Gatsby has really good plugins that will do things like automatically massage your images and make them more what's called – it used to be like save for web in Photoshop. But it'll efficiencyize your images. It'll resize different ones for different response of whatever, and it'll kind of manage a lot of that stuff for you with plugins so you don't really have to think about
Starting point is 02:07:08 you just kind of say i'm using the image plugin here's my directory and it kind of manages that for you which is really nice so that makes sense to me why they would kind of focus on that that mobile there so overall even with the pains that you had, would you do it again? Are you a fan of it? Oh, for sure. Okay. For sure. You didn't know he was already a fan.
Starting point is 02:07:31 He's been like raving about it. He's been dying to do this episode on Jamstack now for a while. But what is it so much? Is it the cost that you're like, oh, that's awesome? Or like what's the one selling thing to you that you're like, this is that's awesome? Or like, what's the one selling thing to you that you're like, this is why I would do it again? I get to focus. It's just a nice developer experience for me.
Starting point is 02:07:51 I get to focus on the front end, look and feel. I don't have to worry about a backend and I don't have to kind of have that cognitive load of dealing with like half JavaScript and half Ruby on Rails. I can just focus on my one thing and then I don't have to worry about hosting. I don't have to worry about a build process. I don't have to worry about Docker.
Starting point is 02:08:10 It's just boom, done. But hold on. In fairness, though, it's what dev podcast app, right? Podcast, plural. So the one thing, though, that I'm curious about is there's nothing interactive on that page. Like the one thing that you said that you've got to hack in for when you're trying to get some data is this actually jumping you out to another site. That's not an ideal experience, right? That's how it is for now.
Starting point is 02:08:36 That's like one of the next things I've got going on is I want you to be able to search and I want to have like a little search. Actually, what I want to have is because this site is really about podcast discovery. So you can kind of browse by tag or also do searches. But I really want to kind of keep you on this site. So I want to not have so many links to QIT, although I want QIT to be heavily kind of in the ecosystem. But this site is almost more about learning. So I want you to be able to search and I want to show the search results. So we can kind of say like, this is how you can find things that you care about. And then I want the link over to QIT. So this particular site is not, it's more about education and discovery than it is about actually searching
Starting point is 02:09:15 and playing. And I still want the focus for searching and playing to be done on QIT, which is like a stripped down app. I don't want to bloat that up with a bunch of content and like kind of lessons learned. So I just want that to remain the app. And I want want to bloat that up with a bunch of content and lessons learned. I just want that to remain the app and I want this to be more about the content side of things. I do want that search experience there. I do want you to be able to search. I want to show the top five results and then I want you to be able to queue it up over in QIT. If you're going to play it, play it in QIT. Okay. You got to use your imagination a little bit.
Starting point is 02:09:48 Well, I found a broken link. I'm trying to figure out how to fix it. I'm going to put in a pull request. Yeah, I didn't write any tests and I really should have. It's like one of the big selling points of kind of like using something like Gatsby or whatever
Starting point is 02:10:02 is they've kind of like thought about that testing experience and have built you in some support and examples for it. And so, yeah, I mean, I think that's about it. It's definitely been a more controversial topic than I expected.
Starting point is 02:10:16 I hope it gives you something to think about. Can I, well, let's talk specifically, maybe your specific jam stack app here might answer some questions if you don't mind yeah it's like if you go to devpodcast.app slash shows right and then you'll see a bunch of content and if you watch your network tab there right uh and you click on something, you'll get a canonical for that show, but you won't see any new network tabs except for the image of the show.
Starting point is 02:10:55 So in that case, I think what might be going on is maybe Chrome is doing some sort of preloading on some of those links because this is absolutely a separate file. Yeah. That's similar to, that's similar to the Marvel thing earlier. I think it's not killing off your, I'm in an incognito window. Well, you know how Chrome will sometimes go look too,
Starting point is 02:11:18 and it'll kind of like navigate past for you and kind of predict that what you're going to click on. So like if I, if I go to the shows page, I clear my network traffic and then click on a show, then I
Starting point is 02:11:33 should get all the content for that show. Interesting. I'm going to put in a pull request. I know how to fix this problem. Yeah, awesome. Yeah. Is it in our coding blocks? Yep.
Starting point is 02:11:51 Yeah, I see what you mean, Al. That is interesting. Maybe that's why I was having such a problem trying to understand where the definition of this thing falls in line with looking at that marvel app yeah so check this out so if you go to that shows page and watch the network app uh clear clear the network tab and then mouse over each of those links but don't click on them
Starting point is 02:12:16 yeah it actually starts loading the content for it that's cool and so yeah it looks like in this case it's not actually uh generating the uh that's funny it's not generating the uh html for this file okay so you're telling me then that i'm just seeing some efficiencies in chrome and that's why i was having trouble with like the marvel looking at both the Dev Podcast app as well as the Marvel Search app, trying to understand the breakdown of where is it jammy and where is it not, right? No, no, no. You're totally spot on here.
Starting point is 02:12:54 So this is a misunderstanding on my part about how the Gatsby part worked for the shows. And not all of the things are like this. The shows is one where I use kind of a template. And I assumed that it was generating all the HTML for these. but what it's actually doing is it's got one page there and it's taking care of like basically if you mouse over if you load something it will just kind of pop in the stuff that's changed and it doesn't do a full reload so it's kind of taking care of spa find this for me which is very strange to me. Oh. Okay. But if you go to the index page, it's a full reload. If you go to the tags page,
Starting point is 02:13:28 it's a full reload. It just... That's interesting. So it's kind of Spotify'd it for me. And what it's doing is the content, so I mentioned those shows and whatnot, that's actually being pulled from the CDN as well. there's no database or anything that it's able to access
Starting point is 02:13:49 so when it does that it's still pulling that dynamic data from the cdn somehow oh okay here we go so like when you mouse over those shows or when you click on the shows and it returns that JSON file, that is actually a file that's on disk. So you can copy that path and open it in a new tab. And so it's just not doing the full HTML. It just got the JSON data specifically hosted on the CDN. That's cool. That makes me like Gatsby more. Well, my job here is done then
Starting point is 02:14:28 because that was my goal all along. Yeah, so that makes me think like maybe with the Marvel API, maybe it's not fetching all that stuff from the API. Maybe that's why it's so jammy is maybe that it's got the the JSON files for the individual
Starting point is 02:14:44 like issues or whatever stored over in JSON files that it's got the JSON files for the individual issues or whatever stored over in JSON files that it's just able to fetch from the CDN rather than pulling all that stuff back and maybe only pulls the minimum information from Algolia. So it is very – so we're saying then that it would be very spa-like to have, you know, a Jamstack app would be very spa-like or could be very spa-like using these two cases as examples. Just the difference is that your content that you might go to another page isn't coming from a database or API call.
Starting point is 02:15:24 It's coming from content that is cached on a CDN and like a JSON file. Yeah, which is different than I thought. So I assumed everything here was generated files, but it's actually there are files that are generated like the index page, some other things, the latest page, but there are things that I did kind of with one of the plugins that it's doing very much spa-like. It's just getting the data from a CDN.
Starting point is 02:15:50 I'm going to go clone this repo. That's pretty cool. Yeah, you should. I found a broken link too. Dang it. I want to find a broken link. Okay, so with that, I think that basically wraps up everything that we've got here and we've got several resources we like here. We've got's time for my favorite part of the show. It's the tip of the week.
Starting point is 02:16:30 And I didn't think that it was all that controversial, just tons of questions from curious minds wanting to know. Yeah, and a dramatic reveal there at the end. It was just more like my ignorance of the subject that, you know. Both of ours. I just had a bunch of questions. Yeah, I think those are all the questions that, you know, both of ours, I just had a bunch of questions. Yeah, I think those are all the questions that anyone who's familiar with JavaScript and doing things is going to ask is like, what's so different about this? That's kind of like the main thing.
Starting point is 02:16:54 It just sounds like JavaScript to me, right? Right. Well, yeah, it makes me feel like the old Commercian developer, like, what is this Jamstack? I don't need that. Get off my lawn. Like Jamstack being j don't need that. Get off my lawn. Jamstack means jQuery. You do that so well. You got to prepare for retirement somehow.
Starting point is 02:17:14 That's right. So tip of the week. So mine is going to be Advent of Code.com. I mentioned giving up on this earlier in December. But what I've kind of decided to do is just try and do all the Advent of Codes for all the past years. And there's been four of them now. And each one has 25 problems. And what I'm thinking is if I do all 25 problems from all four years,
Starting point is 02:17:35 that's 100 problems that deal with things like BFS and DFS and heaps and graph algorithms and all sorts of stuff that I don't typically run across on my day. So it's a nice collection of problems and varying levels of difficulty that kind of, uh, exercise different parts of my brain that don't always get so much exercise. And so that's one of my kind of goals for 2019 is to go through all those past years and do all those problems and hopes that next year I'll be able to really kick butt on the Adventa code. So I just wanted to kind of list that website out as a tip because of those past years being available.
Starting point is 02:18:12 All right, nice. I'm going to be playing on the vibe while you're doing all that. So, so mine is, is sort of silly, sort of not like, and I know that people are going to be like, he's never been on the interwebs before.
Starting point is 02:18:28 So the Facebook marketplace, man. Oh, my God. That place is amazing. Joe, you ever been there? No. See? All right. At least 66% of us find this fascinating.
Starting point is 02:18:40 But Joe, did you know that the marketplace existed? Oh, wait. No, no. I know this. Get off. Yeah. Get off. Yeah, I look at stuff all the time near me Oh, wait. No, I know this. Get off. Yeah. I look at stuff all the time near me. You lie. Alright. Here's the difference. I mean, Alan's not joking when he says he doesn't know the internet. Yeah, I don't get on
Starting point is 02:18:54 this thing. You miss so many pop-cultural kind of references that we'll make or a meme reference. You're like, wait, what? Yeah, and I'm not afraid to ask, right? I don't want to miss it twice. How long has the Facebook marketplace been around? Let's see if we can find out.
Starting point is 02:19:10 Now, in fairness, I've known about this for a while, but I've never actually gone to it because I seldom get on Facebook. But, man, it's amazing. Like, I could totally lose myself in this section because it's like the classifieds except you can't hide behind things right like you can see oh this joe's that guy oh he just created his account yesterday i'm not buying anything from him right so man if you haven't been there so you know with new year's resolutions and all that which i hate completely but i'm getting way too fat so i was like you know what i need to find some exercise equipment and and i was looking at new equipment. I was like, man, I'm not spending that much money on something that I'll probably touch five times, be excited about, and then eventually put it on Facebook Marketplace.
Starting point is 02:19:53 So I went and found some that looked like it had never been touched, and I got it for a song. So now I'm in love with this. Now I just randomly go up there and look at other people's crap, which is really interesting. Yeah, it's all your area. So you can like go drive and i just found a tattoo starter kit for 120 dude go get it go get it it's a sign reminds me oh my god it's really close to me too okay okay okay just tell me what you want to be okay okay sir All right. So that reminds me because we got Joe back and I don't remember where I saw this. Now, if it was in a, uh, was it, was it a comment or a review? Yeah.
Starting point is 02:20:36 But, um, you know, Joe years ago, you made this promise of a Microsoft tattoo if Visual Studio Code were to ever go cross-platform. Not code. He said Visual Studio, which also has been cross-platform. Well, okay, fine. I don't care. You can mince words however you want. All right? Visual Studio, fine.
Starting point is 02:21:11 And, you know, many listeners now have been calling you out on this, like wanting to see this tattoo. And, hey, here's the thing, Joe. As we discussed earlier, Alan and I are going to be in town here in March. Oh, boy. Matching tattoos? Why do you want the matching part i will gladly fund from the coding blocks account said tattoo for mr joe's act oh wow gauntlets thrown what makes you think i don't have the tattoo oh i'm pretty sure we would have heard about it so i'm saying we should get with this
Starting point is 02:21:46 tattoo should happen and we we should make a big production out of it you know we have episode number 100 coming up and we need to do something special oh man all right we'll tell you what i'll show you guys tattoo promise should be part of it If you're watching the video for this episode, you're about to see it. So hang on. I'm probably going to knock the microphone here. So I apologize for all you listeners. Wait, he's going to draw something with a Sharpie real quick.
Starting point is 02:22:21 That's hilarious. Bravo. Are you guys laughing at the tattoo where it was well played sir well played so uh for for our listening audience there uh i will say that joe uh as he was standing up he very stealthily i might add cut off his video feed so that none of us could see what he was actually trying to show well played sir well played oh that's so good i'm just saying go ahead and clear it with the wife because this needs to happen while we're in town oh man just go ahead and buy that kit man one of us will do it for you
Starting point is 02:22:57 i was taking him to a proper a proper place you know to have them do it i'm okay with that uh so amazing so yeah that's mine mine is not developer focused at all but i now i know where i can go find crap that other people want to get rid of for free or cheap okay i need a new tip of the week because my tip of the week is going to be for a well-established tattoo shop in the orlando area we're not well established we'll take newcomers too you know i need a respectable one i you know he's this is my friend i'm looking out for him here hey people trying to trying to eat man they're trying to earn a living hey this one has like almost 500 reviews with 4.6. I think we should take him there. I think Joe's about to drop off.
Starting point is 02:23:52 Break it up. This episode did not go as planned, huh? All right. So I will, I'm sure, according to Joe, gladly skip ahead to my tip of the week, which is to use code snippets in Visual Studio. So you can select some code and say, oh, I want to put this into a for loop. And it'll go ahead and put that code into a for loop structure for you. Or you could not have anything already and say, I want a for loop. And it'll go ahead and create that basic structure of a for loop.
Starting point is 02:24:29 Uh, that tip I want to say came in from our tip hotline. So you can go to coding blocks.net slash tips. And that one comes to us courtesy of, oh man, I even practiced this one earlier. Uh, boy, I'm drawing a blank on it. I give up. Every time I look at it, I'm like, that's just gibberish. It doesn't make sense, except for the Tulu part. But no, you go ahead. Say it, Joe, because you say it every time off the top of your head.
Starting point is 02:24:59 Latris Cthulhu. Latris part. Okay, that was the part that was thrown at me. Okay. Say it all together. Latris Cthulhu. Latrous part. Okay, that was the part that was throwing me. Okay. Say it all together. Latrous Cthulhu. Close enough. I think I still messed it up.
Starting point is 02:25:13 That's like the glass sculptures, right? Cthulhu. Oh, that's awesome. I think that's what you get at Chipotle. Hey, by the way. Or a Metallica album. Everybody that has done Cold Fusion in the past is like, oh, that's sweet. Outlaws tip.
Starting point is 02:25:27 That was in CF Studio back in like 1992. Hey, man. Hey, man. Listen. You watch it or you're next for the tattoo. Hey, I don't ever say anything like that. Oh, man. You'll have a big for loop tattooed across your chest or something.
Starting point is 02:25:50 All right. Joe, you got this? Got what? The last part. Oh, the show summary? Yeah, there you go. Well, now I want to go re-record the whole thing because I've got all these new thoughts about the M being structured markup. Like, it totally changes how I thought about this whole episode.
Starting point is 02:26:10 Oh, because it was actually the JSON that was being generated? Yeah, the templated markup. Like, now it makes a lot more sense to me to think about it being able to pop in that content from static CDN and popping that content into some sort of like templated kind of thing. Like we saw with the Marvel API. So in other words, if you're as confused about Jamstack as we were, then, you know,
Starting point is 02:26:33 you're welcome. Yeah. Yeah. I'm in, you know, just, I feel bad about like the two hours of misleading everybody. Hey,
Starting point is 02:26:42 you know what though? I did forget. Uh, I'm going to throw in a joke real quick. One more, because I meant to do this earlier and I forgot. So I'll throw in one more. And this one will come to us courtesy of Justin. And again, these were sent to us a long time ago.
Starting point is 02:26:55 So if you have more jokes that you would like to send to us, feel free. You can send them to comments at codingblocks.net. And we would love to hear your favorite programming jokes. But Justin writes in and says, I had a problem with C, so I switched to Java. Now I have a problem factory. Oh, yes. All right. So with that, subscribe to us on iTunes, Stitcher, more using your favorite podcast app in case
Starting point is 02:27:24 of a friend happened to like send you a link send you a link or let you borrow their device. And if you haven't already, be sure to leave us a review. You can visit www.codingblocks.net slash review to find some helpful links there. And as I said earlier, we would greatly appreciate it if you shared us with a friend. Yep. And while you're up there, check out all our show notes, examples, discussions, and more. And send your feedback, questions,
Starting point is 02:27:48 and rants to the comments or the Slack, codingbots.slack.com. And make sure to follow us on Twitter where you can yell at me for not understanding what the M meant in Jamstack
Starting point is 02:27:56 even though I've been proselytizing it for months. And you can go and find all our show links, social links at the top of the page. And if you are on Slack already or if you're not, you can join. But definitely beat up on Joe about that tattoo.
Starting point is 02:28:11 Just saying. Peer pressure.

There aren't comments yet for this episode. Click on any sentence in the transcript to leave a comment.