Scaling and Optimizing Frontend(React) Applications
Conference: iJS Munich.

by Ahmed Megahd

Challenges of Scaling React

1

Increasing Application Complexity

2

Maintaining Performance and Speed

3

Managing Growing Codebases and Teams

4

Handling Larger Data Sets and Heavy Data Operations
As React applications grow, developers face several key challenges:
  • Increasing application complexity as more features are added
  • Maintaining performance and speed as the UI becomes more complex
  • Managing growing codebases and teams, which can lead to maintainability issues
  • Handling larger data sets and heavy data operations efficiently
Session Goals and Outline

1

Session Goals
Understand how to structure and scale React applications efficiently, learn performance optimization techniques, explore efficient state management and data handling, and discuss CI/CD and best practices for maintainable, scalable code.

2

Outline
Architecture, State Management, Performance Optimization, Data Handling, Meta-Frameworks (Next.js, Astro, Remix), CI/CD Pipelines, Best Practices & Future-Proofing, Conclusion & Q&A
Designing a Scalable Architecture
Feature-Based Structure
Organize code by feature for clarity.
Domain-Driven Design
Map business logic to features.
Example Structure
Components, features, utils folders.
Modularity and Component-Driven Development
1
Reusable Components
Build small, reusable UI elements.
2
Hooks & Composition
Share logic efficiently.
3
Single Responsibility
Focus components on one task.
Strategies for Managing Technical Debt

1

Refactor Code Incrementally
Improve code gradually to reduce technical debt.

2

Update Documentation Regularly
Maintain up-to-date documentation for better code understanding.

3

Enhance Architecture Continuously
Regularly review and enhance architecture for long-term scalability.

4

Utilize Code Consistency Tools
Implement ESLint and Prettier for consistent code formatting.
Simplifying State Management
1
UseState & UseContext
For basic state needs.
2
Introduce Complexity
Use Redux when needed.
3
Local State
Keep it close to usage.
Optimizing React Rendering

1

Efficient Virtual DOM
Understanding how React's virtual DOM and diffing algorithm streamline UI updates.

2

State Impact on Rendering
Learn the effects of component state changes on rendering performance in React applications.

3

Performance Profiling
Utilize React Profiler to pinpoint performance bottlenecks and optimize rendering efficiency.
Code Splitting & Lazy Loading
1
Code Splitting
Reduce initial bundle size.
2
Lazy Loading
Load components as needed.
3
Example
Lazy loading routes with React.lazy.
Memoization Techniques and Avoiding Rerenders

React.memo
Prevent unnecessary updates to components.

useMemo & useCallback
Optimize expensive computations and function dependencies.
const UserCard = React.memo(({ user }) => {
  console.log("Rendering UserCard");
  return <div>{user.name}</div>;
});

function ParentComponent({ user }) {
  return <UserCard user={user} />;
}

const filteredItems = useMemo(() => {
  return items.filter(item => item.category === selectedCategory);
}, [items, selectedCategory]);

import { useCallback } from "react";

function ParentComponent() {
  const handleClick = useCallback(() => {
    console.log("Button clicked");
  }, []);

  return <Button onClick={handleClick} />;
}
Efficient Data Fetching
React Query & SWR
For caching and updates.
Minimize Re-fetching
Use cached data wisely.
//React Query is a library that helps manage, cache, and synchronize data fetching

import { useQuery } from 'react-query';
import axios from 'axios';

function fetchUsers() {
  return axios.get('/api/users');
}

function UserList() {
  const { data, error, isLoading } = useQuery('users', fetchUsers, {
    staleTime: 5 * 60 * 1000, // Data remains fresh for 5 minutes
    retry: 3,                 // Automatically retry failed requests up to 3 times
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error loading users</div>;

  return (
    <ul>
      {data?.data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}
Managing Large Datasets
Virtualized Lists
Efficiently render only the visible portion of large datasets with libraries like react-window or react-virtualized.
Pagination & Infinite Scrolling
Split large data sets into pages or load data as the user scrolls.
Lazy Loading
Defer loading images and components until they are close to the viewport.
Example: Using react-virtualized to Render a Huge List Efficiently
import { List } from 'react-virtualized';

const rowRenderer = ({ index, key, style }) => (
  <div key={key} style={style}>
    Row {index}
  </div>
);

function LargeList() {
  return (
    <List
      width={300}
      height={400}
      rowHeight={35}
      rowCount={1000}
      rowRenderer={rowRenderer}
    />
  );
}
In this example, only the rows visible in the 400px height are rendered, which saves memory and boosts rendering speed, especially with large lists.
Build Performance and Pipeline Efficiency
  • Bundlers and Build Optimizers: Webpack and Rollup combine multiple files, remove unused code, and compress assets. This results in smaller bundle sizes and faster loading times.
  • Code Splitting and Tree Shaking: Break large bundles into smaller chunks, load only the code that's needed, and remove unused code.
  • Example: An optimized build can significantly reduce bundle size and improve build times, leading to faster deployments and a better user experience.
 // Webpack configuration for code splitting and tree shaking
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
    usedExports: true, // Enables tree shaking
  },
};
By using code splitting and tree shaking, build times can be reduced by up to 40%, with bundle sizes up to 50% smaller, resulting in faster load times and more responsive applications.
What is a Monorepo and Why Do We Need It?
Monorepo
A single repository to manage multiple projects or packages.
Benefits
Simplifies dependency management across projects. Encourages code sharing and reuse.
Challenges
Increased repository size and complexity. Requires effective tooling for scalability.
Tools
Nx and Turborepo are popular monorepo tools. They help optimize builds and manage dependencies.
  • Nx: Best suited for large-scale applications. It tracks dependencies, caches builds, and offers tools for managing complex workflows across multiple projects.
  • Turborepo: Optimized for build performance. It avoids redundant tasks by understanding task dependencies and focuses on speed, making it ideal for smaller teams or simpler monorepos.
Performance Monitoring & Logging
  • Monitor production performance and errors in real-time
  • Use tools like Sentry, LogRocket, and Datadog
  • Integrate tools into CI/CD pipelines
  • Receive alerts and reports to quickly address issues
  • Sentry alerts developers to issues after deployment
Microfrontends Overview
  • Microfrontends: An architecture to split large front-end applications into smaller, independently deployable units
  • Enables parallel development by multiple teams
  • Facilitates technology diversity (each microfrontend can use different frameworks)
  • Allows independent deployment and updates
  • Use Cases: Large-scale applications requiring modularity, teams working on different parts of the application independently
Module Federation with Webpack
  • Webpack Module Federation: Allows dynamic sharing of code between different applications or microfrontends.
  • Reduces duplication by loading shared dependencies only once.
  • Facilitates code sharing and dependency management in complex applications.
  • Ensures efficient resource utilization with on-demand loading of components.
Using Webpack Module Federation for Microfrontends
In this example, we explore how to leverage Webpack Module Federation to share components between microfrontends. Learn how App1 shares its Header component with App2 efficiently without redundancy.
new ModuleFederationPlugin({
  name: "App1",
  filename: "remoteEntry.js",
  exposes: { "./Header": "./src/Header" },
});
const Header = () => <h1>Hello from App1!</h1>;
export default Header;

new ModuleFederationPlugin({
  name: "App2",
  remotes: { App1: "App1@http://localhost:3001/remoteEntry.js" },
});

const Header = React.lazy(() => import("App1/Header"));
return (
  <React.Suspense fallback="Loading...">
    <Header />
  </React.Suspense>
);
Key Takeaways

1

Architecture
Organize your codebase thoughtfully to handle complexity. React's component model makes it easier to build maintainable applications.

2

State Management
Keep state simple and modular. Use libraries like Redux or Zustand to manage complex state patterns effectively.

3

Performance Optimizations
Leverage code splitting, lazy loading, and memoization to reduce page load times and enhance user experience.

4

Data Handling
Optimize for large datasets using virtualized components and efficient data fetching techniques.

5

Meta-Frameworks
Leverage meta-frameworks like Next.js or Remix or Astro to solve many scaling issues out-of-the-box.

6

CI/CD & Testing
Implement comprehensive testing and automate your CI/CD pipeline to maintain quality and performance.

7

Best Practices
Maintain coding standards, implement consistent design principles, and engage in regular refactoring to ensure code quality.
Connect With Me
Feel free to reach out if you'd like to discuss these topics further or have any questions.
Ahmed Megahd
Head of Software Development at Soki AG
Twitter: @AhmedRagabShaba
LinkedIn: @ahmedragabshaban
Email: [email protected]
Made with Gamma