What is a front-end engineer? I will explain the role in web development

1. What is the role of front-end engineer?

Introducing the role played by front-end engineers among IT engineers involved in web applications.

1.1 What is the front end?

The front end is a term that refers to the “part that the user can see” of a web application or website . For example, when you open an online shopping site, the TOP page you see is the front end of your web application. Controlling visual effects is a typical task of a front-end engineer, and it is the role of the back-end engineer to search the database for matching information based on the keywords entered by the user

1.1.1 What is a front-end engineer?

The role of the front-end engineer is mainly to create a rough look using HTML / CSS according to the visuals designed by the web designer, and to give movement to the entire page with JavaScript . JavaScript is especially important, and various frameworks such as Angular, React, and Vue have appeared, and all of them are heavily used in the development field.

For example , React has emerged as a result of the ever-expanding role required of JavaScript to create advanced apps that are not supported by existing libraries such as jQuery. Unlike the conventional JavaScript library, by constructing the screen with a technology called ” Virtual DOM (Document Object Model) “, both the web application displayed on the browser and the screen of the native application displayed on the smartphone use the same notation. The feature is that it can be implemented.

Vue is also a framework that evolved from React to increase development speed and flexibility. It uses an HTML-oriented notation that is more intuitive than the JSX notation used by React, and features an easy implementation of bidirectional binding that links multiple elements on the screen in real time.

There are various library frameworks other than those introduced here, and trends change quickly, so front-end engineers are willing to catch up with the latest technology and make it their own. Motivation for learning is important.

1.1.2 Differences from markup engineers

Markup engineers are professionals in HTML creation, have a high level of knowledge in HTML / CSS, and are IT engineers who can perform markup with SEO in mind. In contrast to the job of finishing HTML as instructed by the coder, which is a senior position of the coder, the markup engineer is also involved in formulating guidelines for updating and correction, introducing CMS, and SEO measures.

Front-end engineers use JS in addition to HTML / CSS. Also, with the advent of Firebase etc., there are increasing cases of being in charge of application development without a back end engineer. As you can see, the markup engineer and the front-end engineer have some overlapping roles, but the tendency is that the front-end engineer often requires a higher technical level .

1.1.3 Differences from server-side backend engineers

In contrast to front-end engineers who use HTML, CSS, and JavaScript technologies to implement the range that users can see, server-side and back-end engineers work with databases, encrypt information that requires security, and log in. It is responsible for processing on the server that is invisible to the user, such as payment processing.

Since the server side interacts with the database, it is more robust than the front end . Therefore, server-side engineers are required to have higher quality of written programs than front-end engineers.

On the other hand, front-end engineers are required to be quick to release products quickly while flexibly supporting various browsers such as Android, iPhone, tablets and PCs .

If you are interested, please see the following article for the difference between server-side backend engineer and front engineer.

The difference between a front-end and a back-end engineer. Which role is more important?

1.2 Relationship between front end and design

The front end is strongly related to the design field due to the nature of the area that the user can see. Here are some terms in the design field related to front-end engineers.

1.2.1 UI / UX

In the development of web applications, it is necessary to build the site in detail based on the design created by the designer in Photoshop etc. to improve usability . Therefore, front-end engineers also need to understand UI / UX.

UI is an abbreviation of “User Interface” and corresponds to the part of the window where the user operates the system or product . UX is an abbreviation of “User Experience” and is a word that means “experience / experience” of a user obtained by using a system or product . Products with high UI and UX satisfaction can be expected to be used by many users as high-quality apps that are highly evaluated by many users. Front-end engineers need to understand UI / UX in order to create products that are highly satisfying for such users in collaboration with the design department.

1.2.2 Prototyping

Before full-scale server-side coding, creating a mock and creating a website, web application, or mobile application that works to some extent is called prototyping. It is a development method that is heavily used in the startup industry, where there are many opportunities to show prototypes to customers, shareholders, and investors to explain their business because screen transitions and browsing on actual devices (mobile devices) can be performed at the mock stage.

1.2.3 Multi-device

Technology that allows the site to be displayed neatly on multiple devices such as PCs, mobiles, and tablets without breaking the site no matter which terminal you browse from. Since the amount of information that can be displayed on one screen differs for each terminal, it is important to have a sense of thinking about the layout that is displayed most beautifully on each terminal .

1.2.4 font

It is also important for front-end engineers to have knowledge of fonts to implement the screen neatly. Some fonts may look distorted on some devices, so you need to choose a font that looks beautiful on any device.

Also, some characters such as “&” and “<” have special meanings for HTML, so you need to write them in a special way such as “& amp;” or “& lt;” when displaying them on the screen. .. Knowledge of these special characters is also required for front-end engineers.

2. Current status of front-end engineers

With the advent of serverless development such as Firebase, it is gradually becoming possible for the front end to handle the infrastructure surroundings, which was previously a server-side business. Therefore, in the past, the main role of front-end engineers was to lay out screens with HTML and CSS, but nowadays it is necessary to call APIs , operate databases in back-end-free development , and manage security . It has come to play many roles such as processing implementation.

Therefore, it is important to actively study a wide range of fields and to greedily catch up with rapidly changing technological trends.

If you would like to know more about the current situation and future trends of front-end engineers, please refer to the following articles.

The difference between a front-end and a back-end engineer. Which role is more important?

2.1 Annual income of front engineer

According to data from My Navi Agent, the average annual income of markup engineers and front-end engineers is 3.85 million yen .

It’s a bit below average compared to the creative industry and other industries, but not all front-end engineers earn a low annual salary. Now that the role of the front desk, especially JavaScript, is increasing in the entire web application, there are many cases where front-end engineers with advanced JavaScript technology have high demand and annual income.

Reference: Average annual income of markup engineer / front engineer | Mynavi

3. Languages ​​and frameworks used by front-end engineers

The front end leverages many technologies and frameworks to quickly develop user-friendly screens. Here, we will explain the languages, frameworks, and libraries used by front-end engineers.

3.1 HTML

The most basic element of the front end is HTML. All screens displayed in the browser are written as HTML. Producing HTML with an appropriate structure not only makes the page easier for users to read, but also makes it easier to hit the top pages of search engines.

HTML is explained in detail in the following articles.

Introduction to HTML-From basics to usage-

3.2 CSS

While HTML is the element that governs the documents in a web page, CSS is the technology that governs the appearance of a web page . With CSS, you can not only change the size and color of characters, insert a background image on a web page, but also create an animation when the screen is loaded.

CSS is explained in detail in the following articles.

Basics of how to write CSS

3.3 JavaScript

JavaScript plays a central role in the development of modern advanced web pages. Originally, JavaScript, whose main role was to manipulate elements on the screen, is now due to technological advances, implementing business logic for complex web applications and manipulating user data by communicating with Web-API. It has come to play a wide range of roles .

JavaScript is explained in detail in the following article.

Getting Started with JavaScript

3.4 jQuery

In the front end, it is necessary to understand the differences between browsers and proceed with the implementation so that the web application can be operated in the same way in various browsers. JQuery, which has been used for a long time among JavaScript libraries, has the advantage that it can be operated in the same way in old browsers such as Internet Explorer and new browsers such as Google Chrome.

jQuery is explained in detail in the following article.

Introduction to jQuery-From introduction to basic usage-

3.5 React.js

React.js is a JavaScript library framework that features drawing web pages with a data structure called virtual DOM instead of directly manipulating HTML . Due to the nature of drawing the elements displayed on the screen with a virtual data structure, we are also good at drawing screens for smartphone apps instead of HTML for web pages. This React.js derivative library developed for “smartphone apps” is called React Native , and it is characterized by being able to create Android apps and iPhone apps at the same time.

3.6 Vue.js

Vue.js is a JavaScript library framework that excels at developing highly readable and fast SPAs (Single Page Applications, apps that do not have page transitions). It incorporates attractive functions of various JavaScript libraries and frameworks such as React.js and AngularJS, and is characterized by being able to easily implement advanced interlocking processing for user operations .

3.7 AngularJS

AngularJS makes advanced apps highly readable , such as a routing function that distributes processing by URL and a DI (Dependency injection) function that improves the efficiency of source code development. It is a JavaScript library framework that can be implemented while maintaining.

AngularJS can be used for the development of Web applications that require a lot of communication with databases, such as corporate business systems, and can be implemented steadily and quickly.

4. What kind of portfolio should front-end engineers create?

Source: iSara

If you are a beginner, copying or copying is fine, so it is recommended that you gain experience in deploying at least one website or web application from requirement definition to implementation. If you are looking for a copy target, we recommend copying the homepage of “iSara”, which offers a training course for Nomad engineers in Bangkok.

iSara is a type of homepage called LP (Landing Page. Information for selling products is aggregated in one vertically scrollable page). Since LP production projects are the beginning of front-end engineers, by copying existing LPs, you will be able to acquire the skills necessary to play an active role as a front-end engineer in the future.

Also, if you are interested in developing original applications or if you are also interested in the business side, it is recommended to use Prott or Adobe XD to complete the proposal + prototype.

5. How to determine the suitability of the front end and back end

There are differences in the required qualities between front-end engineers and back-end engineers. Here, I will explain what kind of person is suitable for which IT engineer.

5.1 Front end if you like to make a “look”

The front end is a job that creates a part that is directly visible to the user, and is a job that involves a lot of interaction with web designers. Since I am often in charge of everything from web design to JavaScript coding by myself, it is a perfect job for people who like to think about UI / UX and design, or who originally like to draw pictures .

5.2 Backend if you like to create “mechanisms”

The work of a back-end engineer, unlike the front-end, is not visible to the human eye. Back-end engineers create the “mechanism” that supports Web applications, such as linking with databases, implementing business logic for business applications, and realizing login processing while maintaining robust security. It’s a simple job for those who are interested in appearance, but it’s an interesting job for those who are interested in efficiency and mechanics .

5.3 Front end for those who want to see the execution result immediately and visually

The feature of the application created by the front end is that the execution result can be visually displayed on the browser. Especially for beginners, it is easier to maintain motivation if you can visually check the execution result immediately, so it is recommended that you first gradually learn the necessary skills as an IT engineer while touching the front end. ..

5.4 Back end if you are interested in a wide variety of API integration and function development

Back-end engineers often implement various functions required for the services they develop in the form of Web-API that can be executed by accessing them. It is required to develop various functions such as payment processing and processing to accurately extract only necessary information from a large amount of data. Therefore , back-end engineers are recommended for those who want to develop many systems while utilizing a wide range of technologies .

5.6 If you get lost, it is recommended to start learning from the front end

With the advent of Firebase and BFF in recent years , it is becoming possible for the front end to double as a server-oriented business in normal business. As the number of ” serverless applications ” that do not require a back end is increasing, the role played by front end engineers has become wider than before.

In addition, the knowledge of various areas required by the current front-end goes beyond the mere “front-end technology” in the end. For example, if you become familiar with Docker , a container technology that is used in many situations from the front-end development process to the operation process, you can acquire skills for Linux , which is used as various application servers . Also, if you acquire SSR (Server Side Rendering) technology that streamlines the generation of Web pages to be displayed on the browser, you can learn Node.js technology that works on both the front end and the server side .

The current front end, which has become more widespread in this way, can acquire various techniques that are useful in fields other than the front end, so those who are wondering which field to go to should start learning the front end for the time being. It is recommended to start.

6. Summary

Front-end engineers who are responsible for laying out web applications and implementing functions that are executed on the browser need knowledge of HTML, CSS, JavaScript, etc. By utilizing various JavaScript libraries and frameworks, you can also create apps that provide advanced functions on the browser.

The front end, where you can immediately see the execution results and apply the skills you have learned in other fields, is also recommended for beginners. If you want to become an IT engineer and are wondering where to start learning, we recommend starting with front-end learning.