6. Mai 2019

Nicola Zunino

Lesezeit: 12 Minuten

Techblog

AlaSQL: Performanz mit Client-seitiger Datenbank

AlaSQL ist eine in-memory Datenbank (imDB), die ganz auf JavaScript basiert. Im Gegensatz zu den gängigen Datenbanken, die Daten auf Festplatten speichern, benutzt eine in-memory Datenbank den Direktzugriffsspeicher (RAM). In-memory-Datenbanken punkten mit einer hohen Performance im Vergleich zu klassischen Datenbanken, da alle Daten im internen Speicher gelagert sind. Das ist ein entscheidender Faktor für Anwendungen, die auf hoher Geschwindigkeit basieren.…

Techblog

Der Ursprung
AlaSQL importieren
Ein Beispiel
Weitere Features
Performance
Zweites Beispiel
Fazit

AlaSQL ist eine in-memory Datenbank (imDB), die ganz auf JavaScript basiert. Im Gegensatz zu den gängigen Datenbanken, die Daten auf Festplatten speichern, benutzt eine in-memory Datenbank den Direktzugriffsspeicher (RAM). In-memory-Datenbanken punkten mit einer hohen Performance im Vergleich zu klassischen Datenbanken, da alle Daten im internen Speicher gelagert sind. Das ist ein entscheidender Faktor für Anwendungen, die auf hoher Geschwindigkeit basieren. Entsprechend werden sie häufig verwendet für Anwendungen, die zeitkritisch sind. Eine andere sehr bekannte imDB ist Redis.

Der Ursprung

AlaSQL wurde entworfen, um Daten schnell und effizient in Node.js-Kontexten zu verwalten. Seine Leichtigkeit und Performance trug zur schnellen Verbreitung in allen JavaScript-Kontexte bei, auch ohne die Anwendung spezieller Frameworks: Um AlaSQL benutzen zu können, braucht man nur einen Web-Browser mit JavaScript Unterstützung.

AlaSQL ist Open Source unter MIT-Lizenz. Es wird von von den gängigen Browsern unterstützt (Google Chrome, Mozilla Firefox, Apple Safari, Internet Explorer und Opera Browser), inklusive der mobilen Versionen der Browser auf iOS und Android.

Schwerpunkte von AlaSQL sind die Geschwindigkeit der Queries und die Möglichkeit, relationale sowie Schema-less Daten verwalten zu können. Schema-less meint nicht strukturierte Daten, also Daten, die nicht-homogene Informationen repräsentieren, die normalerweise in NoSQL-Datenbanken gespeichert werden. Noch dazu kann AlaSQL ETL-Prozesse durchführen und Daten persistieren. Nach der Datenverarbeitung und Persistierung, sind die Daten in verschiedene Formate exportierbar.

AlaSQL importieren

Es gibt verschieden Art und Weisen, AlaSQL in eine Javascript-Seite zu importieren, zum Beispiel:

// CommonJS style
const alasql = require('alasql');

// ES6 style
import* as alasql from 'alasql';

// Global variable style
window.alasql

Ein Beispiel

Um AlaSQL in einer HTML-Seite verwenden zu können, müssen wir es zuerst importieren. Wir holen uns die passende Library in CDN durch diesen Link: „https://cdn.jsdelivr.net/npm/alasql@0.4“. Als Alternative können wir uns die .js-Datei unterladen und sie im unserem lokalen Projekt einbinden.

Um die Library letztendlich in unsere Website importieren, müssen wir nur den folgenden <script> Tag im <head> der Seiten hinzufügen:

<script src="https://cdn.jsdelivr.net/npm/alasql@0.4"></script>

Sobald uns die Library zur Verfügung steht, können wir die Queries mit einer alasql() Zeile durchführen. Mit alasql() können wir die meisten der klassischer SQL-Befehle durchführen, unter anderen JOIN, VIEW, GROUP BY, UNION, PRIMARY KEY, ANY, ALL. Eine komplette Liste findet man in der offiziellen Doku.

Als einfaches Beispiel erstellen wir eine HTML-Seite, in der wir die AlaSQL Library importieren. Danach führen wir eine einfache SELECT Query durch. Bevor wir den zweiten Schritt machen können, müssen wir zuerst eine Datenstruktur erstellen und sie mit Daten füllen, um diese Daten danach abfragen zu können. AlaSQL erlaubt nicht nur Tabellen, sondern kann auch JSON-Daten verwalten (in reinem NoSQL-Stil). Ich werde erst mit Tabellen (relationales Verhalten) und später mit JSON-Daten (NoSQL Verhalten) arbeiten.

Als erstes erstellen wir eine Datenbank:

const my_database =new alasql.Database('newDB');

Wir werden dann die my_database Variable benutzen, um eine neue Tabelle zu erstellen (CREATE TABLE), Daten der Tabelle hinzuzufügen (durch ein INSERT Statement) und als letztes die Daten abfragen:

my_database .exec("CREATE TABLE people (name string, age number)");
my_database .exec("INSERT INTO people VALUES ('Franz', 18),('Ida', 22)");
const result = my_database .exec("SELECT * FROM people WHERE age < 20");

Der Code ist leicht zu verstehen und braucht keine Kommentare, als Antwort wird die Person, deren Name Mario ist, zurückgegeben.

Um das alles testen zu können, fügen wir in den HTML Body eine <div> hinzu, wo wir die Daten anzeigen möchten, die wir extrahieren:

<div id="list_of_people"></div>

Jetzt können wir das gesamte Skript der Seite hinzufügen und es erweitern, um die <div> zu befüllen:

<script src="https://cdn.jsdelivr.net/npm/alasql@0.4">
    const my_database = new alasql.Database('newDB');
    my_database .exec("CREATE TABLE people (name string, age number)");
    my_database .exec("INSERT INTO people VALUES ('Franz', 18),('Ida', 22)");
    const result = my_database .exec("SELECT * FROM people WHERE age < 20");
    document.getElementById("list_of_people").innerHTML = JSON.stringify(result);
</script>

Wir können ein ähnliches Verfahren wie das gezeigte verwenden, um auf eine Query JSON-Strukturen auszuführen:

const people =[{ name:'Franz', age :18},{ name:'Ida', age :22},];
const result = alasql("SELECT * FROM ? people WHERE age < 22",[people]);
document.getElementById("list_of_people").innerHTML= JSON.stringify(result);

Mit der ersten Zeile haben wir ein JSON-Objekte-Array erstellt (in dieses Beispiel haben alle Objekte dieselbe Struktur, das musst aber nicht unbedingt so sein), der people heißt. Dann haben wir den Array als Daten-Struktur benutzt und sie durch Function alasql() abgefragt.

Beispiel zusammengefügt

Das komplette Beispiel, das auch eine neuere Version von AlaSQL benutzt, sieht dann so aus:

<!DOCTYPE html>

<html>

    <head>

        <title>AlaSQL</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script src="https://cdn.jsdelivr.net/npm/alasql@0.4"></script>

        <script>

            // QUERY ON DATABASE

            const db = new alasql.Database('test');

            db.exec('CREATE TABLE account (username string, password string)');

            db.exec('INSERT INTO account (?,?)', ['name1', 'pwd1']);

            db.exec('INSERT INTO account (?,?)', ['name2', 'pwd2']);

            db.exec('SELECT * FROM account', [], function (res) {

                res.forEach(function (account) {

                    console.log(account.username);

                });

            });

 

            // QUERY ON JSON / OBJECTS

            const data = [{a: 1, b: 10}, {a: 2, b: 20}, {a: 1, b: 30}];

            const resData = alasql('SELECT a, SUM(b) AS b FROM ? GROUP BY a', [data]);

            resData.forEach(function (item) {

                console.log(item.a + " - " + item.b);

            });

        </script>

    </head>

    <body></body>

</html>

Es ist wieder erkennbar, wie leicht es ist! Dieses Beispiel fügt die beiden vorher gezeigten Teile zusammen. Man kann auf einen Blick sehen, dass die Datenbank-Instanz optional ist.

Weitere Features

Weitere fortgeschrittene SQL Features sind implementiert, zum Beispiel: ROLLUP(), CUBE(), GROUPING SETS(), CROSS APPLY, OUTER APPLY, WITH SELECT.

User-Defined Functions

Es ist möglich, eigene Funktionen zu definieren, um die Vorteile von SQL und Javascript zusammen zu nutzen. Dafür verwendet man das alasql.fn Objekt:

alasql.fn.myfunction=function(a,b){
return a * b +1;
};
const res = alasql('SELECT myfunction (a,b) FROM one');

Mehr dazu im AlaSQL-Wiki auf Github hier.

Compiled Statements

Compiled Statemnts in AlaSQL bringen die selbe Vorteile die im Standard SQL Prepared Statement bringen. Da im Gegensatz zu gewöhnlichen Statements die Compiled Statements noch keine Parameterwerte erhalten, werden dem Datenbanksystem Platzhalter übergeben. Dadurch können SQL-Injections effektiv verhindert werden.

const ins = alasql.compile('INSERT INTO one VALUES (?,?)');
ins(1,10);
ins(2,20);

Compiled Statements die wie hier im Beispiel mehrmals kurz aufeinander aufgeruft werden, können auch einen Geschwindigkeitsvorteil bringen, da das Statement schon vorübersetzt im Datenbanksystem vorliegt und nur noch mit den neuen Parametern ausgeführt werden muss. Weiteres hier.

Lesen und schreiben von Dateien

Man kann Daten aus verschiedenen Datei-Typen importieren und exportieren, etwa CSV, TAB, TXT und JSON. File Extensions sind optional.

const tabFile ='mydata.tab'; alasql.promise([
"SELECT * FROM txt('MyFile.log') WHERE [0] LIKE 'M%'",// parameter-less query
["SELECT * FROM tab(?) ORDER BY [1]",[tabFile]],// [query, array of params] 
"SELECT [3] AS city,[4] AS population FROM csv('./data/cities')",
"SELECT * FROM json('../config/myJsonfile')"]).then(function(results){
          console.log(results);
}).catch(console.error);

In diesem Beispiel gibt es Aufrufe auf mehrere Dateien. Da die Aufrufe asynchron laufen, muss man die Queries miteinander verketten.

Performance

AlaSQL soll möglichst schnell sein, dafür gibt es einige SQL-Engine-Optimierungen, zum Beispiel:

Queries werden im Cache als Compiled Functions gespeichert
Tabellen, die in Join benutzt werden, bekommen ein Pre-Index
WHERE wird vor Join durchgeführt

Zweites Beispiel

Als Beispiel möchte ich eine einfache TODO-List-Anwendung realisieren, für die React benutzt wird. Hier bauen wir die React-Komponente:

import React from 'react';

import * as alasql from 'alasql';

 

class App extends React.Component {

 

  constructor(props) {

    super(props);

    this.state = { todo: [] };

  }

 

  componentWillMount() {

    alasql('CREATE TABLE todo (id INT AUTOINCREMENT PRIMARY KEY, text STRING)');

  }

 

  addTodo() {

    const { todo } = this.state;

    const { inputTodo } = this.refs;

    todo.push(inputTodo.value);

    inputTodo.value = "";

    this.setState({ todo });

  }

 

  removeTodo(index) {

    const { todo } = this.state;

    todo.splice(index, 1);

    this.setState({ todo });

  }

 

  render() {

    const { todo } = this.state;

    return (

      <main className="container">

        <h1 className="mt-4">TODO List</h1>

        <div className="row mt-4">

          <form className="form-inline">

            <div className="form-group mx-sm-3 mb-2">

              <label for="inputTodo" className="sr-only">Todo</label>

              <input type="text" ref="inputTodo" className="form-control" id="inputTodo" placeholder="Todo"/>

            </div>

            <button type="button" className="btn btn-primary mb-2" onClick={ e => this.addTodo() }>Add</button>

          </form>

        </div>

        <div className="row">

          <table className="table table-bordered">

            <thead>

              <tr>

                <th>TODO</th>

                <th></th>

              </tr>

            </thead>

            <tbody>

              {

              !todo.length &&

              <tr>

                <td colspan="2" className="text-center">

                  No data available

                </td>

              </tr>

              }

              {

              todo.length > 0 && todo.map((x,i) => (

              <tr>

                <td>{ x }</td>

                <td>

                  <button className="btn btn-danger" onClick={ e => this.removeTodo(i) }>

                    x

                  </button>

                </td>

              </tr>

              ))

              }

            </tbody>

          </table>

        </div>

      </main>

      );

  }

}

 

export default App;

Die React-Komponente allein kann die einzelnen TODOs nicht persistieren. Dafür wollen wir AlaSQL integrieren.

import React from 'react';

import * as alasql from 'alasql';

 

class App extends React.Component {

 

  // Constructor ...

 

  componentWillMount() {

    alasql('CREATE TABLE todo (id INT AUTOINCREMENT PRIMARY KEY, text STRING)');

  }

 

  fetchTodos() {

    const result = alasql('SELECT * FROM todo');

    this.setState({ todo: result });

  }

 

  insertTodo(text) {

    alasql('INSERT INTO todo VALUES ?',

      [{ id: alasql.autoval('todo', 'id', true), text }]);

  }

 

  deleteTodo(id) {

    alasql('DELETE FROM todo WHERE id = ?', id);

  }

 

  // Lines of code ...

}

 

export default App;

Jetzt haben wir vier Methoden, die noch total entkoppelt von der React-App sind. Die vier Methoden tun folgendes:

componentWillMount ist eine React Methode die die Tabelle todo instanziiert jedes Mal, dass die Komponente geladen wird;
fetchTodos lädt alle TODOs;
insertTodo persistiert die TODOs in der Tabelle;
deleteTodo löscht die TODOs von der Tabelle.

Mit alasql.autoval bekommt man die neue ID, die generiert wurde, da die Tabelle todo ein id Feld hat, das autoincrementable ist. Der nächste Schritt ist, die beiden Code-Teile zusammen zu bringen, so dass die React-Komponente die AlaSQL-Aufrufe benutzt:

import React from 'react';

import * as alasql from 'alasql';

 

class App extends React.Component {

 

  constructor(props) {

    super(props);

 

    this.state = { todo: [] };

  }

 

  componentDidMount() {

    this.fetchTodos();

  }

 

  fetchTodos() {

    const result = alasql('SELECT * FROM todo');

    this.setState({ todo: result });

  }

 

  insertTodo(text) {

    alasql('INSERT INTO todo VALUES ?',

      [{ id: alasql.autoval('todo', 'id', true), text }]);

  }

 

  deleteTodo(id) {

    alasql('DELETE FROM todo WHERE id = ?', id);

  }

 

  addTodo() {

    const { inputTodo } = this.refs;

    if (!inputTodo.value) return;

    this.insertTodo(inputTodo.value);

    this.fetchTodos();

    inputTodo.value = "";

  }

 

  removeTodo(id) {

    this.deleteTodo(id);

    this.fetchTodos();

  }

 

  render() {

    const { todo } = this.state;

 

    return (

      <main className="container">

        <h1 className="mt-4">TODO List</h1>

        <div className="row mt-4">

          <form className="form-inline">

            <div className="form-group mx-sm-3 mb-2">

              <label for="inputTodo" className="sr-only">Todo</label>

              <input type="text" ref="inputTodo" className="form-control" id="inputTodo" placeholder="Todo"/>

            </div>

            <button type="button" className="btn btn-primary mb-2" onClick={ e => this.addTodo() }>Add</button>

          </form>

        </div>

 

        <div className="row">

          <table className="table table-bordered">

            <thead>

              <tr>

                <th>ID</th>

                <th>TODO</th>

                <th></th>

              </tr>

            </thead>

            <tbody>

              {

              !todo.length &&

              <tr>

                <td colspan="3" className="text-center">

                  No data available

                </td>

              </tr>

              }

              {

              todo.length > 0 && todo.map(x => (

              <tr>

                <td>{ x.id }</td>

                <td>{ x.text }</td>

                <td>

                  <button className="btn btn-danger" onClick={ e => this.removeTodo(x.id) }>

                    x

                  </button>

                </td>

              </tr>

              ))

              }

            </tbody>

          </table>

        </div>

      </main>

      );

  }

}

 

export default App;

Im Moment gehen alle TODOs verloren, wenn die Seite neu geladen wird. Das passiert, weil AlaSQL benutzt wird, um die Daten in einer Tabelle zu speichern. Es fehlt die Datenbank für die Persistierung der Tabelle. Dafür muss man die componentWillMount Methode ändern:

componentWillMount(){
    alasql(`
      CREATE LOCALSTORAGE DATABASE IF NOT EXISTS todo_db;
      ATTACH LOCALSTORAGE DATABASE todo_db;
      USE todo_db;
    `);
    alasql('CREATE TABLE IF NOT EXISTS todo (id INT AUTOINCREMENT PRIMARY KEY, text STRING)');
}

Durch diese Änderung erzeugt die componentWillMount Methode eine Datenbank mit Namen todo_db, falls sie nicht bereits existiert; sie wird für alle weiteren Datenbank-Geschehnisse benutzt. Selbstverständlich wird der localStorage als Datenbank-Engine verwendet.

Fazit

AlaSQL als leichte und schnelle Client-seitige Datenbank erlaubt uns die Umsetzung von Use-Cases, in denen Performanz eine Rolle spielt und in denen wir eine leichte Verwaltung von Apps und Services suchen. Die Flexibilität der Speicherstrukturen, im Sinne von relationalen sowie NoSQL-Daten, erweitert die möglichen Anwendungsszenarien und erlaubt die Gestaltung von innovativen Webapps.

Über den Autor

Nicola Zunino

WE, Web Engineering

Nicola arbeitet seit 2017 bei MaibornWolff. Zuerst war er als Frontend Entwickler tätig, mit Schwerpunkte JavaScript und Frameworks wie Angular und React, entdeckte dann jedoch, dass ihm Architekturen und Analysen, also designen, mehr Spaß macht. Als ehemaliger Dozent, unterstützt er interne Schulungen (Clean Code) und Entwicklung der Kollegen. Als Doktor Ingenieur hat er sich in Daten Optimierung und Datenbanken spezialisiert: Datenanalyse, Pattern Matching und Clustering sind noch seine Leidenschaften.

LinkedIn: https://www.linkedin.com/in/nicola-zunino-22852037/, Twitter: @NicolaZStrong, Instagram: @nicola_zunino, nicola.zunino@maibornwolff.de

AlaSQL: Performanz mit Client-seitiger Datenbank

Der Ursprung

AlaSQL importieren

Ein Beispiel

Beispiel zusammengefügt

Weitere Features

User-Defined Functions

Compiled Statements

Lesen und schreiben von Dateien

Performance

Zweites Beispiel

Fazit

Über den Autor

Nicola Zunino

Mehr zum Thema

DevOps in der Praxis: Wie Sie Zusammenarbeit neu definieren

Cloud Architekturen verstehen und optimal nutzen