HTML Server Components

September 10, 2015

HTML was created a long time ago. We started building documents that contained only text, images and links. We enhanced them with CSS and JavaScript. We built image galleries with fancy animations, drop downs and many other UI elements. We started using Ajax. Now we use tools like jQuery, React, AngularJS in the browser. On the server, we've got frameworks, compilers, preprocessors. All these tools help us prepare the HTML, CSS and JavaScript code that browsers render to our visitors.

When we learn a new language, we start with a simple "Hello world". This is how it looks in HTML.

<html>
    <head>
        <title>Hi</title>
    </head>
    <body>
        Hello world
    </body>
</html>

But the real websites look like this

<html>
    <head>
        <title>Hi</title>
        <script src="/assets/jquery.js" />
        <script src="/assets/lightbox.js" />
        <link href="/assets/lightbox.css" />
        <style> ... </style>
    </head>
    <body>
        <h1>Breaking news!</h1>
        <!-- Image gallery -->
        <div>
            <img ... >
            <img ... >
        </div>
        <!-- Social buttons -->
        <script> ... </script>
        <!-- Comment box -->
        <script> ... </script>
        <!-- Analytics -->
        <script> ... </script>
    </body>
</html>

As you can see:

there are a lot of JS and CSS files included
there is a lot of inlined JS and CSS code
there is a lot of HTML code for different UI elements

The final code is messy, so we need tools to help us do our job.

Something new

Today I would like to present you a new concept for building HTML documents that are full of different components (fancy galleries, social share buttons, 3rd party comment boxes and so on). It looks a lot like React, WebComponents and Template engines, but it's also a little different.

Let's start with the following HTML code:

<html>
    <head>
        <title>Hi</title>
    </head>
    <body>
        Hello world
    </body>
</html>

When we add an image gallery with carousel effect we got the following code:

<html>
    <head>
        <title>Hi</title>
        <script src="/assets/carousel.js" />
        <link href="/assets/carousel.css" />
    </head>
    <body>
        Hello world
        <div>
            <img ... >
            <img ... >
        </div>
        <script> initializeCarousel(); </script>
    </body>
</html>

As you can see we as developers must do the following three things:

1. Include the JavaScript and CSS files of the library we've selected in the document head tag.

2. Write the HTML code in the body tag.

3. Call a JavaScript function to make the carousel work.

Often we write the different parts in different files, especially when we use frameworks and template engines. And this is where the things get really messy:

we include libraries more than once
we include things we don't use on every page
CSS and JavaScript conflicts occur

A simple concept

The concept is ... components, just like React and WebComponents, but on the server.

A component is just an HTML document (with <html> and <body> tags). We create one for each part of the HTML page (header, footer, carousel, product list, social plugin). Then we merge them into the final HTML result.

In this example, we've created two component files:

<!-- main.html -->
<html>
    <head>
        <title>Hi</title>
    </head>
    <body>
        <component src="file:body.html" />
    </body>
</html>

<!-- body.html -->
<html>
    <head>
        <style>
            h1{ font-size: 50px; }
        </style>
    </head>
    <body>
        <h1>Hello world</h1>
    </body>
</html>

When we process them, we get

<html>
    <head>
        <title>Hi</title>
        <style>
            h1{ font-size: 50px; }
        </style>
    </head>
    <body>
        <h1>Hello world</h1>
    </body>
</html>

Here is what happened

1. The <component src="file:body.html" /> tag is replaced with the content of the body tag from body.html

2. The style tag from body.html is moved to the head of the result document.

Simple, yet very powerful for real-world websites.

And of course, components can communicate using attributes.

<component src="file:facebook-share-button.php" url="http://...">
<component src="file:navigation.php" selected="contact-us">

And they can be nested too.

The benefits

All the code needed for one component to work is in the component's file. It's easy to develop, test and debug.
If the component is not used on the current page it's dependencies are not loaded (jQuery for example)
Components can be easily shared
Components can be easily reused and extended

It's easier, faster and simpler to develop websites using HTML Server Components. Need proof? Here is a sample web page build in PHP. View the source at GitHub. A very lightweight compiler (written in PHP) is used. It's available at GitHub too. It's only job is to merge the components by putting the different elements in the right places.

What's next

In this article, I presented you a concept that I call HTML Server Components, an example web page and a PHP compiler.

The things I've planned for future updates are:

1. CSS preprocessors (Less, Sass) integration

2. External JS and CSS files merging to minimize requests

3. Format options. You may want your output HTML pretty or minified

4. CSS and JavaScript minification

5. Inlining CSS and JavaScript files so there are fewer requests

6. Moving inlined CSS and JavaScript code to files

7. Template engines integration

Contribute

I'd love to hear your comments and ideas. The PHP compiler is really small and it's free on GitHub. If you want you can fork it or port it to other languages.