πŸ”₯ Tech Blips #22.1

In this technology newsletter: Diagram as Code, Structurizr, Solid and Supabase

πŸ”₯ Tech Blips #22.1
Supabase slogan
Tech Blips is a technology newsletter for CTOs, tech leads, software architects and software engineers - in short, for all technology enthusiasts!

Every 1-2 weeks I try to summarise some techniques, tools, languages and frameworks or platforms on the cloud and web horizon that are worth taking a look at.

TL;DR in this technology newsletter:

Diagrams as Code

Techniques / Trial

I bet you "draw" your diagrams in a visualisation tool like Visio, create a PNG for each version, and paste the PNG into your Word, Confluence, or Notion.

There are some challenges with this approach:

  • Where do you save the visualisation tool source file and the corresponding output files?
  • What do you version - the Visio file or the PNG or both?
  • How do you ensure traceability if multiple people change the diagram?

This is where the Diagrams as Code technique comes in.

workspace {

    model {
        user = person "User"
        softwareSystem = softwareSystem "Software System" {
            webapp = container "Web Application" {
                user -> this "Uses"
            }
            container "Database" {
                webapp -> this "Reads from and writes to"
            }
        }
    }

    views {
        systemContext softwareSystem {
            include *
            autolayout lr
        }

        container softwareSystem {
            include *
            autolayout lr
        }

        theme default
    }

}
Diagrams as Code Example with the Structurizr DSL
Structurizr Output
Structurizr - DSL
Visualise, document and explore your software architecture with Structurizr

Treat your architecture diagrams like normal source code, put them next to the application's source code, and generate and publish different representations from them. Best of all, traceability and versioning are free (thanks to Git).

Simon Brown, the founder of Structurizr, gave a great talk on Diagrams as Code. Check it out.

Simon Brown about Diagrams as Code

Structurizr - Diagram as Code 2.0

Tools / Assess

Structurizr Website

Matching the above Diagram as Code technique, Β there are already several tools which you can do Diagrams as Code, like AsciiDoctor Diagram, WebSequenceDiagrams, PlantUML and the Graphviz. Each of these tools brings its own semantic.

Structurizr builds upon "diagrams as code", allowing you to create multiple diagrams from a single model (Structurizr DSL), using a number of tools and programming languages.

Diagram as Code with Structurizr

Solid - JavaScript Framework

Language & Frameworks / Assess

Solid Website

Solid is a declarative, efficient and flexible JavaScript library for building user interfaces. It contains reactive primitives combined with the flexibility of JSX. is only 7kb in size.

Solid in 100 seconds

Supabase - The Firebase Alternative

Platforms / Assess

Supabase Website

Supabase is a backend as a service. It allows you to create a product without additional backend programming effort.

In short, you set up the PostgresSQL database and authentication provider and get a REST compliant HTTP API for all the configured tables you can use.

In addition, there is a storage feature to store, organize and deploy large files. Edge features let you write custom backend code if you want to connect third-party systems for integration purposes.

Take a look at the basic demo below πŸ‘‡

Basic Demo of Supabase

This allows you to focus mainly on the frontend part and massively shorten your time-to-market.

Firebase implements a similar concept. Supabase is therefore an alternative to Firebase.

But there are some important differences between Supabase and Firebase:

In another blog post I take a look at the architecture and technology stack of Supabase πŸ‘‡.

Under the hood: Architecture and Technology Stack of Supabase ⚑
Supabase under the hood. This post shows you the architecture and the technology stack of Supabase.