Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
AlaSQLSQL  библиотека  
для  обработки  данных  на  JavaScript
Андрей  Гершун
agershun@gmail.com
FrontEnd 2015
AlaSQL
• Зачем?
• Как установить?
• Как  использовать?
• ETL
• Хранение  данных
• Дополнительные  
возможности
• Внутренно...
Предыстория:
Зачем  SQL  на  клиенте?
3
Зачем SQL на  клиенте?
• Задачи  обработки  данных
– Выбор  (SELECT,  REMOVE COLUMNS)
– Сортировка (ORDER  BY)
– Группиров...
5
Почему  бы  не  использовать  только  
«большие»  базы  данных?
• Плохая  связь
• Хранение  данных  на  клиенте
• Быстрый ...
Какие  решения  уже  существуют?
• Встроенные  базы  данных
– WebSQL
– IndexedDB
• SQL  на  JavaScript
– SQL.js
– SequelSp...
Как  можно  использовать  SQL  в  
программе  на  JavaScript?
<script   src="alasql.min.js"></script>     
<script>
alasql...
SQL  +  JavaScript  – лучше  вместе!
9
Как  с  помощью  SQL  
обрабатывать  данные  JavaScript  ?
var data  =  [{a:10},{a:2},{a:25}];
var res  =  alasql('SELECT ...
Синхронный  API
var res  =  
alasql('SELECT *  FROM one',[params]);
11
Асинхронный  API
(для  операций  с  файлами)
alasql('SELECT *  FROM two',  [params],    
function  (data,err) {
if  (err) ...
Обещанный  API  J
(Promises)
alasql
.promise('SELECT *  FROM two',  [params])
.then(...)
.catch(...);  
13
AlaSQL
Менеджеры  пакетов:
npm
Bower
Meteor
Подключение
• CommonJS
• AMD
• <script>
14
Зависимости
• Нет
• xlsx-­‐js,  TableTop,  AngularJS,  Meteor  -­‐ для  
отдельных  операций  импорта-­‐экспорта
• Есть  с...
WebWorker
<script src="alasql-­‐worker.min.js"></script>
<script>
var arr =  [{a:1},{a:2},{a:1}];
alasql('SELECT *  FROM ?...
SQL-­‐92
• SELECT
• INSERT
• DELETE
• UPDATE
• CREATE  TABLE
• CREATE  VIEW
• CREATE  UNIQUE  INDEX
• CREATE  DATABASE
• и...
Тесты  на  совместимость с  SQL
• SQLLOGICTEST
– 140000  запросов
– 95% на  SELECT
– 65%  по  всем
• NIST  SQL
• несколько...
19
CREATE  TABLE [Кошки]  (
catid STRING  PRIMARY  KEY,
catname NVARCHAR(MAX),
);
CREATE  TABLE `Мышки`  (
mouseid STRING  PR...
Расчет  диеты
INSERT  INTO  [Мышки]  
VALUES ("Микки","Мурка",70),
("Мини","Мурка",50),
("Джерри","Том",65);
21
Расчет  диеты
SELECT catname,  SUM([Мышки].weight)
FROM [Кошки]
JOIN [Мышки] USING catid
GROUP BY catid
22
Все  JOINы на  свете…
• CROSS  JOIN
• INNER  JOIN
• LEFT  OUTER  JOIN
• RIGHT  OUTER  JOIN
• FULL  OUTER  JOIN
• SEMI  JOI...
Обработка  данных  JSON
SELECT  {a:1,b:2}
{a:1,b:2}
SELECT  {a:1,b:2}  ==  {a:1,b:2}
true
SELECT  {a:1,b:2}-­‐>b
2
SELECT ...
25
РЕШЕНИЕ
ЗАДАЧ  
ETL
Извлечение,  
обработка,  
загрузка  данных
26
27
28
Пример:  Подготовка  данных  для  
Google  Maps из  Slideshare.com
29
Данные
по  
просмотрам
XLSX
(на  сервере)
Гео  данны...
SELECT countries.*,  views.cnt
FROM (
SELECT Country,  COUNT(*)  AS  cnt
FROM "all_latest_views.csv"
GROUP  BY Country
)  ...
Пользователи  AlaSQL
по  всему  свету
31
Alacon -­‐ утилита  для  ETL
>  alacon “SELECT 2+2”
4
>  alacon "SELECT *  INTO
'medals.csv’   FROM
'medals.xlsx'  
WHERE ...
ХРАНЕНИЕ
ДАННЫХ  
НА
КЛИЕНТЕ 33
IndexedDB:
SELECT *  FROM  t  WHERE a>1
function  selectFromTable (databaseid,  tableid,  cb,  cond)  {
var request  =  wi...
IndexedDB
ATTACH INDEXEDDB DATABASE geo;
SELECT *  FROM geo.country
WHERE continent_name =  "Asia";
35
LocalStorage
ATTACH LOCALSTORAGE  DATABASE geo;
SELECT *  FROM geo.country
WHERE continent_name =  "Asia"');
36
Ваш  бэкэнд!
alasql.engines.SUPERBASE =  function(){};
SB.createDatabase =  function(dbid,   params)  {
//  Создать  свою ...
ИНТЕГРАЦИЯ
С  ДРУГИМИ
ПОПУЛЯРНЫМИ
БИБЛИОТЕКАМИ
Angular.js
d3.js
Meteor
38
Встроенная  интеграция
• Angular.js
• d3.js
• TableTop
• Meteor
39
Alasql для  d3.js:
Олимпийские  медали  из  Excel
40
Берем  медали…
SELECT ${axe},  
SUM([Gold  Medals])  AS Gold,  
SUM([Silver  Medals])  AS Silver,  
SUM([Bronze  Medals]) ...
42
ЗА  
РАМКАМИ
SQL
Графы,  объекты
43
Парсер SQL  (AST-­‐дерево)
var ast =  alasql.parse(`
SELECT SUM(x) FROM one`);
{  statements:  [  {  
columns:  [{
aggrega...
Поиск  по  дереву
SEARCH /+  aggregatorid
['SUM’]
45
46
Как  связаны  Саша  и  Марина?
SEARCH /  "Саша”  PATH("Марина")  
EDGE  SET(color="red”)
47
48
ПОД  
КАПОТОМ
49
Как  устроен  AlaSQL изнутри?
• Лексер
• Парсер
• Интерпретатор
• Критические  участки  
SELECT/INSERT/DELETE/UPDATE/SEARC...
Компиляция
SELECT *  FROM data  
ORDER BY  alpha,  beta
var s =  `
if(a.alpha>b.alpha)  {return  1;  
else if(a.alpha==b.a...
52
http://jsperf.com/alasql-­‐js-­‐vs-­‐websql/7
53
SELECT MAX(cnt)  FROM  
(SELECT COUNT(*)  AS cnt
FROM ?  GROUP  BY _)
54
55
Итак,  AlaSQL…
• Простая  
библиотека  
• SQL  +  JavaScript
• Расширяемая
• Интегрируемая
• Удобная
56
57
Контакты
• github.com/agershun/alasql
• alasql.org
• Андрей  Гершун
• agershun@gmail.com
• @agershun
58
à la
SQL
Upcoming SlideShare
Loading in …5
×

Alasql.js - SQL база данных на JavaScript / Андрей Гершун (МАГ КОНСАЛТИНГ)

792 views

Published on

AlaSQL - это библиотека для обработки данных с помощью языка SQL, которая написана на JavaScript и может работать в браузере (в том числе, и в режиме WebWorker) или Node.js. Библиотека может быть использована в приложениях для обработки данных, а также для решения задач ETL (extract-transform-loading), таких как приложения бизнес-аналитики.

Тезисы - http://frontendconf.ru/2015/abstracts/1713

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Alasql.js - SQL база данных на JavaScript / Андрей Гершун (МАГ КОНСАЛТИНГ)

  1. 1. AlaSQLSQL  библиотека   для  обработки  данных  на  JavaScript Андрей  Гершун agershun@gmail.com FrontEnd 2015
  2. 2. AlaSQL • Зачем? • Как установить? • Как  использовать? • ETL • Хранение  данных • Дополнительные   возможности • Внутренности 2
  3. 3. Предыстория: Зачем  SQL  на  клиенте? 3
  4. 4. Зачем SQL на  клиенте? • Задачи  обработки  данных – Выбор  (SELECT,  REMOVE COLUMNS) – Сортировка (ORDER  BY) – Группировка (GROUP  BY) – Фильтрация (WHERE,  HAVING) – Соединение  (JOIN) • Импорт/экспорт  в  различные  форматы – Excel,  CSV,  TXT,  Google Spreadsheets • Хранение  данных  на  клиенте 4
  5. 5. 5
  6. 6. Почему  бы  не  использовать  только   «большие»  базы  данных? • Плохая  связь • Хранение  данных  на  клиенте • Быстрый  фронт-­‐энд  для  приложений  BI 6
  7. 7. Какие  решения  уже  существуют? • Встроенные  базы  данных – WebSQL – IndexedDB • SQL  на  JavaScript – SQL.js – SequelSphere • “Почти” SQL – Lovefield – ydb-­‐db – pouchDB 7
  8. 8. Как  можно  использовать  SQL  в   программе  на  JavaScript? <script   src="alasql.min.js"></script>     <script> alasql(`CREATE   TABLE cities  (   city  string,   population   number)`); alasql(`INSERT   INTO cities   VALUES ('Rome',2863223),   ('Paris',2249975), ('Berlin',3517424),   ('Madrid',3041579)`); console.log(   alasql(`SELECT *  FROM cities   WHERE population   <  3500000 ORDER  BY population   DESC`)   ); </script> 8
  9. 9. SQL  +  JavaScript  – лучше  вместе! 9
  10. 10. Как  с  помощью  SQL   обрабатывать  данные  JavaScript  ? var data  =  [{a:10},{a:2},{a:25}]; var res  =  alasql('SELECT  a   FROM  ?   WHERE a  >  2 ORDER  BY a  DESC',[data]); 10
  11. 11. Синхронный  API var res  =   alasql('SELECT *  FROM one',[params]); 11
  12. 12. Асинхронный  API (для  операций  с  файлами) alasql('SELECT *  FROM two',  [params],     function  (data,err) { if  (err)  throw err; console.log(data) }); 12
  13. 13. Обещанный  API  J (Promises) alasql .promise('SELECT *  FROM two',  [params]) .then(...) .catch(...);   13
  14. 14. AlaSQL Менеджеры  пакетов: npm Bower Meteor Подключение • CommonJS • AMD • <script> 14
  15. 15. Зависимости • Нет • xlsx-­‐js,  TableTop,  AngularJS,  Meteor  -­‐ для   отдельных  операций  импорта-­‐экспорта • Есть  свои  плагины 15
  16. 16. WebWorker <script src="alasql-­‐worker.min.js"></script> <script> var arr =  [{a:1},{a:2},{a:1}]; alasql('SELECT *  FROM ?',[arr], function(data) { console.log(data); }); </script>   или  изнутри  WebWorker: importScripts(‘alasql.min.js’); 16
  17. 17. SQL-­‐92 • SELECT • INSERT • DELETE • UPDATE • CREATE  TABLE • CREATE  VIEW • CREATE  UNIQUE  INDEX • CREATE  DATABASE • и  другие  операторы • Ограничения: – Триггеры (будут) – Транзакции – GRANTы 17
  18. 18. Тесты  на  совместимость с  SQL • SQLLOGICTEST – 140000  запросов – 95% на  SELECT – 65%  по  всем • NIST  SQL • несколько  тысяч • Unit  Tests – около  300 тестов  (900   asserts) 18
  19. 19. 19
  20. 20. CREATE  TABLE [Кошки]  ( catid STRING  PRIMARY  KEY, catname NVARCHAR(MAX), ); CREATE  TABLE `Мышки`  ( mouseid STRING  PRIMARY  KEY, catid STRING  REFERENCES Cats(catid), weight  FLOAT ); 20
  21. 21. Расчет  диеты INSERT  INTO  [Мышки]   VALUES ("Микки","Мурка",70), ("Мини","Мурка",50), ("Джерри","Том",65); 21
  22. 22. Расчет  диеты SELECT catname,  SUM([Мышки].weight) FROM [Кошки] JOIN [Мышки] USING catid GROUP BY catid 22
  23. 23. Все  JOINы на  свете… • CROSS  JOIN • INNER  JOIN • LEFT  OUTER  JOIN • RIGHT  OUTER  JOIN • FULL  OUTER  JOIN • SEMI  JOIN • ANTI  JOIN • NATURAL  JOIN • ON   • USING • CROSS  APPLY  /  OUTER   APPLY • ROLLUP,  CUBE,   GROUPING  SETS • CTE 23
  24. 24. Обработка  данных  JSON SELECT  {a:1,b:2} {a:1,b:2} SELECT  {a:1,b:2}  ==  {a:1,b:2} true SELECT  {a:1,b:2}-­‐>b 2 SELECT  {a:1,b:(2*2)}-­‐>b 4 SELECT  @[1,2,3,(b+4)]  FROM @[{b:100}] [1,2,3,104] 24
  25. 25. 25
  26. 26. РЕШЕНИЕ ЗАДАЧ   ETL Извлечение,   обработка,   загрузка  данных 26
  27. 27. 27
  28. 28. 28
  29. 29. Пример:  Подготовка  данных  для   Google  Maps из  Slideshare.com 29 Данные по   просмотрам XLSX (на  сервере) Гео  данные по  странам CSV (в   Интернете) Данные по   просмотрам по  странам с  указанием широты и  долготы Массив JavaScript slideshare. com github.com Google Maps  APIJOIN
  30. 30. SELECT countries.*,  views.cnt FROM ( SELECT Country,  COUNT(*)  AS  cnt FROM "all_latest_views.csv" GROUP  BY Country )  AS views JOIN ( SELECT * FROM "https://countries.csv" )  AS countries  USING Country 30
  31. 31. Пользователи  AlaSQL по  всему  свету 31
  32. 32. Alacon -­‐ утилита  для  ETL >  alacon “SELECT 2+2” 4 >  alacon "SELECT *  INTO 'medals.csv’   FROM 'medals.xlsx'   WHERE Year=2008" 32
  33. 33. ХРАНЕНИЕ ДАННЫХ   НА КЛИЕНТЕ 33
  34. 34. IndexedDB: SELECT *  FROM  t  WHERE a>1 function  selectFromTable (databaseid,  tableid,  cb,  cond)  { var request  =  window.indexedDB.open(databaseid); request.onsuccess =  function(event)  { var res  =  []; var ixdb =  event.target.result; var tx =  ixdb.transaction([tableid]); var store  =  tx.objectStore(tableid); var cur  =  store.openCursor(); cur.onsuccess =  function(event)  { var cursor  =  event.target.result; if(cursor)  { if(cursor.value.a >  1)  res.push(cursor.value); cursor.continue(); }  else  { ixdb.close(); cb(res); } } } }   34
  35. 35. IndexedDB ATTACH INDEXEDDB DATABASE geo; SELECT *  FROM geo.country WHERE continent_name =  "Asia"; 35
  36. 36. LocalStorage ATTACH LOCALSTORAGE  DATABASE geo; SELECT *  FROM geo.country WHERE continent_name =  "Asia"'); 36
  37. 37. Ваш  бэкэнд! alasql.engines.SUPERBASE =  function(){}; SB.createDatabase =  function(dbid,   params)  { //  Создать  свою  базу  данных  здесь } 37
  38. 38. ИНТЕГРАЦИЯ С  ДРУГИМИ ПОПУЛЯРНЫМИ БИБЛИОТЕКАМИ Angular.js d3.js Meteor 38
  39. 39. Встроенная  интеграция • Angular.js • d3.js • TableTop • Meteor 39
  40. 40. Alasql для  d3.js: Олимпийские  медали  из  Excel 40
  41. 41. Берем  медали… SELECT ${axe},   SUM([Gold  Medals])  AS Gold,   SUM([Silver  Medals])  AS Silver,   SUM([Bronze  Medals])  AS Bronze   FROM "medals.csv"   GROUP  BY  ${axe}   ORDER  BY  ${axe} 41
  42. 42. 42
  43. 43. ЗА   РАМКАМИ SQL Графы,  объекты 43
  44. 44. Парсер SQL  (AST-­‐дерево) var ast =  alasql.parse(` SELECT SUM(x) FROM one`); {  statements:  [  {   columns:  [{ aggregatorid:   'SUM',   expression:{columnid:   ‘x’},   over:  undefined  }, from:  [Object],   }  ]  } 44
  45. 45. Поиск  по  дереву SEARCH /+  aggregatorid ['SUM’] 45
  46. 46. 46
  47. 47. Как  связаны  Саша  и  Марина? SEARCH /  "Саша”  PATH("Марина")   EDGE  SET(color="red”) 47
  48. 48. 48
  49. 49. ПОД   КАПОТОМ 49
  50. 50. Как  устроен  AlaSQL изнутри? • Лексер • Парсер • Интерпретатор • Критические  участки   SELECT/INSERT/DELETE/UPDATE/SEARCH   компилируются  в  JS • (картинка  – компиляция  -­‐ магия) 50
  51. 51. Компиляция SELECT *  FROM data   ORDER BY  alpha,  beta var s =  ` if(a.alpha>b.alpha)  {return  1;   else if(a.alpha==b.alpha)  return  0; if(a.beta>b.beta)  {return  1;   else  if(a.beta==b.beta)  return  0; }} return  -­‐1;`; var sortFn =  new  Function(‘a,b’,s); var data  =  data.sort(sortFn); 51
  52. 52. 52 http://jsperf.com/alasql-­‐js-­‐vs-­‐websql/7
  53. 53. 53 SELECT MAX(cnt)  FROM   (SELECT COUNT(*)  AS cnt FROM ?  GROUP  BY _)
  54. 54. 54
  55. 55. 55
  56. 56. Итак,  AlaSQL… • Простая   библиотека   • SQL  +  JavaScript • Расширяемая • Интегрируемая • Удобная 56
  57. 57. 57
  58. 58. Контакты • github.com/agershun/alasql • alasql.org • Андрей  Гершун • agershun@gmail.com • @agershun 58 à la SQL

×