{"id":33328,"date":"2017-12-13T09:41:05","date_gmt":"2017-12-13T15:41:05","guid":{"rendered":"https:\/\/wpengine.com\/?p=33328"},"modified":"2020-05-27T17:23:49","modified_gmt":"2020-05-27T22:23:49","slug":"all-about-headless-a-fireside-chat-with-the-javascript-developers-of-wp-engine","status":"publish","type":"post","link":"https:\/\/wpengine.com\/case-studies\/all-about-headless-a-fireside-chat-with-the-javascript-developers-of-wp-engine\/","title":{"rendered":"All About Headless: A Fireside Chat with the JavaScript Developers of WP Engine"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">This week I had the pleasure of sitting down with four WP Engine employees who have created a JavaScript front-end for their WordPress websites. I wanted to pick their brains on the subject that has the WordPress community captivated. Why JavaScript? What framework do you use and why? And most importantly: How did you do it?<\/span><\/p>\n<h2>Meet the Developers<\/h2>\n<p><span style=\"font-weight: 400;\">First, let\u2019s meet the developers we interviewed:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-33330 alignleft\" src=\"https:\/\/wpengine.com\/wp-content\/uploads\/2017\/12\/stallings.png\" alt=\"\" width=\"162\" height=\"158\"><b>Jason Stallings:<\/b><span style=\"font-weight: 400;\"> Long-time JavaScript developer and advocate, Jason started in L2 Customer Support and is now a Software Developer on the Performance Intelligence team at WP Engine. He develops primarily in React.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-33331 alignleft\" src=\"https:\/\/wpengine.com\/wp-content\/uploads\/2017\/12\/nate.png\" alt=\"\" width=\"159\" height=\"146\"><b>Nate Gay:<\/b><span style=\"font-weight: 400;\"> Nate works on the Customer Support team at WP Engine, and has been developing with JavaScript for about two years. In that time he has worked with jQuery and React\/Redux. He has created a WordPress theme and plugin for his JavaScript front-end using React.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-33332 alignleft\" src=\"https:\/\/wpengine.com\/wp-content\/uploads\/2017\/12\/bmo.png\" alt=\"\" width=\"157\" height=\"157\" srcset=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/bmo.png 218w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/bmo-150x150.png 150w\" sizes=\"auto, (max-width: 157px) 100vw, 157px\" \/><b>Ben Moore:<\/b><span style=\"font-weight: 400;\"> As Business Intelligence Developer, Level 2 at WP Engine, Ben Moore creates internal tools for the Customer Experience team. Ben, better known as BMO, is a huge Angular advocate and a proponent of JavaScript apps built off of WordPress. <\/span><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-33333 alignleft\" src=\"https:\/\/wpengine.com\/wp-content\/uploads\/2017\/12\/jay.png\" alt=\"\" width=\"157\" height=\"156\" srcset=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/jay.png 216w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/jay-150x150.png 150w\" sizes=\"auto, (max-width: 157px) 100vw, 157px\" \/><b>Jay Hill:<\/b><span style=\"font-weight: 400;\"> Jay works as a member of WP Engine\u2019s L2 Customer Support team and serves as Amazon Web Services Subject Matter Expert. He has been working with JavaScript for a few months. He is currently creating Progressive Web App by making a Headless WordPress site using React. <\/span><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h2>Libraries and Frameworks<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33337\" src=\"https:\/\/wpengine.com\/wp-content\/uploads\/2017\/12\/frameworks_FINAL_cropped.png\" alt=\"\" width=\"1202\" height=\"352\" srcset=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/frameworks_FINAL_cropped.png 1202w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/frameworks_FINAL_cropped-300x88.png 300w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/frameworks_FINAL_cropped-768x225.png 768w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/frameworks_FINAL_cropped-1024x300.png 1024w\" sizes=\"auto, (max-width: 1202px) 100vw, 1202px\" \/><\/p>\n<p><b>I asked our developers, why do you use the framework or library that you use?<\/b><span style=\"font-weight: 400;\"> As it turns out, three of our four developers choose to use <\/span><a href=\"https:\/\/reactjs.org\/\"><span style=\"font-weight: 400;\">React<\/span><\/a><span style=\"font-weight: 400;\"> and the Redux framework, while one is strongly in favor of <\/span><a href=\"https:\/\/angular.io\/\"><span style=\"font-weight: 400;\">Angular<\/span><\/a><span style=\"font-weight: 400;\">. For those who may be unfamiliar, Facebook created React while Google created Angular.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For Jason Stallings and Jay Hill, React is the library their team and projects tend to use. Jason Stallings says of React, <\/span><span style=\"font-weight: 400;\">\u201cIt seems to be the framework that has \u201cwon\u201d the framework war. Last year I attended the Chrome Summit and Google themselves spent the whole time talking about React. I like the amount of power behind it. I like the developer workflow as well.&#8221; What does he like about it?<\/span><\/p>\n<blockquote><p><span style=\"font-weight: 400;\">&#8220;It\u2019s declarative, functional, and forces good standards and principles.\u201d <\/span><\/p><\/blockquote>\n<p><span style=\"font-weight: 400;\">Nate Gay found his way to React as a solution to the jumble his original jQuery project had left him with. He uses Redux to manage state, and Axios as his library to make REST API calls. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ben Moore, by contrast, uses Angular. His reasoning is simple: <\/span><\/p>\n<blockquote><p><span style=\"font-weight: 400;\">\u201cI love opinions and hate options.&#8221;<\/span><\/p><\/blockquote>\n<p><span style=\"font-weight: 400;\">He says, &#8220;It just makes my life easier when I don\u2019t have to think about the best way to do it when one of the best companies in the world already told me how they\u2019re doing it.\u201d Not only this, but Angular coupled with Angular CLI offers him the power he needs to work with large amounts of data in the Business Intelligence tools he creates. He does admit though, \u201cfor a website, you probably shouldn\u2019t use Angular&#8211;it\u2019s just overkill.\u201d<\/span><\/p>\n<p><b>Since our room was split for Angular and React, I asked our developers&#8211;was there any project in which you\u2019d prefer to use another framework like Vue instead?<\/b><span style=\"font-weight: 400;\"> All four agreed that for themselves in most cases, the answer was no. Ben Moore, as a proponent of Angular, does say, \u201cI would look into it for smaller-scale components. I keep looking at a back-end dashboard or a plugins page, where you\u2019re plugging into an existing project or site. Angular isn\u2019t very good at piecing or piping into other things.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As a user of React, Jason Stallings simply says no. \u201cThey solve similar problems. Vue might be a bit quicker to get the project up and running because it requires less \u201cup front\u201d transpilation and minification, but any modern framework should have that anyways.\u201d All of our developers agreed that Vue is certainly the right choice for many users, even if it wasn&#8217;t their own framework of choice.<\/span><\/p>\n<h2>Why build a JavaScript app?<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33339\" src=\"https:\/\/wpengine.com\/wp-content\/uploads\/2017\/12\/why_develop.png\" alt=\"\" width=\"986\" height=\"260\" srcset=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/why_develop.png 986w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/why_develop-300x79.png 300w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/why_develop-768x203.png 768w\" sizes=\"auto, (max-width: 986px) 100vw, 986px\" \/><\/p>\n<p><b>I also wanted to know the \u201cwhy\u201d&#8211; why make a JavaScript app? What\u2019s the value for you? <\/b><span style=\"font-weight: 400;\">Nate Gay loves the performance aspect. \u201cWhen I request information from the REST API, I can get very specific about the kind of information I want, and that allows me to load a very fast and efficient website.\u201d He notes that a lot of problems he sees in sites in his work on the Customer Support team stem from incorrectly sized images. \u201cIn JavaScript I can grab the height and width of the image to be loaded, so when I create that element on the page, I can create it with the exact resolution.<\/span><\/p>\n<blockquote><p><span style=\"font-weight: 400;\">&#8220;I find that it\u2019s really easy to make a fast and efficient mobile-friendly site using JavaScript.\u201d<\/span><\/p><\/blockquote>\n<p><span style=\"font-weight: 400;\">Jason Stallings by contrast was drawn to the static nature of a JavaScript front-end. \u201cTo me, they\u2019re very attractive. You build it once, put it somewhere, and then there\u2019s no updates, there\u2019s no login, you don\u2019t get hacked, no server to maintain, no upgrades. You just \u201cset it and forget it.\u201d As long as HTML is still a thing, your website will still be valid.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For Jay Hill, the answer was more, \u201cWhy not?\u201d It was a new language to conquer on the road to becoming a full-fledged AWS-certified developer. Curiosity drove his continued interest. \u201cI didn\u2019t realize how big JavaScript is these days and how it\u2019s changed from like, 1998 to today. Back then JavaScript was like malware, and everyone just turned it off in their browser. But today you have companies like Facebook and Google doing things with it. It\u2019s exploded, it\u2019s a huge industry.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">And sheer power was the driving force for Ben Moore. Building tools that query hundreds of endpoints for data in a quick and efficient way was key. \u201cEverything that I\u2019ve built is highly dynamic and I needed the least impact on the server as possible&#8230; I think I pull in hundreds of thousands of rows a day. I needed something more dynamic that can distribute those resources to the browser, and generate things on the fly instead of refreshing the page each time.\u201d<\/span><\/p>\n<h2>Integrating with WordPress<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33338\" src=\"https:\/\/wpengine.com\/wp-content\/uploads\/2017\/12\/integrate_with_wordpress.png\" alt=\"\" width=\"990\" height=\"260\" srcset=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/integrate_with_wordpress.png 990w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/integrate_with_wordpress-300x79.png 300w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/integrate_with_wordpress-768x202.png 768w\" sizes=\"auto, (max-width: 990px) 100vw, 990px\" \/><\/p>\n<p><b>One of the biggest problems in developing a Headless site is simply figuring out how to do it. Everyone seems to have a different answer. So I asked our developers: How have your apps have integrated with WordPress?<\/b><span style=\"font-weight: 400;\"> Ben Moore uses a combination he likes to call <\/span><a href=\"https:\/\/wpengine.com\/resources\/headless-wordpress-on-wp-engine\/\"><span style=\"font-weight: 400;\">\u201cBrainless\u201d WordPress<\/span><\/a><span style=\"font-weight: 400;\">. In that, he means&nbsp;<\/span>\u201cI use WordPress for back-end functionality on initial page requests. So it handles authentication and user management, and enqueueing assets. But the only HTML I want it to spit out is scripts, styles, and Angular instantiation. From there, Angular takes over.&#8221; On the front-end,<\/p>\n<blockquote><p>&#8220;As you click around whatever I build out, it\u2019s straight API calls. It looks like you\u2019re going from page to page, but it\u2019s really a single-page web app.\u201d<\/p><\/blockquote>\n<p><span style=\"font-weight: 400;\">Similarly, a plugin and a theme are how Nate Gay chose to implement his JavaScript project. Of his plugin, he says \u201cI get a nonce and then I use the token in my calls back and forth between WordPress. It\u2019s an Admin interface so it has to use the login token. And then I have a theme, and I just load a single file on page load, which is the magic piece for me.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Jay Hill is creating a Progressive Web App. \u201cI\u2019m using the REST API to query data. It\u2019s pulling the data and serves through my menu component through a plugin I\u2019m using. My front page is just a list of blog posts, and in the menus it passes a slug as a query argument to be able to navigate each page.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/www.gatsbyjs.org\/\">GatsbyJS<\/a> has been the tool of choice for Jason Stallings. GatsbyJS is a static site generation tool that integrates with WordPress. That means, \u201cYou use React to structure your site the way you want, and then Gatsby is in charge of \u201csucking in\u201d the data and rendering it as static HTML. GatsbyJS has a WordPress source plugin where it uses the REST API to pull your posts, pages, custom post types, and makes it available to you as a GraphQL server. You can then preview that data from your front-end. Google and Facebook work together so that it beats their Lighthouse test&#8211;any website built with Gatsby gets an instant 100.\u201d<\/span><\/p>\n<h2>Challenges and Surprises<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33341\" src=\"https:\/\/wpengine.com\/wp-content\/uploads\/2017\/12\/challenges_developing.png\" alt=\"\" width=\"1108\" height=\"292\" srcset=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/challenges_developing.png 1108w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/challenges_developing-300x79.png 300w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/challenges_developing-768x202.png 768w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/challenges_developing-1024x270.png 1024w\" sizes=\"auto, (max-width: 1108px) 100vw, 1108px\" \/><\/p>\n<p><b>Since our developers are using WordPress in a non-traditional way, I wanted to know: what are some of the challenges or surprises you faced in working with the REST API and building your app? <\/b><span style=\"font-weight: 400;\">&nbsp;Jay Hill has run into a lot of issues, as a developer working with JavaScript in a new way. He says for him, \u201cknowing the structure of the data that\u2019s being returned has been a big hassle for me to troubleshoot. Console.log has been a huge help in that aspect, as well as this Google Chrome React dev tools extension.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As someone who has worked with JavaScript for a long time by comparison, Jason Stallings says the biggest challenge he faced was that,<\/span><\/p>\n<blockquote><p><span style=\"font-weight: 400;\">\u201cShortcodes don\u2019t always work correctly when you\u2019re pulling them through the REST API.\u201d &nbsp;<\/span><\/p><\/blockquote>\n<p><span style=\"font-weight: 400;\">By that he means, \u201ca lot of shortcodes include HTML and JS and CSS on the page, and the shortcode itself spits out a div that has classes and IDs that the JS can use to recognize it and fill in the content. If you\u2019re pulling the data from the REST API to render on another front-end, that JS and CSS doesn\u2019t exist on the page. That was a big hurdle to get around.\u201d He ended up using an HTML parser to look for those divs, strip them out, and replace them with a matching React component. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ben Moore has very dynamic and data-intensive tools built on JavaScript. One of his largest projects was built pre-REST API and pre-components. He says, \u201cthe biggest challenge I had was building custom endpoints and also creating a system where six other people on my team could also build their own endpoints to contribute.\u201d He says collaborating, mapping endpoints, and rendering out filters were by far the hardest parts. \u201cTrying to go between PHP and JavaScript and try to keep the same configurations and same mappings was\u2026 fun.\u201d<\/span><\/p>\n<h2>What does your development workflow look like?<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33340\" src=\"https:\/\/wpengine.com\/wp-content\/uploads\/2017\/12\/workflow_development.png\" alt=\"\" width=\"1104\" height=\"290\" srcset=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/workflow_development.png 1104w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/workflow_development-300x79.png 300w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/workflow_development-768x202.png 768w, https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/workflow_development-1024x269.png 1024w\" sizes=\"auto, (max-width: 1104px) 100vw, 1104px\" \/><\/p>\n<p><b>There are a lot of conflicting opinions in the community over what the \u201cright\u201d development workflow is. I asked our developers what their workflow looks like, and got surprisingly different answers from each. <\/b><span style=\"font-weight: 400;\">&nbsp;For Jay Hill, it\u2019s mostly trial and error at this stage. He reads documentation, tries a new task, and uses his diagnostics tools and resources to troubleshoot. Laughing, he says \u201cIf I still can\u2019t get it, I ask Stallings for help.\u201d <\/span><\/p>\n<p><span style=\"font-weight: 400;\">For Jason Stallings, working on a team means he uses Continuous Integration tools. \u201cI develop locally, push to Github, from there TravisCI picks it up and does tests to make sure it loads in the browser, ensures I can click around, can I load a post, and then it does unit snapshot tests to make sure the components are rendering correctly too. Once all those tests pass, TravisCI pushes it to my live site on static hosting.\u201c His process is all automated. But that development pipeline does take longer than it would to just publish a new post on WordPress. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">He says with this kind of workflow you should also consider, &nbsp;<\/span><\/p>\n<blockquote><p><span style=\"font-weight: 400;\">\u201cwhen you\u2019re publishing content in the backend it has to go through this big pipeline, and that pipeline takes about 5 minutes from hitting publish to when it actually shows up on the front end.\u201d <\/span><\/p><\/blockquote>\n<p><span style=\"font-weight: 400;\">Five minutes may not sound that long, but for a publisher that can be quite cumbersome. Imagine noticing a typo in one of your posts. From when you click \u201cupdate\u201d on that post, it still takes another five minutes until it\u2019s fixed on your site. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Nate Gay uses the <a href=\"https:\/\/github.com\/facebookincubator\/create-react-app\">Create React App<\/a> for his development process, which means changes show up right away in his browser as he works. In his local environment he has an mu-plugin that disables authentication so it doesn\u2019t interfere with his workflow. Of the deploy process he says, \u201cMy build tools for my plugin aren\u2019t very pretty. It\u2019s just a bash script that does the React build and takes the minified JS, zips it up, and then I can deploy it to my site.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ben Moore is an advanced JavaScript developer, but he doesn\u2019t work on a team. That means for him, automation isn\u2019t quite as important. He utilizes Angular CLI heavily in his development process. \u201cI am loving the Angular CLI. It has its own Node built in servers so I can do Angular front-end work and I put placeholders so I can pull in something dynamic. When I\u2019m comfortable with what it\u2019ll look like I can send it to my vagrant, then push it up when I\u2019m happy. I push to Github so it saves, then push to WP Engine staging. If it works as it should, I push to live.\u201d<\/span><\/p>\n<h2>How did WP Engine help?<\/h2>\n<p><b>I was also curious how WP Engine came into the picture for our developers. Did the WP Engine platform prove to be beneficial in the development or hosting process? <\/b><span style=\"font-weight: 400;\">Jason Stallings says it does, particularly when it comes to caching requests to API endpoints. <\/span><\/p>\n<blockquote><p><span style=\"font-weight: 400;\">\u201cAs long as you\u2019re making GET requests to those endpoints then they\u2019re cached, and they\u2019re automatically purged from cache when you make updates to posts.\u201d <\/span><\/p><\/blockquote>\n<p><span style=\"font-weight: 400;\">Nate Gay also points out the benefit of WP Engine\u2019s CDN for static file caching and geographical distribution. And great servers as well, says Jay Hill.<\/span><\/p>\n<h2>Conclusion<\/h2>\n<p><span style=\"font-weight: 400;\">It was certainly a compelling conversation to lead. Four very different developers, all in their own niche and with their own workflows. The best way I could summarize Headless WordPress after speaking with them would be, \u201cthere is no one-size fits all.\u201d No matter which methods you choose, it will be a learning experience. But as our developers and many others have learned along the way, developing with JavaScript presents opportunities for great advancements in user experience, power, and agility. And with tech giants like Google and Facebook backing JavaScript, it is quickly becoming the future. <\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This week I had the pleasure of sitting down with four WP Engine employees who have created a JavaScript front-end for their WordPress websites. I wanted to pick their brains on the subject that has the WordPress community captivated. Why JavaScript? What framework do you use and why? And most importantly: How did you do<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":156,"featured_media":33329,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[5,257],"tags":[206,1016,951,295],"class_list":["post-33328","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","category-interviews","tag-agile-software-development","tag-headless","tag-javascript","tag-wordpress-developer"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>All About Headless: A Fireside Chat I WP Engine Blog<\/title>\n<meta name=\"description\" content=\"I sat down with four WP Engine employees who have created a JavaScript front-end for their WordPress websites to better understand their rationale.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"All About Headless: A Fireside Chat I WP Engine Blog\" \/>\n<meta property=\"og:description\" content=\"I sat down with four WP Engine employees who have created a JavaScript front-end for their WordPress websites to better understand their rationale.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/all-about-headless-a-fireside-chat-with-the-javascript-developers-of-wp-engine\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-13T15:41:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-05-27T22:23:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/all_about_headless_banner.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1364\" \/>\n\t<meta property=\"og:image:height\" content=\"572\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Janna Hilferty\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wpengine\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Janna Hilferty\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/all-about-headless-a-fireside-chat-with-the-javascript-developers-of-wp-engine\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/all-about-headless-a-fireside-chat-with-the-javascript-developers-of-wp-engine\/\",\"name\":\"All About Headless: A Fireside Chat I WP Engine Blog\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2017-12-13T15:41:05+00:00\",\"dateModified\":\"2020-05-27T22:23:49+00:00\",\"author\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/01ebdba350bf1adf031a63d8c0814a58\"},\"description\":\"I sat down with four WP Engine employees who have created a JavaScript front-end for their WordPress websites to better understand their rationale.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/all-about-headless-a-fireside-chat-with-the-javascript-developers-of-wp-engine\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/all-about-headless-a-fireside-chat-with-the-javascript-developers-of-wp-engine\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/all-about-headless-a-fireside-chat-with-the-javascript-developers-of-wp-engine\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"All About Headless: A Fireside Chat with the JavaScript Developers of WP Engine\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/01ebdba350bf1adf031a63d8c0814a58\",\"name\":\"Janna Hilferty\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ecd4219dd1e2de924c1a4a45ba5cb05db66b34185e5fc175cc1df0650f6a341a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ecd4219dd1e2de924c1a4a45ba5cb05db66b34185e5fc175cc1df0650f6a341a?s=96&d=mm&r=g\",\"caption\":\"Janna Hilferty\"},\"description\":\"Janna Hilferty loves both technical and free-form writing, hiking with her dog, and painting with all the colors of the wind. In her free time you can find her blogging, smoking a cigar, or watching cheesy documentaries.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"All About Headless: A Fireside Chat I WP Engine Blog","description":"I sat down with four WP Engine employees who have created a JavaScript front-end for their WordPress websites to better understand their rationale.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"All About Headless: A Fireside Chat I WP Engine Blog","og_description":"I sat down with four WP Engine employees who have created a JavaScript front-end for their WordPress websites to better understand their rationale.","og_url":"https:\/\/wpengine.com\/case-studies\/all-about-headless-a-fireside-chat-with-the-javascript-developers-of-wp-engine\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_published_time":"2017-12-13T15:41:05+00:00","article_modified_time":"2020-05-27T22:23:49+00:00","og_image":[{"width":1364,"height":572,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/12\/all_about_headless_banner.png","type":"image\/png"}],"author":"Janna Hilferty","twitter_card":"summary_large_image","twitter_creator":"@wpengine","twitter_site":"@wpengine","twitter_misc":{"Written by":"Janna Hilferty","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/all-about-headless-a-fireside-chat-with-the-javascript-developers-of-wp-engine\/","url":"https:\/\/wpengine.com\/case-studies\/all-about-headless-a-fireside-chat-with-the-javascript-developers-of-wp-engine\/","name":"All About Headless: A Fireside Chat I WP Engine Blog","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2017-12-13T15:41:05+00:00","dateModified":"2020-05-27T22:23:49+00:00","author":{"@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/01ebdba350bf1adf031a63d8c0814a58"},"description":"I sat down with four WP Engine employees who have created a JavaScript front-end for their WordPress websites to better understand their rationale.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/all-about-headless-a-fireside-chat-with-the-javascript-developers-of-wp-engine\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/all-about-headless-a-fireside-chat-with-the-javascript-developers-of-wp-engine\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/all-about-headless-a-fireside-chat-with-the-javascript-developers-of-wp-engine\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"All About Headless: A Fireside Chat with the JavaScript Developers of WP Engine"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/01ebdba350bf1adf031a63d8c0814a58","name":"Janna Hilferty","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ecd4219dd1e2de924c1a4a45ba5cb05db66b34185e5fc175cc1df0650f6a341a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ecd4219dd1e2de924c1a4a45ba5cb05db66b34185e5fc175cc1df0650f6a341a?s=96&d=mm&r=g","caption":"Janna Hilferty"},"description":"Janna Hilferty loves both technical and free-form writing, hiking with her dog, and painting with all the colors of the wind. In her free time you can find her blogging, smoking a cigar, or watching cheesy documentaries."}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/posts\/33328","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/156"}],"replies":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/comments?post=33328"}],"version-history":[{"count":0,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/posts\/33328\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/33329"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=33328"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/categories?post=33328"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/tags?post=33328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}