Ein SQLight Client im Browser mit Svelte-Kit, sql.js und Tailwind CSS

Dabei sollte Installation und Konfiguration nicht zu anspruchsvoll werden, da die Zielgruppe Anfänger darstellen sollte.

Ein einheitliches System empfand ich als praktisch und bestand mein bisheriger Lösungsansatz aus Docker-Desktop und Container mit einem LAMP Stack und installierten PhpMyAdmin.

Bei meinem Recherchen kam mir auch die Idee etwas in Richtung Web SQL zu nutzen. Nur leider musste ich feststellen, dass der Standard seit Jahren nicht mehr weiterentwickelt wird und alle Browser Entwickler sich der IndexedDB widmen. Die Unterstützung sieht mittlerweile auch gar nicht mehr so schlecht aus. Nur leider ist das ein NoSQL Datenbanksystem.

Die Bibliothek SQL.js bietet eine Schnittstelle zu einer SQLight3 Bibliothek, die für Web Assembly kompiliert wurde. Alternativ wird auch eine reine JavaScript implementation geboten aber das klang langweilig und langsam. Die Datenbank wird komplett im Arbeitsspeicher gehalten und kann exportiert werden.

Svelte-Kit

SvelteKit ist ein Framework zur Erstellung von Webanwendungen jeglicher Dimension, mit einer angenehmen Entwicklungserfahrung und flexiblem dateisystembasiertem Routing.

Da es Server Side Rendering sowie Static Site Generation bietet steht in direkter Konkurrenz zu Next.js und Gatsby. Anstatt dabei auf React zu setzten nutzt es das noch relativ junge Frontend Framework Svelte.

Dabei geht es einen anderen Weg als React, Vue und Co. und verzichtet auf ein Shadow DOM. Svelte nutzt ein an Handlebars angelehntes Templatesystem.

<div class="result-panel row-span-3 relative flex flex-col shadow-md">    
    <header class="flex-2">
    	<h2 class="bg-[#003d38] p-[0.2em] text-[#ffffff99]">Ergebnisse</h2>
    </header> 
	<figure class="w-full h-full">
        {#if columns.length}
            <Datatable {settings} bind:data={data} bind:dataRows={rows}>
                <thead>                 
                    {#each columns as col}
                    	<th data-key="{col}">{col}</th>
                	{/each}                    
                </thead>
                <tbody>
                    {#if rows}
                        {#each $rows as row}
                            <tr>
                                {#each columns as col}
                                    {#if !isNaN(row[col])}
                                        <td style="text-align:right !important">
                                            {row[col]}
                                        </td>
                                    {:else}
                                        <td>
                                            {row[col]}
                                        </td>
                                    {/if}                                    
                                {/each}
                            </tr>
                    	{/each}
                    {/if}
            	</tbody>
            </Datatable>
    	{/if}
    </figure>                     
</div>  

Tailwind CSS

Den einen oder anderen sind sicher die CSS Klassen aufgefallen. Das ist das nächste neue Frontend Framework, welches ich im Rahmen des Projekts ausprobiert habe. Tailwind CSS verzichtet auf semantische Klassennamen und setzt komplett auf Utility-Klassen. Beim Buildprozess wird das Projekt gescanned und aus dem Source wird dann eine optimierte statische CSS erzeugt. Ungenutzte Klassen werden gar nicht erst ausgeliefert.

sql.js

Ist eine JavaScript SQL Datenbank. Sie ermöglicht, eine relationale Datenbank zu erstellen und diese vollständig im Browser abzufragen. Dabei wird emscripten verwendet, um SQLite3 in WebAssembly und für Abwärtskompatibilität in JavaScript zu kompilieren. Darüber hinaus sind in sql.js mathematische sowie String-Erweiterungsfunktionen enthalten.

Das vorläufige Ergebnis stellt µSQL dar.