Web Technologies, Part 2: Front-End Technologies

The most fundamental front-end technology is the web browser that is used to display web pages. Web browsers are sophisticated software applications that act as the interface between the user and the data and software that is sent through the internet. Despite their importance, web browsers are not often included in the list of web technologies. There are only a handful of modern and reliable browsers out there and they tend to be developed by a limited number of software developers. Most front-end programming activity is centred around code that will run inside the browsers. As a front-end developer, you will need to be aware of the capability and limitations of the different browsers. But you will most likely never be involved in developing a web browser.

In the early days of the web, the front-end was mostly concerned with the static presentation of content. This has changed as more and more functionalities have become available in the browsers. The effort to standardise specifications across different browsers is essential for the success of these technologies. The following is a list of the main front-end technologies. It is not complete but can give you a starting point to find your way around the different languages and standards.

Basic Front-End Technologies

HTML

HTML is tightly linked to the idea of the web. It is the format of almost all web pages that you look at in your browser. HTML is a mark-up language. This means that it provides structure for content and allows references to other content. In fact, we celebrate the invention of the HTML language as the birth of the World Wide Web.

CSS

While HTML gives structure to your content, it does not do much in terms of the visual appearance of the page. The CSS language allows front-end developers to specify the visual design of web pages. CSS, which stands for Cascading Style Sheet, uses so-called selectors that reference specific parts of an HTML document. Visuals styles such as colours, fonts, or layout can then be applied to these parts of the document.

Responsive design

This is not a technology as such but a way of writing CSS styles. In CSS version 3 styles and layout can target individual screen sizes. This makes it possible to change the layout of a page depending on the size of the device. The same web page can be optimised for mobile phones and for desktop screens at the same time.

SASS and LESS

CSS is the styling language that browsers can understand. But it turned out to be very clumsy. Web designers had to write the same text over and over again. Two extensions of CSS were developed almost at the same time. These are called SASS and LESS. Both provide variables and the ability to write re-usable CSS code which can be mixed into styles in various places. SASS and LESS are not understood by the browsers. This means a compiler will convert the SASS and LESS files into CSS before being published on the web.

Image Processing

Maybe not directly a front-end technology, but a skill that is needed by any web designer. Without high-end graphics, web pages look dull and uninteresting. Creating stunning graphics or making an initial website design often requires image manipulation software. Adobe is the market leader by far in this sector. If you want to become a web designer, Photoshop and Illustrator will be your permanent companions.

JavaScript

All the technologies so far are focused on static content and design of a web site. JavaScript allows developers to add functionality to web pages. This ranges from small visual effects, such as opening and closing pull-down menus to full-fledged drawing applications. JavaScript runs in the browser on the client computer. This makes it feel responsive because content can be changed without the need to communicate with the server.

AJAX

This is a technique rather than a technology as such. The acronym stands for Asynchronous JavaScript And XML. It basically means that JavaScript on a web-page contacts the server and requests data. After the data has been received the JavaScript program updates parts of the website using this data. This happens in the background without the need to reload the full web-page. Originally the X in the acronym implied that the response would always be an XML document. Nowadays this is not seen as a binding requirement. Any data format can be used in the communication.

WebAssembly

At the moment JavaScript is the prevailing front-end programming language. But it has its drawbacks. For various reasons, it is not the best language to write large scale applications in. It is also not the fastest language around. Developers wanted to use existing languages which have been proven to be scalable and fast. This lead to the development of WebAssembly. It is mainly focused at developers using C++ but it supports any other compiled language just as well.

Front-End Frameworks

The technologies listed above provide the basic functionality for the front-end. But writing everything from scratch for every single web site or web application would be much too tedious. There are numerous frameworks that provide functionality out of the box. Knowing these frameworks is essential to becoming an effective front-end developer.

Bootstrap

Bootstrap is a CSS framework that makes it easy to implement responsive web sites. It provides a set of classes that can be applied to HTML elements in the document. By combining these classes content can be made to reflow depending on the screen size. It also provides lots of default designs for typography, buttons, menus, and more. Bootstrap uses the LESS extension of CSS to compile style sheets for the browser.

Zurb Foundation

This is another CSS framework for responsive web site design. The basic concepts of Foundation are similar to Bootstrap. But Foundation has a lot more freedom for individualising the styles. It has a shorter release cycle, meaning that new features are added more regularly. It is considered the more professional choice of CSS framework. On the downside, Foundation tends to be more heavyweight. The style sheets are bigger, putting more burden on the client and slowing download times. Foundation uses the SASS extension of CSS.

JQuery

JQuery is probably the most popular front-end JavaScript framework. If you want to become a front-end developer, there is no way around this massively useful library. It was originally developed to harmonise differences between browsers and make it easier to write code that works on all browser vendors. JQuery simplifies many things, from changing visual styles to finding HTML elements in a document to performing AJAX requests.

React

React is a JavaScript framework, originally developed by Facebook, that is aimed at data-driven web content. Data can change, for example, through user input or through AJAX requests. If there are multiple HTML elements that depend on the data in a complex fashion, it is difficult to keep everything synchronised with plain JavaScript or JQuery. React solves this problem by using something called the Shadow-DOM. It is fast, relatively lightweight and provides a solution to a specific problem.

Vue JS

Vue JS is another JavaScript framework for displaying dynamic content. It is easier to learn that React but is also somewhat less powerful. Vue lets the developer write templates straight inside the HTML code. This makes it easy to quickly write simple dynamic web pages. But it also makes it less scalable than the other JavaScript frameworks.

Angular

This is another JavaScript framework that is much more comprehensive than React or Vue JS. It provides a full-fledged Model-View-Controller architecture. Templates are specified in specific blocks or in external files. This makes it much more suitable for large scale projects. But it also makes it less compatible with existing code.

Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>