https://www.youtube.com/watch?v=qcqbX3i0X2Y
Werner has been a member of our meetup group since the beginning (he had to, being married to Veerle, one of the co-organizers ;). He works together with Veerle as Con Impeto. This is the first time he presents a talk on our meetup group.
The evening was all about showcases, Werner showed us an experiment he had been working on the last weeks: a decoupled Vue.js version of TwentySeventeen that gets its data from the WordPress backend via GraphQL. It is not a production project, but it is online to peak, test and maybe even comment on:
- http://prutstuin.be/, the ‘live’ JS frontend
- https://github.com/whuysmans/vuewp, the codebase of the JS theme with Vue.js
- https://github.com/whuysmans/vuewp-graphql, the customised and simplified version of the GraphQL plugin he forked
Why this experiment? Apparently he just likes to experiment with ‘the new stuff’. The WordPress backend resides on a server somewhere and has the forked GraphQL plugin running, the frontend is completely JavaScript and can be on a completely different server. For the frontend he had to write everything from scratch, with help from the Vue.js framework to bootstrap the JS-site and the new WordPress core theme TwentySeventeen to peek into for the HTML/CSS.
Why a JS-theme (in this experiment)? Werner likes to write in JavaScript, ES6 has such a nice syntax and expressions he couldn’t resist. Vue.js is potentially the ‘hottest’ new thing in JavaScript land, if you check the stars in GitHub and some Trend-lists. With a nice dev ecosystem, state and component focusedness, it was fun to use/build upon.
Why GraphQL iso the RestAPI? GraphQL would be more elegant, it only has one endpoint and per request you can say what you want and which data the answer must include (check the slides, for example, if you only need the Post ID per post, you’ll just get a data with per post only the Post ID iso all the post data). With this flexible endpoint, you’ll have less round trips to the server to get the data you need.
The result is a very performant UX, without page refreshes so it feels very fast and designers would be able to animate page transitions.
And what about SEO? Werner had to write a custom .htaccess to redirect bots to the ‘native’ theme on the backend server. Because a lot of bots only see the raw HTML (without head meta), you wouldn’t be able to see a nice preview when you share a post on facebook. The native theme does show the head meta in the HTML so the bots will know what to do. (the native theme is blocked for any other user, only bots would see it)
Werner wrote a blogpost about his experiment, check it out: https://conimpeto.be/wordpress/create-a-wordpress-twentyseventeen-theme-with-vuejs-and-graphql/
