During the development of a web app, there will be times when designing interferes with development. A lot of open source frameworks and libraries are available for Javascript, CSS and PHP that helps in developing web applications that are more organized. Gradually we saw a growing trend in the use of web template systems for building CMS and large applications. In this article we will talk about what a web template system does and how it’ll helps us in making better applications, maintaining the separation of design from code.
A web template system is used to present large websites which are characterized by similarly looking pages (often bulk in amount). The web template system is a composed of:
- Template engine: The core and primary processing system. Its function is to compile the template code and contents. It can be built with the native template building support available in JAVA, C or Ruby by adding modules/libraries. PHP, JSP, ASP etc are themselves template engines.
- Content resource: Includes all the input streams like the relational databases and XML.
- Template resource: Includes the web template specified in a template language.
In the fig. shows how a web template system works to display data after processing(data is collected from database).
Some of the common templating systems are Smarty(PHP), TinyButStrong(PHP), XTemplate(Ruby).
Why we should encourage ourselves in using a template system
Its always important to separate design from coding and following web standards is one of them. But most importantly, proper frameworks and template systems will help you build scalable web applications with priority to modularization. Listed out are few examples that explains why:
Development of large websites
Often large websites like news portals will have basic layouts based on which a large number of regular pages are published. Building multiple pages with similar contents cannot be made with static pages. Combining all the common features we can build the basic template which can be used to produce multiple pages. This is why most CMS have been using a template systems. Not only it makes easier, since the structure is maintained it helps in maintaining consistency in the design and build SEO friendly websites.
Separation of concerns
First of all, if an important change is needed in main layout or main content part its always easier for the designer to update the changes. To make things easier each block is presented using a template. This helps in keeping the module separate from the main content and make changes as per the design requirements like applying details to each module of the site. Be it in the code or the design and have greater control over the component.
With the implementation of a template system, the designer does not have to wait for the feature/development to be completed. He can outline the design while the development is in progress.
Designing with web templates system is fun
As a designer its always good if you get clean and tidy content to present in the template as it maintains a consistent readability throughout the website without the use of unobstructive markup. Designing with progressive enhancement, include frequent change of minor details of each section of the module or page through CSS and a few programming tips will help us to deliver a better user experience.
Most template systems provide us with a set of built-in template tags which can help us customize the data the way we want. IF ELSE conditions, FOR statements, STRIPTAGS etc are few of the basic features that are already implemented in the template code. In addition to these they allow us to expand the functions by adding FILTERS or PLUGINS to the template system. Ex: Pagination is an example of a class that can be added in the template system like SMARTY. This displays the pagination using template tags rather than creating one from scratch. Loops help in making features like alternate styled lists and carousels easily using our own custom codes and html tags can be stripped using similar functions.
Most CMS and open source applications are developed on a web template system for easier deployment and configuration. The separation of concerns is an advantage when the web app becomes bigger.
1 Comment