History of User Interface (UI)

Learn about the UI evolution and HTML optimization in response to user needs and technological advancements.

We'll cover the following

Evolution and challenges in HTML

While we are fascinated by technology, it can also be intriguing to watch how slowly it evolves over time. In our case, it’s HTML. On the surface, it doesn’t appear to have changed in the past 20 years. We get that idea by comparing a typical web page written today with one written 20 years ago, and noticing that they look very similar, if not identical. The following snippet shows what typical HTML page code looks like:

Press + to interact
<HTML>
  <head>
    <meta charset="utf-8">
  </head>
  <style>
    h1 { color: red; }
  </style>
  <script>
    console.log('start...')
  </script>
  <body>
    <h1>Hello World</h1>
  </body>
</HTML>

Those who have been in this industry long enough know that the web has been reshaped a couple of times. In particular, a tremendous amount of effort has been spent on how to generate the preceding HTML.

Web engineers have tried to divide the file up into multiple parts, including HTML, JavaScript, and CSS, and then put it back together upon rendering the file onscreen. They have also tried to load one or two parts on servers, and the rest on client computers. They have also tried various compilers or builders to autogenerate the file after each change to the source code. They have tried lots of things. Actually, almost anything we can think of regarding HTML has been attempted multiple times in the past, and people will not stop trying something just because someone else has tried it. In a sense, web technology gets re-invented every once in a while.

Press + to interact

With so much new content being added to the web every day, engineers have found the HTML files a bit unmanageable. On the one hand, the demand is that users want to see more actionable items with quicker responses and, on the other hand, many of these actionable items on the screen create challenges for engineers to manage the workload and maintain the code base.

So, engineers are on a constant lookout for better ways to organize HTML files. If this organization is done right, it can help them not get overwhelmed by a plethora of elements on the screen. At the same time, organizing files well means a scalable project, since the team can divide the project into smaller pieces and work on each in a divide-and-conquer way.

Let’s take a look at the history of how technologies using JavaScript assisted with these topics. We will choose four technologies for this conversation—jQuery, Angular, React, and LitElement.

jQuery

jQuery is a library used to manipulate the DOMDocument Object Model elements on the screen. It recognizes the challenges of working with the DOM directly, thereby providing a utility layer to simplify the syntax of finding, selecting, and manipulating DOM elements. It was developed in 2006 and has been used by millions of websites since then.

Press + to interact

What’s great about jQuery is that it can work with an existing HTML by creating a wrapper around it using the famous $ symbol, as we can see in the following code:

Press + to interact
$(document).ready(function(){
  $("button").click(function(){
    $(this).css("background-color", "yellow");
    $("#div3").fadeIn(3000);
    $("#p1").css("color", "red")
      .slideUp(2000)
      .slideDown(2000);
  });
});
function appendText() {
  var txt1 = "<p>Text.</p>";
  var txt2 = $("<p></p>").text("Text.");
  var txt3 = document.createElement("p");
  txt3.innerHTML = "Text.";
  $("body").append(txt1, txt2, txt3);
}

jQuery didn’t have much competition when it came to changing the color, font, or any attribute of an element at runtime. It made it possible to organize large chunks of business logic code into functions stored in multiple files. It also provided a modular wayA structured and component-based approach to building UI elements using jQuery. to create reusable UI widgets through one of its plugins at the time.

Press + to interact

Complete separation between HTML and JavaScript was strongly favored back then. At that time, people believed that this way of doing things helped to raise productivity, since people who work with website styles and behaviors can be from two departments. Theming, the word describing the application of style to a site, was gaining popularity, and some jobs were looking for developers who could make a site look as beautiful as a Photoshop design.

Angular

Angular is a web framework used to develop a single-page application (SPA). It was invented by Google in 2010. It was quite revolutionary at the time, because we could build a frontend application with it. This means that the code written in Angular could take over the body of HTML and apply logic to all elements within it at runtime. All code was run at the browser level, resulting in the word “frontend” starting to appear in job résumés. Since then, web developers have been roughly categorized as “backend,” “frontend,” and “full stack” (which means both frontend and backend).

The code that Angular uses continues to be built on existing HTML by attaching additional tags to it like so:

Press + to interact
<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <p>Name: <input type="text" ng-model="name" /></p>
  </div>
  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      $scope.name= "John";
    });
  </script>
</body>

The controller and module introduced by Angular can imbue business logic to sections of HTML with unique scopes. Angular supports components and directives out of the box, which allows us to reference all relevant HTML and JavaScript together in a single file (although the HTML file still needs to be written in a separate file):

Press + to interact
function HeroListController($scope, $element, $attrs) {
  var ctrl = this;
  ctrl.updateHero = function(hero, prop, value) {
    hero[prop] = value;
  };
  ctrl.deleteHero = function(hero) {
    var idx = ctrl.list.indexOf(hero);
    if (idx >= 0) {
      ctrl.list.splice(idx, 1);
    }
  };
}
angular.module('heroApp').component('heroList', {
  templateUrl: 'heroList.html',
  controller: HeroListController
});

The component created via Angular can be reused afterward in an HTML file.

React

React, also known as React.js, was developed by Facebook and released in 2013 as a JavaScript library for building UI components. Although it wasn’t specifically marketed as a web framework, it has been used by developers to build single-page or mobile applications, and has been favored by start-up companies in particular ever since.

What was controversial at the time was how it treated HTML statements. Instead of leaving them in an HTML file, it actually asked to take them out and put them under a render function of a component, like so:

Press + to interact
<div id="root"></div>
<script type="text/babel">
  class App extends React.Component {
    render() {
      return <h1>Hello World</h1>
    }
  }
  ReactDOM.render(App, document.getElementById('root'));
</script>

This unique approach favors the component design much more than the integrity of the HTML file. This was (almost) the first time we could put HTML and JavaScript together under the same file. We call it HTML here because it looks like HTML, but actually, React creates a wrapper to transform the HTML into JavaScript statements. When React was introduced, it came with a class component, and in 2015, it added support for a function component, so we can write the logic under a function instead of a class:

Press + to interact
<script type="text/babel">
  const App = function() {
    return <h1>Hello World</h1>
  }
</script>

With React, HTML files are not touched as often as they used to be; in fact, they are not changed at all since the HTML content is relocated to React components. This approach can still be controversial today because people who don’t care about the location of the HTML would get on board very easily, whereas people who care about the classical way of writing HTML would stay away. There’s also a mentality shift here; with React, JavaScript becomes the focus of web development.

LitElement

Polymer was developed by Google and released in 2015, designed to build web applications using web components. In 2018, the Polymer team announced that any future development would be shifted to LitElement to create fast and lightweight web components:

Press + to interact
@customElement('my-element')
export class MyElement extends LitElement {
  ...
  render() {
    return html`
      <h1>Hello, ${this.name}!</h1>
      <button @click=${this._onClick}>
        Click Count: ${this.count}
      </button>
      <slot></slot>
    `;
  }
}

There are quite a few similarities between React and LitElement since it allows us to define a class component with a render function. What’s unique about LitElement is that once the element is registered, it can behave like a DOM element:

Press + to interact
<body>
  <h1>Hello World</h1>
  <my-element name="abc">
    <p>
      Let's get started.
    </p>
  </my-element>
</body>

There’s no apparent entry point for integrating LitElement into HTML since it doesn’t need to gain control of a body element before using it. We can design the element somewhere else, and when it comes to its use, it's more like using an h1 element. Therefore, it perfectly preserves the integrity of the HTML file while outsourcing the additional capability to the custom element, which can be designed by others.

Press + to interact

The goal of LitElement is to have the web component work on any web page within any framework.

Evolution of web components

Twenty years ago, we didn’t know what the web would become. From this brief historical review of jQuery, Angular, React, and LitElement, it’s clear that the idea of having UI components has emerged. A component, like a block of LEGO, can do the following:

  • Encapsulate functionalities inside

  • Be reused in other places

  • Avoid jeopardizing the existing site

Press + to interact

Therefore, when we use the component, it takes the following syntax:

Press + to interact
<component attr="Title">Hello World</component>

Essentially, this isn’t too different from where we started with writing HTML:

Press + to interact
<h1 title="Title">Hello World</h1>

There’s a hidden requirement for a component here. While the components can be designed separately, they have to be put together to serve a higher purpose—to finish building a site. Therefore, as atomic as each component is, there still needs to be a communication layer to allow blocks to talk to one another.

As long as components function and there is communication between them, the app can function as a whole. This is actually the assumption of component design, along with building a site.

So, into what category does our course fall? Our course is about building components under React, especially building smart components that can serve as a reusable block and are able to fit in an app. The technology we have chosen here is Hooks inside a function component.