HTML Assembler Objective

Finding Common Abstraction for Defining UI

UI components can be classified in 5 different types

Structure Abstraction for composing Static Components into Static UI

Static UI components can be composed in 3 different ways

Direct Composition

Components can be composed by directly specifing the sub component name in a mustache tag


Url - / or /Index/Main - [AppSite]/[AppView]
UI Namespace is AppSite
UI Context is Main AppView

Index.html
<div> 
    {{MainHeader}}    
</div>     
<div> 
    {{MainContent}}
</div>     
<div> 
    {{MainFooter}}
</div>

Context Composition

Components can be composed by appview context by specifing the prefix in the sub component name in a mustache tag


Url : /Index/About - [AppSite]/[AppView]
UI Namespace is AppSite
UI Context is About AppView

Index.html
<div> 
     {{MainHeader}}  =>{{MainHeader}}
</div>     
<div> 
     {{MainContent}} =>{{AboutContent}} 
        -- If Available else {{MainContent}}
</div>     
<div> 
     {{MainFooter}}  =>{{MainFooter}}
</div>

Inner Composition

Components can be composed by specifing the sub component name in a placeholder tag under the component mustache tag


Center.html
<div> 
    !{$HTMLPLACEHOLDER}}
</div>     

Index.html
<div> 
    {{#Center}}             => {{Center}}
        {{@HTMLPLACEHOLDER}}
            {{MainContent}}  => {{MainContent}}
        {{/HTMLPLACEHOLDER}}
    {{/Center}}      
</div>

Data Abstraction for composing Static Data Components into Static Data UI

Static Data UI components can be composed in 2 different ways based on the type of Json Data

Placeholder Data Composition

Components can be merged with Json Data by directly specifing the json key as placeholder in a mustache tag


Title.html
<div> 
     {{$Title}}
</div>     

Title.json
    {
        "Title" : "Name"
    }

Section Array Composition

Components can be merged with Json Array Data by directly specifing the json array key as section in a mustache tag


List.html
 <div> 
    {{@List}}
        {{$TaskName}}
    {{/List}}
</div>     

List.json
    {
        "List" : [
            {
                "TaskName" : "Task 1"
            }
        ]
    }

Data Flow Composition

Json Data is composed with Html Component based on the below precedence


Component State
        Parent Components State                
                Context State
                    Global State

Data Defined at the Any Data Level can be Overwriten by the Previous Precedence Data if allowed by $ Suffix to the Json Key


Title.json
    {
        "Title$" : "Name" ==> Allow Override
    }