diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index a33a4b363..130e30ba2 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -5480,6 +5480,7 @@
  • Publish Spreadsheet Server to Azure App Service using Visual Studio
    • +
  • Architecture
  • Worksheet
  • Cell Range
  • Editing
    • diff --git a/Document-Processing/Excel/Spreadsheet/React/architecture.md b/Document-Processing/Excel/Spreadsheet/React/architecture.md new file mode 100644 index 000000000..e78de47c4 --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/React/architecture.md @@ -0,0 +1,81 @@ +--- +layout: post +title: Spreadsheet architecture overview | Syncfusion +description: Learn here all about the architecture overview React Spreadsheet component of Syncfusion Essential JS 2 in a Create React App project. +control: Architecture +platform: document-processing +documentation: ug +--- + +# Syncfusion React Spreadsheet: Architecture Guide + +This guide provides a clear overview of the Syncfusion React Spreadsheet architecture, including its system organization, rendering process, formula engine, data binding strategies, and the division of responsibilities between client and server. + +## Table of Contents + +1. Architecture of Syncfusion React Spreadsheet +2. How Spreadsheet Rendering Works in Browser +3. Formula Calculation Engine Architecture +4. Data Binding Architecture (Local vs Remote) +5. Server-Side vs Client-Side Processing + +## Architecture of Syncfusion React Spreadsheet + +The Syncfusion React Spreadsheet is designed with a robust three-layer architecture, ensuring clear separation of concerns and optimal performance: + +- **User Interface Layer:** Handles all visual elements and user interactions, such as cell selection, editing, and formatting. +- **Data Model Layer:** Manages the workbook’s structure, including sheets, rows, columns, cell values, and formatting details. +- **Formula Engine Layer:** Responsible for parsing and evaluating formulas, tracking dependencies, and recalculating results as needed. + +This layered approach enhances scalability, testability, and reusability, allowing each part of the system to be optimized independently. + + +### Spreadsheet Architecture Overview + +``` +┌───────────────────────────────┐ +│ Application Layer │ +│ (Angular/React/Vue/TS/JS) │ +└──────────────┬────────────────┘ + │ + ▼ +┌───────────────────────────────┐ +│ Spreadsheet UI Layer │ +│ (Public API, UI Shell, │ +│ Rendering, Feature Modules) │ +└──────────────┬────────────────┘ + │ + ▼ +┌───────────────────────────────┐ +│ Workbook Model Layer │ +│ (Data Model, Actions, │ +│ Integrations, Services) │ +└──────────────┬────────────────┘ + │ + ▼ +┌───────────────────────────────┐ +│ Calculate Engine Layer │ +│ (Formula Parser, Functions, │ +│ Dependency Graph) │ +└───────────────────────────────┘ +``` + +## How Spreadsheet Rendering Works in Browser + +To deliver a smooth and responsive experience, the spreadsheet uses virtual scrolling. Only the rows and columns visible on the screen, along with a small buffer above and below, are rendered in the browser at any time. As users scroll, new rows are dynamically rendered while those that move out of view are removed from the DOM. This approach keeps memory usage low and ensures fast performance, even with very large datasets. Batch DOM updates, caching of row heights and column widths, and efficient rendering techniques further optimize the user experience. + +## Formula Calculation Engine Architecture + +The formula engine operates in three main steps: parsing, evaluation, and dependency tracking. When a formula is entered, it is first parsed and validated, then evaluated by retrieving referenced cell values and executing functions. The engine maintains a dependency graph to track which formulas depend on which cells. When a cell changes, only the affected formulas are recalculated, ensuring efficient updates. The engine supports a wide range of Excel-compatible functions and provides clear error codes for issues like invalid references or division by zero. + +For more information, you can refer to the [formula](./formulas) documentation section. + +## Data Binding Architecture (Local vs Remote) + +The spreadsheet supports both local and remote data binding. With local data binding, all data is loaded into browser memory as a JavaScript array, enabling instant access and offline support for small to medium datasets. Remote data binding is designed for large datasets, where data is fetched from a server in small batches as needed. The browser requests only the visible rows and a buffer, minimizing memory usage and network traffic. Sorting and filtering operations are handled on the server, allowing the spreadsheet to efficiently manage millions of rows. + +For more information, you can refer to the [data-binding](./data-binding) documentation section. + +## Server-Side vs Client-Side Processing + +The spreadsheet intelligently divides processing tasks between the client (browser) and the server. Client-side processing handles tasks that require immediate feedback, such as UI rendering, cell editing, formula calculation, and small-scale sorting or filtering. Server-side processing is used for operations involving large datasets, data persistence, advanced calculations, and security validation. This division ensures a responsive user experience while maintaining scalability, data integrity, and security. \ No newline at end of file