Modularity

Functionalities are provided using “modules” (also called “templates”), which are registered in objects called “processors”. A module is either an atomic/reusable functionality, or itself a composition of other modules. A module must define, among other things:

  • what other modules it utilizes
  • its configuration (classes and styles, text strings, link urls, etc)
  • what data fields to retrieve from the queried object (eg: fetch fields ‘title’, ‘content’ and ‘url’ for the queried post)
  • what javascript functions to execute on the module’s elements after appending to the DOM
class GD_Template_ProcessorBase {

	function get_modules($template_id) {
		// ...
	}

	function get_template_configuration($template_id, $atts) {	
		// ...
	}		

	function get_data_fields($template_id, $atts) {
		// ...
	}

	function get_block_jsmethods($template_id, $atts) {
		// ...		
	}

	// ...
}

(Source) A module is defined in a processor, which is an object inheriting from abstract class GD_Template_ProcessorBase.

define ('GD_TEMPLATE_BLOCK_AUTHORALLCONTENT_SCROLL_DETAILS', 'block-authorallcontent-scroll-details');
define ('GD_TEMPLATE_BLOCK_AUTHORALLCONTENT_SCROLL_THUMBNAIL', 'block-authorallcontent-scroll-thumbnail');
class GD_Template_Processor_SectionBlocks extends GD_Template_Processor_SectionBlocksBase {
	
	function get_templates_to_process() {

		return array(
			GD_TEMPLATE_BLOCK_AUTHORALLCONTENT_SCROLL_DETAILS,
			GD_TEMPLATE_BLOCK_AUTHORALLCONTENT_SCROLL_THUMBNAIL,
		);
	}

	// ...
}
new GD_Template_Processor_SectionBlocks();

(Source) Registering modules in a processor.

The PoP engine queries all processors to retrieve all modules’ information, and proceeds to:

  • add their configuration and javascript methods to the response’s JSON code
  • fetch from the database only the required fields for each queried object, and add the retrieved object data to the response’s JSON code

The produced JSON code is consequently sent to the client, where it is used as input to Handlebars .tmpl javascript templates, producing the resulting HTML code, and appending it to the DOM.

Finally, if javascript methods were defined, these are executed on the newly-created elements immediately after appended to the DOM.

{{#with itemObject}}
	<div {{#generateId context=../.}}{{../id}}{{/generateId}} class="{{../class}}" {{#each ../params}} {{@key}}="{{this}}"{{/each}}>
		{{{content}}}
	</div>
{{/with}}

(Source) A Handlebars javascript template, printing property “content” for the queried object

In summary, each module is composed of:

  • A PHP object (called ‘processor’) defining the module’s information
  • A Handlebars .tmpl template, with the view of the module
  • (Optional) a .js file, with the javascript functions to execute on the module’s elements
  • (Optional) a .css file, with all the styles for the element (this .css is generally implemented at the component level, not at the module level)

Welcome to the PoP framework!
Break the information monopoly

the PoP framework is open source software which aims to decentralize the content flow and break the information monopoly from large internet corporations. Read more.


Sign up to our newsletter: