Draft version

What is the problem?

In modern frontend development, UI and code reusability are critical for building scalable and maintainable applications. Consider this scenario: the application you are working on requires a user details search bar feature that triggers a search API call to the /users endpoint. But very soon you see the need to build another search bar for a different feature that searches through the /products endpoint. How do you handle this? This problem is magnified when you consider even smaller parts of frontend applications like buttons, cards, modals, toasts, lists etc, and especially when you have multiple teams working on the same application.

There are various parts or types of code that can be reused across different parts of the application. These include:

• Presentational UI code
• Business logic
• State management code
• API calls
• Utility functions

What is the solution?

The more generic solutions in software development are:

• Using libraries and modularization to share code
• Classes and Inheritance for code reuse
• Generics
• Decorators
• Aspect-oriented programming

The frontend engineering community has come up with a few solutions that are more specific to frontend development.

• Component-based architectures
• Higher-order components
• Concept of lifecycle hooks
• Services and Dependency Injection
• Context and Providers

Lets look at these solutions in the context of Angular, React and Vue:

Libraries and modularization:

These are a common solution across all frameworks.

React

React emphasizes building reusable UI components through its component-based architecture 7. React components are self-contained blocks of code that manage and render parts of the user interface 1.

Code Reusability

• Functional Components and Hooks: React Hooks allow developers to reuse stateful logic across multiple components 4. Custom hooks encapsulate logic into reusable functions, reducing code duplication and improving organization 4.

  const useFetch = (url) => {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
  
    useEffect(() => {
      const fetchData = async () => {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
        setLoading(false);
      };
      fetchData();
    }, [url]);
  
    return { data, loading };
  };
  

• Higher-Order Components (HOCs): HOCs are functions that take a component as an argument and return a new component with added functionality 4. They are useful for reusing logic across multiple components.

UI Reusability

• Component Composition: React encourages breaking down the UI into smaller, reusable components that can be composed together to build complex interfaces 4.
• Best Practices:
  • Break down the UI into reusable components 4.
  • Use PropTypes to define the expected data types for props 4.
  • Separate container components (managing data) from presentational components (handling UI rendering) 4.

Angular

Angular promotes code reusability through components, directives, and services 9.

Code Reusability

• Services: Angular services are singleton objects that can be injected into multiple components, providing a way to share data and logic [5]9.
• ng-template: Angular's ngTemplateOutlet can insert a common template in various sections of a view, allowing customization from the parent component while reusing code from the child component 2.

UI Reusability

• Components: Angular components are reusable building blocks with their own templates and logic [5]9.
• Content Projection: Content projection allows passing a template to a reusable component, making it more versatile 5.

  import { Input } from '@angular/core';
  import { Component, TemplateRef } from '@angular/core';
  
  @Component({
    selector: 'app-page-list',
    templateUrl: '
  ',
  })
  class PageList{
    @Input() temRef:TemplateRef ;
  }
  

• Presentation Components: These components are designed to be reusable, receiving data as input and rendering UI without any business logic 5.

Angular Material

The Angular Material library provides a set of pre-built, reusable UI components that adhere to Material Design principles.

Vue

Vue.js emphasizes reusability via components and mixins.

Code Reusability

• Mixins: Vue Mixins are a flexible way to distribute reusable functionalities for Vue components 3. However, with the introduction of Composition API, they are less commonly used now.
• Composition API: Composition API allows developers to extract component logic into reusable functions 3.

UI Reusability

• Single-File Components: Vue's single-file components (SFCs) encapsulate the template, script, and styles, promoting modularity and reusability 6.
• Slots: Vue slots are placeholders in a component's template that can be filled with content from a parent component, allowing for highly customizable and reusable components 6.
• Best Practices:
  • Keep components simple and focused on a single task 3.
  • Use props to pass data into components 6.

Comparative Summary

Conclusion

React, Angular, and Vue offer powerful tools and patterns for achieving UI and code reusability. React excels with its flexible component composition and hooks, Angular with its structured approach and comprehensive framework, and Vue with its simplicity and ease of use. The choice of framework often depends on the specific requirements of the project, team expertise, and ecosystem preferences.