Technologies used for frontend development

HTML CSS JS

Web development started with the HTML marking language. It is used to build web pages, creating the different sections and presenting the information. That is its purpose. But through the years and without proper support for styling how that information is presented, web pages used well-known tricks such as tables. Almost all web pages were built with tables to display the information in the desired areas.

CSS means cascading style sheets. It is a language to style the information presented with HTML. The first versions did not have cross-browser support, and web pages were still built using tables. It was not until version 2 that we have a good language for style sheets, and tables were being abandoned in favor of CSS styles (finally!). CSS3 set a good foundation, and many technologies showed to make styling easier.

CSS reset

Each browser sets its own style defaults that need to be handled so the web site looks the same everywhere.

This originated the creation of a simple style sheet that resets the styles for the browser it is being loaded from, so styles can be safely created from scratch.

Eric Meyer’s “Reset CSS” is the most popular, but Normalize.css is a newer alternative.

CSS pre-processors

CSS is a simple language that offers its feature-set for plain files that can be called from an HTML page. This was designed for simple web sites, but once the project grows up, styles can become a mess. CSS pre-processors try to solve that problem.

Sass is a language that lets the developer organize the styles using variables and nesting, and modularizing them among several files. It even has partials support, so we can insert chunks of code in others, being these chunks in dedicated files. Mixins is also a killer-feature: it consists of features that can be reused in multiple styles. It is intended for those styles that are reused in several places.

As you can see, it is a very convenient and comfortable tool. There are similar tools with slightly different approaches, such as Less and Stylus.

CSS grids

Besides the code structure, a tool was needed to improve presenting information. Yes, CSS3 killed HTML tables, but there was a need for something that could make it even easier.

A CSS grid allows to divide the page in rows and columns, so we can have cells to fill in. It basically provides the same functionality as HTML tables, but with more control, and of course cleaner. They are intended for rapid prototyping, although they can be used in production without any problem.

I remember using the 960 grid system, which sets the width to 960 pixels, and divides it by 12 or 16 columns. Very handy. There were many alternatives to this tool, but they all do basically the same thing.

CSS frameworks

The next natural step is… yes! bring more features! Tools get improved and other new tools learn from others errors to design a better solution from scratch.

A CSS framework provides a grid system, a reset stylesheet, typographies, icons, and a full set of pre-designed utilities (buttons, form elements, menus, modal windows, and so on).

It also has to impose the mobile-first approach, so design has to be applied to the smallest screen, and then it improves for bigger ones. This also derives a responsive behavior, so when the window is being resized, the design has to adapt in real time.

The most popular CSS frameworks are Twitter Bootstrap and Zurb Foundation.

JavaScript and jQuery

JavaScript is a programming language based on ECMAScript, which is built in all browsers.

During the first versions it was used for very simple tasks. But since Gmail and Google maps were launched, it gained an amazing popularity. Ajax was a killer-feature: you could make a request to the server and receive the response in the background, so you had complete control. The user perceived it like a native application.

Although JavaScript has been based on a standard, browsers have been implementing their own versions. It was very difficult to deal with the differences, so jQuery (as well as other similar tools) tried to solve the problem implementing those differences for you. Yay!

With jQuery you can build those cool and useful Ajax requests very easily, as well as deal with the DOM very efficiently. It has become an indispensable tool.

JavaScript applications

JavaScript has been gaining more and more popularity. Many features have been controlled by this language, so we faced the same problem again: maintainability is a hard to deal task. So why not developing a local application using JavaScript and use an API? It would work as a native application, and we would not need full-page refreshes.

JavaScript frameworks were created to avoid implementing the same common features manually, and automatize those cool Ajax calls to an API. These frameworks impose a way to work, so once we choose one of them, we have to adhere to the best practices to be more productive and keep the code cleaner.

Backbone, Ember and Google’s Angular constitute the classic frameworks. But there are other approaches like Facebook’s React, which focuses to the user interface only, using a virtual DOM to abstract the real one and make development easier.

HTML templates

Depending on the backend programming language being used, we may use an HTML template so the code looks more structured and clearer.

For Ruby projects, it is very common to use Haml, that removes many distracting elements from HTML and provides an indented structure. You may like it and use it, or use plain HTML with embedded Ruby (called ERB).

I like Slim. It is very similar to Haml but it looks nicer to me.

Conclusion

Frontend web development is not simple anymore. Almost all web sites use any of these technologies (or even all of them!). It is important to try as many tools as we can to choose the ones we feel more comfortable with.

It depends on the project to use one or another. If the site is simple, maybe it is not worth using a CSS/JavaScript framework. Just using a CSS grid would be enough. We have to take into consideration the final size of the web site, because the more tools we use, the bigger the size will be for the final user.

Which of these technologies do you usually use?

Did you like it? Please share it:

Get my ebook for free

10 ideas that helped me become a better developer (and may help you too)

Subscribe to my mailing list and get my ebook on 10 ideas that helped me become a better developer.

About Me

David Morales

David Morales

I'm David Morales, a computer engineer from Barcelona, working on projects using Ruby on Rails and training on web technologies.

Learn More