WDML is a rendering method included in WorkerJS that enables developers to create dynamic websites more easily by managing variables and components without cumbersome HTML strings. It initializes by checking HTML tags with specific attributes, storing necessary data, and distributing it for view rendering using JSON. The document details how to use the syntax for variable creation and rendering within the HTML structure.

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