Front-end development - why not?

30 July 2013
Zofia Korcz
Frink_Cognifide_2016_HeaderImages_0117
frontend develompment
 A Front-end developer. What does it mean nowadays? What duties, responsibilities and experience should such a person obtain?
A few years ago it was rather obvious. A front-end developer had to know how to convert a Photoshop template to a HTML file in addition to standard, commonly seen, simple DOM manipulations with jQuery. Thus, they were expected to be able to code HTML/CSS sufficiently, to possess aesthetic sensitivity, and to know at least basics of a client-side programming language like JavaScript.

Nowadays, it's much different. It's not only those aforementioned skills. I would even risk a statement that, if you want to get into front-end development, you don't need to master Photoshop or even jQuery.

In this post, I would like to introduce you to the newest, modern skills that you should master in order to follow the desired and attractive career path of a front-end developer.

JavaScript developer

JavaScript is not only jQuery. It's a powerful programming language, based on ECMAScript. This was originally implemented as a part of web browsers, dedicated to sites that caused stress on the interaction between users and browsers. The most popular JavaScript library - jQuery could be very helpful with DOM manipulations, animations of elements, asynchronous communication with a server and supporting cross browsers features. Unfortunately there is a large group of so-called 'front-end developers' who treat jQuery mistakenly as an easier alternative for JavaScript. This leads them to the conclusion that they don't need to know JavaScript itself.

However, JavaScript is more than that. It is a misunderstood language, and has recently been regarded as something more than just a scripting language. Its popularity has been growing rapidly especially over the last few years. Nowadays, it could be used for either browser-based or desktop applications and even a server-side functionality. Mozilla, which is one of the world's most popular free software companies, launched the first Firefox operating system for smartphones, written mostly in JavaScript a few years ago!

In addition to that, lately we have noticed a significant shift in how HTML5 is able to extend the standard functionality of browser features by adding various JavaScript APIs. A few APIs that are gaining ground include: Drag and Drop API, File API, Offline Apps, Video and Audio, Web Workers and many more.

Mobile Expert

The usage of mobile devices evolves rapidly nowadays. Almost every site has its version for tablets and phones. And there are a lot of quirks regardless of a device, browser features support, touch events, performance and screen resolutions.
Every front-end developer should be at least familiar with Responsive Web Design which is basically a method to serve the same markup for both desktop and mobile browsers and to change a layout only by CSS media queries. Speaking of Responsive Web Design, the development of Mobile First is also worth noticing. In its principle lies the statement that a site in the first stage should be designed and developed for mobile devices, focusing on those functionalities that have the highest value and are appealing to the users of a website.

It is also possible to build entire applications dedicated to mobiles. The most popular method nowadays is to use open source frameworks like PhoneGap or Appcelerator Titanium. They allow to develop mobile applications using HTML5, CSS and JavaScript and to get access to their native functionality through custom JavaScript APIs. By the way, there are also a few promising APIs and events dedicated for mobiles, including Device Orientation, Geolocation or even Battery API!

Game developer

duckhunt game
Duck Hunt - example of css only game.

HTML5 game development has evolved really fast over the past several years. It is catching up with the still very popular Flash because of its better performance and lack of plugins. But what technologies can we use in terms of HTML5 game development? Well... we have plenty of them! From hardware accelerated DOM manipulations and CSS 3D transforms, through SVG (Scalable Vector Graphics), even to pure CSS3 mechanics.

We can also benefit from HTML5 new features like: Web Audio, Web Sockets and GamepadApi. But the most common way to develop games are still the HTM5 canvas element and its more complex brother - WebGL (Web Graphics Library). Canvas is, as mentioned before, an HTML5 element which, in collaboration with JavaScript, allows to draw and animate raster-based images and shapes. While canvas is used mainly for 2D games, WebGL can be used for both 2D and 3D graphics. It's an JavaScript API, based on the OpenGL library, which is capable of rendering interactive 3D graphics by transferring graphic tasks to a GPU for faster processing. There is also a very popular WebGL library called Three.js, developed by the open source community to help developers work on WebGL games and animations.

On the top of that we have plenty of frameworks, libraries, tools and engines which could be helpful in developing games for multiple devices and platforms. A few titles worth mentioning are: the ImpactJS JavaScript Game Engine, the Construct 2 game creator and another game engine but also with testing and monetising environment - Turbulenz. In terms of noteworthy libraries, we can't forget about the widely used JavaScript port of C++ physics engine called Box2D. Games like Biolab or Cut the rope make use of this awesome game engine!

Back-end developer

No! It's not a mistake. JavaScript is capable of handling server-side tasks too! The best platform so far for that is Node.js. It's written completely in Google's open source JavaScript engine called V8. Due to the event-driven and non-blocking I/O model, applications written in Node.js are lightweight, efficient and scalable. But back-end is not only the server. We can't forget about the application and database. Major JavaScript applications can use variations of architectural design patterns known as MVC. In short, those design patterns are proven solutions to common development problems. They include management of data in an application (Models), user-interface (Views) and handling user actions and coordination between models and views (Controllers). The most popular MVC patterns nowadays are Backbone.js,Ember and Google's product AngularJS.
In addition to that, there are also interesting open source databases which make use of JSON-like notation, so they can be easily used in JavaScript applications. If you want to get familiar with this topic, get more information about CouchDB or mongoDB.

It's also important not to forget about testing JavaScript applications. There is plenty of Unit Testing frameworks, which are designed to help test individual units of JavaScript source code. Some interesting products include: QUnit, Jasmine and Buster.JS.

Conclusion

As you can see, there is much more in the front-end world that goes beyond the standard jQuery library and Photoshop knowledge. With a lot of passion and at least decent understanding of the JavaScript language, you can choose from a variety of front-end development career paths. Mastering JavaScript in addition to trying various frameworks, libraries and engines will help you narrow down your choice to those most interesting for you. There is a growing demand for various front-end developers, so why not get interested in this promising field?