Ep. #9, Shifting WordPress to the JAMstack

Brian Douglas: Welcome to another installment of JAMstack Radio. On the line we've got Daniel Olson.

Dan Olson: Hey, how are you?

Brian: And we've got Shin. Hey Shin.

Shinichi Nishikawa: Hi.

Brian: Dan, you actually reached out to me shortly after our serverless podcast episode which would have been Episode 4 with David Wells. And you had a very interesting use case for serverless. But you also had a very interesting use case for JAMstack. Do you want to explain a little bit about how you got connected to JAMstack Radio?

Dan: Yeah, I was looking for a new podcast and, you know I'm a developer so I'm writing code all day. I wanted to see what was out there, and I came across the JAMstack Radio podcast. I just clicked on the latest episode, and coincidentally it was about serverless. I was working on a project about serverless at the time. So, I said, sure why not, I'll check it out. And it ended up being great. And I learned a lot.

While I was listening to it, David had mentioned someone in Japan who made a contribution to the serverless framework. And I was thinking, I might know this guy. I put two and two together, and I did a little digging and it turns out I did know him. Well not directly, but he works for the company that we were partnered with and we were doing work for. So it kind of hit really close to home but also was like a serendipitous moment in that I randomly came across it.

Brian: Cool. And then eventually I found out that person was actually Shin, and Shin you are on the podcast. You want to talk a little about what you do, what you've been helping out with serverless?

Shin: Yeah, I work for DigitalCube and I'm not that guy. I do the translation for that guy. He contributes to the serverless framework, and when he finds something he can contribute, but he wants to make keep track of what's happening with it on GitHub, he contacts me and I translate the stuff.

Brian: Okay cool, so do you do a lot of that translating for programmers over there in Japan?

Shin:Yeah, I myself am also a developer but I focus on PHP and WordPress.

Brian: Awesome, so that conversation that we had after the email from Daniel and you let me know about Shifter which is the whole reason why I got you guys to come on here. So, Shin would you do the honors of also explaining what Shifter is?

Shin: Yeah, so Shifter is a serverless WordPress hosting solution. What actually this does is, you log in to our service called Shifter. Then Shifter will generate all that HTML files for your website. Kind of like pre-rendering everything and generating all the HTML files.

We put them on S3 and we serve them through the CDN. And then what we do is we shut down your WordPress website, or the server itself until you log into our service next time to edit your content. So, it's really fast because they are static and sent through CDN, and it's safe because there is nothing to hack.

Brian: Yeah, so you're saying that

You can upload your website, your WordPress site, deploy it through Shifter and then you just redeploy whenever you need to have changes.

Shin: Yes. Right.

Brian: Cool. And as far as security, do you want to talk about a little about the benefits of going to static versus server?

Shin: Yeah. WordPress is great, it's loved by everyone because it enables you to do what you want. But it has two problems: speed and security. So, if you want to serve one million people a day, it gets a bit difficult when you are using WordPress.

But if it's static then it's no problem. Basically you can serve, unlimitedly. So that's the point of static files. That's the reason people love static website generators, like Jekyll or Middleman. So, we can take both good parts from static site and WordPress. One thing is the speed and another one is security.

It's really simple because there will be nothing to hack. There is noWordPress, PHP, no servers or other middleware.

So, it's very difficult to hack because it doesn't exist. That's the reason we created Shifter. And we believe it will help a lot of people.

Brian: And correct me if I'm wrong or speaking out of turn but could you sum up Shifter as a static site generator for WordPress, or WordPress static generator?

Shin: Yeah, that's correct.

Brian: Okay, cool. Once you said static site generator, bells started ringing, everything starts clicking, everybody's knows static site generation, if you've been working in the web, and working like at least on the JAMstack version of it. Like, pushing static site generated sites, that definitely is in the wheelhouse. What we're trying to push for JAMstack and what we're trying to push for this podcast.

Dan: And to add to that, I've been talking a lot about this lately with a couple people.One misconception is that, static, yes it's great, it's fast, you can't hack it but you generate your site, you run it statically. But sometimes people still put it on a server running PHP that has resources and compute. Yeah. Just because you're on a server, running static files does not mean you can scale to the degree of something that's on a CDN.

So, the difference would be is that they are static files, but they're also running on a CDN which is global and can scale infinitely.

Static is halfway there. The real answer is static on a CDN.

But also you have the ability to just run your admin like you normally would.

Brian: It's almost like we should create a term for this more than just static, and we should probably just call it JAMstack.

Dan: Yeah.

Brian: Yeah. Exactly, so that's exactly what we're trying to push with JAMstack, we found out that static site generators got really big three or four years ago. Some people got a little burned out on WordPress it's like, there's no mystery there. So, people were looking for the next thing. So, they found Jekyll and they found Middleman.

The founder of the company I work for which is Netlify, he realized that there's this new wave, and this new existence of static being cool again, like, what's old is new. But static seems so weird because when you think static, you think, oh these are like brochure sites, these are like these HTML sites with a little bit of CSS. But the progression of JavaScript has made things so much different where now you have build tools, and now you have the ability to do some pretty cool things on the front end and the client, with just JavaScript.

So it makes sense that there's room for things like Shifter where you can take what you would normally do on a huge server and do in WordPress and now you can actually build it statically and still host it and still do all the same stuff, which is pretty awesome.

Dan: Yeah, and there's a huge library of themes. There's like a huge library of plugins, that's a big resource and people still want to use them. You can go to Jekyll you can go to Middleman, and you can write your own stuff but I build sites for clients all day. No way am I going to get one of my clients to open up in Editor and start writing Markdown. Like they are familiar with WordPress so I meet them halfway sometimes with this.

Brian: Wow, that's even more a point, like why this space makes it. The one thing that makes me so excited about Shifter and having you guys on, is that I've not heard of this type of solution. Now it might be because I'm also not super ingrained in the WordPress community. But I haven't heard a solution like this, to take what everybody knows which is WordPress, and it's still, what, 24% of the web?

So, a lot people are using it a lot of people know what it is, and making it something that's reliable, secure, and it's out of the server world and now it's in the serverless world and it makes sense, with static site generation which is supercool.

So, we had mentioned off-air too, I was lookin' for examples of Shifter and use cases? Dan, do you want to talk about that one use case about event pages?

Dan: Yeah, so one of the things we've been talking a lot about is, use cases and what this really could apply to. And something that Shin had mentioned was, event pages. You need to have your event page, it needs to be up 100 percent of the time and not fail on the day of. So, what you do is, typically you'd put it on a server, you need to have that server scaled, or have it big enough that it won't fail. And hopefully it all goes well. But after the fact, you still have your event page, running on that giant server or it scales down, and then you need to maintain it.

But the idea is that you can take that site, or that event page, put it on Shifter. I'm from Philadelphia so one of the big events here is, "Made in America" Tour. On the Ben Franklin parkway there's like a million people that come out, and you might get 500,000 hits on that webpage on one day. So, that site is built in WordPress.

I'm sure it's running on a gigantic server but if it was running on Shifter, you'd log in, update your content, save it & generate. 500,000 people could hit that site and it's not going to fail. It's going to stay up.

And then after the day of, it'll just kind of live there. Because it's static you don't need to update WordPress, you don't need to check your plugins and you don't have to worry about it ever going down. It's just going to be there when you need it.

Brian: Yeah, which is also another benefit that we mentioned a little earlier too about reliability. Just the idea of your customers DDoSing yourself. There's one example, not a WordPress site but it was a rails app, not Kickstarter but Indiegogo. They had had an Indiegogo campaign where someone had put up some sort of joke campaign. I think it might have been someone who put up an Indiegogo 2, put up mashed potatoes? And it ended up just DDoSing the front page of Indiegogo.

So, not only could you not see that one campaign, but you couldn't see any other campaign. Because that whole site was built up on a server, so they actually drew back and actually every single one of their campaigns are now static sites. So, the guts of it is actually built on a Rails API.

But now every single campaign page is now a static site that you can view and they might have gone with Sinatra or something similar in the ruby space. Exactly what you just talked about with 500,000 people trying to see what's going on in the events. Like you could technically take your site down if you're hosting properly.

Dan: Yeah exactly.

Brian: Yeah, and with scalability too.

Dan: Nobody wants to get that phonecall. Oh no our server's down, and meanwhile you're out at lunch.

Brian: Yeah, and even people like Shin who are in Japan who aren't up at the time when some of these events are happening.

Dan: Yeah, we are working on a 24 hour clock and at any point, someone's getting a phone call somewhere and you could be halfway around the world.

Brian: And one other benefit that you'd hit on too as well, so your clients are very used to the WordPress admin. It's got a lot of great bells and whistles, even plugging out architecture that you have access to that people are still familiar with. People are still developing on. This unlocked modern development. I'm a big fan of JAMstack but there's a new term called Progressive Web App.

The Progressive Web App development which has been coined at the Chrome Web Dev summit a couple months ago.

The whole idea that by pushing the web forward, you unlock that with all these WordPress developers.

Again I keep saying how amazing it is and I don't know how you guys are seeing it on your end. You've almost unlocked this new feature for web development that not a lot of people were expecting. It's super interesting.

Dan: Yeah, it's funny you say that. Like a lot of times when I met with WordPress developers and I'm talking about what you do, where I work at, we like to use the latest stuff. Like we're always pushing the limits of what we can do and building our own tools. We're using all these build tools, we're writing JavaScript plugins, and doing stuff that, like, we can't really show our clients and be like, "Look at all this cool web stuff we're doing!" But, we have to just basically say, "Trust us, it's amazing."

And all they really care about, no matter how technical it is under the surface is the admin. We can be fancy with our code all day but the admin is the only thing they really care about.

And it works well for them, it's simple like, love WordPress, hate WordPress whatever, the admin's really simple for anyone to use like, if you can update your Facebook, you can update a WordPress post. You don't need to know any technical knowledge, you can customize it to your heart's content. And it's really simple to use, so we want our clients to have that. We want them to use that admin because it makes their job easier.

Usually a website is in addition to what they already do, so we don't want to make their job harder, we want to give them the easiest tool possible and we've just found that WordPress is the answer for that.

Brian: Cool. When I first started talking to you guys you had mentioned that you were in beta. I think you're out of beta now, is that correct?

Shin: Yeah, it's growing fast but we took off the beta dot from our domain.

Brian: Okay, cool, that's what I wanted to know, because I'm pretty sure, if someone got this far in the podcast they're probably interested in checking it out. Are there getting started guides, or tutorials or the website, anything that people can go to check it out?

Shin: It's on GetShifter.io, and everything will be there. All the support and the admin for everything.

Brian: I'm curious too as far as the community. So more the WordPress community, existing developers, I'm sure you guys had an opportunity to show people, get feedback. How are they taking something like Shifter? Is there good adoption for them?

Shin: Yeah, it was like, I was at the booth at an event called Word Camp U.S. So it was like two thousand people there. It was like one of the top conferences in WordPress world. And we were there, and we talked about Shifter. Then, it felt like it took at least thirty seconds for them to understand this concept.

This is a static site generator for WordPress.

And then we put them on CDN and then WordPress will be shutdown or it's going to be sleeping for a while. And then they were like, "What? Why?" And then I say, because it's fast and it's really secure.

And then they start to say, "Oh, yeah, that makes sense." And then if they are agency people, they will come up with their own ideas. So, we have they kind of portfolio websites or brochure websites and people are maintaining WordPress a lot. Even for the website, that their clients don't update content that much. So that they feel like they are working hard to maintain it, maybe they moved here or other people thought, okay, it's a static file on CDN, so it cannot be faster than this architecture.

So, they come up with other ideas, and then they start to point out, okay, no dynamic stuff? Then we say yes. So, it was like, so how about forms, how about contact forms or search forms, or comment forms? We say, okay, they don't work at all.

You need to implement third party stuff, for example Facebook comments or some Elastic Search form.

Or other stuff, which work with somewhere else because we don't process like any server side things. WordPress will not be there. Then that way they understand the process or the idea, the concept, how it works, kind of slowly but when they get it, they say it's really interesting.

Dan: It kind of goes back to what Brian was talking about, the JAMstack approach to building a site and that you work with an API you work with JavaScript, you work statically to build your application that's also dynamic, in a way but it doesn't need something like server side like PHP to run to make it work.

Brian: Yeah, and you still have access to, I assume since you're statically building to index.html, is that correct? By something that is HTML? So, you should be able to add a script tag for analytics if you want to add some, I guess, AB testing or anything like that, I don't know, Launch Darkly which is another heavy bit company, adds script tags to your page.

Dan: Yeah, anything JavaScript will work.

Brian: Okay, yeah.

Dan: So, if you're writing an API, like a 4H in your JavaScript, to get a list of events from Meetup.com, that's going to work just fine. If you run a contact form with Zendesk, it's going to work just fine too, or Discuss or anything that Shin mentioned.

Brian: Cool. Yeah, I'm super interested in checking this out. I think I might have to create a quick WordPress site, it's been a while but I'm sure there's a lot of tutorials out there. I got a Getting Started Guide from you guys about a month ago, and I see it's got a little extra stuff in there, so I think I might try it again. Hopefully the listeners will try that out. With that being said, I want to wind down this conversation and move us into picks.

So, since you guys are the guests, I'll go first, and I only have one pick. I've been messing around with a lot of Graph QL. We had GitHubs manager for the REST APIs who implemented the Graph QL stuff with his team. So, I actually got really interested in messing around on Graph QL. I built a little small Graph QL project around GitHub, but I'm also messing around with some Graph QL tools. So, my pick is actually going to be Reindex. It's a Graph QL backend as a service.

So if you think of something like Firebase, where you get a nice key value store, where you can get a nice JSON object, and you put Graph QL on top of that, then you have Reindex.

So, I've been messing around with that. I haven't got a project complete yet, but I've got the basic JavaScript tutorial, which is To Do app. I've built that based on the tutorial, and I'm going to hopefully move on to something more serious. But I think Reindex is the way for me to go for now. As far as learning Graph QL, and getting a project out. So, that is my pick. Daniel, do you want to go next?

Dan: Sure, does it have to be tech related?

Brian: It does not have to be tech related.

Dan: Now that you mentioned Graph QL, there is a really cool project that's happening on GitHub. I don't know the exact name of it, but this reminded me. Someone is working with WordPress and making a Graph QL repo, so that you can interact with all of your data in WordPress through Graph QL, which is pretty amazing. But my pick was something that Shin introduced me to on his last visit.

While he was here I actually got to work at the Word Camp booth, got to hang out with them, because the company I work for did all the branding for Shifter and we got to name it too, which was a really fun project.

But he introduced me to, I'm probably going to ruin this name but, Okonomiyaki, which is a Japanese pizza. And it is delicious. I recommend anyone who hasn't tried it, if they know a place they can go to try it, or if they want to make it at home, it's really simple. Basically it's like a pancake with cabbage and like a sauce, and you can add bacon, little tiny shrimps, it takes like no time to make and you can like bang out like 10, 12 of them if you're at a party, and they're delicious.

Brian: My world just opened up, I had no idea about this, Japanese pizza.

Dan: Yeah, Japanese street food, I'm all about it now.

Brian: Yeah, I'm curious if they have that in Japantown here. If not, I'm sure it's somewhere. My engineer is actually giving me the nod so I think I'll be checking it out this weekend. And then Shin, did you have a pick that you wanted to the share with the listeners?

Shin: Yeah, so I live on a small island. With 150 people. And 80% of the people are over 65. So, I get a lot of free food from people around there. I have a bunch of vegetables. So what I'm trying now is to cut the fish in the right way. And if you go to the supermarket the fish we get here is the whole fish itself. So, they just bring the fish and, "Hey, Shin, I'll give this to you." So, they are fishermen. I need to cut it all up, so I bought a nice knife for that, and then I'm looking into YouTube to see how to cut the different kinds of fish.

Brian: Wow, that's fascinating. I'm mean I've had Kanye picks in the past like for other episodes but that's gotta be one of the most interesting picks we have so far in the podcast so, I don't think he'd have a pick as interesting.

Dan: It's what Kanye would pick.

Brian: Yeah, that's right well Kanye's been picking a lot of weird things as of late but we won't get into that. What's the name of your island that you're on? Everybody's probably pretty curious.

Shin: So, it's Ogi Island, O-G-I.

Brian: Cool, well, guys I really appreciate you coming on the podcast talking about Shifter, talking about what you guys are doing and also talking about how to cut fish. Now I'm interested. Yeah, and I'm really happy to see what you guys come out with in the future for Shifter and how it grows.

Dan: Thanks Brian.

Shin: Thank you.

Brian: Yeah, thanks again and keep spreading the jam.