Working with Micro-Templates

There are many things that you can do in your JavaScript application that could significantly improve interactivity. Some of these techniques don’t even require too much tweaking from the main functions of the application. Developers can create some small functions that could be injected in the application and their application will significantly improve in performance.

One of those small tweaks developers could add in their application is to create a micro-template. This technique was developed by John Resig – known for his highly developed library called jQuery. Micro-templates are just one of the many secrets that he willingly shares to improve users experience without too much work in the end of developers.

Small and Remarkable

A micro-template is basically a small command that allow developers to push the functions faster. It’s not an application changing feature but it will improve user experience if they are properly executed.

This technique is made possible because of three factors:

• The caching feature – micro templates will require caching before it will be loaded. This feature allows developers to load micro-template once and the rest will be on cache. This is particularly important for reusable functions.

• Reusability – as already indicated, the reusability feature of the application will allow the developers use the function without needing anything from the coding. The browser’s cache will simply load the function.

• Additional variables – because micro-templates will be regarded as additional function in the application, more variables will be loaded in the application.

Conversion to JavaScript

There are three stages the developer has to go through to properly create a micro-template.

The first stage is when the developer has to load the function or call on a micro-template that already exists in the application. This command is cached so that the browser will take over in loading the function.

The second stage is to generate the cached function this is where additional variables are introduced in the application.

The third stage is actually the most important – porting the created function into JavaScript. The generated function is useful but they might do more damage than good because it will require the browser to cache the function every time they are used.

When the function is ported as JavaScript, the function will be loaded in the client side which makes it very accessible. The client side version will never require the browser to cache the information every time it is used.

Secret Feature

Micro-template has a small secret but equally useful. The templates created by the developers can’t actually be sniffed by browsers and web crawlers. This will give your application an advantage of being “secretive” with some of its functions.

The template will just be ignored by browsers which mean you are free to do anything with the function without interrupting the application. It’s actually a very tricky function that you can add in your application.

Micro-template is a very small but very useful function developers can add in their application. When used wisely, especially when ported to JavaScript, the template will work without additional resources from the application or browsers.