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

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

by Yasir Aslam
0 comment

In the web application development site, the terms “front end” and “back end” are often heard. This time, I will introduce these two from the viewpoint of role and future potential.

table of contents

  • 1. What is the difference between the roles of front-end engineer and back-end engineer?
  • 2. [Technology] Difference between front end and back end
  • 3. [Annual income / carrier edition] Difference between front end and back end
  • 4. Future potential of front-end engineers and back-end engineers
  • 5. Frequently Asked Questions about Front Ends and Back Ends
  • 6. Summary

1. What is the difference between the roles of front-end engineer and back-end engineer?

“Front end” and “back end” are terms that are distinguished by the role of an engineer at the development site. I will introduce what kind of role each of them plays.

1.1 What is the front end?

The ” front end ” is an element of a web application / website that directly exchanges information with the user. Specifically, it refers to the ” visual part that the user can see ” such as the TOP page that you see when you open a shopping site, the form for entering characters, and the part that clicks a button .

Controlling visual effects is a typical task of front-end engineers. Taking an EC site as an example, the screen configuration of the product search page is in the front-end field.

 

1.1.1 What is a front-end engineer?

The main role of the front-end engineer is to create an appearance with HTML / CSS and give movement to the entire page with JavaScript according to the design of the web designer .

In particular, JavaScript is an important element, and various JavaScript frameworks such as the following are heavily used in the development field.

  • Angular
  • React
  • Vue.js

React, for example, is a JavaScript library that allows for fast loading. React is useful in many development sites as programs tend to become more complex because even complex code is easier to read.

In addition to this, new technologies are appearing one after another, and because the fields are greatly affected by changes in trends, front-end engineers are required to catch up with changes in the world .

1.2 What is a back end?

” Back end ” refers to processing that is invisible to the user, such as data processing of the content entered by the user, saving to the database, and output of search results . Taking an EC site as an example, the back-end fields include extracting product information according to keywords entered by the user on the product search page and processing credit card information related to payment.

 

1.2.1 What is a back end engineer?

Back-end engineers are in charge of infrastructure that is invisible to users , such as server construction and database construction . In addition, the back-end engineer is in charge of error monitoring and correction after the service release, and response to the increase in access.

The main languages ​​used by back-end engineers include Ruby , PHP , and Python . Since the real-time Web has become popular in recent years, Node.js , which is good at linking with the front end, Go , which is good at parallel processing, and Elixir , which can use Erlang with high robustness, are also attracting attention.

2. [Technology] Difference between front end and back end

Next, I will introduce the differences between the front end and the back end in terms of technology, such as the framework and language used.

2.1 Languages ​​and frameworks used by front-end engineers

As mentioned earlier, the languages ​​used by front-end engineers include HTML, CSS, and JavaScript. It is common to configure the page framework with HTML / CSS and move it with JavaScript.

Also, the main JavaScript frameworks are Angular, React, Vue.js, etc. Both Angular and Vue.js are frameworks that are good at developing SPA (Single Page Application) that integrates all functions in a single page by making use of JavaScript functions . Since there is no screen transition, the user does not have to wait for the screen to change for each operation, and it is possible to develop a web application that is less stressful for the user.
Below is a summary of version information and examples of each framework. The version information is as of October 2020.

◆ Angular

newest version 10.1.3
URL https://angular.jp/
Typical adoption cases NRI Netcom

See: Latest Trends in Web System Development | NRI Netcom

 

◆ Vue.js

newest version 2.6.12
URL https://jp.vuejs.org/index.html
Typical adoption cases note

Reference: The story of rebuilding the front end of note with Nuxt.js (Tsuyoshi Fukui)

2.2 Languages ​​and frameworks used by back-end engineers

Back-end engineers work with server-side languages ​​such as Ruby, PHP, Python, and Java. Typical examples of frameworks are Ruby on Rails of Ruby and Spring Boot of Java .

In many cases , Ruby , which is a dynamic language, is used in venture companies that demand development efficiency and speed, and Java , which is a static language, is used in projects that require robustness .
Below is a summary of version information and examples of each framework. The version information is as of October 2020.

◆ Ruby on Rails

newest version 6.0.3.3
URL https://rubyonrails.org/
Typical adoption cases eating log

Reference: “Tabelog.com”, Ruby on Rails adopted, full renewal-the first large-scale site in Japan to be completely rewritten | Kakaku.com Co., Ltd.

 

◆ Spring Boot

newest version 2.3.4
URL https://spring.io/projects/spring-boot
Typical adoption cases LINE Notify

See: Utilizing spring framework in Line

3. [Annual income / carrier edition] Difference between front end and back end

This time, I will introduce the differences between front-end engineers and back-end engineers in terms of annual income and career path.

3.1 Front engineer’s annual income / career path

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

Even if you are a front-end engineer, you can think of three patterns of career depending on what you have strengths in .

If you have strengths in ” technology “, you can also learn server-side technology and become a full-stack engineer . In recent years, with the advent of Firebase and BFF, it is easy to advance your career as a full stack.

For those who have strengths in ” design “, one option is to become an engineer who can also serve as a web designer .

For those who have strengths in ” management “, in addition to the front end, it will be easier to pave the way by doing business-oriented work such as access analysis and advertising operation work .

Reference: Markup engineer / front engineer (average annual income ranking by occupation) | My Navi Agent

3.2 Annual income and career path of back-end engineers

According to the data of My Navi Agent, the average annual income of the server engineer is 4.65 million yen , and the average annual income of the system engineer / programmer is 4.43 million yen .

There are many options for back-end engineer career paths, including IT consulting, PM, and full stack.

Many companies are chronically in short supply of human resources because they are jobs that require a comprehensive understanding of the overall structure of Web services, including infrastructure and database design. Therefore, the demand for back-end engineers is high, and it can be said that it is easy to aim for career advancement .

Reference: Server engineer (average annual income ranking by occupation) | My Navi Agent
Reference: System engineer / programmer (average annual income ranking by occupation) | My Navi Agent

4. Future potential of front-end engineers and back-end engineers

With the development of Web technology, the required engineer abilities will change. Here, we will introduce the future potential of front-end engineers and back-end engineers, taking into account the recent trends in Web technology.

4.1 Future of front-end engineers

With the advent of platforms such as BFF and Firebase , it is becoming possible for the front end to handle the infrastructure surroundings, which used to be the role of a back end engineer . It has the potential to spread back-end-free development, which is a technically interesting area.

On the other hand, this also means “less language to remember”. And there is a high possibility that overseas outsourcing will progress for coders, etc., and it will be difficult to receive orders for work with simple coding that was previously handled by front-end engineers.

It is important for front-end engineers to keep up with the latest technology .

 

4.1.1 Introducing BFF

BFF is a back end server for the front end . Specifically, it refers to a server that calls APIs or generates HTML for the front end.

BFF, which is often installed between the reverse proxy and the back-end server, is responsible for building pages and bridging input information for both.

The background to the birth of BFF is that the front end has to access across multiple APIs to acquire data, and the front end processing has become complicated. Since BFF manages multiple services, the APIs accessed by the front end are reduced, and the code on the front end side can be kept simple.

 

4.1.2 With the spread of Firebase, development that does not require a server-side back end will spread

Firebase is a web application development platform operated by Google . It has been used in many applications in recent years as a service that provides back-end functions such as sending and receiving messages, managing user IDs, and sharing images. We are also good at real-time synchronization, which can significantly reduce server-side development costs .

In addition, Firebase allows front-end engineers to focus on client-side development, which can be expected to reduce the burden on engineers and save resources .

In this way, attempts at back-end-free development are expanding. However, there are still issues with security and maintainability. It should be noted that front-end development without complete server-side knowledge is beyond personal development.

 

4.1.3 Plus α technology is required for direction, marketing, design, etc.

While the fields that front-end engineers are in charge of are interesting as they continue to innovate, simple coding alone does not require as much expertise as the server side. In the future, coder operations may generally be outsourced to overseas outsourcing and crowdsourcing .

And if NoCode technology is further advanced, it will be possible for the director to make one-stop if it is about LP. It will be important for front-end engineers to acquire plus-alpha skills such as direction and marketing in the future.

4.2 Future of back-end engineers

Platforms such as Firebase that provide an environment on the back end side have become widespread, and development that does not require a back end is progressing, but that does not mean that the work of back end engineers will be eliminated.

For example, adopting Firebase for medium to large-scale projects still requires back-end knowledge such as security. Depending on the nature of the project, back-end engineer skills will continue to be essential .

 

4.2.1 Server-side / back-end knowledge remains very important

Even if serverless is promoted in the future, not all data of Web services will be managed in the cloud. The current situation is that issues such as security related to data exchange between clouds and lack of IT skills for building infrastructure in the cloud are highlighted.

As a result, many companies have recently returned to an on-premises environment for some applications . According to a survey on cloud adoption trends conducted by the American cloud computing company Nutanix in 2019 (Nutanix Enterprise Cloud Index 2019), about 73% of companies that introduced the cloud returned to operation in an on-premises environment after the introduction of the cloud. The results of the survey have been announced.

From these trends, it is expected that server-side knowledge will continue to be a very important position in the future .

See also: Nutanix Enterprise Cloud Index 2019

 

4.2.2 Continuous demand for medium to large service

Backends still play a huge role in projects that require robustness, companies that haven’t moved to the cloud, and security-focused projects.

Since the infrastructure part is particularly required to have a secure mechanism, it can be said that it is a job type that has stable needs over the medium to long term for medium to large scale projects .

5. Frequently Asked Questions about Front Ends and Back Ends

We have introduced the front end and back end from various perspectives. From now on, we will answer frequently asked questions about the front end and back end in a Q & A format.

5.1 What are some examples of applications developed without a back end engineer?

Cookpad’s ” Komerco ” CtoC EC app was developed using Firebase without a back-end engineer. The developers recall that the project had both good and bad sides.

The good thing is that we no longer have to interact with server-side engineers, which speeds up development . Development efficiency has improved because front-end engineers can concentrate on the work to be done.

On the other hand, the bad points are database design and security . Due to the specifications of Firebase, depending on the operation, even data that should be kept private may be easily displayed. He felt that he had to handle it carefully because it was easy to use.

Reference: App development without back-end engineer in Firebase Benefits and challenges experienced by Cookpad | Engineer Hub

5.2 I’m good at the front end, but I’m not good at server-side technology. What should i learn

After learning about JavaScript such as Angular and React, it is recommended to learn Node.js. Since Node.js can write the server side in JavaScript, the learning cost is lower than re-learning another language for the server side.

You can also learn TypeScript , which is an extension of JavaScript so that it can be handled as a statically typed language, to deepen your understanding of the handling of types required for server-side development.

If you’re also interested in serverless development, it’s a good idea to attend study sessions and learn about Firebase .

5.3 Good at back end but not good at front technology. What should i learn

It depends on what you are not good at. If you’re not good at writing HTML / CSS, you might want to learn Bootstrap . If you’re not good at complex coding in React, consider deploying Vue.js.

For those who want to learn a wide range of front-end areas from the basics, it is also recommended to carefully learn the native JavaScript grammar from the language structure without using frameworks or libraries . By fundamentally understanding the peculiarities of JavaScript in which even functions are treated as objects, you can develop application skills that are useful when using any framework.

5.4 Which is better to learn, front end or back end?

We encourage you to study your area of ​​interest .

  • front end

Recommended for those who are interested in dynamically creating parts that are visible to the user

  • Back end

Recommended for those who are interested in keeping an eye on the big picture of a web service and considering the configuration and extensibility of the service.

If you’re still wondering, it’s a good idea to get a better understanding of the front end, as serverless technology is likely to evolve further in the future.

6. Summary

As the system becomes more complex, the boundaries between the front end and the back end are becoming blurry. However, neither will disappear in the future. Both are indispensable fields in the field of application development, and only when both sides play a solid role will a safe and highly convenient application be completed.

It can be said that it is important for application development to understand each role and proceed with the project while coordinating diligently.

You may also like

Leave a Comment