Frontend development as the name suggests is the user or client facing software which transforms code built on the backend into information that is displayed to the user and can be interacted with by the user.
The user for a frontend development effort could be on a browser on their computer, on a mobile browser, or inside a mobile app.
Frontend developers build the elements of an application that are directly accessed by end users with a goal of rendering the entire application in an elegant, easy to use, fast, and secure manner.
Over the last few years, frontend technology has matured along with increasingly powerful browsers allowing more sophisticated designs and interaction patterns.
This simultaneously increases complexity of the code that runs on the frontend of an application and frontend development has become a specialized field requiring deep expertise.
What are the different types of frontend architectures?
There are two major types of frontend development architectures:
- Monolithic
- MicroServices with MicroFrontends
Monolithic architecture
In the beginning of web development, entire programs were built in the form of one indivisible unit. Such an approach is named after an ancient word for a huge block of stone — a monolith. All parts of monolithic systems rely on one another. So, if a developer wants to change something or add a new feature, this could lead to an entire system failing. While outdated, monolithic architectures are still used.
Pros of Monolithic Architecture
- Less cross-cutting concerns. Cross-cutting concerns are the concerns that affect the whole application such as logging, handling, caching, and performance monitoring. In a monolithic application, this area of functionality concerns only one application so it is easier to handle it.
- Easier debugging and testing. In contrast to the microservices architecture, monolithic applications are much easier to debug and test. Since a monolithic app is a single indivisible unit, you can run end-to-end testing much faster.
- Simple to deploy. Another advantage associated with the simplicity of monolithic apps is easier deployment. When it comes to monolithic applications, you do not have to handle many deployments – just one file or directory.
- Simple to develop. As long as the monolithic approach is a standard way of building applications, any engineering team has the right knowledge and capabilities to develop a monolithic application.
Cons of Monolithic Architecture
- Understanding. When a monolithic application scales up, it becomes too complicated to understand. Also, a complex code system within one application is hard to manage.
- Making changes. Implementing changes in such a large and complex application with highly tight coupling is harder. Any code change affects the whole system, so it has to be thoroughly coordinated. This makes the overall development process much longer.
- Scalability. You cannot scale components independently, only the whole application.
- New technology barriers. It is extremely problematic to apply new technology in a monolithic application because the entire application must be rewritten.
Microservices with Micro-frontends Architecture
Microservices are the architectural approach to building an application composed of multiple, loosely coupled, and independently deployable smaller components or services. Each service runs its own process and has its own codebase, CI/CD pipelines, and DevOps practices. The micro frontend architecture resembles microservices, where different teams take care of loosely coupled components but extend the idea to the browser. In this pattern, web applications are composed of semi-independent fragments. Also, teams aren’t grouped around a skill or technology but instead formed around a customer need or use case.
Pros of the Microservices with Micro-Frontends Architecture
- Independent components. Firstly, all the services can be deployed and updated independently, which gives more flexibility. Secondly, a bug in one microservice or micro-frontend impacts only on a particular component and does not influence the entire application. Also, adding new features to this kind of application is much easier than a monolithic one.
- Easier understanding. an application following microservice and micro-frontend, split up into smaller and simpler components, is easier to understand and manage. You just concentrate on a specific component that is related to a business goal you have.
- Better scalability. Another advantage of this architectural approach is that each element can be scaled independently. So the entire process is more cost- and time-effective than with monoliths when the whole application has to be scaled even if there is no need for it. In addition, every monolith has limits in terms of scalability, so the more users you acquire, the more problems you have with your monolith. Therefore, many companies end up rebuilding their monolithic architectures.
- Flexibility in choosing the technology. The engineering teams are not limited by the technology chosen from the start. They are free to apply various technologies and frameworks for each micro-component.
- The higher level of agility. Any fault in this application affects only a particular component and not the whole solution. So all the changes and experiments are implemented with lower risks and fewer errors.
Cons of the Microservices with Micro-Frontends Architecture
- Extra complexity. Since these architectures are a distributed system, you must choose and set up the connections between all the modules and databases. Also, as long as such an application includes independent services, they all have to be deployed independently.
- System distribution. This architecture is a complex system of multiple modules and databases so all the connections have to be handled carefully.
- Cross-cutting concerns. These include externalized configuration, logging, metrics, and health checks.
- Testing. A multitude of independently deployable components makes testing this solution much harder.
Pro and con summary:
Here are some examples when choosing monolithic architecture is a wise decision:
- If you want to develop an entire application and get it to market quickly.
- If you want a self-contained app which can be easy to deploy and manage.
- Your application needs to be a single, easily testable unit.
On the other hand, microservices with micro-frontends is the right choice if:
- Your web solution is complex and can be split into multiple self-contained verticals. For example, you’re building an enterprise resource planning system consisting of several modules (e.g., finances, CRM, HR, inventory).
- You want different tech stacks for different modules within one web solution.
- You already have or are going to engage a big development team (or multiple teams), and your budget allows this.
Ultimately, the choice of architecture depends on the specifics of the business use case.
What tools, frameworks and programming languages does a frontend developer use?
Programming Languages:
HTML5 - HTML5 is the newest version of HTML (the backbone of frontend development). The term refers to two things. One is the updated HTML language itself, which has new elements and attributes. The second is the larger set of technologies that work with this new version of HTML — like a new video format — and enable you to build more complex and powerful websites and apps.
CSS - Although CSS is a style sheet, it is also considered as the top Frontend Language. CSS, or Cascading Style Sheets, is a design language that simplifies making web pages presentable. Selectors are used to pick elements and apply styles to them.
JavaScript - JavaScript is a robust client-side programming language that is open-source. Its primary purpose is to enhance a user's interaction with a web page. In other words, you can utilize this programming language to improve the vibrancy and engagement of your frontend product. JavaScript is also widely used in the development of games and mobile apps. Excellent speed, cross-browser interoperability, and straightforward semantics are just a few of JavaScript's essential qualities, providing a seamless developer experience.
TypeScript - TypeScript is an open-source frontend programming language that helps frontend developers create the ideal web development environment possible. It’s JavaScript’s syntactical superset with the addition of static typing as an option.
Frameworks & Libraries:
Angular - Angular is an open-source, JavaScript framework written in TypeScript. Google maintains it and provides a standard structure for developers to work within it. Angular provides the framework for MVC architectures of the client-side, which facilitates the building and testing of Single Page Applications (SPAs). It uses TypeScript and has components as its main building blocks as they play a significant role in creating user interfaces where every UI portion is defined as a component.
React - React is a JavaScript-based UI development library run by Facebook and an open-source developer community. Although React is a library rather than a language - first appearing in May 2013 –it is one of the most commonly used frontend libraries, widely used in web development.
Vue.js - Vue.js is one of the trending tools currently among developers. The VueJs developers have merged the greatest aspects of existing frontend development tools to produce a convenient and straightforward tool. Vue.js is a JavaScript open-source framework for the development of Single-Page Apps (SPAs) & user interfaces (UIs).
Bootstrap - Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.
jQuery - jQuery is a small and lightweight and cross-platform JavaScript library. It follows the ideology of "write less do more" as it simplifies AJAX call and DOM manipulation.
Backbone.js - BackboneJS is a library of JavaScript to construct web-based client-side apps. It is based on the architecture of the MVC (Model View Controller). The platform also enables you to create projects that require several categories of users, with the arrays serving as a means of distinguishing the models. As a result, you can utilize jQuery to design complicated user interfaces, and everything is done through RESTful APIs.
Jasmine - Jasmine is a framework for unit testing JavaScript. It’s open source and has more than 15,000 stars on GitHub at the time of this writing. Its popularity among developers means that it has a strong community and documentation available when you get stuck. Angular developers especially favor Jasmine because Jasmine is included natively in Angular projects.
Tools:
ChromeDevTools - Chrome DevTools is a widely used web development tool that allows you to edit web pages directly from the Google Chrome browser and diagnose problems rapidly to build better web applications. With the help of Chrome DevTools, you can easily edit your HTML & CSS code or debug JavaScript code in a real-time environment.
HTML5BoilerPlate - HTML5 Boilerplate helps in building fast, robust, and adaptable web apps or sites. It is a set of files that developers can download, which provide a foundation for any web app.
Visual Studio Code - This open-source code editor by Microsoft leverages numerous remarkable features such as syntax highlighting, smart code completion, built-in debugger, built-in Git commands, easier deployment capabilities
GitHub - This is another open-source software that allows developers to manage source code, track the changes that you’ve made in your code or even roll back to the previous state in a much more convenient way. It saves every change and allows all the developers in the team to work on the same code simultaneously without any hassle.
Npm (Node Package Manager) - Npm is the Node package manager for JavaScript. It helps to discover packages of reusable code and assemble them in powerful new ways. This web development tool is a command-line utility for interacting with a said repository that aids in the package.
Grunt - When there is talk of Task Automation – Grunt is the most recommended tool for frontend developers. It allows you to automate repetitive tasks such as compilation, unit testing, linting, and many others conveniently to enhance efficiency and productivity. There are a number of pre-configured plugins that come with Grunt for task automation.
Sublime Text - Sublime is a text editor with a Python programming interface that supports programming and markup languages. It also supports split editing mode, meaning that developers can edit files side by side.
Why should I hire a frontend developer?
At the highest level, a frontend developer architects and develops websites and applications using technologies such as HTML, CSS, DOM, and JavaScript.
Web Browser (most common)
A web browser is software used to retrieve, present, and traverse information on the world wide web Typically, browsers run on a desktop or laptop computer, tablet, or phone, but as of late a browser can be found on just about anything (i.e, on a fridge, in cars, etc). The most common web browsers are:
- Chrome
- Safari
- Internet Explorer which was discontinued and replaced by Edge
- Firefox
Webviews
Think of a webview like an iframe or a single tab from a web browser that is embedded in a native application running on a device (e.g., iOS, android, windows). The most common solutions for webview development are:
- Cordova (typically for native phone/tablet apps)
- NW.js (typically used for desktop apps)
- Electron (typically used for desktop apps)
Native from Web Tech
Some development environments use web technologies (e.g., CSS and JavaScript), without web engines, to create native applications. Some examples of these environments are:
Responsibilities of a frontend developer
Some of the responsibilities of a frontend developer include:
- Developing with latest frontend frameworks, libraries and programming languages
- Write reusable code
- Maintenance and optimization of user interfaces and front end logic
- Create tools and elements that improve the application's interaction on different devices or browsers
- Manage and optimize software workflow
- Implement Onpage SEO practices
- Improve user usability with new features and processes
- Transform a UX/UI design (sketch, mockup) into reality
- Improve loading speed
- Ensure web accessibility
- Testing the frontend applications usability for fixing errors and bugs
What is Responsive Web Design?
The goal of Responsive Web Design is to make user interactions with content seamless, rich, and fulfilling across a variety of devices. It is an approach that makes the web application adapt to different screen and window sizes of various devices.
Depending on the use case of the company hiring, experience in responsive web design can be a must have skillset.
What do technical interviews look for in frontend developers?
It is helpful to know what technical interviewers look for in frontend developers and the most commonly asked questions. As a recruiter, you can help prepare a candidate for the screening process and also get a sense of how confident they are about the subject matter.
Hard Skills
Programming Languages
- How are JavaScript and jQuery different?
- What are meta tags in HTML ?
- What is Cross-Site Scripting (XSS)?
- What is callback hell?
- Differentiate between div and span?
- How browsers render the UI?
- How do you Create Nested Web Pages in HTML?
- What are Sass, Less, and Stylus?
- What is Virtual DOM?
- What are the Advantages of TypeScript Over JavaScript?
- State all the elements of the CSS Box Model.
- What's new in HTML 5?
Design
- Mention ways to decrease page load time?
- What is AoT Compilation? How is it different from JiT?
- What are Form Control and Form Groups?
- How would you increase Page Performance?
APIs and Frameworks
- What is the key difference between cookies, session storage, and local storage?
- What is functional programming in JavaScript?
- How does concurrency work in Node.js?
- What is Coercion in JavaScript?
- When would you use AngularJS vs jQuery?
Version Control
- What do you understand about the Version Control System?
- What are some most used Git Commands and functions?
- What is the difference between Git Pull and Git Fetch commands?
Client-Server
- Differentiate Between Centralized and Distributed Version Control System
- What is Eager and Lazy Loading?
- Name the major HTTP requests
- What do you understand by lazy loading? What are the advantages and disadvantages of lazy loading?
- What is Content Security Policy?
- What is Cross-Site Scripting (XSS)?
- What are defer and async attributes on a <script> tag?
Behavioral Skills / Soft Skills
- Examples of deployed Web applications
- How do you structure your CSS and JavaScript to make it easier for other developers to work with?
- What are your favorite features of HTML5, and how have you implemented them in your front end development projects?
- How do you manage software development?
- We want to increase the speed of our website. What strategies would you use to do this?
- How often do you update your knowledge of programming languages in general?
- There is a programming language you’ve never used before. How do you approach learning it
What is the compensation range for frontend developers?
The average base salary for a frontend developer in the US was $88,558 in May 2022, according to Glassdoor. Factors like education level, experience, or certifications may affect the compensation range.
In our experience at Rocket, you should target a range of $120-$150k for really high-quality frontend developers in the US/Canada.
What’s the best way to find frontend developers?
LinkedIn remains the best place to look for developers, at least in the United States and Canada. Their Recruiter search has several fields you can use to search candidates, including title, location, current company, years of experience etc. and by creating a boolean the search can be narrowed down. To know how to create a boolean Linkedin checkout their help section: Boolean Help
Here are a few tips when looking for frontend developers specifically:
General: Options like experience, current company, past company, job functions, veterans, industry, location and job titles can give a range of options to recruiters to choose from
Title: there can be a variety of titles for frontend developers:
- The most strict titles for frontend developers is frontend developer or frontend engineer (41k results in the US/Canada)
- However many fullstack engineers also have the skillset for frontend development and titles such as web developer, UI developer also often indicate frontend development skills, aptitude and inclination (210k results in the US/Canada now!)
- Even more results can be obtained by adding the technology into the title - for example React Engineer OR Angular Developer (220k results in the US/Canada now!)
- Lastly, many folks with software engineer titles are actually frontend developers also, so you can find additional engineers by adding a search for folks with Software Engineer titles and frontend engineering keywords and without backend or devops related skills. This produces an additional ~8k results such as https://www.linkedin.com/in/gerges-beshay who are almost certainly frontend developers!
Technologies: determine which technologies are acceptable to the hiring manager and construct a boolean search based on that combination. For example:
- Basic search: (Angular)
- 120k results in the US with that search for frontend developers who know Angular
- Expanded search using additional frameworks: (Angular OR React OR Bootstrap) Search results increased by 3 times!
Company size: LinkedIn provides a really handy feature to search by company size. This is extremely relevant when searching for frontend developers as the type of work done by frontend developers varies by company size.
In addition to searching yourself on LinkedIn, here are some other ways to find and engage with frontend developers:
- Job boards - Frontend Job Board, Careerbuilder, Upwork, LinkedIn, Dice, Monster, Workable, SimplyHired, Angular Jobs , React Jobs, Glassdoor, Remoteok.io (Remote), Craigslist (freelance) and Ladders, to name a few. Job boards will typically yield more active candidates vs. the higher-quality passive candidates on LinkedIn, but they can still be a good source.
- Staffing companies - you can utilize staffing companies like Rocket, RobertHalf, Randstad and others to help you find a proficient frontend developer.
- AI sourcing - you can use tools like Hireflow or Fetcher to source frontend developers for you to engage.
What are the growth projections for frontend developers?
Frontend developer jobs are some of the most in-demand roles, and for good reason — they are absolutely critical for any company that needs to develop websites or mobile applications.
According to the United States Bureau of Labor Statistics, frontend developer employment in the US is projected to grow 15% from 2016 to 2026.
How can I get additional help finding frontend developers?
As mentioned, the best source for finding frontend developers is LinkedIn and the various job sites like Indeed, Monster and Ziprecruiter at least in the United States and Canada.
If you feel like you need external help to augment your capabilities, feel free to reach out to us at Rocket (info@getrocket.com). We would be happy to have an introductory call to see if the services we provide would be a good fit for your needs.
