logo

AlaSQL:Skutečná databáze pro webové prohlížeče (a Node.js)

"Počkat, co?!"

Ano, to byla také moje reakce, když jsem to četl na Twitteru.

V tomto příspěvku vám vysvětlím, co je AlaSQL a otestujte, zda funguje podle očekávání.

Co je AlaQSL?

AlaSQL je odlehčená in-memory SQL databáze na straně klienta. Byl napsán v čistém Javascriptu, podporuje operace JOIN, GROUP, UNION, IN, ALL a mnoho dalších.

Je to rychlé? Samozřejmě, že je! Využívá dynamické povahy Javascriptu a
používá optimalizační metody. Podle autora:

  • Dotazy se ukládají do mezipaměti jako kompilované funkce.

  • Připojené tabulky jsou předindexovány.

  • WHERE výrazy jsou pro spojení předfiltrovány

Funguje to ve většině webových prohlížečů? Tak určitě! Funguje ve všech moderních verzích Chrome, Mozilla, Safari a dokonce i IE. Můžete jej použít také na Node.js.

Podporuje databáze NoSQL? Ano!! Můžete vytvářet tabulky JSON a pracovat s objekty JSON.

Další informace můžete získat v AlaSQL úložiště github:

agershun / alasql

AlaSQL.js - JavaScript SQL databáze pro prohlížeč a Node.js. Zvládá jak tradiční relační tabulky, tak vnořená data JSON (NoSQL). Exportujte, ukládejte a importujte data z localStorage, IndexedDB nebo Excel.

AlaSQL je projekt s otevřeným zdrojovým kódem, který se používá na více než dvou milionech zobrazení stránek měsíčně – a oceňujeme všechny příspěvky, které můžeme získat. Prosím pomozte.

Máte dotaz? Zeptejte se na Stack Overflow pomocí značky „alasql“.

AlaSQL

AlaSQL - ( à la SQL ) [ælæ ɛskju:ɛl] - je open source SQL databáze pro JavaScript se silným zaměřením na rychlost dotazování a flexibilitu zdrojů dat pro relační data i data bez schématu. Funguje ve webovém prohlížeči, Node.js a mobilních aplikacích.

Tato knihovna je určena pro:

  • Rychlé zpracování dat SQL v paměti pro aplikace BI a ERP na tlustých klientech
  • Snadné ETL a možnosti trvalého importu / manipulace / exportu dat v několika formátech
  • Všechny hlavní prohlížeče, Node.js a mobilní aplikace

Zaměřujeme se na rychlost tím, že při vytváření dotazů využíváme dynamické povahy JavaScriptu. Reálná řešení vyžadují…

Zobrazit na GitHubu

Instalace

Použití NPM:
npm install --save alasql

Pomocí CDN:

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

A to je vše. Velmi jednoduché, co?

Použití

Nejprve importujte alasql do vašeho kódu:

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

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

// Global variable style
window.alasql

A pak začněte psát SQL:

alasql("CREATE TABLE test (language INT, hello STRING)");
alasql("INSERT INTO test VALUES (1, 'Hello!')");
alasql("INSERT INTO test VALUES (2, 'Aloha!')");
alasql("INSERT INTO test VALUES (3, 'Bonjour!')");

const results = alasql("SELECT * FROM test WHERE language > 1");
console.log(results);

// Output:
// [{ "language":2, "hello":"Aloha!" },{ "language":3,"hello":"Bonjour!" }]

Můžete dokonce spouštět dotazy nad řadou objektů:

const data = [{ id: 1, amount: 10 }, { id: 2, amount: 20 }, { id: 1, amount: 30 }];
const results = alasql('SELECT id, SUM(amount) AS total FROM ? GROUP BY id', [data]);
console.log(results);

// Output:
// [{"id":1,"total":40},{"id":2,"total":20}]

Skvělé, že?

Příklad

Vytvořme novou aplikaci React pomocí npx create-react-app nástroj a implementujte základní aplikaci seznamu TODO:

import React from 'react';

class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = { todo: [] };
  }

  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;

Výsledek je:

Funguje to jako kouzlo, ale pokud stránku znovu načtu, ztratil jsem veškerý svůj TODO seznam.
Použijme AlaSQL přetrvávat ty TODO.

Nejprve importujme AlaSQL a použijte componentWillMount háček pro vytvoření tabulky:

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)');
  }

  // Lines of code ...
}

export default App;

Při každém načtení komponenty AlaSQL vytvoří tabulku.

Nyní musíme implementovat metodu pro získání všech TODO z databáze, metodu pro vložení nových TODO a metodu pro jejich odstranění. 

import React from 'react';
import * as alasql from 'alasql';

class App extends React.Component {

  // Lines of code ...

  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;

Jak můžete vidět, pomocí tradičního SQL SELECT, INSERT a DELETE tuto práci udělají. alasql.autoval získá další ID, které se má vložit, protože ID naší tabulky je automaticky inkrementovatelné.

Dále refaktorujeme addTodo a removeTodo metody a přidejte componentDidMount háček pro načtení TODO z databáze:

import React from 'react';
import * as alasql from 'alasql';

class App extends React.Component {

  // Lines of code...

  componentDidMount() {
    this.fetchTodos();
  }

  addTodo() {
    const { inputTodo } = this.refs;

    if (!inputTodo.value) return;

    this.insertTodo(inputTodo.value);
    this.fetchTodos();
    inputTodo.value = "";
  }

  removeTodo(id) {
    this.deleteTodo(id);
    this.fetchTodos();
  }

  // Lines of code ...
}

export default App;

Nakonec aktualizujme metodu vykreslování přidáním nového sloupce ID a použitím objektu TODO místo prostého textu:

import React from 'react';
import * as alasql from 'alasql';

class App extends React.Component {

  // Lines of code ...

  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;

Výsledek pomocí AlaSQL je:

Sakra, když znovu načtu stránku, znovu jsem ztratil všechny své TODO... proč?!

Ve skutečnosti používáme AlaSQL a ve skutečnosti vkládáme data do tabulky, ALE nevytvořili jsme databázi, která by data uchovávala.

Pojďme tedy upravit componentWillMount háček a vytvořte novou databázi s názvem todo_db pokud neexistuje.

V tomto případě bude jako databázový stroj použit localStorage. 

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)');
}

Při každém načtení komponenty AlaSQL vytvoří databázi, pokud neexistuje.

Zde je konečný výsledek:

Funguje podle očekávání 👌.

Děkuji za přečtení! Zdrojový kód z tohoto příspěvku najdete v dalším úložišti:

jorgeramon / alasql-react-example

Příklad použití AlaSQL s React

Tento projekt byl zaveden pomocí Create React App.

Dostupné skripty

V adresáři projektu můžete spustit:

npm start

Spustí aplikaci ve vývojovém režimu.
Otevřete http://localhost:3000 a zobrazte jej v prohlížeči.

Pokud provedete úpravy, stránka se znovu načte.
V konzole také uvidíte všechny chyby vláknitosti.

npm test

Spustí testovací běžec v režimu interaktivních hodinek.
Další informace naleznete v části o spouštění testů.

npm run build

Sestaví aplikaci pro produkci na build složku.
Správně spojuje React v produkčním režimu a optimalizuje sestavení pro nejlepší výkon.

Sestavení je minifikováno a názvy souborů obsahují hash.
Vaše aplikace je připravena k nasazení!

Další informace naleznete v části o nasazení.

npm run eject

Poznámka:Toto je jednosměrná operace. Jakmile eject , nemůžete se vrátit!

Pokud nejste spokojeni s nástrojem pro vytváření…

Zobrazit na GitHubu