Recommended
More Related Content
More from JSFestUA
More from JSFestUA (20)
Recently uploaded
Recently uploaded (20)
JS Fest 2019/Autumn. Kyle Boss. A Tinder Love Story: Create a Wordpress Blog with React, instead of PHP
- 1. A Tinder Love Story November 8, 2019
- 3. A Tinder Love Story
- 32. gatsby-image
- 34. <Img />
- 35. gatsby-link
- 48. Life Pro Tips
- 55. No preview.
Editor's Notes
- Good morning everyone, thank you so much for coming. It’s an incredible honor to be able to speak here with y'all. I’ve been having such a blast getting to know folks here at the conference and learning about the problems you are solving at work. This is a very smart group of people.
- My name is Kyle Boss. I am a web developer at Tinder. You may be asking yourself “Well, Tinder is an app, what is a web developer doing at Tinder?” That is a very fair question. Well, we actually turned the app into a progressive web app, unleashing the power of Tinder to be on even more platforms! You can now check your matches on your phone if you don’t have enough space to download yet another app, you can check out your matches on your laptop while you Netflix & chill solo,
- Good morning everyone, thank you so much for coming. It’s an incredible honor to be able to speak here with y'all. I’ve been having such a blast getting to know folks here at the conference and learning about the problems you are solving at work. This is a very smart group of people.
- My name is Kyle Boss. I am a web developer at Tinder. You may be asking yourself “Well, Tinder is an app, what is a web developer doing at Tinder?” That is a very fair question. Well, we actually turned the app into a progressive web app, unleashing the power of Tinder to be on even more platforms! You can now check your matches on your phone if you don’t have enough space to download yet another app, you can check out your matches on your laptop while you Netflix & chill solo,
- and you can even use the swipe feature at work! Give it a try because we even included a “Work Mode” button so that if your boss suddenly appears behind your shoulder,
- excel sheets will suddenly cover your screen.
- My name is Kyle Boss. I am a web developer at Tinder. You may be asking yourself “Well, Tinder is an app, what is a web developer doing at Tinder?” That is a very fair question. Well, we actually turned the app into a progressive web app, unleashing the power of Tinder to be on even more platforms! You can now check your matches on your phone if you don’t have enough space to download yet another app, you can check out your matches on your laptop while you Netflix & chill solo,
- This means that systems that integrate headless CMSs actually empower the writers and engineers simultaneously. The writers get what they want, which is the ability to continue using WordPress as a tool to write in. The engineers get to continue using their cool technology that integrates well with their current processes and engineering ecosystem! It’s a win-win situation. I feel like Oprah right now giving away free cars. You get a happy writer and engineer, you get a happy writer and engineer, and you, and you!
- This concept is called having a Headless CMS.
- But how does one turn Wordpress into a headless CMS? Well, Gatsby! Gatsby can actually allow us to have a React app front-end that treats WordPress as our back-end. How does it do it?
- It is a static website generator. We are going to run the four commands to get you a basic, static React app.
- This means that systems that integrate headless CMSs actually empower the writers and engineers simultaneously. The writers get what they want, which is the ability to continue using WordPress as a tool to write in. The engineers get to continue using their cool technology that integrates well with their current processes and engineering ecosystem! It’s a win-win situation. I feel like Oprah right now giving away free cars. You get a happy writer and engineer, you get a happy writer and engineer, and you, and you!
- Install the Gatsby CLI with `npm install -g gatsby-cli`.
- Then, create a new Gatsby React project with `gatsby new my-site`. What this does it creates a ReactJS app which is where you will do most of your coding, and wraps it with Gatsby configuration.
- Go into the project we just created `cd my-site`.
- Go into the project we just created `cd my-site`.
- Go into the project we just created `cd my-site`.
- I see some folks nodding their head. Some of you might be predicting what comes next. When you run `gatsby build`
- I see some folks nodding their head. Some of you might be predicting what comes next. When you run `gatsby build`
- I see some folks nodding their head. Some of you might be predicting what comes next. When you run `gatsby build`
- I see some folks nodding their head. Some of you might be predicting what comes next. When you run `gatsby build`
- I see some folks nodding their head. Some of you might be predicting what comes next. When you run `gatsby build`
- I see some folks nodding their head. Some of you might be predicting what comes next. When you run `gatsby build`
- I see some folks nodding their head. Some of you might be predicting what comes next. When you run `gatsby build`
- I see some folks nodding their head. Some of you might be predicting what comes next. When you run `gatsby build`
- I see some folks nodding their head. Some of you might be predicting what comes next. When you run `gatsby build`
- I see some folks nodding their head. Some of you might be predicting what comes next. When you run `gatsby build`
- It’s been a year and SwipeLife is still running strong. All throughout 2018 and 2019 we’ve been a dating companion to our users: Whether it’s SwipeLife’s tips on how to get out of a bad first date, or SwipeLife guiding readers on whether it’s morally OK to ghost on someone or not. The readers are reading and they keep coming back for more. SwipeLife has proven to be a powerful force in the dating world, and we are here to stay!
- I see some folks nodding their head. Some of you might be predicting what comes next. When you run `gatsby build`
- October 1st was the deadline, and sure enough, on October 1st, our baby SwipeLife was born. The tech and dating community combined went wild with the content we were serving. Tech news sources such as TechCrunch & Cheddar picked it up.
- Don’t take our word for it. She received straight-A’s from day one on this earth and still is to this day. (In the Lighthouse audit that is). These are the kind of results that you get out of the box by using Gatsby. The first is our Performance metric. This is representative of numbers like “time to interactive”. Because of the fact that we are using a Serverless architecture, loading pages and clicking around feels like your just opening files on your own computer. Furthermore, Gatsby uses this performance technique called “Pre-Loading”, if it sees you can get to a particular page from the page a user is currently on, it will load ahead of time all of the resources needed for that next page. It also does cool things like image optimization, deferred loading of images, compressed javascript and CSS all out of the box. Gone are the days of spending weeks at a time working on, these are now something you get for free. Furthermore, take a look at the Progressive Web App button. GatsbyJS allows us to be a PWA almost out of the box as well. For those of you familiar with PWAs, y’all are probably telling yourself “omg”. It’s true. A PWA is basically giving your website app-like features. If a website like Gmail has ever given you a push notification, that means it is a PWA. I wanted to point out a cool feature to SwipeLife. We pre-load and cache necessary calls. Not only does this save time, but it also is great for folks with a spotty internet connection. If you are on the BART surfing SwipeLife, if you lose internet, you will still be able to browse many parts of the blog. This is also something you get for free with GatsbyJS. These numbers are impressive in themselves, but when you really dig into them, it’s really neat all of the features Gatsby gives you.
- We felt like we did our part to make this world a better place. Interracial emojis are finally here, and if you want to learn more, feel free to go to our React serverless landing page, emoji.tinder.com.
- I see some folks nodding their head. Some of you might be predicting what comes next. When you run `gatsby build`
- We felt like we did our part to make this world a better place. Interracial emojis are finally here, and if you want to learn more, feel free to go to our React serverless landing page, emoji.tinder.com.
- We felt like we did our part to make this world a better place. Interracial emojis are finally here, and if you want to learn more, feel free to go to our React serverless landing page, emoji.tinder.com.
- I see some folks nodding their head. Some of you might be predicting what comes next. When you run `gatsby build`
- We felt like we did our part to make this world a better place. Interracial emojis are finally here, and if you want to learn more, feel free to go to our React serverless landing page, emoji.tinder.com.
- Don’t take our word for it. She received straight-A’s from day one on this earth and still is to this day. (In the Lighthouse audit that is). These are the kind of results that you get out of the box by using Gatsby. The first is our Performance metric. This is representative of numbers like “time to interactive”. Because of the fact that we are using a Serverless architecture, loading pages and clicking around feels like your just opening files on your own computer. Furthermore, Gatsby uses this performance technique called “Pre-Loading”, if it sees you can get to a particular page from the page a user is currently on, it will load ahead of time all of the resources needed for that next page. It also does cool things like image optimization, deferred loading of images, compressed javascript and CSS all out of the box. Gone are the days of spending weeks at a time working on, these are now something you get for free. Furthermore, take a look at the Progressive Web App button. GatsbyJS allows us to be a PWA almost out of the box as well. For those of you familiar with PWAs, y’all are probably telling yourself “omg”. It’s true. A PWA is basically giving your website app-like features. If a website like Gmail has ever given you a push notification, that means it is a PWA. I wanted to point out a cool feature to SwipeLife. We pre-load and cache necessary calls. Not only does this save time, but it also is great for folks with a spotty internet connection. If you are on the BART surfing SwipeLife, if you lose internet, you will still be able to browse many parts of the blog. This is also something you get for free with GatsbyJS. These numbers are impressive in themselves, but when you really dig into them, it’s really neat all of the features Gatsby gives you.
- We felt like we did our part to make this world a better place. Interracial emojis are finally here, and if you want to learn more, feel free to go to our React serverless landing page, emoji.tinder.com.
- We felt like we did our part to make this world a better place. Interracial emojis are finally here, and if you want to learn more, feel free to go to our React serverless landing page, emoji.tinder.com.
- It’s been a year and SwipeLife is still running strong. All throughout 2018 and 2019 we’ve been a dating companion to our users: Whether it’s SwipeLife’s tips on how to get out of a bad first date, or SwipeLife guiding readers on whether it’s morally OK to ghost on someone or not. The readers are reading and they keep coming back for more. SwipeLife has proven to be a powerful force in the dating world, and we are here to stay!
- For more information and to keep up with our brand new lifestyle blog, feel free to check out our React, WordPress, Serverless website @ SwipeLife.Tinder.com October 1st, 2018 was a great day, one that I don’t think anyone on the SwipeLife team will ever forget. Fast-forward a few months. It was June 11th, a Tuesday. It was raining in New York, there was a small, mild earthquake in Cleveland, and TechCrunch’s website turned into a succulent.
- I looked at it, and was like “Wait a minute...was TechCrunch hacked?”. Like a good millennial, I went to Twitter to investigate. As it turned out, TechCrunch was not alone. Many big websites like 9to5 mac all boasted succulents on their websites.
- As Kyle Frost put it, this was a big day for succulents. One thing all these websites seemed to have in common, they all use WordPress.
- As it turns out there was a bug on WordPress’s end. Wordpress had defaulted everyone’s front-end to the default WordPress theme, and this wasn’t just for a few minutes. This was for hours. When I read this article, bet your bottom dollar that I surfed my little butt over to swipelife.tinder.com. Here’s what I saw.
- Nothing changed! It’s still up :)
- Because of Gatsby and the fact that we use Wordpress as a headless CMS, Wordpress only controls the content-side of the operations. Our front-end is our React app. This means that when Wordpress switched everyone’s front-end to the default succulent theme, SwipeLife was left uninterrupted. Heck, since our website is static and serverless, if all of WordPress went down, SwipeLife would stay up. Would our writers be able to write content if WordPress was down? No. This is small potatoes because our readers are still able to access SwipeLife and all of the existing content. We got to keep all of our nines folks. This is one of those moments where you smile as an engineer. I think we need to have more of those moments. We always lament the times when things go wrong, but it’s really difficult to pin-point those times where everything went right. This is one of those times.
- We felt like we did our part to make this world a better place. Interracial emojis are finally here, and if you want to learn more, feel free to go to our React serverless landing page, emoji.tinder.com.
- We felt like we did our part to make this world a better place. Interracial emojis are finally here, and if you want to learn more, feel free to go to our React serverless landing page, emoji.tinder.com.
- We felt like we did our part to make this world a better place. Interracial emojis are finally here, and if you want to learn more, feel free to go to our React serverless landing page, emoji.tinder.com.
- I see some folks nodding their head. Some of you might be predicting what comes next. When you run `gatsby build`
- I see some folks nodding their head. Some of you might be predicting what comes next. When you run `gatsby build`
- I see some folks nodding their head. Some of you might be predicting what comes next. When you run `gatsby build`
- I see some folks nodding their head. Some of you might be predicting what comes next. When you run `gatsby build`
- We felt like we did our part to make this world a better place. Interracial emojis are finally here, and if you want to learn more, feel free to go to our React serverless landing page, emoji.tinder.com.
- We felt like we did our part to make this world a better place. Interracial emojis are finally here, and if you want to learn more, feel free to go to our React serverless landing page, emoji.tinder.com.
- Because of Gatsby and the fact that we use Wordpress as a headless CMS, Wordpress only controls the content-side of the operations. Our front-end is our React app. This means that when Wordpress switched everyone’s front-end to the default succulent theme, SwipeLife was left uninterrupted. Heck, since our website is static and serverless, if all of WordPress went down, SwipeLife would stay up. Would our writers be able to write content if WordPress was down? No. This is small potatoes because our readers are still able to access SwipeLife and all of the existing content. We got to keep all of our nines folks. This is one of those moments where you smile as an engineer. I think we need to have more of those moments. We always lament the times when things go wrong, but it’s really difficult to pin-point those times where everything went right. This is one of those times.
- Well, every good campaign needs a good landing page, just like every good superhero needs a side-kick right? Think about two things you want in a viral campaign website
- The first is the ability to be built fast. There is nothing worse than building a website for a targeted audience, and by the time the website is deployed, excitement has already come and gone. The Harlem Shake lastest for about a month and BAM, it was out of style. Because of how fast virality comes and goes, we decided that the landing page needed to be built and out the door in a week. So first, it needs to be able to be built fast.
- The second is it needs to be able to handle moments of virality. It needs to be able to scale up on a dime. It should be able to support low traffic one day and then be able to handle a Super Bowl Ad campaign or Reddit Hug of Death the next.
- The web team, I have to admit, was kind of stumped. I mean, our projects typically were built in React. We could get a React site up-and-running in a sitch. We knew that our only hope for getting a website up in a week was to do it in React. But what about the scalability part? Some sort of serverless architecture will make our website scalable and be able to handle hordes of traffic...but a serverless React project? Is that even possible?
- The web team, I have to admit, was kind of stumped. I mean, our projects typically were built in React. We could get a React site up-and-running in a sitch. We knew that our only hope for getting a website up in a week was to do it in React. But what about the scalability part? Some sort of serverless architecture will make our website scalable and be able to handle hordes of traffic...but a serverless React project? Is that even possible?
- Some sort of serverless architecture will make our website scalable and be able to handle hordes of traffic...but a serverless React project? Is that even possible? Did you hear that? It’s a buzzing sound...It’s...It’s a buzz-word!
- Some sort of serverless architecture will make our website scalable and be able to handle hordes of traffic...but a serverless React project? Is that even possible? Did you hear that? It’s a buzzing sound...It’s...It’s a buzz-word!
- But how does one turn Wordpress into a headless CMS? Well, Gatsby! Gatsby can actually allow us to have a React app front-end that treats WordPress as our back-end. How does it do it?
- It is a static website generator. We are going to run the four commands to get you a basic, static React app.
- Thank you! Well, that was exciting, wasn’t it! We all got back into work on Monday, a tear of happiness in our eyes for the impact we had just catalyzed. A meeting with marketing was placed on our calendars. “What could it be?” we all asked. Maybe an emoji celebration? Maybe a marketing and engineering mixer? You never know. We entered the meeting room, sweat on our brow, and marketing says “Good news, we are going to start a lifestyle blog, SwipeLife!
- To our delight, fetch happened. Immediately, people started sharing, posting, commenting. News organizations caught on and spread our word of love like wildfire. They all used the hashtag #RepresentLove.
- We even got a full-page ad in the New York Times explaining the cause. Despite all of the love our website was receiving, it didn’t crash. It didn’t go down. All of the devs took a moment to relish in this success. The world, even if it was just for a moment in time, was united. We were happy. We went to bed with smiles on our faces while the campaign was going. One morning, we came into work. I mean, it was like any other day.
- Thank you! Well, that was exciting, wasn’t it! We all got back into work on Monday, a tear of happiness in our eyes for the impact we had just catalyzed. A meeting with marketing was placed on our calendars. “What could it be?” we all asked. Maybe an emoji celebration? Maybe a marketing and engineering mixer? You never know. We entered the meeting room, sweat on our brow, and marketing says “Good news, we are going to start a lifestyle blog, SwipeLife!
- Before lunch though, the headlines started coming in. Unicode announced that interracial couple emojis have been officially inducted into the emoji registry. People were cheering, smiling, we were all sharing a sense of purpose and completeness.
- We felt like we did our part to make this world a better place. Interracial emojis are finally here, and if you want to learn more, feel free to go to our React serverless landing page, emoji.tinder.com.
- There’s a lot more exciting things going on here at Tinder. If after this talk you have a sudden desire to leave the company that paid for you to be here so you can join Tinder, I have great news! We are opening an office right next door and are hiring! Feel free to send me an email at kyle.boss@gotinder.com. I am always looking for awesome co-workers, and getting that sweet, sweet referral bonus isn't so bad either. So, we talked about how Gatsby can make your project serverless so you do not have to worry about scaling or server issues. We also discussed how GatsbyJS empowers the engineers on your team to do the best job they can, as fast as they can by letting them use the tools they already know-and-love: React and GraphQL! GatsbyJS not only empowers the engineers, but because it lets us use WordPress as a headless CMS, the writers are just as empowered as the engineers! They can still use WordPress to their heart’s desire while no one has to worry about the succulent apocalypse ever happening to the project.