A mathematical proof revealing the advantages for a template based Web development

Let us assume that we are creating a site that has a consistent look over its pages. The page layouts across pages may come in different flavours for each site, however in order to pick a sample design for our test, I choose the consistent look since many sites are already applicable under this category. Let's begin our analysis.

Basis: n represents the amount of time it takes to maintain a given web site file, where the change is dependent on the consistent section(s) over the pages. Therefore, let us assume that opening a single file takes n amount of time to complete the work.

One scenario is a site with individual files per page, and the other is a site using a template driven engine.

Method i. (Static files)

In this method, a given file contains the full scope of a page.

A single page site:
It takes n amount of time to complete the changes.
Additional pages:
In order to maintain consistency across pages, a single change must be applied to all pages. Therefore, if we let x be the number of pages which require the changes, we get n * x amount of time to complete the task. As we can see as the number of pages increase, the amount of work involved increases linearly.

Method ii. (Template driven)

Template engine idea I believe requires a brief explanation - for the sake of the argument lets allow this template driven site to include two separate files to hold the layout. We can think of it as; the first file takes care of the top portion of the site; page header, a menu, etc., and the second file to handle the bottom portion of the site; possibly a sidebar, a footer. The middle section of the site is reserved for the content which varies across pages. Therefore, when we put this together, a given page contains three sections (files).

A single page site:
Case 1: a single change on either top or the bottom portion of the site. Therefore, a change is made only on a single file. This, similarly like method i. gives us n time.
Case 2: changes on both top and bottom files, results in n * 2 amount time to complete the work. This case is a tough call with respect to amount of work involved because given our Basis, we have to take n amount of time for any file we work on. Basically, in comparison to method i's single page, even though the amount of changes equal, the time spent greatly varies because of file usage.
Additional pages:
Case 1: again, a single change on either of the files results in n amount of time. We have x number of pages to work with, therefore our workload is greatly reduced, since we only need to modify a single file which is applied to every page on the site. Hence our workload is n because there is only one file.
Case 2: since there is the possibility of making changes on both files, we automatically start with 2, and the amount of work comes to n * 2.

And so we have:

Method used1 page, 1 change1 page, 2 changes> 1 page, 1 change> 1 page, 2 changes
Method i (Static)nnn * xn * x
Method ii (Template)nn * 2nn * 2

n: time required to modify a file

x: number of files.

As we compare the methods, and the pages involved, we can easily note that both methods are equal in time, when there is a single page and a modification on a section of the layout. Concerning the single page site, with changes on two locations of the layout, causes a little bit of an overhead when dealing with the template driven site. This is due to our Basis, where doing a modification on each file causes us n amount of time. In the grand scheme of things, for a single page site having to do changes on two files should not be a major concern. However, please keep in mind that this analysis only considers the time complexity, and I have deliberately left out space and memory complexities. Hence, based on time complexity, the template engine takes longer then static based site layout for this specific case.

Now, as we get into additional pages for our site, wonderful things starts to happen. Well, not that magical, just saves us a lot of work; allow me to explain the results. For multi-page sites, modifications become much easier when using a template driven engine. Concerning a single change on the layout for several pages becomes a hassle for static based file layouts. This is due to the problem of having to copy the changes to every page on the site in order to maintain consistency. On the other hand, with page templates, a single change on a file can be reused over as many pages as we need to, since the layout framework is inherited by all pages. Even if the required changes are on two files, that makes it only two files that requires changing for the remainder of the site, wheres with static layout, it is similar to the previous situation.

No wonder template driven site layouts are widely used today. However, there are just as many sites out there which require attention with regards to this. Cutting down on workload not only reduces the resources required (time, money), but it also reduces the possibility of errors.



1 interaction

domer replied on

i think another step up from template design would be a modular design, relying heavily on includes and database driven content. Some may call this a "CMS" driven site, but i think modular design and coding has a LOT of benefits, especially for maintainence/update/change reasons