Product architecture
Entry point (controller) that controls the passing of data between layers. There is no React on this level, only:
- pass request messages to other layers
- pass the result of the parser to the interpreter
- pass the result of the interpreter to the presentation (React)
Reading supported file format's binary and converting it into a JSON representation.
Implemented using a fork of SheetJS with our modifications (https://github.com/handsontable/js-xlsx).
Considerations:
- parser runs in a Web Worker. Web Worker does not hang the browser's main thread, which allows drawing UI while parsing
- parser only parses the sheet that's desired to be shown
- all parsers will need to return a compatible data model, so that there are no parser-specific hacks in the interpreter.
This layer runs on the client or the server, depending on the chosen architecture. Therefore, it needs a public API.
Current technology stack: Vanilla JS, Framework agnostic, rendering agnostic.
Key objectives:
- no polyfills are required to run the parser in all supported browsers (IE11+)
- no DOM operations (works in NodeJS or in a Web Worker)
Interprets the spreadsheet data and turns it into a Handsontable data grid settings object for each worksheet, including configuration for chart renderers.
This layer runs on the client. It is an implementation detail so it does not need a public API.
Technology: React, Handsontable, BizCharts.
The user experience of what's inside our iframe.
This layer runs on the client. All the public APIs are implemented on this layer.
Technology: React (integrates with any client-side framework, because it's in an iframe)
