What is quid?
Quid is a tool for prototyping User Interfaces with a strong focus on real-time feedback. It allows exploring UI composition via componentization, atomic design & reuse.
It is based on a minimalistic textual language (a DSL or Domain Specific Language) to describe the essential parts of your User Interfaces discarding style & accessory aspects to focus only on interaction and contracts.
To get a quick idea of what you can build with it you can watch this short video (6 minutes).
Use Cases
Quid is been used mainly for:
- User Interface prototyping
- Forms design
- Web Components Composition
- User Interface code generation
- Dynamically rendering quid models
How to use it
- Learn by changing the examples provided.
- Use the editor to create your UI definition. Check the language syntax, component catalog, and keyboard shortcuts.
- See your changes in real-time on the Preview Tab. Any errors will be shown inline.
- Explore the catalog to look for building bricks.
- Check your component structure and dependencies in the Dependencies Tab.
- Generate specific code to execute your design as Web Components.
Quid Syntax
Quid syntax has been designed to be minimalistic and reduce accidental complexity as much as possible. The language is indentation-based. Indentation is used represent composition.
For example:
group A label Hello
will be rendered to:
while an indented version has a different meaning:
group A label Hello
and will be rendered to:
TIP: You can easily change indentation using code selection using mouse or Shift + ←, →, ↑, or ↓. And then Tab for increase indentation or Shift + Tab to reduce indentation.
In Quid you can define components and views as top-level designs.
- A component is a reusable User Interface piece.
component Clock - On the contrary, a view is a final
user interface piece (like a page) and it is built by composition using basic components
or user-defined components.
view UserLogin
Controls
Inside a component or view, you can add components from the catalog. You can type something like:
component Clock
label
textbox
Note that indentation is important here to denote label and textbox are defined inside Clock.
Presentation elements in Quid can have an optional name (anonymous controls). To add a name just place it after the control type as follows:
component Clock
label l1
textbox t1
Properties
Controls can have properties. To discover what properties are available for each type of control:
- you can use the Component Catalog,
- or use the code completion when editing pressing Control + Space (or ⌘ + Space in Mac)
component Clock
label l1
text = "My label"
Events
Controls can define events too. Subscribing to an event can be done in this way:
component Clock
button b1
click() => onClick()
fun onClick()
// button pressed
You can explore the available events in the Catalog or use code completion.
Properties declaration
Components and views can declare properties using the syntax:
component Clock property hour: int property minutes: int
Event declaration
Components and views can declare also events using the syntax:
component Clock event alarm(reason: string)
Editor
The Editor pane (on the left part) allows you to explore and change the UI definitions.
- Code completion is available using the keyboard shortcut: Control + Space (or ⌘ + Space for Mac).
- Cut, copy, & paste are avaible using its standard keyboard shortcuts: Control + X / C / P.
- Can select all text with Control + A (or ⌘ + A for Mac).
The Import button allows you import quid models from text files. In the same way, the Export button will provide a text file version of the current UI definition for further use.
Preview
The Preview Pane (first tab on the right side) allows you to see the UI design. Changes done in the editor are propagated in real-time.
The IU rendering is contextual: it is based on the current component having the focus. Try to move the Editor cursor to a different top-level component to see the preview reflecting the context change.
The Preview Pane is also interactive. You can press buttons and edit fields. If events or side effects are defined, they will reflect on the rendering.
Catalog
The Catalog Pane (second tab on the right side) contains a quick reference for available controls.
The one defined by you will be included here also with the primitive ones.
The catalog allows you to filter controls and once selected presents: the properties, types, events, and documentation related to the selected component.
TIP: You can drag & drop a component from the catalog's list to the Editor. (it will be inserted at the latest cursor position).
Dependencies
The Dependencies Pane (third tab on the right side) shows a quick dependency graph for the selected component.
This pane is also contextual: it is based on the current component having the focus. Moving the Editor cursor into a different top-level component will refresh the Dependency Pane.
Generation
The Generation Pane (fourth tab on the right side) provides tools for code generation.
The UI specification can be converted to concrete source code in a given programming language and concrete framework.
This is still a work in progress feature, but you can start to see how it will look like with the following target platform as output:
- Native Web Components
After selecting a platform for code generation, you can explore the output files inline or download a zip with the full source code.
Roadmap
Planned top features for Quid include:
- Import components into the catalog from 3rd party components.
- Refine code generation for detailed Web Component implementation.
- Add more target platforms like Angular Elements, Polymer, etc.
Ideas are welcomed!
