Front-end Development: A necessity or redundant stress?

This article is basically an argument on the importance of front-end development in today’s development domain. It is partly influenced by Vernon Joyce’s article on dev.to

I wanted to know more about the process of applying for GSoC (an open-source competition in which the student has to contribute to live projects, conducted every year by Google). I was learning Android App development back then. So I went to meet one of my batch mates, who had completed GSoC successfully on an Android-based project. When asked about the field in which I wanted to contribute, I told him I was more interested in “front-end stuff”. He looked at me with a suspicious look for a while, and then explained, and I quote, “ Front-end is cool and all, but the real logic of the program lies in the back-end side”. This made me wonder about the issue. Did he actually have a valid point?

How is development classified?

Before we dive into technical terms, let us first establish the ground here.

Development can be broken down into two broad categories, depending on which “side” the development is taking place:

• Front-end development: As the name suggests, the building of a part of the project which the user sees and interacts with. It consists of designing and developing the user interface and making the user experience more enjoyable.
• Back-end development: As described earlier, the “logic” of the program goes here. The constituent objects and methods are created here, which are indirectly interacted with by the user.

There is another category of developers known as full-stack developers, who are basically all-in-one fellas. They build the front-end as well as back-end stuff on their own.

We will, however, focus our discussion on the front-end development in this article.

What does front-end development consist of?

When we talk about front-end development, what exactly does it imply? Well, the precise definition of a front-end developer varies from organization to organization. Talking about web development specifically, front-end is not just limited to knowing HTML, CSS, and vanilla JavaScript. It has evolved as a domain over the years. The existence of different libraries and frameworks like React and Angular makes the developer’s job easier, but that creates a pressure of understanding various programming concepts like object-oriented programming, functional programming, and hosting.

The same goes for mobile app development too. When making cross-platform compatible applications, the developer cannot be using just one technology, however, there are methods to create hybrid applications.

So, we can definitely conclude that front-end development is not just about design. There is much more to it.

Is front-end development really that important?

I have seen many developers getting stuck at intermediate CSS and after much frustration and hair-pulling, skip the front-end side and start learning a back-end technology (I don’t blame them, CSS can be tricky sometimes). So, in this age of advanced computing concepts like machine learning and data science, should we even focus on client-side development at all? Some of the few reasons to do so are stated below:

• User experience: Your code might as well have the most optimized algorithms working to provide a solution, but a user sees the front-end side first. As such, there comes a dire requirement to focus on client interaction with your product. How the user interacts with your program is a big factor in your product’s success. Nobody likes a website or an app with a crappy UI and even a crappier UX.
• Generating business revenue: Poorly written front-end code can cost businesses severely. A very popular price comparison website, Shopzilla found that their conversion-rate increased by 5–10 percent by increasing the performance of their website by 5 seconds. The E-commerce giant Amazon observed that a 100-millisecond delay cost them 1 percent of sales. Hence, it comes as no surprise when tech giants use user-centric methods to influence their products. A good design means good business, indeed.
• Successful Branding: Did you ever visit a company’s website and made certain assumptions about the company’s ethics and principles? Even if you don’t think so, you are probably doing it. Why? Well, it tells a lot about the company. Their business logo, use of colors, design aspects all contribute to a well-planned branding. This branding is essential for customers to associate with a business. It creates the recognition and overall impression of the company. How Apple’s website is designed shows the elegance and simplicity of its services. A web developer’s portfolio website tells a lot about their skill set, take a look at Robby Leonardi’s website. It shows how good he is in his job, especially with graphics and interactivity.
• Inculcate trust in your credibility: Imagine that you are visiting an e-commerce website. You are searching for the thing that you want to buy. You come across the link to that product. You click it. And bam! It shows a 404 error. That’s okay, right? So you go to the other product’s link. Fortunately, it’s working. Now, you notice that its image cannot be loaded and shows a small thumbnail, something like this:

So, do you make the purchase off that site? I wouldn’t. Hence, it is quite important to show what you, as a company, a service, stand for. Building trust among others increases your credibility, which helps in user retention, which again ensures good business.

Why are front-end frameworks gaining popularity?

As explained earlier, front-end web development is not only about knowing HTML, CSS, and JavaScript; there are so many frameworks and libraries for different purposes. Let’s briefly understand how these frameworks work differently than the regular HTML and CSS, and why they are getting so popular among the present developer community.

Most of the popular frameworks and libraries work on similar fundamentals. Some of the reasons for their increasing usage are:

1. Reusable UI components: Do you ever wonder how the parts of a website would have been coded, when there are so many similar ones? Do the developer make one part and copy-paste the code snippet to make the others and just change the data? In scenarios like this, the frameworks and libraries come into the picture. React, a flexible and robust JavaScript library created and maintained by Facebook, helps the developer to create reusable UI components. These components help the developer to declare their front-end model effectively. A component can further have sub-components. This avoids redundant coding. Let us see an example. We need to create a simple, static to-do list, that only displays the list items. In HTML-CSS, we would have done something like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Todo List</title>
  </head>
  <body>
    <ul id="list">
       <li class="listItem">Todo Item 1</li>
       <li class="listItem">Todo Item 2</li>
       <li class="listItem">Todo Item 3</li>
    </ul>
  </body>
</html>

In React, we would first make an HTML file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Then we would start making components, each component in a separate js file. Starting from the smallest component, the todo item would look like:

import React from "react";
import ReactDOM from "react-dom";
function TodoItem() {
 return(
  <div className="todoItems">
   <input type="checkbox"/>
   <p>Placeholder item</p>
  </div>
 ); 
}
export default TodoItem;

Then we would make app.js, which uses todoItem component.

import React, { Component } from 'react';
import './App.css';
import TodoItem from "./TodoItem.js";
function App() {
 return(
  <div className="todoList">
   <TodoItem/>
   <TodoItem/>
   <TodoItem/>
  </div>
 );
}
export default App;

And finally, the index.js, which renders on the “root” element of the webpage.

import React from 'react';
import ReactDOM from 'react-dom';
import App from "./App.js";
import "./index.css"
ReactDOM.render(<App/>, document.getElementById('root'));

This might look like a long process, but this is a better way, at least in terms of re-usability.

So, we see that a web page can be divided into various components, and each component can be used independently. A set of properties, called props, is passed to the component in their HTML tags, and the components cannot directly mutate these props, but we can use call back functions which make the necessary changes.

2. Different rendering techniques: Different technologies use different rendering methods, which creates all the difference in the world. A page made using HTML-CSS does not render as readily as a page made in React or Angular (a front-end framework developed by Google) will. So the performance of the product depends on what type of technologies we are using to make that product.

HTML uses DOM (document object model). It represents a webpage by its logical structure and the way a document is interpreted and manipulated. Whenever content is changed in one element (through an API call or some other reason), the entire page is reloaded. React significantly improves on it, as it uses virtual DOM. The special feature of this type of DOM is that, when an element is altered, only that component will be reloaded which thus decreases the overall loading time of the page.

3. Saves time: Let’s be honest. We don’t want to stick to a computer screen for a long time, just to implement a minor feature. Using frameworks helps the developer to save his time, which would otherwise be too time-consuming, if at all possible. These frameworks have a really good online community, so you can search for your problems online. Most probably, someone must have been stuck where you are currently.

4. Better speed: As discussed earlier, some technologies are flexible enough to make the application more efficient. The frameworks are developed in such a way that the web apps using these run faster and smoother.

5. Web apps with dynamic content are usually developed using frameworks like React and Angular. Some of the famous services using the different frameworks are:

• Netflix
• Yahoo!
• Facebook, WhatsApp, and Instagram
• Khan Academy
• Uber
• Nike
• Google
• PayPal
• Dropbox
• Airbnb

The Conclusion

As much you like it or not, the front-end does matter for the product’s usability. And talking about the future of front-end development, then it should not be a limiting factor. Enterprises have started giving special attention to the user interaction with their products and will continue to do so.

Image courtesy: Stack Overflow

Image courtesy: Stack Overflow

As shown in the information graphs shown above, the annual developer survey conducted by Stack Overflow shows that among the most popular languages in the market for professional developers, JavaScript, HTML and CSS top the list. All of them are used in front-end development. Another interesting fact that we can observe in the Industry needs is that 16.3% need is for web development and design related profiles. So, it is safe to assume that front-end development does have a potential market in the current scenario as well as for the near future.

So, if you really like making cool UIs and user experience better, front-end is the way to go.