2018-3 - WET 5 kick off

Documentations material presented at the WET 5 framework development kick off meeting on May 10, 2018.

The information on this page might be already superseeded and might not represent the actual status of the WET 5 framework development.

Kickoff meeting event description

The new WET 5 would need to :

The meeting goal is:

You want to participate

Let us knowby contacting Pierre Dubois. You can find his contact info on GCCollab or on GCConnex or by opening a github issue

Template sample

<template id="combobox_simple_template">

	<div class="combobox-wrapper">
		<div role="combobox" aria-expanded="false" aria-haspopup="listbox" data-wb5-bind="aria-owns@popupId">
			<input autocomplete="off" data-rule-fromListbox="true" data-wb5-bind="id@fieldId, aria-controls@popupId, name@fieldName, value@selectValue" aria-autocomplete="list" aria-activedescendant="" required />
		</div>
		<div data-wb5-bind="id@popupId" role="listbox" class="hidden">
			<template data-slot-elm="" data-wb5-template="sub-template-listbox">
				<ul class="list-unstyled">
					<li 
						class="brdr-bttm" 
						role="option" 
						data-wb5-for="option in options" 
						data-wb5-if="!parent.filter.length || option.value.indexOf(parent.filter) !== -1"
						data-wb5-on="select@select(option.value); live@parent.nbdispItem(wb-nbNode)" ></li>
				</ul>
			</template>
		</div>
	</div>
</template>

Graphic

Note: The text-alternative version will be provided later on.

Plugin pieces and how they are extended/overwrited in themes

Plugin pieces and how they are extended/overwrited in themes

Long description

There is two group:

There is four component in WET 5. The description also describe the relationship with GCWeb theme.

UI basic template
It can be overwrite for GCWeb and became a template using bootstrap markup
Style (Pure)
It can be overwrite for GCWeb and became bootstrap
Configuration
It can be extend and became a GCWeb configuration
Logic (javascript)
It can be extended, but it will be mostly be re-used as is.

Flow of WET 5 internal

Flow of WET 5 internal

Long description

The following are two entry that merge into the Contextualized information (JSON)

The "Contextualized information (JSON)" are merged in the "Logic (JSON)" along with the "Configuration (JSON)"

The "Logic (JSON)" would render the UI with a reactiveness the following sample template

The UI generated by those template would be able to trigger events that would dealt with the "Logic (JSON)"

WET feature blueprint

WET feature blueprint

Long description

Note: Using RDF vocabulary is going to be considered to document the WET feature blueprint

WET 5 live cycle flow

WET 5 live cycle flow

Long description
  1. Server backend
  2. Browser receive RAW HTML
  3. Browser HTML Parsing
  4. DOM Walk by WET
  5. WET initialize JSON UI representation
  6. WET initiate plugins
  7. Templating engine (Binding or generate a new UI)
  8. UI Ready and functional
  9. The user triggers an Event
  10. A method in the plugin is called
  11. The method modify a properties in the JSON plugin
  12. The reactiveness updates the current UI with the latest information
  13. Go back at item 8 - The UI ready and functional

External event (Ex. from an API call) would go back at item 10 (A method in the plugin is called) in the previous list

Item 1 to 3 are browser manipulation

Item 4 to 6 are WET initialization work

Item 7 and all the rest is the live cycle of plugin

Summary of the meeting

Drafting in progress