What does means “Front-End” developer?

In this post I am trying to learn and share information about Front End. Here you will find information answering questions such as what is front end and a front end developer? What is the goal of a front end developer? What are the main divisions of Front End? What are some skills needed to become a Front End Developer?

*By no means my post is pretending to provide information coming from an expert. Like I stated before, I am here sharing information found from different sources regarding this topic as well as sharing my personal conclusions of it.

1.What is Front End & a Front End Developer?

The front end is the part that users see and interact with (includes the User Interface (UI), the animations, and usually a bunch of logic to talk to the backend). It is the visual bit that the user interacts with. This includes the design, images, colours, buttons, forms, typography, animations and content. It’s basically everything that you as a user of the website can see. (In the modern day that can mean an app running on your iPhone or the HTML and Javascript in a web browser).

If you use the metaphor of a car you can think of the frontend developer as the guy who installs the leather seats, steering wheel, pedals, shifters, and the stereo. The backend developer is the guy who puts in the engine and the transmission.

“It is a hinge role that requires both aesthetic sensitivity and programmatic rigor” ~ “http://guardian.co.uk

2.What is the goal of a Front End Developer?

The goal of a front end developer is 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 their implicit or explicit interconnection. Front-end is not just a pretty face, it’s the friendly, forward-looking interface of web development.

3.What are the main divisions of Front End?

As time passes by, many companies have different areas added to the front end area of their businesses. However, in order to get a big picture of it lets divide in these ones: The designer, the developer & the front end developer.

The Designer: They are the ones who decide how a website is going to look, what the colour scheme will be, how all the headings will look, and how all the pages will work together. They usually build a flat visual graphic of the site which has pictures of how the site will look and how each of the interactions will look (at this stage our users can’t interact with our site yet because it’s just a picture/prototype). They then hand this file to the developer.

The Developer: When the file was handed from the designer, the developer look at it and work out how they are going to build the site so that it will work in a browser. (A browser is the bit of software that you use to look at websites; there are lots of browsers including Firefox, Google Chrome, Safari, etc)

Developers will break the design up into components, and start to build these into a website using code. They then test the site in lots of different browsers, and sometimes on mobile phone browsers too. Each browser treats the code slightly differently, and the developer has to make sure that the site is accessible for lots of different users on lots of different browsers, and on different sized screens.

They have to make sure the text can be resized without breaking the site, that the site is readable by search engines like Google, and people with visual disabilities using screen readers, or people with old technology. They have to make sure the site looks as close to the design they have been given as possible.

The Front End Developer: They are the ones who will combine the work from the designer and the developer. A front end developer works on the code that makes a website look the way it does. They can use HTML to build the content, CSS to style the pages, and sometimes use JavaScript and code languages such as PHP, Python, Ruby, etc to make the pages more dynamic.

Now, this is all a bit of a generalization. As I mentioned before, different companies may have different responsibilities for a front end developer and a designer. It all depends on the business preferences, size, etc.

4.What are some skills needed to become a Front End Developer?

Avid Learner of current or new tools to help product / website to become successful
Be the guard of the front end code,speed, scalability, quality, etc: People may ask you to do things that are impossible to make or impossible to sustain.
Communicating with Developers: Most frontenders will need help from other (more backend oriented) developers. So they have to have technical skills as well, to be able to relate to them and really understand implications of what they want.
Understand how our Website works and each of the tools on it: Since it’s the frontender’s job to guard the frontend code of the site, they really need to understand what all those conversion-raising webapps do. If someone wants to change the layout of a submit button, but happened to also change the post URL of it. The Front end developer needs to know the implications of the changes before it happens as much as possible.
Known and Understand Design: Its important to be able to handle Photoshop, Illustrator HTML/CSS. Also, the front end developer has to smartly re-use parts from the original design to create variations for testing. This requires a certain “feel” for design.
Have Courage or Influential Skills: The frontender has to dare to test, even though he/she knows it might fail. Or he/she has to be very convincing, in case there is a boss involved that is scared…
Continuous Improvement Passioner: As a frontend developer, you should love this quest for conversion improvement. Otherwise it will get boring and you won’t manage to motivate yourself to push for another 0.1%.
Write / Understand Code & Markup languages: You need to know how to write HTML, CSS and Javascript in a way that’s easy to manipulate later.
Have a Need for Speed: Speed is getting more important, mainly because users demand it. IT has been proven often that slower sites convert worse. Google even uses speed as a factor in it’s rankings and next to showing it in Webmaster Tools, now reports page speed in Google Analytics.
Be Quick with Mockupping: If a colleague shares an idea, or some stuff comes up during lunch, you should be able to quickly whip something together to get feedback on. Maybe in raw HTML, especially if interaction is important for the idea. Or just in a tool like Balsamiq, which we use a lot for creating mockups / prototypes / interaction briefings. You’ll be forced to really understand the idea and see the implications for implementation. This is valuable for when you’ll have to start really building it. For developers it’s also good to have more then just a sketch. Something to interact with is always a better briefing. So be sure you have the tools to make something out of nothing very easily!

*Other Skills mentioned in Job Descriptions, Job Postings, etc:

Excellent HTML, XHTML, CSS & JS structure. Understand enough of it so the comps aren’t asking for the impossible. Knowledge of working with JavaScript frameworks to create rich interactive content
Prototyping ability. Sometimes the easiest way is just to show what you mean beyond a Photoshop file. Note this doesn’t have to be raw HTML/CSS, you can communicate via a presentation or graphing tool. Here Photoshop, Illustrator can be included
Understanding of the bigger picture – for example knowing how Ruby on Railsworks, so you can work effectively with developers. Knowledge of Haml (programming language) fits in here.
Understanding modern web limitations. What’s possible for each browser, which effects and UI conventions are standard on the web, and common connection speeds, processing capabilities, and screen sizes factor into a design.
Copy and SEO knowledge. These are often lumped into design early on but broken out as discrete roles as a company gets bigger, and they’re arguably only somewhat technical. A solid foundation in the use of Adobe Photoshop CS and basic graphic design principles including colour theory.
Enough jQuery for interactiony & AJAXy things.
Know and/or understand code control management tools such Git
Excitement about emerging web technologies such as HTML5 and CSS3
Good understanding of Web Accessibility
Understand the principals of object-oriented development.
Code cleanliness. Writing clean code, maintainable, modular, etc.
Testing. Testing the front-end is hard. Being able to do this frees the backend developer up to work on just the backend piece.

*And Here is a Long List (I just grab different Front End Job requirements, this DOES NOT mean every Front End Developer MUST know all of them. However, I like to keep a list of everything that someday I would like to learn or at least understand (YES! I AM An AVID LEARNER) :