# SQLPage: Slides
Slides

# Build Websites in SQL

## Introducing SQLPage

# Build Websites in SQL

## Introducing SQLPage

    select
      'form' as component,
      'User' as title,
      'Create' as validate;

    ---

    select
      "name", "type",
      "description"
    from my_form_fields;

./user_creation.sql

https://example.com/user_creation.sql

# Who made it ?

- Ophir Lojkine
- Free Software developer
- CTO @hyxos in Paris

@ophir_dev

@lovasoa

- Engineering degrees from 🇫🇷 & 🇷🇺
- Ex-data engineer @Qwant
- Father next month

# Who made it ?

- Hyxos
- Startup
- Energy infrastructure management software
- Lots of projects

## Agenda

## Why

## What

## How

## Examples

## Live coding

## Who

uses it in production ?

isn't this a stupid idea ?

does it do exactly ?

to build a website in a day ?

let's build twitter together

of the coolest features

# Build Websites in SQL

## Seriously ?

# Build Websites in SQL

## Seriously ?

> Your scientists were so preoccupied with whether they could, they didn’t stop to think if they should

# Why ?

We have a problem

1 programmer

empty seats

McKinsey, 2023: for 10 Java job postings, there is <1 skilled profile online

10

# Why ?

We have a problem

non-programmers will write apps

some apps will never materialize

programmers will write more apps

# Why ?

We have a problem

non-programmers will write apps

programmers will write more apps

Let's make their lives easier...

# Why ?

Simplicity

🌱

Efficiency

🕒

Expressiveness

🧠

Reusability

🔄

# How to put your idea online in 2024 ?

Drupal

WordPress

Shopify

Squarespace

Django

Rails

Laravel

Spring Boot

Budibase

AppSmith

React

SvelteKit

CMS & Website Builders

Backend Frameworks

Low-Code app builders

Front-end frameworks

Web Site

Web App

Beginner Friendly

Customizable

# How to put your idea online in 2024 ?

# How to build a website in 2024 ?

Web Site

Web App

Beginner Friendly

Customizable

Everything loads instantly

User-Generated

content

Accessible to non-programmers

Connects to any database

# How to build a website in 2024 ?

Easy

Beautiful

Fast

Build your site in a weekend

I write the CSS, not you

Rust, Lighthouse 100, scales to ∞

# Build Websites in SQL

## Seriously ?

## YES !

# Build Websites in SQL

## Seriously ?

## YES !

## What ?

What is SQLPage ?
Let's dive in !

## What ?

An

open-source

low-code

SQL-only

web application server.

License: MIT

Language: Rust

Dependencies: None

## SQLPage is ...

... written in Rust

## A web server

reusable HTML

## Components

Database connections

## Drivers

## SQLPage is ...

## Core principles

Web Page

SQL file

1

1

3 components

tab

component

tab

component

component | center
--- | ---
tab | true

title | link | active | color
--- | --- | --- | ---
Show all cards | ? | false | NULL
Show blue cards | ?tab=blue | false | NULL
Show green cards | ?tab=green | true | green
Show red cards | ?tab=red | false | NULL

Opening component, top-level properties

Filling the component, row-level properties

card

component

card

component

component
card

title | link | description | color | top_image
--- | --- | --- | --- | ---
Leaf | https://.../ | Autumn's dance begins, [...] | green | leaf.jpg
Caterpillar | https://.../ | Caterpillar crawls [...] | green | caterpillar.jpg
Butterfly | https://.../ | Cocoon unfolds wings [...] | green | butterfly.jpg

Opening component

Filling the component, row-level properties

text

component

text

component

component | contents_md
--- | ---
text | See [source code on GitHub](https://github.com/.../tabs.sql)

Opening component

# Let's build

## TinyTweeter

    CREATE TABLE
    tweets (
      "id" bigserial,
      "tweet" text
    );

    select 'shell' as component;

    select 'shell' as component,
           'TinyTweeter' as title;

    select 'shell' as component,
           'TinyTweeter' as title;

    select 'form' as component;

    select 'shell' as component,
           'TinyTweeter' as title;

    select 'form' as component,
           'Tweet' as validate;

    select 'shell' as component,
           'TinyTweeter' as title;

    select 'form' as component,
           'Tweet' as validate;
    select
        'Tell me your story...'
        as placeholder;

    select 'shell' as component,
           'TinyTweeter' as title;

    select 'form' as component,
           'Tweet' as validate;
    select 'textarea' as type,
           'Tell me your story...'
           as placeholder;

    select 'shell' as component,
           'TinyTweeter' as title;

    select 'form' as component,
           'Tweet' as validate;
    select 'textarea' as type,
           'Tell me your story...' as placeholder;
    select 'checkbox' as type,
           'Terms and conditions'
           as label;

    select 'shell' as component,
           'TinyTweeter' as title;

    select 'form' as component,
           'Tweet' as validate;
    select 'new_tweet' as name,
           'Your story' as label,
           'textarea' as type,
           'Tell me your story...' as placeholder;
    select 'checkbox' as type,
           'Terms and conditions' as label,
           true as required;

    select 'shell' as component,
           'TinyTweeter' as title;

    select 'form' as component,
           'Tweet' as validate;
    select 'new_tweet' as name,
           'Your story' as label,
           'textarea' as type,
           'Tell me your story...' as placeholder;
    select 'checkbox' as type,
           'Terms and conditions' as label,
           true as required;

    insert into tweets (tweet)
    select :new_tweet;

    select 'shell' as component,
           'TinyTweeter' as title;

    select 'form' as component,
           'Tweet' as validate;
    select 'new_tweet' as name,
           'Your story' as label,
           'textarea' as type,
           'Tell me your story...' as placeholder;
    select 'checkbox' as type,
           'Terms and conditions' as label,
           true as required;

    insert into tweets (tweet)
    select :new_tweet
    where :new_tweet is not null;

    select 'shell' as component,
           'TinyTweeter' as title;

    select 'form' as component,
           'Tweet' as validate;
    select 'new_tweet' as name,
           'Your story' as label,
           'textarea' as type,
           'Tell me your story...' as placeholder;
    select 'checkbox' as type,
           'Terms and conditions' as label,
           true as required;

    insert into tweets (tweet)
    select :new_tweet
    where :new_tweet is not null;

    select 'card' as component;
    select tweet as description
    from tweets;

# SQLPage in Action

Examples of SQLPage in use

# SQLPage in Action

What are people doing with SQLPage ?

Helping

disabled

pupils

Mapping

archeological

artefacts

Digitalization

in

South Africa

# SQLPage in Action

What are people doing with SQLPage ?

Helping

disabled

pupils

# SQLPage in Action

Helping disabled pupils with SQLPage

David

Coordinator,

Inclusive Localized Support Hub

Coordinating human support resources based on the needs of students with disabilities

No past experience with SQL

Looking for a tool to replace an excel spreadsheet

# SQLPage in Action

David

# SQLPage in Action

David

# SQLPage in Action

David

# SQLPage in Action

What are people doing with SQLPage ?

Mapping archaeological artefacts

# SQLPage in Action

Mapping archaeological artefacts

Florent

Responsible for Protohistoric Operations,

National Institute of Preventive Archaeological Research (INRAP)

Public institution in France that is responsible for conducting archaeological research and excavations

Geographic Information System Coordinator

RAMEN collective
Recherches Archéologiques en Modélisation de l'Enregistrement Numérique

BADASS database

Base archéologique de données attributaires et spatiales

# SQLPage in Action

Florent

# SQLPage in Action

Florent

# SQLPage in Action

Florent

# SQLPage in Action

What are people doing with SQLPage ?

Digitalization

in

Africa

# SQLPage in Action

From call center to building the company's next app

William

IT support

Building a tool to manage clients and processes

Started at the company's call center

Promoted to IT support

Now works on SQLPage most of the day

Programming experience in Delphi

# SQLPage in Action

From call center to building the company's next app

William

> I don’t think I’ll use anything else for frontend.

> I’d like to use it for personal projects as well: I can make extra income, it’s very efficient !

> It’s kind of a big thing. We launch in January.

# Examples

Cool features

# Examples

Build an API in 45 seconds

    SELECT
      'json' AS component,
       JSON_OBJECT(
         'users', (
           SELECT JSON_GROUP_ARRAY(
           JSON_OBJECT(
             'username', username,
             'userid', id
           )
          ) FROM users
        )
      ) AS contents;

    api.sql

    {
      "users" : [
        {
          "username": "Mary",
          "userid": 128448
        },
        {
          "username": "Bob",
          "userid": 479326
        }
      ]
    }

    http://localhost/api.sql

    docker run -p 80:8080 -v .:/var/www sqlpage/SQLPage

# Examples

Create user account in 1 minute

    INSERT INTO
      user_info (
        username,
        password_hash
      )
    VALUES (
    	:username,
        sqlpage.hash_password(:password)
    );

    signup.sql

    postgres://localhost/sqlpage

username | password_hash
--- | ---
John | `$argon2id$v=19$m=16,t=2,p=1$TERTd0lIcUpraWFTcmRQYw$+bjtag7Xjb6p1dsuYOkngw`

    SELECT
      'authentication' AS component,
      'signin.sql?error' AS link,
      ( SELECT password_hash
        FROM user_info
        WHERE username = :username
      ) AS password_hash,
      :password AS password;

    login.sql

# Questions ?

Leave a star on github !

sqlpage/SQLPage

sql-page.com

Visit the website