Front-End Developer

BCS, THE CHARTERED INSTITUTE FOR IT

BCS, The Chartered Institute for IT, is committed to making IT good for society. We use the power of our network to bring about positive, tangible change. We champion the global IT profession and the interests of individuals, engaged in that profession, for the benefit of all.

Exchanging IT expertise and knowledge

The Institute fosters links between experts from industry, academia and business to promote new thinking, education and knowledge sharing.

Supporting practitioners

Through continuing professional development and a series of respected IT qualifications, the Institute seeks to promote professional practice tuned to the demands of business. It provides practical support and information services to its members and volunteer communities around the world.

Setting standards and frameworks

The Institute collaborates with government, industry and relevant bodies to establish good working practices, codes of conduct, skills frameworks and common standards. It also offers a range of consultancy services to employers to help them adopt best practice.

Become a member

Over 70,000 people including students, teachers, professionals and practitioners enjoy the benefits of BCS membership. These include access to an international community, invitations to a roster of local and national events, career development tools and a quarterly thought-leadership magazine. Visit www.bcs.org/membership to find out more.

Further information

BCS, The Chartered Institute for IT,

First Floor, Block D,

North Star House, North Star Avenue,

Swindon, SN2 1FA, United Kingdom.

T +44 (0) 1793 417 417

(Monday to Friday, 09:00 to 17:00 UK time)

www.bcs.org/contact

http://shop.bcs.org/

© BCS Learning & Development Ltd 2020

The right of Dominic Myers to be identified as author of this Work has been asserted by him in accordance with sections 77 and 78 of the Copyright, Designs and Patents Act 1988.

All rights reserved. Apart from any fair dealing for the purposes of research or private study, or criticism or review, as permitted by the Copyright Designs and Patents Act 1988, no part of this publication may be reproduced, stored or transmitted in any form or by any means, except with the prior permission in writing of the publisher, or in the case of reprographic reproduction, in accordance with the terms of the licences issued by the Copyright Licensing Agency. Enquiries for permission to reproduce material outside those terms should be directed to the publisher.

All trade marks, registered names etc. acknowledged in this publication are the property of their respective owners. BCS and the BCS logo are the registered trade marks of the British Computer Society, charity number 292786 (BCS).

Published by BCS Learning & Development Ltd, a wholly owned subsidiary of BCS, The Chartered Institute for IT, First Floor, Block D, North Star House, North Star Avenue, Swindon, SN2 1FA, UK.

www.bcs.org

Paperback ISBN: 978-1-78017-4761

PDF ISBN: 978-1-78017-4778

ePUB ISBN: 978-1-78017-4785

Kindle ISBN: 978-1-78017-4792

British Cataloguing in Publication Data.

A CIP catalogue record for this book is available at the British Library.

Disclaimer:

The views expressed in this book are of the author(s) and do not necessarily reflect the views of the Institute or BCS Learning & Development Ltd except where explicitly stated as such. Although every care has been taken by the authors and BCS Learning & Development Ltd in the preparation of the publication, no warranty is given by the authors or BCS Learning & Development Ltd as publisher as to the accuracy or completeness of the information contained within it and neither the authors nor BCS Learning & Development Ltd shall be responsible or liable for any loss or damage whatsoever arising by virtue of such information or any instructions or advice contained within this publication or by any of the aforementioned.

Publisher’s acknowledgements

Reviewers: Chris Benge, Pieter van der Westhuizen and Mark Berthelemy

Publisher: Ian Borthwick

Commissioning editor: Becky Youé

Production manager: Florence Leroy

Project manager: Hazel Bird

Copy-editor: Hazel Bird

Proofreader: Barbara Eastman

Indexer: Sally Roots

Cover design: Alex Wright

Cover image: AgriTech

Typeset by Lapiz Digital Services, Chennai, India

CONTENTS

List of figures and table

Author

Acknowledgements

Preface

1. THE FRONT-END DEVELOPER

What is a front-end developer?

Front-end developer responsibilities

The context of the front-end developer

Summary

2. TOOLS OF THE TRADE

Primary tools

Other tools

The most important tool

Summary

3. METHODS AND TECHNIQUES

Agile

Techniques

Testing

Ethics

Summary

4. A DAY IN THE LIFE OF A FRONT-END DEVELOPER

Morning

Lunch

Afternoon

5. CAREER PROGRESSION

Becoming a front-end developer

Progressing as a front-end developer

Moving on from front-end development

Summary

6. CONCLUSION

References

Further reading

Glossary

Index

LIST OF FIGURES AND TABLE

FIGURES

Figure 2.1 Front-end developer triangle

Figure 2.2 A simple DOM tree

Figure 2.3 A basic HTML template reproduced in a browser

Figure 2.4 Traditional web usage

Figure 2.5 AJAX web usage

Figure 3.1 A simple email form

Figure 3.2 A simple table layout

Figure 3.3 A simple table

Figure 3.4 A simple table with a total of the row totals

Figure 3.5 Single-table approach

Figure 3.6 The testing pyramid

TABLE

Table 3.1 How the family members could be stored in a database

AUTHOR

Dominic Myers is a front-end developer with a wealth of professional experience. He spends most of his day being fascinated by, developing and implementing the newest trends in web development, and primarily works in HTML, CSS and JavaScript – though he is happy to use whatever will get the job done. Before switching to software development, he was a psychiatric nurse for longer than he cares to remember. He shares his knowledge online via his blog (https://drmsite.blogspot.com) as well as contributing to forums such as Stack Overflow.

ACKNOWLEDGEMENTS

I want to thank my wife, Katrina Myers, for putting up with me while I was writing this book. My whole family have been immensely supportive while I’ve been absent at weekends (thanks Mum, Dad, Oz and Ash). Notable professional mentions include Lars Malmqvist, Denis Kaminskiy and Alex Weinle at Arcus Global Ltd and the whole team at Vigilant Software, but I would like to thank all those who have helped me in my second career – you know who you are (Witchford Archers rock!). And, of course, Becky and Hazel have done a magnificent job of wrestling my awkward prose into shape.

PREFACE

This book serves as an introduction to the role of a front-end¹ developer, sometimes known by other titles, such as web developer or user interface (UI) developer. Primarily this will be within the realm of web-based applications, but increasingly front-end developers will have their work viewed on mobile devices too; this means that the traditional website now not only is seen on a monitor but also has to cater for very many other screen sizes and aspect ratios. Many of the skills employed by front-end developers are of relevance to applications developed for mobile platforms, and the skills you learn as a front-end developer will allow you to develop apps for platforms such as Android and iOS.

Front-end developers are everywhere, but you shouldn’t notice the good ones – unless, that is, you are delighted by something truly exceptional in your interaction with a system. All front-end developers aim to produce that delight but know that it is fleeting; for instance, who now remembers the creator of the infamous hamburger? (It was Norm Cox (Vo, 2015).) Joy is gratifying but momentary; what was once delightful will become commonplace, so the bar to producing delight is forever rising. We also know that if you do not notice our work, then we have done it well. If you use a system without having to overthink, keeping your concentration on the task at hand rather than the tools you are using, then we will have succeeded.

In this book, we will explore the role of the front-end developer and our purpose, responsibilities and skills.

Along with the things a front-end developer should be aware of, we will discuss some of the tools you will need to become familiar with, if you are not already. We will also look at some less concrete attributes of the role, such as empathy and compassion, and explore ways of cultivating them within ourselves.

Finally, we will explore the working life of a front-end developer and expand upon those things that might be of relevance to you in your career.

This book contains the code for various layout techniques. The code can also be accessed here: https://jsfiddle.net/annoyingmouse/896v2jhL. In this book, the formatting of the code has sometimes been altered to improve the layout on the page.

1The front-end is anything which we display to our users via markup. The rest of this book will go into far greater detail about this and about why there is a distinction between the front-end and back-end of an application. Note that this book tends to use the words ‘application’ and ‘website’ interchangeably.

1THE 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.¹ 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