Unraveling the Art of Code Abstraction in Front-End Development

Photo by Hal Gatewood on Unsplash

Unraveling the Art of Code Abstraction in Front-End Development

Jul 14, 2023

Abstraction is a concept we often talk about in software development. It's a principle that programmers, especially those involved in front-end development, need to thoroughly grasp. But before we dive into it, let's take a moment to demystify what abstraction means in this context.

At its core, abstraction is about creating a simplified version of something complex. In programming, it's about creating a user-friendly interface that hides the intricate details of the underlying code implementation. Just like an abstract painting distills the essence of its subject into basic shapes and colors, abstraction in code distills complex functionalities into simpler, reusable components.

Interfaces and Abstract Classes: Tools of Abstraction

In software design, we primarily deal with two types of abstractions: interface-based abstraction, which is akin to absolute abstraction, and abstract class-based abstraction, which we could refer to as contour or semi-abstraction.

Interface-Based Abstraction: The Blueprint

In the world of front-end development, the purest form of abstraction we encounter is the interface. An interface provides a blueprint for what a class should look like and how it should behave. However, in traditional front-end development modes, interface-based abstractions aren't common.

Abstract Class-Based Abstraction: The Building Blocks

Then we have abstract classes. An abstract class provides a "basic shelf" - it sets the tone for what other classes should do but doesn't fully define how they should do it. Think of an abstract class as the backbone of a dinosaur in a museum, waiting for the rest of the bones to be filled in to complete the skeleton.

For instance, when TypeScript entered the scene, it brought along true abstract classes. Here's an example:

abstract class Some {
    abstract stay(): void
}

In this case, Some is an abstract class that can't be instantiated with a 'new' keyword. It can only be extended by other classes. Those classes must then implement the stay method.

Abstracting Business Elements: Knowing What to Abstract and What Not

Abstraction is not just limited to defining interfaces and creating abstract classes. It's also about understanding and deciding what elements in your business logic need to be abstracted and which ones don't.

Surprisingly, in front-end development, we often abstract business-level details using abstract classes or even simple classes rather than interfaces. The real deal here is to abstract the business logic rather than the technology behind it.

All front-end tasks, except for user interface and interaction, can be modeled and abstracted. For instance, data requests, data manipulation, object modeling – all these can be broken down into reusable chunks of code that can be borrowed whenever needed.

The trickiest part, however, is abstracting the user interface and interaction.

Abstraction of Interaction

Interaction is a dynamic element – it's unpredictable and can trigger changes in the user interface. Hence, when abstracting interaction, it's crucial to leave room for interface alterations. To put it simply, abstract the parts that stay the same, and leave the dynamic parts for the specific views.

Consider the following abstract class:

abstract class SomeView extends View { 
  @inject(SomeController) 
  controller: SomeController 

  abstract confirm(message: string, onOk: Function): void 

  deleteItem(id) { 
    this.confirm('Are you sure to delete?', () => { 
      // Execute delete 
    }) 
  } 
}

Here, SomeView leaves a placeholder for the confirm method because it's a part of the interaction that's going to change depending on the specific view.

Abstraction of User Interface

Then comes the user interface Abstraction. The user interface is the ultimate frontier of personalization and variability. Interfaces differ drastically across platforms like web, mobile, tablets, and even amongst these, across various screen sizes. It's also the most user-facing part, meaning it's directly influenced by user preferences and behaviors, making it a challenging aspect to abstract.

How do we tackle it? One answer lies in the realm of business components. Think of business components as the Lego blocks of your interface. You design and develop these blocks once, and then you put them together in different configurations to create unique interfaces.

Let's visualize this concept with an example:

<Page> 
  <ProjectBasicInfo /> 
  <ProjectMembers /> 
  <ProjectDeals /> 
  <Tabs> 
    <CompanyInfo /> 
    <FinancingInfo /> 
  </Tabs> 
</Page>

In this example, ProjectBasicInfo, ProjectMembers, ProjectDeals, CompanyInfo, and FinancingInfo are all business components. They encapsulate specific business functionalities and present them in a well-defined interface. When creating a page, you can pick and choose these components, arrange them as needed, and voila – you have an abstracted interface.

This strategy doesn't just streamline your development process by reusing components, but it also abstracts away the complexity of different interfaces. Each component is responsible for managing its intricacies, leaving you with a clean, understandable, and maintainable codebase.

But it's not all sunshine and rainbows. Implementing this strategy requires careful planning and design. Your components need to be robust and flexible enough to fit into various interface configurations without breaking or causing inconsistencies.

The Art of Balancing Abstraction and Concreteness

The world of front-end code abstraction is fascinating, and it can significantly enhance your code's manageability, scalability, and efficiency. But it's also a careful balancing act. Abstraction can reduce the complexity of individual components, but it can make the overall system more complicated if not managed well.

The key lies in understanding the specific needs of your project and your team's capabilities. Only then can you create a robust, flexible, and efficient system that leverages the power of abstraction while still being grounded in the concrete requirements of your business. It's an art – an art that takes time and experience to master but one that can transform the way you approach front-end development.

Anurag Deep

Logical by Mind, Creative by Heart