AsyncTemplateToRender

AsyncTemplateToRender is a JavaScript library for building user interfaces which top down asynchronously.

• Asynchronous: AsyncTemplateToRender creates a unique way to create interactive UI's by taking control of the DOM. Design component systems for your Web Frontend and have complete control over data. Each element is rendered individually and asynchronously.
• Object-Based: Using the latest JavaScript (ES6/ES7) to scheme your UI, AsyncTemplateToRender's classes will map to elements providing minimal garbage when rendering/updating keeping data off the DOM.
• You already know how to manipulate the DOM: If you're familar with JavasScript, ES6, Objects and the DOM, AsyncTemplateToRender is for you.

Learn AsyncTemplateToRender today.

Installation

AsyncTemplateToRender is designed to be used as a rendering engine for UI components.

Simply install the library and start creating UI!

• Add AsyncTemplateToRender to a Website as a <script> tag in one minute.
• Import AsyncTemplateToRender module if you're looking to incorporate in a more powerful toolchain.

You can use AsyncTemplateToRender as a <script> tag locally, or as a AsyncTemplateToRender package on npm.

Usage & BuiltIn Legacy Support

AsyncTemplateToRender optimizes bundles and will export both an ES6 and ES5 bundle: ATRender, and ATRender_legacy respectively.

<!-- Browsers know *not* to load this file -->
<script async type="module" src="ATRender.js"></script>

<!-- Older browsers load this file -->
<script nomodule src="ATRender_legacy.js"></script>

<!-- executed after HTML is parsed -->
<script type="module">
  console.log('js module');
</script>

<!-- executed immediately -->
<script>
  console.log('standard module');
</script>

ES6 bundle provides an optimized webpack output which will support modern browsers with features like classes and async/await.

Example

import ATRender from 'ATRender';

//predefine "view" style component

class Login extends ATRenderer.view {

 constructor(){

  return {
   type:`section`,
   renderTo:`main`,
   id:`login_form`,
   innerHTML:`
    <a>
    <h2>Hello World/h2>
    </a>
   `
  };

 }

}

//predefine "input" component to render after Login

class LoginInput extends ATRenderer.view {

 constructor(){

  return {
   type:`input`,
   renderTo:`login_form`,
   className:`form-control`,
   id:`userinput_0`
  };

 }

}

//render components as you create them

new Login();
new LoginInput();

//render elements with objects

new ATRender.pipe([
	{
		type:`a`,
		id:``,
		innerHTML:`HelloWorld`
	}
]);

AsyncTemplateToRender will defer LoginInput to a second pass of rendering because it's target doesn't exist during the first pass. AsyncTemplateToRender supports recursive rendering, be aware that this can be slow and dangerous.

Documentation

N/A

License

AsyncTemplateToRender is MIT licensed.