Tech Tip: Use the 4D HTML Tag 4DINCLUDE to Refactor HTML files

PRODUCT: 4D | VERSION: 13.3 | PLATFORM: Mac & Win

Published On: June 27, 2013

Code refactoring is a "disciplined technique for restructuring an existing body of code, altering its internal structure without changing its external behavior," undertaken to improve some of the nonfunctional attributes of the software. Advantages include improved code readability and reduced complexity to improve the maintainability of the source code.

Refactoring is most commonly associated with programming languages such as C, C++, and C#. However, HTML files are "source code" to web sites and by taking advantage of the 4D HTML Tag 4DINCLUDE refactoring can be applied to HTML files as well.

A typical web site will contain multiple HTML files with a specific point of focus but built with the same "boilerplate" code on each page. This boilerplate will typically contain the same HTML markup except for the subject matter of the page.

For example the HTML will contain the same links to CSS and JavaScript files such as the example below:

<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="PRAGMA" content="NO-CACHE" />
<meta http-equiv="EXPIRES" content="-1" />

<meta name="description" content="">
<meta name="viewport" content="width=device-width">

<link rel="shortcut icon" href="/images/favicon.gif" />

<style>
    @import url(css/normalize.css);
    @import url(css/base.css);
    @import url(css/validationEngine.jquery.css);
    @import url(css/common.css);
</style>

<script src="JS/Modernizer-2.6.2.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="JS/jquery-2.0.2.min.js"><\/script>')</script>
<script src="JS/jquery.validationEngine-en.js"></script>
<script src="JS/jquery.validationEngine.js"></script>
<script src="JS/common.js"></script>

The problem arises when a change needs to be made because the reference to one or more of the linked files has changed. The typical solution is to go to each HTML file an make the reference change. This task can be greatly reduced and made almost mistake proof by using a refactoring technique that includes the use of the 4D HTML Tag 4DINCLUDE.

By placing all of this code in external files and then using code like that below in each file, when it come time to make a change to a linked file it only has to be done once in the external file.

This is only one example of refactoring HTML code using the 4D HTML tag 4DINCLUDE. Any block of commonly recurring code could be treated the same way.