DEV Community

Cover image for Creating A JavaScript Framework (1)
Jaden Concord
Jaden Concord

Posted on

Creating A JavaScript Framework (1)

I have been working on a JavaScript templating framework for my projects. The purpose of it is to make it easier (much easier) to work with the DOM and generating HTML, and to make it easier to make and read forms elements. Here is a demo of code:

<aside>
  <template>
    {each items}
      <section>{item}</section>
    {/each}
  </template>
</aside>
Enter fullscreen mode Exit fullscreen mode
var items = ['home', 'dashboard', 'addons'];
let sidebar = new Template('aside');
Enter fullscreen mode Exit fullscreen mode

result:

<aside>
  <section>home</section>
  <section>dashboard</section>
  <section>addons</section>
</aside>
Enter fullscreen mode Exit fullscreen mode

Here is the current architecture of the project (bottom to top):
Alt Text

Here is another code example:

<main><template>
  <h1>Hello {name || 'unknown'}</h1>
  {inputText name="fullname" placeholder="John Doe" label="Full Name"/}
  {inputColor name="color" label="Favorate Color" value="#ffffff"/}
  {inputSelect name="option" label="Pick one" options="!disabled:Pick an option,a:Pick A,b: Pick letter B"/}
  <button onclick="submit()">Submit</button>
</template></main>
Enter fullscreen mode Exit fullscreen mode
let form = new Template('main');

function submit() {
  console.log(form.getData());
}
Enter fullscreen mode Exit fullscreen mode

output:

Alt Text

{ 
  fullname: "John Smith",
  Joe: "#cb6d5c",
  option: "b" 
}
Enter fullscreen mode Exit fullscreen mode

There are also if, repeat and debug blocks included, as well as 8 other form blocks. There is also a link function on the Template class that updates the template when changing a value, for example,

let updateForm = form.link('name', 'color', 'options');
updateForm('Joe', '#3F32AB', '1:one,2:two,!3:three')
Enter fullscreen mode Exit fullscreen mode

Here are the next features I am going to add:

  • Automatic ending of blocks without a slash at the end
  • More logical blocks
  • Popups
  • Form validation

Top comments (0)