-
Notifications
You must be signed in to change notification settings - Fork 273
Architecture
This document contains the description of the WebAssembly Studio application architecture and main non-functional requirements that influence it. This is also a living document and will be evolved as the application progresses.
The application comprised of the client and server parts. The client part is a web application that is designed to run on any modern browser (with enabled WebAssembly v1 functionality). The server part is set of the micro-services, such as public gist storage or compilation services.
The web application contains and can be logically split into several categories:
- Source code editor and preview
- File management
- Compilation services and utils
- Execution environment
The micro-services can be counted as the "compilation service and utils" category. Most of the micro-services will be stateless and serve as helpers for the application whenever a web browser cannot perform the certain functionality effectively.
The web application is built using React library to facilitate easy UI building and better organize testing for it, see Jest.
The application architecture currently is changing toward Flux architecture to facilitate better testing.
The TypeScript is chosen as a primary programming language for the application. It is important that any existing and new code fully utilizes its type system. This also seamlessly integrates with React's JSX syntax.
The production code is translated to JavaScript and bundled using Webpack. That also allows to reduce load time and reduce published code size. The Webpack's code spitting capabilities allow delaying loading of portions of the application until they are needed.
The Monaco Editor is used as an editor for the source code. The editor is additionally extended with support for such languages as WebAssembly Text (WAT) and Rust.
To preview well-known file type, their code is converted to text and/or HTML/CSS formats using:
- Showdown to preview Markdown (.md) files
- Capstone.js to preview X86 code files
- wabt to preview WebAssembly code
The source code is stored in a trivial in-memory file system and its lifetime is limited to a web browser session. However it is possible to export, and then import, the file's content to the server storage -- the fiddle micro-service.
Some operations require user code transformation or compilation. These operations are complex and may require CPU and memory resources. Some operations are available and can be run on the client (web browser side):
- wabt to assemble and disassemble .wasm files
- Binaryen to validate and optimize .wasm files
- Clang format to format C/C++ files
Some operation are available via micro-services:
It is required to execute a user code in a sandboxed environment. The iframe is used to perform such operation to not interrupt functionality of the main application.
It is planned to:
- move some of the micro-services to the client side
- TBD
The currently architecture takes (or will take) in account following requirements:
| Requirement | Current State | Future Changes | |
|---|---|---|---|
| 1 | Support low-bandwidth users | Large libraries do not load at start time | |
| 2 | Responsive UI: main application thread shall not be block for more than 500 ms | N/A/ | |
| 3 | Privacy | Share users data only for certain functionality, e.g. during publishing a fiddle |