Frameworks: To be or not to be

When you start a new web project, one of the most important questions you'll face is: which JavaScript framework should you use? Or should you avoid frameworks entirely? Popular choices like React, Angular, and Vue offer diverse solutions, but understanding the trade-offs between them, as well as the decision to use a framework or not, requires a deeper analysis.

Table of contents

• The Evolution of JavaScript Frameworks
• Why Choosing a Framework is Critical
• The Difficulty of Making the Right Choice
• The Trade-Offs: Frameworks as a Double-Edged Sword
• Backend Frameworks vs Frontend Frameworks
• The Vicious Cycle of Framework Adoption
• Conclusion: How to Choose the Right Framework
• Appendix
  • Appendix 1: Redux State Management Example
  • Appendix 2: Spaghetti Code Example
  • Appendix 3: React Example with Overuse of Hooks
  • Appendix 4: Plain JavaScript Example
  • Appendix 5: Effective Implementation of NestJS in Complex Applications
  • Appendix 6: Challenges of Using NestJS for Simple Applications

The Evolution of JavaScript Frameworks

JavaScript frameworks have come a long way since the early 2000s. Originally, JavaScript was primarily used for small interactions on static web pages, but as web applications became more complex, a need for structure and scalability emerged.

The first frameworks, such as jQuery, solved the problem of cross-browser inconsistencies and simplified DOM manipulation. However, as applications grew, new problems arose: managing state, handling routing, and ensuring code maintainability across larger teams. This led to the birth of more opinionated frameworks like Backbone.js, Ember.js, and later, modern frameworks such as Angular, React, and Vue.

Today, frameworks not only provide solutions for state management and component reusability but also offer a design pattern that enforces consistency across large teams.

Why Choosing a Framework is Critical

A JavaScript framework isn't just a tool—it's an ecosystem that defines how you structure your code, how your team collaborates, and how your project evolves over time. Here's why this decision matters so much:

• Scalability and Maintainability: A framework's conventions guide how code is structured, making it easier to scale applications over time.
• Team Efficiency: Frameworks provide well-established patterns and tools, improving developer productivity by reducing ambiguity.
• Avoiding Technical Debt: The wrong framework can lead to technical debt, where early decisions constrain future development.

"The key to making good decisions is not knowledge. It is understanding." — Malcolm Gladwell, Blink: The Power of Thinking Without Thinking

The Difficulty of Making the Right Choice

Making the right framework choice is tough because there’s no perfect answer. Each framework has strengths and weaknesses, and the right choice depends heavily on your specific needs, context, and the trade-offs you're willing to accept.

Understanding the implications of a framework decision goes beyond knowledge of its features—it's about comprehending how your choice will impact your project and team in the long run.

The Trade-Offs: Frameworks as a Double-Edged Sword

"Any fool can write code that a computer can understand. Good programmers write code that humans can understand." — Martin Fowler, Refactoring

Frameworks bring immense value by enforcing consistent patterns and conventions, which are crucial in large teams where different developers work on the same codebase. Without these conventions, codebases can become a chaotic mix of styles and approaches, leading to issues down the line.

For example, using React might require integrating Redux for state management in larger applications, which brings in its own complexity. Conversely, choosing not to use a framework at all, while beneficial in terms of flexibility, can lead to spaghetti code that becomes harder to maintain as your application scales.

References

• Reference Redux state management in Appendix 1
• Explore spaghetti code management in Appendix 2

However, frameworks can also obscure the simplicity of plain JavaScript, especially for less experienced developers. Over-reliance on abstractions may introduce unnecessary complexity, leading to tech debt.

References

• See Appendix 3 for an example of React hooks complexity
• Understand the difference with plain JavaScript in Appendix 4

Backend Frameworks vs Frontend Frameworks

Choosing the right frameworks for both the frontend and backend is essential for the scalability and maintainability of modern web applications. Frontend frameworks like React, Angular, and Vue are crucial for building user interfaces and managing client-side interactions. In contrast, backend frameworks such as NestJS and Express manage business logic, database interactions, and server-side processing, ensuring efficient request handling and system scalability, especially in complex applications.

For individual developers and small teams, backend frameworks accelerate development by providing built-in tools for tasks like request handling and authentication, allowing teams to focus on innovation rather than repetitive coding. For medium to large companies, these frameworks offer significant advantages through their modular architecture and consistency, facilitating collaboration among developers. They also support advanced features such as microservices and middleware integration, which are critical for scaling and maintaining high-traffic applications effectively.

Despite their advantages, backend frameworks can also introduce some drawbacks. For instance, the learning curve can be steep, especially for those new to programming or transitioning from simpler architectures. This complexity might hinder rapid prototyping, particularly for startups or individual developers needing to test ideas quickly. Additionally, using a framework can lead to over-engineering, where the added complexity of the framework is unnecessary for simpler applications. In such cases, the time and resources spent on implementing and maintaining the framework may outweigh the benefits, leading to increased technical debt.

Ultimately, choosing the right backend framework helps to manage technical debt, ensures better team productivity, and enables applications to grow seamlessly as business needs evolve. Companies and individuals should opt for a framework that matches their project scale, team size, and future growth plans, ensuring that the chosen solution aligns with their long-term goals.

References

• Appendix 5: See the Effective Implementation of NestJS in Complex Applications for an example demonstrating how NestJS's modular architecture and built-in features can enhance the development of complex applications.

• Appendix 6: Refer to the Challenges of Using NestJS for Simple Applications for an illustration of how using NestJS for a simple CRUD application introduces unnecessary complexity, making it less suitable compared to lighter alternatives.

The Vicious Cycle of Framework Adoption

When a framework gains momentum, it attracts more libraries, tutorials, and contributions, creating a positive feedback loop. This is especially true for React, which gained massive popularity due to its flexibility and large community.

However, this rapid birth and mutation of frameworks also create a vicious cycle: as new frameworks are introduced, developers may feel pressure to switch or experiment with the latest trend, resulting in framework churn. This can be a major concern, especially for startups and enterprises, as outlined below:

• Startups: Startups often face pressure to ship features quickly, and switching frameworks could mean costly rewrites. The risk is that early-stage startups may adopt a framework only to find it limiting in the future. Stability and ease of hiring for the chosen framework also matter.
• Enterprises: For large enterprises, the stakes are different. Stability and long-term maintainability often outweigh the desire for cutting-edge frameworks. Angular’s complete package and long-term support make it attractive for enterprise use. Enterprises can budget for ongoing maintenance, upgrades, and the training required for complex frameworks.

"The first mover advantage doesn’t go to the first company that launches, it goes to the first company that scales." — Reid Hoffman, Co-founder of LinkedIn

Conclusion: How to Choose the Right Framework

Choosing the right JavaScript framework isn’t just about technical features—it’s about considering long-term maintainability, team productivity, and scalability. React provides flexibility with its large ecosystem, Angular offers a robust, all-in-one solution, and Vue combines simplicity with power.

When making your decision:

• Understand your team’s skill level and the project’s complexity.
  Is your team experienced with a particular framework? Can you afford the ramp-up time if you choose a new one? Angular, for example, has a steep learning curve, while React and Vue are generally more approachable.

  For a small app or startup MVP, a library like React or even vanilla JavaScript can be enough. However, if you're building a large, complex application, a more opinionated framework like Angular might be the better choice, offering built-in tools for routing, state management, and dependency injection.

• Consider the longevity and community support of the framework.
  Community support and ecosystem maturity matter. React has one of the largest communities, which means a wealth of resources, third-party libraries, and best practices are readily available. Vue's community is smaller but growing quickly. Angular, backed by Google, has a very structured community, particularly in enterprise settings.

  Framework churn is a real concern in JavaScript. While React has remained stable over the years, we've seen frameworks like Ember.js lose ground. Make sure the framework you choose is backed by a strong community and has a roadmap for the future.

• Be mindful of how the framework choice may introduce tech debt in the future.
  Choosing the right framework isn't just about solving immediate challenges; it’s about anticipating future complexities. As your application grows, certain frameworks may lock you into specific patterns that become harder to change or scale. Additionally, frequent updates or breaking changes in the framework can force costly refactoring, leading to accumulated tech debt. It's important to weigh the long-term impact on maintainability and flexibility when making a decision.

"Simplicity is the ultimate sophistication." — Leonardo da Vinci

Appendix

Appendix 1: Redux State Management Example

In the Redux example, the state is managed centrally in a clean, scalable way. Each component can access the global state via useSelector, and actions are dispatched to modify the state.

// Defining action types
const ADD_TODO = 'ADD_TODO' // Action type to add a todo item

// Defining the shape of our todo
interface Todo {
  id: number
  text: string
}

// Action creator that creates an action to add a todo item
interface AddTodoAction {
  type: typeof ADD_TODO
  payload: Todo
}

export const addTodo = (todo: Todo): AddTodoAction => ({
  type: ADD_TODO,
  payload: todo,
})

// Initial state is an empty array of todos
const initialState: Todo[] = []

// Reducer function that modifies the state based on action type
const todosReducer = (state = initialState, action: AddTodoAction): Todo[] => {
  switch (action.type) {
    case ADD_TODO:
      // Return a new array with the added todo
      return [...state, action.payload]
    default:
      // If no action matches, return the current state
      return state
  }
}

// Creating the Redux store, which holds the state tree of the application
import { createStore } from 'redux'
const store = createStore(todosReducer)

// React component connected to Redux store
import React, { useState } from 'react'
import { Provider, useDispatch, useSelector } from 'react-redux'
import { RootState } from './store' // Assuming you have a RootState type

const TodoApp: React.FC = () => {
  // Local component state for the new todo's text
  const [todoText, setTodoText] = useState<string>('')

  // Get the list of todos from the Redux store
  const todos = useSelector((state: RootState) => state.todos)

  // Get the dispatch function to send actions to the Redux store
  const dispatch = useDispatch()

  // Function to handle adding a new todo
  const handleAddTodo = () => {
    const newTodo: Todo = { id: Date.now(), text: todoText }
    dispatch(addTodo(newTodo)) // Dispatch an action to add the new todo
    setTodoText('') // Clear the input after adding
  }

  return (
    <div>
      <input value={todoText} onChange={(e) => setTodoText(e.target.value)} />{' '}
      {/* Input for new todo */}
      <button onClick={handleAddTodo}>Add Todo</button>{' '}
      {/* Button to trigger adding the new todo */}
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>{todo.text}</li> // Display the list of todos
        ))}
      </ul>
    </div>
  )
}

// Providing the Redux store to the entire app
import { render } from 'react-dom'

render(
  <Provider store={store}>
    {' '}
    {/* Wrapping the app with Redux Provider to make the store available */}
    <TodoApp />
  </Provider>,
  document.getElementById('root') // Rendering the app in the root element
)

Appendix 2: Spaghetti Code Example

In the spaghetti code example, managing the state directly through DOM manipulation quickly becomes messy, with logic scattered across event listeners and manual DOM updates. As this grows, maintaining and scaling such code would become a nightmare.

let todos: string[] = [] // Array to store the list of todos
const todoInput = document.getElementById('todoInput') as HTMLInputElement // Getting the input element
const todoList = document.getElementById('todoList') as HTMLElement // Getting the element to display the list

// Event listener for the 'Add Todo' button
document.getElementById('addTodoBtn')?.addEventListener('click', function () {
  const todo: string = todoInput.value // Get the value from the input field
  todos.push(todo) // Add the new todo to the array
  todoInput.value = '' // Clear the input field
  updateTodoList() // Update the displayed todo list
})

// Function to update the list of todos displayed in the DOM
function updateTodoList(): void {
  todoList.innerHTML = '' // Clear the current list
  todos.forEach((todo, index) => {
    const li = document.createElement('li') // Create a new list item
    li.innerText = todo // Set the text of the list item to the todo

    // Create a button to remove the todo
    const removeBtn = document.createElement('button')
    removeBtn.innerText = 'Remove'
    removeBtn.addEventListener('click', function () {
      todos.splice(index, 1) // Remove the todo from the array
      updateTodoList() // Update the list in the DOM
    })
    li.appendChild(removeBtn) // Add the remove button to the list item
    todoList.appendChild(li) // Add the list item to the todo list
  })
}

Appendix 3: React Example with Overuse of Hooks

In this React example, while hooks like useState and useEffect abstract state and side effects, overuse of hooks and unnecessary complexity in error handling, loading states, and multiple pieces of logic inside a single component can confuse less experienced developers. It can quickly grow into tech debt because of the excessive layers of abstraction.

import React, { useEffect, useState } from 'react'

// Component with multiple hooks and complex logic
const ComplexComponent: React.FC = () => {
  const [data, setData] = useState<string[]>([]) // State for data
  const [loading, setLoading] = useState<boolean>(true) // State for loading status
  const [error, setError] = useState<string | null>(null) // State for error handling

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('/api/data') // Fetch data from API
        if (!response.ok) {
          throw new Error('Network error') // Handle network error
        }
        const result = await response.json()
        setData(result) // Set the data state
      } catch (err) {
        setError(err.message) // Set error state if fetch fails
      } finally {
        setLoading(false) // Set loading to false after fetch is complete
      }
    }

    fetchData() // Call the async function
  }, []) // Empty dependency array means this effect runs once

  if (loading) return <div>Loading...</div> // Show loading state
  if (error) return <div>Error: {error}</div> // Show error state if an error occurs

  return (
    <div>
      <h2>Data List</h2>
      <ul>
        {data.map((item, index) => (
          <li key={index}>{item}</li> // Display the fetched data
        ))}
      </ul>
    </div>
  )
}

Appendix 4: Plain JavaScript Example

In this plain JavaScript example, while we lack the reactivity and modern tools of frameworks, the code is more straightforward and explicit. It directly handles the data fetching and DOM updates without adding unnecessary layers of abstraction, making it easier for less experienced developers to understand and maintain. However, in large applications, this approach can become unwieldy without the structure a framework offers.

const todoList = document.getElementById('todoList') as HTMLElement // Get the list element

// Function to fetch data using XMLHttpRequest
function fetchData(): void {
  const xhr = new XMLHttpRequest() // Create a new XMLHttpRequest object
  xhr.open('GET', '/api/data', true) // Open a GET request

  xhr.onload = function () {
    if (xhr.status >= 200 && xhr.status < 300) {
      const data: string[] = JSON.parse(xhr.responseText) // Parse the response data
      displayData(data) // Display the fetched data
    } else {
      console.error('Network error') // Handle network error
    }
  }

  xhr.onerror = function () {
    console.error('Request failed') // Handle request failure
  }

  xhr.send() // Send the request
}

// Function to display the data in the DOM
function displayData(data: string[]): void {
  todoList.innerHTML = '' // Clear the current list
  data.forEach((item) => {
    const li = document.createElement('li') // Create a new list item
    li.textContent = item // Set the text content of the list item
    todoList.appendChild(li) // Append the list item to the todo list
  })
}

fetchData() // Call the fetchData function to initiate the data fetch

Appendix 5: Effective Implementation of NestJS in Complex Applications

In this example, NestJS proves advantageous due to its modular architecture, dependency injection, and built-in support for features like routing, middleware, and authentication. These features can drastically speed up the development of enterprise-level applications, making it easier to manage complex codebases.

// Appendix 5: Advantageous Use of NestJS - app.module.ts
import { Module } from '@nestjs/common'
import { UsersModule } from './users/users.module'
import { AuthModule } from './auth/auth.module'

// Main application module that imports feature modules
@Module({
  imports: [UsersModule, AuthModule], // NestJS allows for a modular structure
})
export class AppModule {}

// Appendix 5: Advantageous Use of NestJS - users.module.ts
import { Module } from '@nestjs/common'
import { UsersService } from './users.service'
import { UsersController } from './users.controller'

// Users module that encapsulates user-related features
@Module({
  providers: [UsersService], // Provides the UsersService for dependency injection
  controllers: [UsersController], // Registers the UsersController to handle user routes
})
export class UsersModule {}

// Appendix 5: Advantageous Use of NestJS - auth.module.ts
import { Module } from '@nestjs/common'
import { AuthService } from './auth.service'
import { JwtModule } from '@nestjs/jwt'

// Authentication module that manages user authentication and authorization
@Module({
  imports: [
    JwtModule.register({
      secret: 'secretKey', // Configuration for JWT token generation
    }),
  ],
  providers: [AuthService], // Provides the AuthService for authentication logic
})
export class AuthModule {}

Appendix 6: Challenges of Using NestJS for Simple Applications

In this example, we illustrate a scenario where using NestJS is disadvantageous for a simple CRUD application. The overhead introduced by its modular structure and extensive features can add unnecessary complexity for small projects. A lightweight framework might be a better fit in this case, as it allows for quicker development without the boilerplate required by NestJS.

// Appendix 6: Disadvantageous Use of NestJS - simple.controller.ts
import { Controller, Get } from '@nestjs/common'

// Simple controller that handles basic routes
@Controller('greet')
export class SimpleController {
  @Get() // GET endpoint to greet the user
  greet(): string {
    return 'Hello!' // Response for the greet endpoint
  }
}

// Appendix 6: Disadvantageous Use of NestJS - simple.module.ts
import { Module } from '@nestjs/common'
import { SimpleController } from './simple.controller'

// Basic module for the simple controller
@Module({
  controllers: [SimpleController], // Registers the SimpleController
})
export class SimpleModule {}

// Appendix 6: Disadvantageous Use of NestJS - main.ts
import { NestFactory } from '@nestjs/core'
import { SimpleModule } from './simple.module'

// Bootstrap function to start the NestJS application
async function bootstrap() {
  const app = await NestFactory.create(SimpleModule) // Create an instance of the SimpleModule
  await app.listen(3000) // Start the application on port 3000
}

bootstrap()