The frontend is where users interact with your system. There's a lot to consider and prepare for in the frontend since users, unlike machines, are not homogeneous and this affects their experience when using a website—some have technical experience and some do not; some are young while others are older. The design should be inviting, the flow of work should be clear, and the way things work should help the user be effective and avoid mistakes.
We achieve these targets by working with three technologies that complement each other: HTML, Cascading Style Sheets (CSS), and JavaScript — the undisputed kings of the WWW:
- HTML: Describes what exists on a page
- CSS: Describes how a page looks
- JavaScript: Describes how a page behaves
These technologies have been the foundation of the internet almost since the day it was born. They have been growing and maturing ever since, adding much-needed features that enable more complex systems to be written on top of them.
As a result, frontend development frameworks have started to pop up in the last decade. Their goal is to take advantage of HTML, CSS, and JavaScript and bring them to the next level. These frameworks have added conventions, programming models, and advanced patterns and techniques, and have generally enabled developers to create massive systems using web technologies in a productive and stable way.
These advances indicated the beginning of a big shift in web development architecture—from traditional, server-centric architecture to Single-page application (SPA), client-server architecture.
Since the beginning of the WWW, the way web applications has been developed was server-centric, with minimal to no code running on the client. For example, the following sequence describes the usual flow of work:
- The user browses to a web address.
- The server gets the request, generates HTML for the user, and sends it back.
- The browser gets the HTML and displays it to the user. The user sees the web page and clicks a button.
- The server receives the button click, generates HTML that matches the button click, and returns it. In the meantime, the user sees an empty browser screen.
- The browser gets the HTML and displays it to the user. The user sees the web page.
On the one hand, this was easier to code and maintain, since all the code was located on the server. On the other hand, this way is slow and provides a poor user experience for the user.
This architecture was used mainly because browsers didn't support features required for rich client development. Once that started to change with new versions of HTML, CSS, and JavaScript, the shift toward full client-server architecture began too.
The new architecture is known as SPA, which is basically client-server architecture. It was named SPA because of its differences from traditional web applications. In traditional web applications, the user navigates between different pages that are retrieved separately from the server upon request. In SPA applications, there is only one page, which contains the entire application, and every UI change is made locally via JavaScript. A usual flow of work in SPA architecture will look like the following:
- The user navigates to a web address.
- The server responds with HTML and multiple JavaScript files that contain the client-side application code.
- The browser gets the files and displays the web page to the user. The user sees it and clicks a button.
- JavaScript code on the client handles the click and calls the server side for data. In the meantime, the user sees a loading animation.
- The server gets the request for data, retrieves the required data, and sends it back to the client.
- JavaScript gets the response from the server, generates matching HTML, and displays it to the user. The user sees the updated web page.
This architecture enables rich client development that works quickly and smoothly. However, it does make it more complicated to develop web applications, as developers are required to master both client and server technologies.
Hypertext markup language (HTML) has been a part of web development since the very beginning of the WWW in 1989. At the beginning, it was used to display simple documents, but as the web grew, HTML matured and adjusted to support not just documents, but also full-blown applications.
HTML is a markup language, which means that it does not have programming language-specific dynamic capabilities such as variables, loops, or functions. Its sole responsibility is to statically describe the content of a web page.
The most recent version, HTML5, added long-awaited features such as new types of form controls, canvas, native video capabilities, and numerous new JavaScript APIs.
CSS is a style sheet language that is used to describe how HTML elements look. It is one of the pillars of web development, and provides many features for web developers that enable the creation of web applications that look great and adapt themselves to both mobile and desktop use.
CSS is a markup language and, like HTML, it does not support dynamic features such as variables and loops. Having said that, CSS does have some capabilities that enable it to change the look of an element based on its state, such as when a mouse is hovering over it, or based on an environment detail such as screen width.
In recent years, there has been interesting progress in the world of CSS. Since CSS is used in every single web application today, developers required more advanced capabilities for development — features such as variables, hierarchy, mixins (grouping CSS declarations for better reusability), and others — that were absent from CSS. As a result, new languages have been created, such as SCSS and LESS. These languages are supersets of CSS—they add much-needed features to the CSS development process and compile to CSS to be interpreted by browsers.
The last version of CSS, CSS3, added features such as web fonts, animations, transformations, and transitions that made the web application experience much smoother and more user-friendly.
JavaScript is the third part of the web development triangle — HTML, CSS, and JavaScript. It is a dynamic multi-paradigm programming language that is natively supported by all web browsers. It is used to add dynamic capabilities to web pages and to control the behavior of its elements.
The JavaScript language is an implementation of its standard, ECMAScript. Almost every browser has its own implementation of the ECMAScript standard. For example, Chrome has V8, Safari has WebKit, and Edge has Chakra.
JavaScript is the basis of all web application development frameworks, such as Angular, React, and others. Additionally, apart from frontend development, it has been adapted for backend development via the Node.js runtime environment.
The ES2015 version brought major enhancements to the language with new syntax for classes and modules, the for-of loop, arrow functions, and more. The latest version, ES2017, introduced the anticipated async/await feature.
TypeScript is a programming language developed by Microsoft, and is used primarily as a JavaScript substitute for development. The language adds features and enhancements to the JavaScript language that help in creating and maintaining large code bases.
TypeScript compiles (or, more correctly, transpiles) to JavaScript, which can then be interpreted by browsers or any other JavaScript runtime environments.
TypeScript adds static typing capabilities to JavaScript, such as type declaration and interfaces. In addition, it enables developers to use new JavaScript syntax from the latest, or even future, ECMAScript releases, and compile them to JavaScript, which can be interpreted by today's web browsers.
TypeScript has become very popular in the last couple of years, and is even used to develop the Angular framework itself. Though it is not required for SPA-based application development, it makes code clearer and more maintainable, which is why it is highly popular among developers.