What is DRAW?
DRAW is Olympe’s development environment and it represents the entry point to build projects.
Real-time and collaborative
Applications designed in DRAW can be tested real-time while being designed. At any time it is possible to open an App from a local or remote device to test it and see new functionalities appearing in real time without need to reinstall or reload, thanks to Olympe Runtime Agent.
Bricks
At its core level, DRAW is a tool to assemble bricks that represent any functionality (e.g. mathematic operation, Visual Component, data model) used to build applications and services. DRAW is therefore a visual programming IDE, and it provides the same functionalities as a traditional IDE such as VS Code or WebStorm:
- Creating and editing bricks
- Refactoring
- Search
- Find the usage of bricks
- Documentation
- Build
- ...
Software-as-data
DRAW generates data, not code. Project, apps, screens, functions defined in DRAW are stored as data, introducing the Software-as-Data notion. The Olympe Virtual Machine interprets these data and transforms them into a running application. It is possible to extend DRAW capabilities using Olympe CODE, a JavaScript framework.
Editors and sub-editors
DRAW’s interface is organized into editors and sub-editors, each has specific capabilities and different Marketplace items.
Editors are a way to edit objects created in DRAW. Each type of object has only one editor. The same editor can be used to edit different types of objects.
Sub-editors are sub-parts of the editors. All editors always have at least one sub-editor. They provide a way to specific parts of an object or the whole object if there's just one sub-editor.
Glossary
| Term | Description |
|---|---|
| Action | Specific function executed when an event occurs. |
| Advanced mode | Allows to hide some UI functionalities and experimental bricks. |
| Brick | Functionality (e.g. mathematic operation, UI component, data model) used in DRAW to build applications, services or other bricks. |
| CODE | JavaScript framework to create bricks with code to be used in DRAW. |
| Coded brick | Brick created with CODE in Javascript used in DRAW. |
| Constructor | Generated action to create an instance of a Business Model, define its attributes and persists it in Olympe database. |
| ControlFlow | Type to represent a pulse which triggers the execution of an Action. |
| Data Model | Represents business objects and their relations into an application. Composed of Business models. |
| Static Data Folder | Set of static Data Type instances with their relations and properties. |
| DRAW | Visual editor tool used to build applications. |
| Editor | Interface to edit objects. |
| Enums | Technical object type with a set of possible pre-defined values attached to it. |
| Folder | Container to organize content inside a Project. |
| Function | UI or Business logic made of sub-function calls. |
| Getter | Generated function which provides access to the attributes (properties and relations) of a Business Model. |
| Runtime Data | All the instances of a Data Type created within an application at runtime. |
| Home Screen | Main screen used in the UI App. |
| Marketplace | Place where bricks are available in DRAW. |
| Material UI | Open-source Library that features React components. |
| Media Library | Assets collections (fonts, images). |
| OVM | Olympe Virtual Machine developed by Olympe which interprets software-as-data in real-time and transforms it into running programs. |
| Project | Container with apps, data models, interfaces, folders, business data. |
| Remote Action | Actions running on the backend and they are used explicitly within Actions. |
| Safe mode | Reload the UI Editor to recover broken projects without rendering any broken data. |
| Software-as-Data | Data generated by DRAW stored as database objects, not code. |
| Service | A function that runs inside a headless application. |
| Service App | Application which only runs logic. |
| Setter | Generated action to set the attributes of a Business Model. |
| Sub-editor | Sub-part of an Editor. |
| UI Application | Application which has a user interface. |
| UI Screen | Screen or Sub-Screen of an application that can be added to a ScreenFlow. |
| Visual Component | Content added to a Screen. |