If you’re looking for a real-world example of the WordPress REST API with code that you can dig into, the new ustwo.com website is open source on GitHub. ustwo is a digital product agency most well known for their work on the award-winning Monument Valley app. They partnered with Human Made, a WordPress development agency, to build the backend of the site.
The ustwo.com frontend is a React.js single-page application that serves WordPress content via the WP REST API using custom endpoints. In a post called “Open Sourcing Our Website,” ustwo developer Daniel Demmel explains why the company put the site’s frontend up on GitHub.
“Ultimately, we’ve built something that feels novel and polished enough to share publicly,” he said. “We want it to be of real use to others – after all, it’s all very well reading on a blog about how nice it is using React or Docker, with some Hello World examples, but having a chance to look under the bonnet of a production website is an entirely different thing.”
The team at ustwo decided to get innovative with a “headless WordPress” setup earlier this year, before the WP REST API was officially merged.
“The way we used WordPress as a headless setup accessible only through the API for a high profile production website was a bit of a technological bet – with WP-API landing in WordPress core six months after we decided to go for it – so sharing our experience and codebase should give execution ideas and confidence to anyone else considering this setup,” Demmel said.
Advantages of Headless WordPress
If you’re wondering why an agency might go to all the trouble of creating their website as a single-page application, you need only check out ustwo.com to see the difference. The beautiful transitions and speediness of the UI put the site head and shoulders above similar portfolio sites.
“We chose to build the site as a single-page application in order to have full control over all of its aspects – including transitions between pages – and to make navigation super fast by not having to reload the browser,” Demmel said. “We chose React.js as a main JavaScript technology to do this, since it has built-in support to render pages on the server side too (called isomorphic rendering).
“Our content management system behind this is a WordPress instance which doesn’t actually render the pages itself, but instead serves content up via the API through a mixture of standard and customised JSON REST endpoints, making the vast majority of the content editable,” he said.
Coincidentally, WordPress.com’s Calypso project runs on a similar stack. “So if you like what they’ve done to make the editor experience awesome, you’ll like what we’ve done to make the visitor experience great,” Demmel said.
ustwo opted to make their work open source just like Automattic did with Calypso, recognizing the importance of sharing in helping the whole ecosystem move forward.
“For us, there’s so much more value to be gained from building on each other’s work and knowledge than trying to hold on to a short-term technological advantage,” Demmel said.
The REST API is Changing How Teams Work Together
In a case study published on Human Made’s website, the team reviewed how working on the ustwo.com project has changed the way they work.
Working with the WordPress REST API brought a separation of concerns that meant approaching project management in a new way. Our developers were focused solely on WordPress as a data entry and delivery application. We were just one part of a wider team that included a designer, a front end React developer, a front end CSS developer, a Node.js developer, a project manager, and the stakeholder. This allowed each part of the team to be completely focused on their component, working independently while feeding back to the rest of the team.
Human Made attributes this tidy separation of concerns to the new workflow that naturally comes out of using a REST API. Back and frontend developers are no longer stepping on each other’s toes:
The technology itself facilitated this change in project management: all that the front end developers need to make the site live is to change the URL where the data is. When developers are working locally in their development environments they can work with the content from the live site; it also streamlines the process of moving from staging to production. We found that the API hasn’t just changed WordPress but changed how people work together, creating a new workflow and pushing where WordPress is going.
For more details on the ustwo.com architecture, check out Human Made’s case study as well as ustwo’s post reviewing the process. Solid open source examples like this one are always helpful when learning to build with new technologies. All the code for the website is GPL-licensed and available on GitHub for anyone to use or repurpose.
Nessun commento:
Posta un commento