Transforming Our Frontend: Navigating the Next.js and TypeScript Evolution

Our project is a web application built with Next.js and TypeScript, designed for scalability, performance, and user-friendliness. Currently, the application is transitioning from JavaScript to TypeScript, aiming for better maintainability, type safety, and error reduction. This blog series will detail our journey of addressing the challenges in migration, enhancing performance, and improving the overall architecture.

---

Current Architecture

Frontend Framework

• Next.js: Provides server-side rendering, dynamic routing, and static site generation.

• TypeScript: Replacing JavaScript incrementally to enable better type safety and robust development.

• React: Used for building declarative, reusable UI components.

Deployment and Infrastructure

• Dockerized Containers: Ensure a consistent environment for development and deployment.

• Helm Charts: Manage environment-specific deployments (dev, staging, production) with overrides.

• Node.js: Backend support for APIs and server-side rendering.

Libraries and Dependencies

The project uses several key libraries to enhance functionality and developer productivity:

UI/UX and Components

• @chakra-ui/react: For building accessible, responsive UIs.

• @emotion/react and @emotion/styled: For custom styling.

• Framer Motion: For animations and transitions.

• React Icons: Provides a library of commonly used icons.

Data Visualization

• @nivo/bar, chart.js, and react-chartjs-2: For interactive charts and data visualizations.

• Reactflow: Enables building node-based visualizations like workflows and dependency trees.

• Vis-network: For creating interactive, hierarchical network visualizations.

State Management and Data

• MobX and MobX React: Lightweight, reactive state management.

• @tanstack/react-table: For building feature-rich, performant data tables.

• Axios: Handles HTTP requests with ease.

Utilities and Miscellaneous

• Lodash: For utility functions like deep copying, object manipulation, and array operations.

• Date-fns and Day.js: For date manipulation and formatting.

• Html2pdf.js: To generate PDFs from HTML.

Animations and Special Features

• Tsparticles: Creates interactive particle animations.

• Draft.js and React-draft-wysiwyg: For creating rich-text editors.

• React-to-print: Enables printing React components.

Scripting and Build Tools

• Eslint: For linting and enforcing coding standards.

• Source-map-explorer: Analyzes and visualizes JavaScript bundle sizes.

• TypeScript: Enhances static type-checking and scalability of the codebase.

Codebase Organization

• Mixed Codebase: A combination of JavaScript and TypeScript files due to the ongoing migration.

• Clear Directory Structure:

  • pages/: For route-specific components and server-side rendering logic.

  • components/: For reusable React components.

  • scripts/: Contains deployment and build scripts.

  • configs/: Environment-specific overrides.

---

Current Challenges

1. JavaScript-to-TypeScript Migration:

   • Status: Approximately 30% of the codebase remains in JavaScript.

   • Challenges: Refactoring legacy modules, external library typings, and managing dynamic imports.

2. Heavy Animations:

   • Drawer and modal animations feel heavy on some lower-spec systems.

   • Current implementations lack GPU optimization.

3. Build Optimization:

   • Dependencies like charting libraries increase the bundle size.

   • Some unused modules contribute to unnecessary overhead.

4. Configuration Complexity:

   • Managing overrides for multiple environments can be error-prone and time-consuming.

---

Upcoming Modifications

To address these challenges, we plan the following improvements:

1. Complete TypeScript Migration:

   • Migrate legacy JavaScript files while enforcing strict typing.

   • Refactor utilities and APIs for cleaner TypeScript integration.

2. Optimize Animations:

   • Rewrite heavy animations using GPU-accelerated techniques.

   • Simplify animation logic to reduce resource usage.

3. Improve Build Performance:

   • Dynamically import rarely used libraries to reduce initial bundle size.

   • Analyze dependencies with source-map-explorer and remove unused modules.

4. Streamline Configurations:

   • Consolidate environment-specific overrides to minimize redundancy.

   • Refactor Helm charts for better modularity and scalability.

5. Enhance UI/UX:

   • Leverage Chakra UI for improved accessibility and responsiveness.

   • Use @tanstack/react-table for performant and feature-rich data tables.

---

Conclusion

With a strong foundation built on modern technologies, our project is evolving to meet the needs of both users and developers. By addressing these challenges, we aim to create a robust, maintainable, and high-performing frontend application. This blog series will walk you through each step of this transformation.

---