Front-End Developer

Dominic Myers

• Publisher: BCS, The Chartered Institute for IT
• Year: 2020
• ISBN:
  9781780174785
• Topic: Computer Science
• Subtopic: Software Development
• Index: Computer Science

Even amazing products can be let down by poor user interfaces. It is the job of front-end developers to make software products and websites engaging and attractive for users.This book covers the role of front-end developer in terms of typical responsibilities, required skills and relevant tools, methods and techniques. Career progression for front-end developers is also discussed.

1 THE FRONT-END DEVELOPER

In this chapter, we discuss what we mean by the term ‘front-end’ as well as the need for a dedicated front-end developer within modern development teams.

WHAT IS A FRONT-END DEVELOPER?

Historically, computers were people: a room full of mathematicians tasked with carrying out calculations. Humans are fallible, though, so there were many early attempts to automate the process of computation, such as the Babbage Engine (Computer History Museum, n.d.). Computers, as we know them, are a much more recent development.

When the more modern computers initially came about, they were less than user friendly, and users were left trying to fit their heads into the computer space – trying to fit complex thoughts and concepts into ones and zeros. Users of those early electronic computers were sometimes seen as strange and aloof, having to spend their time thinking in a way that a computer would understand, altering the registers of a processor using assembly languages.1 Often these users were also the programmers or developers of the computer and could be seen as having a symbiotic relationship with the hardware. If they needed the computer to do something, they needed to be able to tell the computer to do that thing in a way that the machine could understand.

Even those early computers were massively powerful compared to a room full of mathematicians, and far less likely to make mistakes, but they were costly and required a massive infrastructure. Business, governments and universities required some return on the enormous investment the computers represented, so the original users were asked to program the computers to undertake specific tasks, thus becoming specialist developers. The developer then came to be something of an interface between the user and the computer.

Alan Skorkin has written about the distinctions between developers, programmers and computer scientists (Skorkin, 2010). He says that, while he uses the terms interchangeably (as many do), people he meets in the industry often classify themselves as falling into a single category.

There was often a further requirement for someone to act as an interpreter between the user and the developer, and so the roles of the systems analyst and designer were born, introducing yet another layer.

While systems analysts are aware of the needs of the actual users of a system, they are also responsible for its overall design. As such, the idea of them having specialist knowledge of how a user interacts with a system might seem excessive; thus, the specialist role of the front-end developer came into play.

The front-end developer is the member of the team whose work has the closest impact on the user, despite often never encountering them. Whereas the back-end developer is concerned with the logic of the application and will use a plethora of tools to ensure that that logic is maintained during interactions with the user, the front-end developer uses a significantly different toolset to ensure that the logic is presented in a way that makes sense to users and is aesthetically pleasing.

I find it useful, as a front-end developer, to imagine my parents interacting with a system I am developing. My mum is not one of those parents who can send an SMS, and all her interactions are in person or by voice over the phone. She is getting better at interacting online and with banks, and she now shops on the internet, but there was a time when I worried that she would be unable to communicate with larger and larger portions of the modern discourse.

Conversely, my dad is sometimes overly cautious and less nuanced than some users, being quick to end an online interaction at the least provocation, fearing that someone might steal his personal information and do goodness knows what with it. I am sure we all know someone who feels left out of some aspects of the modern world because they are not comfortable using a computer, but should they have to lose out or should we do all in our power to make their interactions as painless as possible?

What do we mean when we use the term ‘front-end development’? Wikipedia has a good definition: ‘the practice of converting data to graphical interface for user[s] to view and interact with data through digital interaction using HTML [Hypertext Markup Language], CSS [Cascading Style Sheets] and JavaScript’ (Wikipedia, 2018). The front-end is anything which we display to our users via markup.

I once went to a party in London not long after starting work as a front-end developer. When I was asked what I did for a living, I said that I made the stuff which Lars Malmqvist (my boss at the time) did ‘look pretty’. I expanded, as at the time we were primarily involved in allowing residents of the Royal Borough of Windsor and Maidenhead to interrogate a data set, by noting that Lars did the hard stuff by extracting, manipulating and subsequently geofencing the data, while I was merely responsible for displaying it on a map.

At the time, we had either just been shortlisted for or won the 2011 Guardian’s Megas award (The Guardian, 2011), and both we and our primary investor were rightly pleased as punch.

Saying that front-end developers merely make things look pretty is perhaps disingenuous, though. Ivan Codesido explained, when he wrote in The Guardian in 2009, that the front-end developer (or ‘client-side developer’, as he calls the job) aims to:

Create clear, easy, fast pages and interfaces that will make people understand and care about the information, by putting it in context, expose its legitimacy or lack thereof, and reveal [the information’s] implicit or explicit interconnection. (Codesido, 2009)

While Codesido seems to have a bias towards a journalistic interpretation of what a front-end developer is, this is probably not such a wrong approach to take to the role. We might be tasked with creating content (see the section in Chapter 3 on images) but, generally, we are the people tasked with creating a meaningful experience for users from artefacts generated by others, be those images or text.

I would also expand upon Codesido’s definition by noting that we need to allow our users to interact with the services which we present in as simple a way as possible. For example, our users might not be working afront a multi-monitor display with access to a fast broadband connection but might be struggling to interact with a form via a feature phone over a slow mobile connection. Using empathy to imagine such scenarios will help us to appreciate making the experiences we are crafting as efficient as possible, for as many users as possible. Squeezing as much extraneous data as possible from an image, while keeping it clear, might seem a waste of effort as it downloads to our machines in a minuscule fraction of a second while we are at work; for some of our users, though, the delayed image download, over slower connections, might mean that they miss some vital information or lose patience. This may either lose clients an interaction or users an opportunity.

The distinction between clients and users is the mainstay of the role of the front-end developer, and we offer something of an intersection between the two spheres. Ideally, no one should have two masters, but in this instance we should be conscious of our responsibilities to both, being unafraid to challenge either while being mindful of their distinct needs. When the needs of both masters are in concordance, we should also aim to gently challenge them, even if just by presenting new elements to them to keep their interest piqued.

Also in 2009, Paul Carvill, a colleague of Codesido, wrote about the history of front-end developers and noted that the role only really started to mature in the last few years of the previous millennium (Carvill, 2009). He suggests that much of this was down to Google’s search algorithm and an appreciation that data could best be discovered, and thus indexed, when presented semantically. I will expand upon semantics later, but in this instance we are talking about the structure of the underlying data.

We can present data in all sorts of ways as front-end developers (as evidenced on the CSS Zen Garden site (Shea, 2005)), but not all of these methods are suited to the information being parsed by search engines. How much better to target our efforts at search engines as well as our users and reduce effort, allowing both our users and other (perhaps intelligent) agents to glean what is pertinent?

Carvill goes on to note that front-end developers require a vast skill set (with a similarly massive job description). I will discuss the main tools of our trade in the next chapter. While their scope can seem daunting, the challenges offered are more than rewarded both in terms of personal satisfaction and monetarily.

The Hawaii missile alert in 2018 – when an alarm was broadcast to the population of Hawaii saying that there was an incoming ballistic missile and that the community should seek shelter – is an example of how weak front-end development can have disastrous results. Core77 (Noe, 2016) shows the original screen where the error was made. It seems to have been a matter of someone clicking on the wrong hyperlink in a document containing two very similar instructions: one with the word ‘DRILL’ at the start.

While there were no reports of fatalities occurring as a result of the Hawaii missile alert, ill-thought-out design has been linked with deaths (Shariat, 2014). You must be aware of your responsibilities. It may well be that you will not be developing such vital infrastructures as missile alert systems or medical interfaces, but you have a responsibility to communicate either your or your employer’s vision in as clear a way as possible. Users’ lives might not depend upon it, but they will take away something from every interaction, if only subconsciously.

FRONT-END DEVELOPER RESPONSIBILITIES

When you see job specifications for front-end developer roles, there will be countless responsibilities listed, but they all encompass the following items.

Design, creation and maintenance of websites

The design, creation and maintenance of websites make up a considerable portion of the front-end developer’s responsibilities, and we will look at critical aspects of these tasks later in this book. There are many tools available to aid you with the design of websites, including merely a pen and paper. You might even be in the fortunate position of having a designer who will furnish you with a design. Wherever the design comes from, you then have to implement it using Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) and JavaScript – we will examine each of these in the next chapter.

Keeping abreast of technology

As you will see in the following chapters, the environment of the front-end developer is continually changing, with standards being adapted and new technologies, approaches, fashions and techniques appearing all the time, while others are either superseded or removed altogether. Being aware of current trends and techniques is of paramount importance and helps with the maintenance clause of the first responsibility, as it will help you not only to improve your future work but also to enhance your previous work.

Communication

I mentioned earlier that all developers need to be aware of the requirements of two, sometimes converging, groups (clients and eventual users). Alongside being able to communicate effectively with clients and users, we sometimes find ourselves working within a larger team and so being able t...