frontobjectsjs v1.4.0

To write client-side code, almost like server-side languages

also

A pure JavaScript template engine for Express.js

• FrontObjectsJs is

  a structured way to organize HTML, CSS and JavaScript code using .jhtml and .jobj file formats. To start, simply write your html code in a .jhtml file in the form of blocks like this:

  Note: Before starting, you need to know HTML, CSS and JavaScript.

  html (lang="en") {
     head { }
     body {
        div { }
     }
  }  

• Then add some JavaScript to it like this:

  html (lang="en") {
     head { }
     body {
        div { #result += "Hello World!";  }
     }
  } 

  Note: '#result' is a reserved word.

• Then add the required amount of CSS:

  html (lang="en") {
     head { }
     body {
        div {
           #result += 'Hello World!'; 
           styles {
              font-size: x-large;
           } 
        }
     }
  } 

Well, now your webpage is ready. To avoid repetition and better readability, put a part of the code in a .jobj file. Just like you do in server-side languages. Suppose your .jobj file is located at the following relative path: parts/my-hello-part.jobj

Contents of Index.jhtml:

html (lang="en") {
   head { }
   body {
      #parts.myHelloPart('Hello World!'); 
   }
} 

Contents of parts/my-hello-part.jobj

prop (txt) 
div {
   #result += txt;
   styles { font-size: x-large; }
} 

• Tutorials
  • Starting Line - frontend
  • Starting Line - backend
  • Performance considerations
  • Simple home page example
  • FrontObjectsJs as Express.js template engine
• References
• folib the library
• Donate