fest

Fest is actually fast. A reuseable UI components builder for the web. Rerender components or parts of components as users interact with your app. When a component needs to be rerendered, the entire component is rebuilt with the needed state outside the DOM Tree and replaces the affecting part of the DOM Tree with the newly built component. This causes your app to be updated without excessive page reflows, which ensures a better user experience.

JS

${this.TEXT(args.content)}

`; },true); }; var docFragment = document.createDocumentFragment(), art1 = Article(1),art2 = Article(2); docFragment.appendChild(art1.getElement({title:"FIRST ARTICLE",content:"This is the first article.",author:"Kwabena Bismark"})); docFragment.appendChild(art2.getElement({title:"SECOND ARTICLE",content:"This is the second article. It has no author."})); document.body.appendChild(docFragment); setTimeout(function(){ art2.rerender({title:"SECOND ARTICLE",content:"This is the second article. It has an author now.",author:"Kwabena Bismark"}); },3000); ">

const Render = window.__RENDERFESTAPP;
const header = Render({container:"h1",style:"color:red"},function(args){
  return `${this.TEXT(args.title)} ${args.author?`by ${this.TEXT(args.author)}`:''}`;
},true);
function Article(idNum){
  const obj={
      container:"div",
      id:`article-${idNum}`,
      class:"article",
      style:{
          fontSize:"17px"
      },
      onrerender:function(){
          obj.fest.content.style={fontSize:"25px"}
      },
      fest:{
          content:{
              id:`content-${idNum}`,
              class:"contents"
          }
      }
  };
  return Render(obj,function(args){
        return `${header.render({title:args.title,author:args.author})} 
${this.TEXT(args.content)}
`;
  },true);
};

var docFragment = document.createDocumentFragment(),
art1 = Article(1),art2 = Article(2);
docFragment.appendChild(art1.getElement({title:"FIRST ARTICLE",content:"This is the first article.",author:"Kwabena Bismark"}));
docFragment.appendChild(art2.getElement({title:"SECOND ARTICLE",content:"This is the second article. It has no author."}));
document.body.appendChild(docFragment);

setTimeout(function(){
   art2.rerender({title:"SECOND ARTICLE",content:"This is the second article. It has an author now.",author:"Kwabena Bismark"});
},3000);

JSX

The JSX form of FEST is to allow mingling of both Javascript and HTML. The FEST JSX compiler will convert your JSX code into Javascript for browsers to render your app. The FEST JSX compiler is in testing stage.

This code is the JSX format of the Javascript code above.

${this.TEXT(args.title)} ${args.author?`by ${this.TEXT(args.author)}`:''}; },true); function Article(idNum){ const obj={ container:"div", id:`article-${idNum}`, class:"article", style:{ fontSize:"17px" }, onrerender:function(){ obj.fest.content.style={fontSize:"25px"} }, fest:{ content:{ id:`content-${idNum}`, class:"contents" } } }; return Render(obj,function(args){ return ( ${header.render({title:args.title,author:args.author})}

${this.TEXT(args.content)}

); },true); }; var docFragment = document.createDocumentFragment(), art1 = Article(1),art2 = Article(2); docFragment.appendChild(art1.getElement({title:"FIRST ARTICLE",content:"This is the first article.",author:"Kwabena Bismark"})); docFragment.appendChild(art2.getElement({title:"SECOND ARTICLE",content:"This is the second article. It has no author."})); document.body.appendChild(docFragment); setTimeout(function(){ art2.rerender({title:"SECOND ARTICLE",content:"This is the second article. It has an author now.",author:"Kwabena Bismark"}); },3000); ">

const header = Render({container:"h1",style:"color:red"},function(args){
  return <fest>${this.TEXT(args.title)} ${args.author?`by ${this.TEXT(args.author)}`:''}</fest>;
},true);
function Article(idNum){
  const obj={
      container:"div",
      id:`article-${idNum}`,
      class:"article",
      style:{
          fontSize:"17px"
      },
      onrerender:function(){
          obj.fest.content.style={fontSize:"25px"}
      },
      fest:{
          content:{
              id:`content-${idNum}`,
              class:"contents"
          }
      }
  };
  return Render(obj,function(args){
        return (
              <fest>
                  ${header.render({title:args.title,author:args.author})} 
                  <p class="fest" fest="content">${this.TEXT(args.content)}</p>
              </fest>
        );
  },true);
};

var docFragment = document.createDocumentFragment(),
art1 = Article(1),art2 = Article(2);
docFragment.appendChild(art1.getElement({title:"FIRST ARTICLE",content:"This is the first article.",author:"Kwabena Bismark"}));
docFragment.appendChild(art2.getElement({title:"SECOND ARTICLE",content:"This is the second article. It has no author."}));
document.body.appendChild(docFragment);

setTimeout(function(){
   art2.rerender({title:"SECOND ARTICLE",content:"This is the second article. It has an author now.",author:"Kwabena Bismark"});
},3000);