It is an open source "Javascript Template Engine Library" based upon fast HTML rendering and providing small hack for making HTML web pages faster as same as Handlebars, Angular, React, vue js, etc.. The basic idea here is that you can use your favorit javascript syntax inside <%%> block and use along with html template to render a DOM component,

• Example: <h4>My favorit language is <%this.language = "JavaScript"%></h4> // output:

  My favorit language is JavaScript

• Example: <h4>Am I beautiful? <%if(true) { %> yes <% } else { %> No <% } %>!</h4> // output:

  Am I beautiful? yes!

This is the first Hello Word! example with using ohmRender.js.

• Root: is pointing to body element in the DOM
• data: is a JSON object
• template: contains HTML string along with omify syntax which are based upon pure javascript
• <%this.name%>: this denotes to the root of JSON object means data
• component = omify(template, callback): returns a component function where template stands for html string, callback function executes when omify does it's work
• component(data): returns parsed HTML string with data binding by providing data object

Once component is composed from omify() function then it will become live for whole life span of an application. It can render multiple times, even with the different data sets. So basic idea behind this is that we don't need to re-run omify() function multiple times to build the same component again & again. This mechanism helps in building resuablity and portability of a component.

This example showcase the usecase of rendering single component with multiple data sets.

• Root: is pointing to body element in the DOM
• var data1 = : JSON data set 1
• var data2 = : JSON data set 2
• component(data): component can be reuse with different data sets like data1, data2, data3, etc.

It supports not only normal data binding but also conditional binding and loop binding. Which means you can write if-else statements to execute any conditional statement to bind data or render the component. It is also possible to run a for/while loop to render the same component again. This can open up more flexibility in templates for working with complex data and component management. Make sure, while writing a html template for omify, write javascript based statments like if, else, for, while, etc. inside <%%> block and keep the rest of the statements like HTML tags, text, buttons etc. outside. <%%> block.

This example showcase the usecase of multiple data binding along with if-else and for loop blocks.

• omify syntax contains basic javascript syntax like this, if, else, for, while, switch, break etc.
• ` `: string literals is also allowed to define templates in javascript
• component(data): component can be reuse with different data set
• style: injecting custom style into DOM for supporting template css

Yes, you heard right! OhmRender supports child components and nesting of child component. Here we are breaking the above template content into multiple smaller templates, which also transform to multiple components with omify(). This feature enables the way to create complex frontend projects with child parent relationship architecture. This not only saves developer time but also increases the modularity and reusability of components.

This example showcase the usecase of making of multiple small templates and nesting of child components.

• components = {}: used as a container for holding all omifyied components.
• templates = {}: split large HTML template into smaller templates. If placed a child component in a template, so specify the component with functional parantheses i.e. comp1(), comp2().
• render: custom function to render the components with the given json data
• app(data): render app as a root component with the given json data
• templates.app: contains the root template which contains other child components like style and profile
• templates.style: include CSS enclosed with style tags, apply CSS dynamically to DOM via ohmify
• Nesting: a template contains other child components and the chain continues

We offer flexibility in designing your templates. While we often use JavaScript string literals for template creation, we can also design multiple templates directly in an HTML file. These templates can be embedded within any block tag element (like div, script or custom tags). Each block element is given a unique ID and is hidden from the actual DOM using the display: none CSS property, ensuring seamless integration and easy template management.

This example showcase the usecase of creating templates directly inside a HTML file with HTML formattings.

• components = {}: used as a container for holding all omifyied components.
• render: custom function to render the components with the given json data
• app(data): render app as a root component with the given json data
• templates = {}: divide big html template into small small templates.
• templates.app: contains the root template which contains other child components like style and profile
• Nesting: one template contains other child component and this chain go on and create nesting of components

This technique involves loading template snippets directly from an HTML file, rather than fetching them from a script tag or embedding them within JavaScript. This approach makes your code more modular, scalable, approachable, and clean. It’s the ideal pattern for developing modular applications with ohmRender.js, especially for medium to large projects. By following this method, you ensure your code remains organized and easy to maintain. preview

This example showcase the usecase of fething templates directly from multiple HTML files.

• render: custom function to paint the parent component into the DOM
• templates = {}: container of all templates where fetching them directly from a file.
• getTemplate(fileUrl): async function to asynchronously load a template from a HTML file
• $w.component = component: Exposing all components into global scope via window object so the it can be accessed their respective parents during component execution.
• parentComponent(data): this will return complete raw HTML with data bindings including parents and their children. parentComponent component contains the parent template which further contains both child components.