Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
PoP - “Platform
of Platforms”
Leonardo Losoviz
https://getpop.org
URLs
PoP
https://getpop.org
PoP Demo
https://demo.getpop.org
GitHub
https://github.com/leoloso/PoP
What is PoP?
PoP creates Single-Page Application websites, by combining
Wordpress and Handlebars into an MVC architecture ...
How does it work?
Front-end Back-end
How does it work?
1 PoP intercepts the user request in the front-end and delivers it to the
webserver using AJAX.
Front-en...
How does it work?
2 Wordpress processes the request, and provides the results to the PoP
controller.
Front-end Back-end
Re...
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
Re...
How does it work?
4 Handlebars templates transform the JSON code into HTML, and passes
it back to PoP
Front-end Back-end
R...
How does it work?
5 PoP appends the HTML into the DOM and executes user-defined
javascript functions on the new elements.
F...
Key design
principles
#1: API
PoP provides the WordPress website of its own API:
Available via HTTP
Simply by adding to any URL: output=json
#2: Decentralized
The response is a uniform JSON code
All PoP websites can communicate among themselves
Fetch/process data...
What can we do
with PoP?
Social network
Features taken from several social networks:
Twitter/Facebook/Medium/Reddit
Demo in https://demo.getpop.org
Decentralized social
network
Demo between:
https://getpop.org
https://demo.getpop.org
How can it be
used?
Niche/decentralized social network => Twitter/Facebook/
Medium/Reddit
(with WooCommerce) Decentralized market-place => Ama...
Characteristics
Single-Page Application
loose: developer can select:
what pages are preloaded
which ones are retrieved from the server
SPA Drawback
The first load has to download the framework and the application code.
Slower first page load compared to serve...
Application state
Read operations: state kept in front-end
Create/Update/Delete operations: handled in the server
no dual ...
(Non)logged-in user state
Rich experience for both logged-in and non logged-in users
Coherent among stateful/less pages
Sy...
Program execution flow
Model and Controller (application logic, program execution flow) in
back-end
Different to javascript...
Comparison with
WP REST API
Similarities
Can export any piece of data:
/posts
/events
/users
/tags
Differences
Not RESTful (at least not currently, but it can be done)
Links keep the same URL as in WordPress
Search engine...
Template
hierarchy
Templates
topLevel,
pageSections,
blocks/blockGroups
modules
Hierarchy
Top-down hierarchy:
1 topLevel contains N pageSections
1 pageSection contains N blocks/blockGroups
1 blockGroup ...
topLevel
= WordPress Hierarchy
Home/Single/Page/Archive/etc
topLevel
pageSection
Is a physical/functional section on the website
pageSections
block
Is an independent component
Keeps its own state
Can be added to different pageSections, and customized for each
blocks
blockGroup
a special type of block
collects/wraps other blocks
synchronizes state among them
blockGroups
Module
Either
An atomic/reusable functionality
A composition of modules
modules
Modularity
Atomic/reusable module
A module is composed of:
PHP files
.tmpl Handlebars templates
.js files (jQuery)
Composable module
Modules can build upon each other
Separation of Concerns
Collaboration among developers
JSON structure
Clean JSON structure
Database => unique per topLevel
Dataset => unique per block
State variables => unique per block
Config...
Database
Keeps relationships among objects (not a flat, single-level structure)
Cumulative
Allows to not fetch already-load...
Front-end
features
Targets
Any page can be opened on any pageSection
Simply specify attribute “target” in the link, pointing to the pageSecti...
Formats
Data can be visualized on multiple, customizable formats
Lists
Grids
Maps
Charts
Etc
Presentation
Multiple presentation styles
Minimum extra code can lead to provide different functions
Print
Embed
Tabs
Many pages can be opened simultaneously
Pages remain accessible until closed
Background (pre)loading
Pre-loaded pages, user state, client-server synchronization
Initial views
User logged-in status
Pa...
Interceptors
Switches tab to an already-opened page
Renders a view instantly
Allows deep-linking of javascript functions, ...
Let’s see the
code!
Handlebars Templates
Inner modules
Initializing attributes
Configuration
Executing Javascript
Loading data
Loading external data
Input/Output variables
Actions
Data fields
Changing object domain
Thanks!
Questions?
Leonardo Losoviz
leo@getpop.org
https://getpop.org
https://github.com/leoloso/PoP
PoP - “Platform of Platforms”: Framework for building Single-Page Application WordPress websites, decentralized crowd-sour...
PoP - “Platform of Platforms”: Framework for building Single-Page Application WordPress websites, decentralized crowd-sour...
PoP - “Platform of Platforms”: Framework for building Single-Page Application WordPress websites, decentralized crowd-sour...
PoP - “Platform of Platforms”: Framework for building Single-Page Application WordPress websites, decentralized crowd-sour...
PoP - “Platform of Platforms”: Framework for building Single-Page Application WordPress websites, decentralized crowd-sour...
PoP - “Platform of Platforms”: Framework for building Single-Page Application WordPress websites, decentralized crowd-sour...
PoP - “Platform of Platforms”: Framework for building Single-Page Application WordPress websites, decentralized crowd-sour...
PoP - “Platform of Platforms”: Framework for building Single-Page Application WordPress websites, decentralized crowd-sour...
PoP - “Platform of Platforms”: Framework for building Single-Page Application WordPress websites, decentralized crowd-sour...
PoP - “Platform of Platforms”: Framework for building Single-Page Application WordPress websites, decentralized crowd-sour...
PoP - “Platform of Platforms”: Framework for building Single-Page Application WordPress websites, decentralized crowd-sour...
PoP - “Platform of Platforms”: Framework for building Single-Page Application WordPress websites, decentralized crowd-sour...
PoP - “Platform of Platforms”: Framework for building Single-Page Application WordPress websites, decentralized crowd-sour...
PoP - “Platform of Platforms”: Framework for building Single-Page Application WordPress websites, decentralized crowd-sour...
PoP - “Platform of Platforms”: Framework for building Single-Page Application WordPress websites, decentralized crowd-sour...
PoP - “Platform of Platforms”: Framework for building Single-Page Application WordPress websites, decentralized crowd-sour...
PoP - “Platform of Platforms”: Framework for building Single-Page Application WordPress websites, decentralized crowd-sour...
PoP - “Platform of Platforms”: Framework for building Single-Page Application WordPress websites, decentralized crowd-sour...
PoP - “Platform of Platforms”: Framework for building Single-Page Application WordPress websites, decentralized crowd-sour...
PoP - “Platform of Platforms”: Framework for building Single-Page Application WordPress websites, decentralized crowd-sour...
PoP - “Platform of Platforms”: Framework for building Single-Page Application WordPress websites, decentralized crowd-sour...
PoP - “Platform of Platforms”: Framework for building Single-Page Application WordPress websites, decentralized crowd-sour...
PoP - “Platform of Platforms”: Framework for building Single-Page Application WordPress websites, decentralized crowd-sour...
PoP - “Platform of Platforms”: Framework for building Single-Page Application WordPress websites, decentralized crowd-sour...
Upcoming SlideShare
Loading in …5
×

PoP - “Platform of Platforms”: Framework for building Single-Page Application WordPress websites, decentralized crowd-sourced platforms, and social networks

2,785 views

Published on

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

For more information, visit https://getpop.org

Published in: Software
  • Be the first to comment

PoP - “Platform of Platforms”: Framework for building Single-Page Application WordPress websites, decentralized crowd-sourced platforms, and social networks

  1. 1. PoP - “Platform of Platforms” Leonardo Losoviz https://getpop.org
  2. 2. URLs PoP https://getpop.org PoP Demo https://demo.getpop.org GitHub https://github.com/leoloso/PoP
  3. 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. 4. How does it work? Front-end Back-end
  5. 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. 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. 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. 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. 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
  10. 10. Key design principles
  11. 11. #1: API PoP provides the WordPress website of its own API: Available via HTTP Simply by adding to any URL: output=json
  12. 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. 13. What can we do with PoP?
  14. 14. Social network Features taken from several social networks: Twitter/Facebook/Medium/Reddit Demo in https://demo.getpop.org
  15. 15. Decentralized social network Demo between: https://getpop.org https://demo.getpop.org
  16. 16. How can it be used?
  17. 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. 18. Characteristics
  19. 19. Single-Page Application loose: developer can select: what pages are preloaded which ones are retrieved from the server
  20. 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. 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. 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. 23. Program execution flow Model and Controller (application logic, program execution flow) in back-end Different to javascript frameworks (eg: AngularJS)
  24. 24. Comparison with WP REST API
  25. 25. Similarities Can export any piece of data: /posts /events /users /tags
  26. 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
  27. 27. Template hierarchy
  28. 28. Templates topLevel, pageSections, blocks/blockGroups modules
  29. 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)
  30. 30. topLevel = WordPress Hierarchy Home/Single/Page/Archive/etc
  31. 31. topLevel
  32. 32. pageSection Is a physical/functional section on the website
  33. 33. pageSections
  34. 34. block Is an independent component Keeps its own state Can be added to different pageSections, and customized for each
  35. 35. blocks
  36. 36. blockGroup a special type of block collects/wraps other blocks synchronizes state among them
  37. 37. blockGroups
  38. 38. Module Either An atomic/reusable functionality A composition of modules
  39. 39. modules
  40. 40. Modularity
  41. 41. Atomic/reusable module A module is composed of: PHP files .tmpl Handlebars templates .js files (jQuery)
  42. 42. Composable module Modules can build upon each other Separation of Concerns Collaboration among developers
  43. 43. JSON structure
  44. 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. 45. Database Keeps relationships among objects (not a flat, single-level structure) Cumulative Allows to not fetch already-loaded data
  46. 46. Front-end features
  47. 47. Targets Any page can be opened on any pageSection Simply specify attribute “target” in the link, pointing to the pageSection
  48. 48. Formats Data can be visualized on multiple, customizable formats Lists Grids Maps Charts Etc
  49. 49. Presentation Multiple presentation styles Minimum extra code can lead to provide different functions Print Embed
  50. 50. Tabs Many pages can be opened simultaneously Pages remain accessible until closed
  51. 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. 52. Interceptors Switches tab to an already-opened page Renders a view instantly Allows deep-linking of javascript functions, using an actual, reachable URL
  53. 53. Let’s see the code!
  54. 54. Handlebars Templates
  55. 55. Inner modules
  56. 56. Initializing attributes
  57. 57. Configuration
  58. 58. Executing Javascript
  59. 59. Loading data
  60. 60. Loading external data
  61. 61. Input/Output variables
  62. 62. Actions
  63. 63. Data fields
  64. 64. Changing object domain
  65. 65. Thanks! Questions? Leonardo Losoviz leo@getpop.org https://getpop.org https://github.com/leoloso/PoP

×