Steve, AJ, and Dan talk to Drew Baker, co-founder of Los Angeles based digital agency Funkhaus about Storybook and Nuxt. After a discussion of various server side rendering methods, Drew talks about how they use Storybook, how it integrates tightly with Nuxt, and how it helps Funkhaus quickly and cleanly spin up sites for large customers.

On YouTube
Using Storybook and Nuxt To Quickly Build Websites - JSJ 531

Sponsors

Links

Picks

Special Guest: Drew Baker.

Sponsored By:

STEVE_EDWARDS: Hello everybody and welcome to yet another exciting episode of JavaScript Jabber. My name is Steve Edwards. I am the host with the face for radio and the voice for being a mime, but I am still your host. Today with me on the JavaScript Jabber panel, we have AJ O'Neill. 

AJ_O’NEAL: Yo, yo, yo, I am coming at you live from not yet the new house. 

STEVE_EDWARDS: Not yet the new house. So. Still in the townhouse? 

AJ_O’NEAL: Yep, still in the townhouse. I'm coming at you live from a place that, wait, you didn't come by the house, did you? 

STEVE_EDWARDS: No, because you didn't have it yet. 

AJ_O’NEAL: I'm coming at you live from nearby where Steve and I had dinner together. 

STEVE_EDWARDS: Yes, yes, at the famous Applebee's there in, was it Pleasant Grove? I forgot. 

AJ_O’NEAL: I think it was, wasn't it Chili's or was it Applebee's? 

STEVE_EDWARDS: No, it's Chili's, you're right, I'm sorry, it's Chili's. Yeah, it's too mixed up. Well, sorry. We know what it reminds me of. I just saw this on TV the other night. You know the scene in Office Space where Jennifer Aniston works at that one little area where there's like four chain restaurants right together and they get confused as to which one she works at. It's like shots teased or something and then all the other chains. So it sort of reminds me of that scene. But anyway, moving on from AJ's residential domicile to Dan on the other side of the world. How are you doing, Dan? 

DAN_SHAPPIR: Hi, I'm doing fine from the same old house in Tel Aviv. 

STEVE_EDWARDS: In Tel Aviv, Israel. How warm is it there? You guys nice and toasty still or did you get the cold like we did here? 

DAN_SHAPPIR: Actually it was surprisingly chilly up until a few weeks ago but now it's really nice weather not too warm not too cold just right. 

STEVE_EDWARDS: Yeah chilly so you went to chilly's restaurant it's chilly there in Tel Aviv. 

DAN_SHAPPIR: Well you know chilly is right. 

STEVE_EDWARDS: We are on it today. 

DAN_SHAPPIR: Yeah for sure. Chilling in Tel Aviv is a really relative term. Let's put it this way. 

STEVE_EDWARDS: That's correct, yes. See here in Portland yesterday, this is early April, and we got dumped on with snow. All the schools had to close. I mean, we do that with a quarter inch of snow. Anyway, panic around here. Ah, snow! But I mean, we got a few inches of snow. It was crazy. Mount Hood's had like 30 inches in the past few days. So late season snow. And also before we get to our guest, I'd also like to... introduce our studio audience that we have here today. Thank you. Thank you very much. It's always nice having a streaming audience. 

AJ_O’NEAL: So flattered. Thank you everyone. I'm happy to be here. 

STEVE_EDWARDS: Yes, yes, it's fun. It just gives you a better environment. Anyway, finally, after all that, we get to our guest, Mr. Drew Baker. How you doing, Drew? 

DREW_BAKER: Great, thanks Steve. 

STEVE_EDWARDS: So we are here to talk today about Drew and how they use Story, wait a minute, Storybook, right? We were talking about Storybook and Storyblock ahead of time. I got confused, it's easy. So as intro drew, why don't you tell us about yourself, what you do, who you work for, why you're famous, all that kind of stuff.

DREW_BAKER: Well, not so famous, but I can answer the rest. No, my name, yeah, Drew Baker, and I work at a company called Funk House, which I started about 10 years ago with two partners. We are a digital design and development agency here in Los Angeles, which by the way, has been 38 degrees Celsius this week. So we're on the other end. 38 

STEVE_EDWARDS: Celsius? 

DREW_BAKER: Yeah, I think it's close to like 100, I think. So you guys talking about snow, we're sunny Los Angeles, as always. Yeah, so we do a lot of...design and development of what we like to call sort of high design with specific business case websites. So a lot of B2B stuff, but in industries that are competing on design. So a lot of like boutique hotels, a lot of Hollywood kind of related things, visual effects companies, directors, editorial companies, things like this. And moving into things like architecture, companies that need to look good and are competing on looking good and high design, but have a specific business case like they're trying to convert rooms or they're trying to land the next commercial job and things like that. So that's the kind of work we do. 

 

Hey folks, this is Charles Max Wood from Top End Devs. And lately I've been working on actually building out Top End Devs. If you're interested, you can go to topendevs.com slash podcast, and you can actually hear a little bit more about my story about why I'm doing what I'm doing with topendevs, why I changed it from devchat.tv to topendevs. But what I really want to get into is that I have decided that I'm going to build the platform that I always wished I had with devchat.tv, and I renamed it to topendevs because I want to give you the resources that are going to help you to build the career that you want, right?whether you want to go and just max out your salary and then go live a lifestyle with your family, your friends, or just traveling the world or whatever. I want to give you the resources that are going to help you do that. We're going to have career and leadership resources in there and we're going to be giving you content on a regular basis to help you level up and max out your career. So go check it out at topvendevs.com. If you sign up before my birthday, that's December 14th. If you sign up before my birthday, you can get 50% off the lifetime of your subscription. Once again, that's topendevs.com. 

 

DAN_SHAPPIR: I'm very curious with that kind of clientele and those types of websites, what's your technology stack? You know, before we talk about the various tools- 

STEVE_EDWARDS: Oh, you stole my question. 

DAN_SHAPPIR: Ah ha, well, great minds think alike. But yeah, I'm really curious, you're really curious what a high-end design agency uses these days because we're kind of, on the one hand, we're kind of supposed for choice with so many options for building websites. And on the other hand, somehow it seems like every option you look at has its own downsides and limitations. So it can be really tricky to pick one that really checks all the boxes. So I'm really curious as to what you guys are using. 

DREW_BAKER: Yeah, I think maybe the best way to answer that is to talk about how we kind of got to where we are with the stack along the way and kind of illustrate some of your points there, Dan, about the upsides and the downsides because...It's been quite a journey in the front end world in the last five years. It's really changed a lot. 

STEVE_EDWARDS: Really? What do you mean? I don't understand. 

DREW_BAKER: Well, so when we started, we were essentially just a WordPress template shop. A lot of PHP rendered themes to WordPress. So our stack then was PHP with a bit of jQuery on the front end. That was kind of it. Yes, it reminds me of the themes. Yeah. It's funny because PHP has this bad rap, but it is very web friendly language as far as those things go. You know, it's definitely you feel that it was written to build websites, whereas a lot of these other ones, websites is part of what they do. But anyway, so it wasn't it probably wasn't as bad as, you know, I think its reputation now has, but it certainly wasn't great either. So anyway, we were on PHP and WordPress for a long time. And then in this agency game, you're really always playing catch up to the latest cool showcase website that your clients saw on the website somewhere and you have to meet this expectation. And so more and more animation, more and more page transition animations between page loads and trying to get more towards single page apps. And so this was like early days of view. Ember was like the hot framework at this point. I don't even think React was really on the radar yet, for us at least. And then, so we moved to view rendering a single page app, but living kind of in a WordPress theme. So it was very weird on our own kind of Frankenstein trying to get towards tying a CMS to a decoupled front end, but not really decoupled yet. Cause that wasn't really something we, you know, had.had come out as the best practice yet. And so we did that for a little bit, and that was a total disaster and didn't scale very well and was horrible for SEO and all these other things that we found out. And then we finally did this big push into decoupled architecture and had a full backend that powered a front end completely separate and only talking to each other through some sort of API layer. And so that was a whole process trying to figure out what is the best CMS for the majority of the work we do to use. I still don't know if we were talking about Storyblock before this. I still don't think it's a settled question. Our requirements were, it had to be open source, big believer in open source and trying to embrace that when we can and always if possible. And I didn't want it to be therefore like proprietary. We are building three websites a month for the last 10 years. So we have 300 something clients that we're hosting and dealing with. So having a CMS that just might go out of business. I heard this great anecdote at a meetup one time that was like, I love all these new CMSs. I can't wait to see which half survive. And so I think that's totally true. And we didn't want to pin our whole business on a proprietary CMS that might go out of business. So we felt like we had to be able to self-host whatever it was, or at least have a pathway to doing that if something went sideways. And that limits your choice really quickly. You're basically in like, These older CMS is at that point WordPress, Drupal. There's a few new ones like strappy was a really interesting one that we looked at. But those are very unstable. Like strappy was going through some big rewrites when we were making these big decisions. Anyway. So what we decided to do was go deep into a headless WordPress setup and really get our hands dirty and sponsor and be involved in the WP draft QL plugin. So turning WordPress into a headless CMS just GraphQL API and that GraphQL plugin now, we had such a small part of it, we're just more like boosters than we are like real people. But Jason Bahl, the guy that develops that now and he works at WP Engine, has done just tremendous work with that plugin now. And it's, so that's not stacked now. WordPress is a CMS running GraphQL API as the output. And then on the front end, we now, as much as we can, we're noxed all the way with posted on Netlify doing static site generation. For the websites where that makes sense, there's a few big publishing websites we've done for big magazines, and like, thubmagazine.com would be an example, big music magazine, where that is not possible to render that one yet, because it's thousands and thousands of pages. So that one is running server-side rendered mode on Heroku, which I hate. 

STEVE_EDWARDS: So with the node backend, so you're running Next with the node backend then?

DREW_BAKER: Yeah. So Nuxt runs a certain sort of node server. So yeah, it's living on a node instance of Heroku. So we can scale it up and down and all those kinds of things, but it's very, it's still surprisingly fragile. I'm not in love with Heroku for a lot of reasons. Like it'll just crash and not really tell you why. And yeah. 

STEVE_EDWARDS: Is that Heroku or is that node? Cause I know that when I've heard comparisons with people who, you know, have run, you know, like a PHP server, where it's really easy to integrate, you know, PHP with Apache on a you know, in a Linux type server, we just plug it in, you know, set up your php.ini and you're off and running or is node tends to be more fragile than it takes more to keep it up. So are the issues? 

AJ_O’NEAL: You want to fight? 

AJ_O’NEAL: Trust me, AJ, you're the last person I want to pick a fight with on this stuff. Trust me, I'm just going on whatever other people say. Because I haven't actually tried to run a node server myself. 

DREW_BAKER: No, you're probably right there a little bit, Steve. Like it definitely it's hard to separate Heroku and. Not in my example there, but yeah, 

AJ_O’NEAL: and what about digital ocean where you just have guaranteed 100% uptime at one quarter of the cost of the cheapest, crappiest Heroku? 

STEVE_EDWARDS: Yeah, I would like to point out that digital ocean is not a sponsor of this podcast at this time. This is the opinion of AJ O'Neil. 

AJ_O’NEAL: Yeah, it's just, it's just, I don't understand why people talk about fragile thing because everybody complains about how expensive it is and how there's all the cold boot times and all this stuff. Somebody told me the other day, they said, Oh yeah, we're using, we're using Google functions. It's great. Yeah. Everything's really slow right now because of the cold boot. But if we just paid $5 per route, which is really cheap, it all go away and be fast. And I'm thinking, or you could just pay $5 for, I don't know, hundreds or thousands of routes. I just don't, I don't understand why people are talking about crappy technologies that don't work well when there are simple technologies that are incredibly cheap, that require very little learning overhead that you can just get up and running with. That's, that's my point. 

DREW_BAKER: Yeah, that's a good point. And I've sort of lived by this mantra that maybe is biting us in the butt at this point, which is trying to avoid infrastructure, trying to avoid DevOps as much as we sort of can and happy to pay for us at the price points that we're sort of working out, I'm happy to pay a platform cost so that I don't have to deal with it. And so I like, but 

AJ_O’NEAL: that's the thing you have to deal with more crap with the platforms than if you just go with the bare bones, simple stuff, you know, you don't need a DevOps person for digital ocean. You need a DevOps person for AWS and for Heroku and for all these things that are complex and have so many configuration things and have all this upkeep you have to do digital ocean set it up once five years later, still running. If there's any failure on the hardware, automatically migrates over automatically. You do nothing. You don't have to go in, you don't have to reset anything. You don't have to change your instance configuration. It's just set it and forget it, and it'll run for years and years and years and years. 

DREW_BAKER: Yeah, that's good advice. That's something I should look at. That now falls on my to-do list of things I have to deal with. It's moving a couple of hundred websites from Heroku to Digital Ocean.

DAN_SHAPPIR: I wouldn't move them regardless of how good digital ocean might be. And personally, I have no experience. I wouldn't do it all at once in any event. I would try one, make sure it actually works for you the way that you expect it. And then maybe then I'll gradually migrate everything else. But going back again to your configuration. So based on what I understood from you, you're essentially just using WordPress as a backend headless CMS, so that's just where you store all your data, as it were. And I imagine that the main benefit for you guys is that if in terms of the content, it's just like managing a WordPress site. So in terms of putting all the content in there, these are tried and true processes that you and your customers are familiar with. I guess that would be the main advantage for you. 

DREW_BAKER: Totally. So the CMS is a known factor, like most clients, new clients have someone on the team that's used it before. So it makes the training for the client really easy. And it's also a huge ecosystem around that. You can find a WordPress developer very easily. You know, that's something that- 

DAN_SHAPPIR: Yeah, although you don't actually, well, you can find a WordPress developer really easily, but you don't actually use WordPress as WordPress. You just use it as a sort of a-business oriented sort of a database. So you don't really need a WordPress developer from my understanding. 

DREW_BAKER: You would think so, but inevitably you're dealing with a lot of sort of plugins to do more admin centric things. Like, you know, some of the ones that we've personally developed are extensions to one handle like deploying. So because we've got a static site on the front end a lot of times, this, the concept of like publishing a piece of content is different now. You know, you have to publish it and then also build the website, so you have to fire off a bunch of deploy sort of hooks and things into Netlify. So we've built plugins to do that. A lot of times we might have Cloudflare kind of involved for not so much for the Netlify stuff, but for the Heroku's never-rendered stuff. So with plugins we've built to handle like purging the Cloudflare caches and things like that. So yeah, it's more like those kinds of things you end up building, which is, you know, would be really hard to do on a closed source CMS like Prismic or Storybox, something like that. The hope there is that they've also solved those things for you, but inevitably you get a client that comes along and wants something very, very custom. Like a great example, we built a website for this sort of political group called Political Playlist. And so they wanted to build a sort of dynamic email generation service. You'd sign up, select a few preferences, and then it would generate emails unique to each user.