is an architectural design used in WorkerJs; WDML is use for rendering website’s User Interface naturally;

1. WDML
By Jomar Bagaporo
Building dynamic user interface

2. WDML
Is a rendering method include in WorkerJs as one of its main
component, allow developer to make a dynamic website in natural
way, instead of putting html string in JavaScript code which is very
hustle to manage

3. Advantage
• Flexible variable
• Predictable component
• Can be store and reuse as variable
• Centralized variable as a component

4. WDML
Initiate
Its checking all html tag on the document that has a
param-name or var-name attribute and hide unnecessary view

5. WDML
Stored
Store all necessary data or html Dom after the initialization done

6. WDML
Distribution
Assign variable on the Dom and Render html Dom to view

7. WDML and JSON
View
Json data
ServerWdml
Direct distribution of data from server to client using
JavaScript Object Notation(JSON)

8. Wdml.createVar(
{
text:”Hellow world”
}
,”View”);
Syntax
<p var-name=”View”>{text}</p>
<p var-name=”View”>Hellow world</p>
Output:
Hellow world
Rendered:

9. _do(“.view”).html(“<img src=‘pic.jpg’>”+
”<p>hi this is my pic!</p>”);
Traditional way
<div class=”View”></div>
WorkerJs:
Html:

10. WorkerJs:
Wdml.createVar(
{
text:” hi this is my pic!”,
photo:” pic.jpg”
}
,”View”);
WDML way
Html:
<div>
<img var-name=”View” src=“{photo}”>
<p var-name=”View”>{text}</p>
</div>

11. Workflow
Initiate
Stored
Distribution
View