PoP - “Platform of Platforms”: Framework for building Single-Page Application WordPress websites, decentralized crowd-sourced platforms, and social networks
1 like4,585 views
The document describes 'pop', a framework that combines WordPress and Handlebars to create single-page applications using an MVC architecture. It outlines the process of handling user requests through AJAX, generating JSON responses, and transforming them into HTML, with a focus on decentralized features and social networking capabilities. Additional highlights include design principles, potential uses, and a comparison with the WP REST API, emphasizing the modular structure and customizable presentation options.
PoP - “Platform of Platforms”: Framework for building Single-Page Application WordPress websites, decentralized crowd-sourced platforms, and social networks
- 1. PoP - “Platform of Platforms” Leonardo Losoviz https://getpop.org
- 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? 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: AJAX Request
- 6. How does it work? 2 Wordpress processes the request, and provides the results to the PoP controller. Front-end Back-end Request: AJAX Data Request
- 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: AJAX Response: JSON Data Request
- 8. How does it work? 4 Handlebars templates transform the JSON code into HTML, and passes it back to PoP Front-end Back-end Request: AJAX Response: JSON Data Request HTML
- 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 HTMLResponse
- 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
- 16. How can it be used?
- 17. Niche/decentralized social network => Twitter/Facebook/ Medium/Reddit (with WooCommerce) Decentralized market-place => Amazon Content aggregator => Digg Server back-end for mobile apps Microservices Potential uses
- 18. Characteristics
- 19. Single-Page Application loose: developer can select: what pages are preloaded which ones are retrieved from the server
- 20. SPA Drawback The first load has to download the framework and the application code. Slower first page load compared to server-based applications.
- 21. Application state Read operations: state kept in front-end Create/Update/Delete operations: handled in the server no dual state, no state synchronization needed
- 22. (Non)logged-in user state Rich experience for both logged-in and non logged-in users Coherent among stateful/less pages Synchronized among tabs
- 23. Program execution flow Model and Controller (application logic, program execution flow) in back-end Different to javascript frameworks (eg: AngularJS)
- 24. Comparison with WP REST API
- 25. Similarities Can export any piece of data: /posts /events /users /tags
- 26. Differences Not RESTful (at least not currently, but it can be done) Links keep the same URL as in WordPress Search engine optimization friendly Documentation-less API The public API is automatically generated Developers can focus on making the website
- 29. 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)
- 31. topLevel
- 32. pageSection Is a physical/functional section on the website
- 33. pageSections
- 34. block Is an independent component Keeps its own state Can be added to different pageSections, and customized for each
- 35. blocks
- 36. blockGroup a special type of block collects/wraps other blocks synchronizes state among them
- 37. blockGroups
- 38. Module Either An atomic/reusable functionality A composition of modules
- 39. modules
- 40. Modularity
- 41. Atomic/reusable module A module is composed of: PHP files .tmpl Handlebars templates .js files (jQuery)
- 42. Composable module Modules can build upon each other Separation of Concerns Collaboration among developers
- 43. JSON structure
- 44. Clean JSON structure Database => unique per topLevel Dataset => unique per block State variables => unique per block Configuration => unique per pageSection, block and module
- 45. Database Keeps relationships among objects (not a flat, single-level structure) Cumulative Allows to not fetch already-loaded data
- 47. Targets Any page can be opened on any pageSection Simply specify attribute “target” in the link, pointing to the pageSection
- 48. Formats Data can be visualized on multiple, customizable formats Lists Grids Maps Charts Etc
- 49. Presentation Multiple presentation styles Minimum extra code can lead to provide different functions Print Embed
- 50. Tabs Many pages can be opened simultaneously Pages remain accessible until closed
- 51. 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)
- 52. Interceptors Switches tab to an already-opened page Renders a view instantly Allows deep-linking of javascript functions, using an actual, reachable URL
- 57. Inner modules
- 62. Configuration
- 70. Loading data
- 79. Actions
- 82. Data fields