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 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/