Our open source tech

We are a company with an open source development model, and we believe working in the open is the best way to deliver higher-quality software. Our culture is built on openness and transparency, and we value your technological independence .

Tech level 1: The foundations

We started with the fundamental descriptive technologies.

A Web design system description format

Each design system is fully and statically described with structured data, easily writable in JSON or YAML. Each design system can contains UI components, but also styles utilities, themes, CSS variables and examples.

Those descriptions are used by the rendering service, and exposed by the Definition API.

        
          id: card
          label: Card
          group: Content
          slots:
            body:
              label: Card body
        
      

A renderable payload format

An universal render API for the Web, based on fully described design systems. Both serializable in JSON and usable using the host languages primitive data types.

We kept it compact (around 12 keywords) and high-level (the keywords are mostly UI concepts, related to the description format: components, styles, theme...).

            
{
    "@component": "card",
    "@variant": "horizontal",
    "header": "Card title",
    "content": {
      "@element": "p",
      "@content": "Welcome!"
    }
}  
    
          

A templating language for components

Nothing fancy. We took Jinja, the industry standard, and did some light changes: removal of harmful filters and functions, identifications of slots filters and props filters, and a few additions.

Very easy to learn. Such a limited and focused language was chosen because powerful languages inhibit information reuse .

            
    
<div {{ attributes|add_class("slider") }}>
{% for slide in slides %}
    <div class="slider__slide">
    {{ slide }}
    </div>
{% endfor %}
</div>

    
          

Tech level 2: Processing and packaging

We are now working on the upper level in order to provide a full production-ready solution.

A prebuilder tool

Prepare a design system written in the native Dilla format to be processed by the build pipeline.

Generate build.rs, tests files, the full artefact definition and the specific JSON schema. Extract static assets & templates.

        
          design_system = DesignSystem(src)
          FileSystemManager.
            prepare_target(target)
          data = design_system.data
          rust_generator = RustGenerator()
          rust_generator.
            generate(data, src)
        
      

A high performance rendering service

The service is crawling the payload received from the render API to generate the expected markup, and is built around a custom formatter for MiniJinja.

We chose Rust for its safety, the compactness of the builds, and its support of WebAssembly compilation target.

        
          use minijinja::{
              escape_formatter,
              value::{Value, ValueKind},
              AutoEscape, Environment, 
              Error, Output, State,
          };
          use std::collections::HashMap;
        
      

A WebAssembly build pipeline

Dilla use WebAssembly as an universal packaging format. 4 builds are generated for every design systems: Web & Edge, both with a "Dev" version exposing some extra APIs. We wish to merge Web and Edge builds in the future.

The pipeline is executed by gitlab.com, bundling the artifacts descriptions, the components templates and the rendering service.

        
          build:
            @mkdir -p ./bin
            $(MAKE) patch
            $(call build,bootstrap-5)
            $(call build,bootstrap-4)
            $(call build,dsfr-1)
            ...
        
      
  • Tech: Docker
  • Documentation: Not available yet
  • License: GPL-3.0-or-later
  • Public repository: Not available yet
  • Status: WIP

Tech level 3: The next step

Some upcoming magic from our secret laboratory.