Within this series, we will explore the various technologies and skills that are essential for a Frontend Developer in the years ahead and what trends to watch out for so as to hop on the wave as it begins.

Unlike the backend, where the language options are numerous, the frontend has its holy trinity:

1-l4xICbIIYlz1OTymWCoUTw

HTML & CSS

Hypertext Markup Language (HTML)

The skeleton of every web page lives on the internet. HTML has come a long way since 1990, currently in its fifth iteration. HTML consists of numerous tags enclosed within ‘< >‘. In the coming years, it is important to understand the full extent of HTML tags just to reduce the dependency on Javascript to manipulate the Document Object Model (DOM).  

Cascading Style Sheets (CSS)

CSS helps in positioning & styling HTML elements within a web page. In recent years, the ability of  CSS to animate and transition elements has opened new possibilities with minimal overload on the web browser.

SASS & LESS are two preprocessor technologies that are available to help maintain and scale CSS styles. With the use of variables, mixins and inheritance, it becomes much easier & faster to build web pages and to maintain them.

Both SASS & LESS are conceptually same, it only differs in syntax and the technology it is built on. It’s up to the developer’s convenience when it comes to choosing between them as the impact is minimal on the application.

The community has also developed methodologies to help give a standard structure to the CSS codebase for applications, big or small. To name a few:

  • OOCSS – Object Oriented CSS
  • BEM  – Block Element Modifier
  • SMACSS – Scalable and Modular Architecture for CSS (read as ‘smacks)
  • Suit CSS
  • Systematic CSS

Over the course of the series, we will look at how each of the above can be implemented with a best use case scenario.

To help in developing both mobile and web frontends with ease, a lot of frameworks out there have developed classes & components to support. These frameworks are designed with a mobile-first view in mind. To name a few:

  1. Bootstrap (www.getbootstrap.com)

Currently in its v 3.3.7. A version 4 is currently in its alpha for more than a year now. It is very straightforward and has a very well written documentation on its website with sample code and examples. Also, not to mention, the community backing it with numerous solution and discussions running in StackOverflow.

  2. Zurb Foundation (http://foundation.zurb.com/)

Recently, Foundation was updated into its 6th iteration. Just like bootstrap the Foundation docs are well written too. Added to that, they have introduced video docs to help those visual learners as well. It’s got more features that Bootstrap 3, including form validation engine and Motion UI – a CSS animation library which comes along with the Foundation package.

  3. Materialize (http://materializecss.com/)

Materialize is currently still under development and it is good to keep an eye out for it. Still in its beta, so it’s not recommended to implement into a project as it still got a lot of bugs. The main appeal for this framework is its design language. It abides by the Google Material Design conventions and does it quite well. It’s got a lot going for it and has a huge backing on Github with over 27k stars. a

JS – Javascript

Javascript is the scripting language browser. It transmits data to the backend code and helps users get a feedback on the client. Technologies like AJAX have helped in improving the user experience in rendering real-time data without the need for the user to refresh a page.

It is key to have an in-depth understanding of the DOM (Document Object Model) while working with JS. The DOM is generated based on the HTML structure of the web page. The DOM is the set of nodes that the JS interacts with through the browsers.

ECMAScript is the standard that maintains and improves JS. The ES6 standard has reached the status of feature complete in the year 2015. The new features include new syntax, modules, classes, classical inheritance, private object members, optional type annotations, and more. Popular browsers have adopted most of these features, leaving out a few of them.

For the developers who want to catch up with the latest standards, transpilers such as Babel & Typescript have come into the picture to support ES6 today. These transpilers accept code in the ES5 standard and then compiles into its ES6 equivalent. It is recommended to use a JS transpiler going forward, as it saves a lot of time debugging.

Having a good understanding of the fundamentals of JS is important. With numerous libraries and frameworks to support frontend development, core JS is being used less and less in a development environment.

Just like the CSS frameworks, JS also has a couple of popular frameworks to build a rich web application and single page application. To name a few:

  • Angular JS /Angular
  • Vue JS
  • Aurelia
  • React

In the future, we will delve deeper into the implementations of the frameworks and try and figure what makes each of these different from one another.

Keep an eye out for the future of this series.