How to make a decentralized WordPress website

PoP (https://getpop.org) is a WordPress framework which aims to break the information monopoly of large Internet corporations by linking autonomous WordPress websites together, allowing them to interact with each other and become part of a wider network composed of different communities. Users from different websites can interact among themselves, without the need to join a centralized service such as Facebook or LinkedIn. This way, website owners can keep control of their own data, storing it on their own servers.

PoP works by combining WordPress and Handlebars into an MVC architecture framework, in which WordPress is the model, Handlebars is the view, and PoP is the controller. Acting as the controller, PoP intercepts WordPress’ data query results, generates a response in JSON, and feeds this JSON code to Handlebars to be transformed into HTML. The result is a dynamic website, in which the back-end is fully WordPress, yet the front-end is built using javascript.

In this presentation, we will explore the technical features of the framework, how it works, how to create a website with it and how to integrate it within an ecosystem.

Transcript

1. the “Platform of Platforms” Leonardo Losoviz https://getpop.org
2. URLs PoP https://getpop.org PoP Demo https://demo.getpop.org GitHub https://github.com/leoloso/PoP
3. What is PoP? PoP creates Single-Page Application websites, by combining WordPress and Handlebars into an MVC architecture framework: WordPress is the model/back-end Handlebars templates are the view/front-end the PoP engine is the controller
4. How does it work? Whenever the user clicks on a link... Front-end Back-end
5. How does it work? 1 PoP intercepts the user request in the front-end and delivers it to the webserver using AJAX Front-end Back-end Request Request: AJAX
6. How does it work? 2 the PoP controller processes the request and delivers it to WordPress to get the data Front-end Back-end Request Request: AJAX Data
7. How does it work? 3 PoP generates a response in JSON, and feeds this JSON code back to the front-end Front-end Back-end Request Request: AJAX Response: JSON Data
8. How does it work? 4 PoP delivers the JSON code to Handlebars, which then generates the HTML code using javascript templates, and passes it back to PoP Front-end Back-end Request HTML Request: AJAX Response: JSON Data
9. How does it work? 5 PoP appends the HTML into the DOM and executes user-defined javascript functions on the new elements Front-end Back-end Request: AJAX Response: JSON Data Request HTML Response
10. Key design principles
11. #1: API PoP provides the WordPress website of its own API: Available via HTTP Simply by adding to any URL: output=json
12. #2: Decentralized The response is a uniform JSON code All PoP websites can communicate among themselves Fetch/process data in real time. POST requests User-generated content is stored on the source website.
13. What can we do with PoP?
14. Social network Features taken from several social networks: Twitter/Facebook/Medium/Reddit Demo in https://demo.getpop.org
15. Decentralized social network Demo between: https://getpop.org https://demo.getpop.org
16. Niche/decentralized social network => Twitter/Facebook/ Medium/Reddit (with WooCommerce) Decentralized market-place => Amazon Content aggregator => Digg Server back-end for mobile apps Microservices Some potential uses
17. Characteristics
18. Single-Page Application User experience similar to that of a desktop application Can configure: what pages are preloaded what pages are retrieved from the server
19. Server-side rendering The first page loaded produces HTML from the server The 2nd page onwards, the SPA takes over HTML code produced in the front-end through javascript Isomorphic rendering Same code for producing HTML in front and back-end
20. Content CDN Dynamic (or mutable) content is made static (or immutable) by serving it through a Content Delivery Network (CDN) The best of both worlds: Content is still dynamically generated through WordPress But it can be cached as coming from a static site generator
21. Offline first Offline first capabilities through the implementation of Service Workers the website functions offline performance increases by reducing network requests pages load immediately (from the second access onwards) It is a Progressive Web App
22. Particularities
23. Application state Read operations: state kept in front-end Create/Update/Delete operations: handled in the server no dual state, no state synchronization needed
24. (Non)logged-in user state Rich experience for both logged-in and non logged-in users Coherent among stateful/less pages Synchronized among tabs
25. Program execution flow Model and Controller (application logic, program execution flow) in back-end Different to javascript frameworks (eg: AngularJS)
26. Front-end features
27. Targets Any page can be opened on any pageSection Simply specify attribute “target” in the link, pointing to the pageSection
28. Formats Data can be visualized on multiple, customizable formats Lists Grids Maps Charts Etc
29. Presentation Multiple presentation styles Minimum extra code can lead to provide different functions Print Embed
30. Tabs Many pages can be opened simultaneously Pages remain accessible until closed Users are asked to re-open tabs from previous session
31. Background (pre)loading Pre-loaded pages, user state, client-server synchronization Initial views User logged-in status Page-related user state User notifications Non-cacheable data (eg: posts' comment count)
32. Interceptors Switches tab to an already-opened page Renders a view instantly Allows deep-linking of javascript functions, using an actual, reachable URL
33. Comparison: PoP API and WP REST API
34. Similarities Can export any piece of data: /posts /events /users /tags
35. Differences Not RESTful (at least not currently, but it can be done) Links keep the same URL as in WordPress Documentation-less API The public API is automatically generated Developers can focus on making the website Immediately loaded (no extra request needed to fetch data)
36. How it works
37. Templates topLevel, pageSections, blocks/blockGroups modules
38. Template hierarchy Top-down hierarchy: 1 topLevel contains N pageSections 1 pageSection contains N blocks/blockGroups 1 blockGroup contains N blocks/blockGroups 1 block contains N modules 1 module contains N modules (ad infinitum)
39. Template: topLevel = WordPress Hierarchy Home/Single/Page/Archive/etc
40. topLevel
41. Template: pageSection Is a physical/functional section on the website
42. pageSections
43. Template: block Is an independent component Keeps its own state Can be added to different pageSections, and customized for each
44. blocks
45. Template: blockGroup a special type of block collects/wraps other blocks synchronizes state among them
46. blockGroups
47. Template: module Either An atomic/reusable functionality A composition of modules
48. modules
49. Modularity
50. Atomic/reusable module A module is composed of: PHP files .tmpl Handlebars templates .js files .css files
51. Composable module Modules can build upon each other Separation of Concerns Collaboration among developers
52. JSON structure
53. Clean JSON structure Database => unique per topLevel Dataset => unique per block State variables => unique per block Configuration => unique per pageSection, block and module
54. Database Keeps relationships among objects (not a flat, single-level structure) Cumulative Allows to not fetch already-loaded data
55. Observations
56. “1. Leverage!” DRY (Don’t Repeat Yourself) WordPress: functionalities provided by the community Isomorphic rendering: frontend/backend/email HTML from same code Modules: everything is re-usable Decentralized architecture: microservices
57. “2. Decouple!” View design (Handlebars javascript templates) View configuration Javascript functions Styles Database Dependency injection
58. “3. Cache!” Several layers of caching: Server cache (WP Super Cache) Configuration cache Content CDN / Asset CDN Service Workers
59. Let’s see the code!
60. Handlebars Templates
63. Inner modules
66. Initializing attributes
68. Configuration
71. Executing Javascript
76. Loading data
79. Loading external data
82. Input/Output variables
85. Actions
88. Data fields
91. Changing object domain
95. The way forward
96. Project status
97. SukiPoP https://getpop.org/en/campaign/
98. Thanks! Questions? Leonardo Losoviz leo@getpop.org https://getpop.org https://github.com/leoloso/PoP