WET 5 - Exploration 1

The current exploratory direction for WET 5 is that of a data-first design. This design philosophy focuses on the key data of a page first, and the presentation of that data second. With data defined first, different HTML/CSS structures and themes may be applied for different platforms.

There are currently two parts to the WET 5 research : a headless framework, and component interation driven from markup (coined LDD).

Link to latest prototype (as 2018-07-27)

Resources

Headless Framework

The goal of the ‘headless’ webpage is to have the minimum amout of HTML and instead use a JSON API to build the page. This includes loading in the theme and plugins using JSON. In any of the following prototype, view the page source to better understand this concept.

Headless Prototype 1

Published on: 2018-07-05

All the content information is provided via a JSON API call, which is a static file for now.

Headless Prototype 2

Published on: 2018-07-13

This demo can switch between two pages without refreshing the browser, using only an AJAX call.

Headless Prototype 2.1

Published on: 2018-07-13

A slight improvement over version 2, with cleaner scripts for better readability.

Component interaction driven from markup

In WET 5, a goal is to move away from using the component classes, instead attaching logic directly to the page markup. Thus, we move from a Component Development Design model to a Logic Development Design model (LDD).

A web author may use whatever markup is needed, and then enhance that markup with reuseable, modular bits of Javascript logic.

For instance, the markup for a carousel may be a simple series of images. Attached to this would be a ‘timer’ module, ‘next’, ‘previous’ and ‘play/pause’ button modules, and a ‘hide/show’ module. These individual modules would interact to modify the markup and create the carousel.

The purpose of this is to increase flexibility, possibility of designs, and ease maintenance.

Component prototype 1

Published on: 2018-07-05

Copy and paste the following in your web server. This code implements a timer module that periodically adds to the text.

JS - wb5.js

/**
* Wet  Next
*/
(function( dom , win ){
 
                var Inventory = {
                        timer : function( node, selectors, options ) { node.innerHTML = node.innerHTML + " ( OK TIMER )"; }
                }
       
                var wb5 = dom.querySelectorAll('[data-wb5]');
 
                for (var i = wb5.length - 1; i >= 0; i--) {
                        var elm = wb5[i],
                                params = elm.getAttribute('data-wb5').split('@');
 
                        Inventory[ params.shift() ]( elm, params );
                }
 
})( document, window)

HTML - index.html

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Welcome</title>
        <link rel="stylesheet" href="">
</head>
<body>
        <h1> Welcome </h1>
        <p data-wb5="timer@selector@options" >  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.        </p>
        <script src="js/wb5.js" type="text/javascript" charset="utf-8" async defer></script>
</body>
</html>

Component prototype 2

Published on: 2018-07-05

In this demo, there is limited functionality. The Navigation Menu and Photo Gallery are partially functional.

Development notes:

Component prototype 3

Published on: 2018-07-13

Photo Gallery functionality has been extended, but is still limited. This example introduces RequireJS.

Component Prototype 4 High level docs incomplete

Published on: 2018-07-23

Using different code from the previous prototypes, this demo implements a carousel through several small modules loaded in with RequireJS.

About this demo:

File description

Component Prototype 5

Published on: 2018-08-10

Using the same modules as the carousel in V4, along with a single new module, this prototype implements a countdown/stopwatch.

Combined Prototypes

The following prototypes seek to combine the work on the Headless Framework and Markup-Based Interaction.

Combined Prototype 1

Published on: 2018-07-27

This version combines Headless V2.1 and Component V4. The carousel is loaded in with AJAX, then made functional by the RequireJS modules. A readme file is included, containing basic explanations of each file.

Miscellaneous

Templating/Rendering

A templating engine is required to marry the data and the structure. Currently, two templating systems are being used: Mustache, and the templating engine created for the combobox. In the future, an upgraded version of the combobox engine may suffice.

Data store

Create a central data store for the headless broswing information and for the component information.

Page data as JSON

In the current headless prototype, json2html is being used to transmit data and build pages from JSON. However, this has a few drawbacks: