{"id":11710,"date":"2019-08-04T07:54:21","date_gmt":"2019-08-04T12:54:21","guid":{"rendered":"https:\/\/2019.us.wordcamp.org\/?post_type=wcb_session&#038;p=11710"},"modified":"2020-06-09T16:56:29","modified_gmt":"2020-06-09T21:56:29","slug":"how-i-built-wpbingo-a-pwa-that-uses-vue-js-tailwind-css-and-the-wp-rest-api","status":"publish","type":"wcb_session","link":"https:\/\/us.wordcamp.org\/2019\/session\/how-i-built-wpbingo-a-pwa-that-uses-vue-js-tailwind-css-and-the-wp-rest-api\/","title":{"rendered":"How I Built WPBingo: a PWA That Uses Vue.js, Tailwind CSS, and the WP REST API"},"content":{"rendered":"\n<p>Summary:<br>In 2017 made a simple bingo game using Vue.js and the REST API and you can, too! This session provides an excellent primer on working with a new JS framework (Vue.js in this case) and extending the REST API. In 2019 I converted it into a Progressive Web App (PWA). The entire thing is lightning fast and can even work offline!<\/p>\n\n\n\n<p>Full description:<br>Just prior to WCUS 2017 I had the fun idea of creating an interactive bingo board for all of the fun and unique things that we regularly observe within our community. I was able to knock together the original concept after just a couple of hours thanks to utility provided by View and tailwind. Later I connected it to WordPress via the rest API so that I could more easily manage each of the squares available in the data set. Finally, I added a service worker to make the entire experience work offline.<\/p>\n\n\n\n<p>In this presentation, I walk you through how I went from idea to prototype to fully functional web app. We\u2019ll cover the purpose served by my chosen frameworks and why I picked those instead of writing plain, vanilla JavaScript and CSS (or competing frameworks, for that matter). While this will not be a _deep_ dive into code, we will review specific code samples and you should get enough detail to build this \u2013 or something like it \u2013 yourself by the time the session has ended.<\/p>\n\n\n\n<p>**Here\u2019s a specific list of the things you can expect to learn during this presentation:**<\/p>\n\n\n\n<p>* Why I chose Vue instead of React for this particular project<br>* Some of the neat things that Vue provides to us as developers (Vue.js 101)<br>* The benefits of utility-based CSS classes<br>* How to register custom REST API endpoints<br>* How to make a very simple Progressive Web App (PWA) that uses service workers, local storage, and local caching for resilience against connectivity issues and unintended browser refreshes<\/p>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/wordpress.tv\/2019\/11\/11\/brian-richards-how-i-built-wpbingo-a-pwa-that-uses-vue-js-tailwind-css-and-the-wp-rest-api\/\" target=\"_blank\" rel=\"noreferrer noopener\">Watch on WordPress.tv<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Summary:In 2017 made a simple bingo game using Vue.js and the REST API and you can, too! This session provides an excellent primer on working with a new JS framework (Vue.js in this case) and extending the REST API. In 2019 I converted it into a Progressive Web App (PWA). The entire thing is lightning [&hellip;]<\/p>\n","protected":false},"author":648209,"featured_media":0,"template":"","meta":{"jetpack_post_was_ever_published":false,"_wcpt_session_time":1572631200,"_wcpt_session_duration":2700,"_wcpt_session_type":"session","_wcpt_session_slides":"","_wcpt_session_video":"","_wcpt_speaker_id":[2552],"footnotes":""},"session_track":[1274817],"session_category":[1219417],"class_list":["post-11710","wcb_session","type-wcb_session","status-publish","hentry","wcb_track-regular-sessions-room-230","wcb_session_category-regular-session"],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pa0Brk-32S","session_date_time":{"date":"November 1, 2019","time":"1:00 pm"},"session_speakers":[{"id":"2552","slug":"brian-richards","name":"Brian Richards","link":"https:\/\/us.wordcamp.org\/2019\/speaker\/brian-richards\/"}],"session_cats_rendered":"45 min. Regular Session","_links":{"self":[{"href":"https:\/\/us.wordcamp.org\/2019\/wp-json\/wp\/v2\/sessions\/11710","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/us.wordcamp.org\/2019\/wp-json\/wp\/v2\/sessions"}],"about":[{"href":"https:\/\/us.wordcamp.org\/2019\/wp-json\/wp\/v2\/types\/wcb_session"}],"version-history":[{"count":3,"href":"https:\/\/us.wordcamp.org\/2019\/wp-json\/wp\/v2\/sessions\/11710\/revisions"}],"predecessor-version":[{"id":37635,"href":"https:\/\/us.wordcamp.org\/2019\/wp-json\/wp\/v2\/sessions\/11710\/revisions\/37635"}],"speakers":[{"embeddable":true,"href":"https:\/\/us.wordcamp.org\/2019\/wp-json\/wp\/v2\/speakers\/2552"}],"author":[{"embeddable":true,"href":"https:\/\/us.wordcamp.org\/2019\/wp-json\/wporg\/v1\/users\/rzen"}],"wp:attachment":[{"href":"https:\/\/us.wordcamp.org\/2019\/wp-json\/wp\/v2\/media?parent=11710"}],"wp:term":[{"taxonomy":"wcb_track","embeddable":true,"href":"https:\/\/us.wordcamp.org\/2019\/wp-json\/wp\/v2\/session_track?post=11710"},{"taxonomy":"wcb_session_category","embeddable":true,"href":"https:\/\/us.wordcamp.org\/2019\/wp-json\/wp\/v2\/session_category?post=11710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}