"Decoding Front-End Development: What It Takes to Be a Front-End Developer"
It's Day-2 of the Web Development journey and today I would be sharing my insights around the title "Front End Developer" as I dedicated the day to learning more about the field that I'm trying to enter. The source through which I gathered the information and got a good understanding of the field is this handbook by Frontend Masters.
Click Here if you want to read all those topics and get a deep understanding of the topic. However, you could treat this blog as a summary of the information that is being provided in this handbook which I tried to explain in a very simple manner through my own words. However, if you could dedicate 2/3 hours to the topic and don't have a problem reading long documents then I would like to encourage you to go ahead and read from the source.
Now, I would like to share what I learned about Front End Development and why you should be excited or worried if you too are getting in the field like me.
So, talking about the Front End Developer: The main purpose of any front-end developer is to ensure that the visual and interactive aspects of a website or application we are building should be user-friendly, aesthetically pleasing, and functionally efficient. It's like we are the presenters of the webpage which our client (or the user) would see. We are responsible for the experience they get while interacting with the website or application. Whatever we visually experience on any website or application is the result of the work that a front-end developer has put behind it (of course with the help of their team members like Designers and Product Managers which we will be talking about later in the blog).
Commonly, the technologies used by front-end developers are mainly used to create products that could be implemented on 4 platforms :
Web Browser: Building websites that could run on the browser.
Headless Browser: A headless browser is a web browser without a graphical user interface. Runs on the command line interface. (ex-Headless Chromium, Zombie and Slimerjs)
Webviews: Webviews are used by native OS, in native applications, to run web pages. (ex-Electron for desktop and Cordova for phone/tablet, etc.)
Native from Web Tech: Web Technologies to create native applications not fueled by browser engine (ex-Flutter and React Native)
Fundamentally a front-end developer is historically sometimes referred to as a client-side developer as they have to build the product according to the clients to which the product is going to serve.
However, every front-end developer aims to build a web page (could be native or used for an application). So, we need to understand the basic structure through which a website is built using HTML, CSS and JavaScript. Imagine building a house: First of all, you lay down a structure of the house (that's HTML) then you furnish the house and decorate it according to your preference (that's where CSS comes to play) and finally you make the house responsive, fitting appliances and getting the house to work according to your needs (that's what JavaScript does for a website).
Front-end developers mainly develop for the web platform however they could take their knowledge and create native applications for popular operating systems too. A professional front-end developer will minimally have a working knowledge of browsers, and the internet and be skilled at using the following web technologies:
Hyper Text Markup Language (HTML)
Cascading Style Sheets (CSS)
URLs
Hyper Text Transfer Protocol (HTTP)
JavaScript Programming
JavaScript Object Notation(JSON)
Document Object Model (DOM)
Web APIs (Browser APIs)
Web Content Accessibility Guidelines (WCAG) & Accessible Rich Internet Applications (ARIA)
#Fact: Visual Studio Code is built using Electron (WebView Development).
Difference between Front End Developers :
On the one side, you have JavaScript-focused programmers who write JavaScript for front-end runtimes that likely have computer science skills with a software development history. On the other side, you have, most likely, non-computer science-educated developers who focus on HTML, CSS, and JavaScript as it specifically pertains to the UI. When entering or trying to understand the front-end developer space, you will feel this divide. The term front-end developer is on the verge of meaninglessness without clarifying words to address what type of front-end developer is being discussed.
Let's understand it by discussing different types of designations that are given to the people working in this field of front-end development. Following are the job titles mentioned to give an understanding of what they consist of and what you should aim for if you are getting into the field according to your own set of skills (what suits you more according to your experience or new interests) :
Front-End Developer/Engineer: generic job title that describes a developer who is skilled to some degree in HTML, CSS, DOM, and JavaScript and implementing these technologies on the web platform.
Application/JavaScript Developer/Engineer: the job title is given to a developer who comes from a computer science engineering background and is using these skills to work with front-end technologies.
Front-End Performance Developer/Engineer: The job title given to a JavaScript Application Engineer or UI Developer who is focused on the performance implications of JavaScript and JavaScript runtimes.
CSS/HTML Developer: The front-end job title that describes a developer who is skilled at HTML and CSS, excluding JavaScript and Application know-how.
Front-End Web Designer: When the word "Designer" is included in the job title, this will denote that the designer will possess front-end skills (i.e., HTML & CSS) but also professional design (Visual Design and Interaction Design) skills.
UI (User Interface) Developer/Engineer: this will denote that the developer should have interaction design skills in addition to front-end developer skills or front-end engineering skills
Front-End SEO Expert: this will denote that the developer has extensive experience crafting front-end technologies towards an SEO strategy.
Front-End Developer Operations Engineer(DevOps): this will denote that the developer has extensive experience with software development practices about developer collaboration, tooling, integration, deployment, automation, and quality.
Mobile/Tablet Front-End Developer/Engineer: this will denote that the developer has experience developing front-ends that run on mobile or tablet devices (either natively e.g., React Native, or on the web platform, i.e., in a browser).
Working with a team :
When working as a front-end developer, it's not just about working in your world but understanding the needs of the client and working accordingly for which you need the help of a team that could make work easier for you and that's what we find in a professional working environment. Front End Developers will often work on a web development team containing the following roles :
Project Lead / Product owner (to look over the whole project)
Visual Designer (i.e., fonts, colours, spacing, emotion, visual concepts & themes)
UI/Interaction Designer (i.e., wireframes, specifying all user interactions and UI functionality, structuring information)
Front-End Developer (i.e., writes code that runs on the client or front-end)
Back-End Developer (i.e., writes code that runs on the server)
These are a few of the points that every person who is trying to get into the field should keep in mind to get to a path of progress (at least that's what I think) however I think it's a different process for everyone and each of us finds different ways to learn different things but I'm just trying to share these insights to support anyone reading this blog who's having any doubts in their mind. Even if it could solve a single problem for anyone getting in the field same as me. It would be very special for me and that's the reason I'm taking out time to write this blog. Hope it finds the right person. Let's go!!!
Let's meet in another blog where I would be getting back with more learnings on how the internet works and why we need to learn as someone starting with the front-end development (or web development).
Credits :
Image by Freepik
Handbook: Frontend Masters