За останні роки веб-додатки стали більш складними. Браузери послідовно забезпечують все кращу продуктивність JavaScript і здатні все більше і більше використовувати JavaScript API.
Зі збільшенням кількості веб-додатків виникла потреба в хороших механізмах зберігання даних клієнта, і саме тому з'явилась клієнтська БД PouchDB у JavaScript.
Що таке PouchDB?
PouchDB – це відкрита клієнтська база даних у JavaScript, розроблена Apache CouchDB для роботи у браузері.
Що таке база даних у JavaScript?
Якщо дуже просто пояснити, то база даних JavaScript - об'єкт JavaScript, який надає методи (або API), щоб записати, отримати і знайти дані. Насправді, звичайний об'єкт JavaScript - найпростіший тип бази даних JavaScript. Якщо ви знайомі з Meteor, то ви, можливо, чули про Minimongo, яка є іншою клієнтською базою даних JavaScript, яка імітує MongoDB API.
PouchDB – JavaScript реалізація CouchDB. Його мета полягає в тому, щоб наслідувати API CouchDB з майже ідеальною точністю під час роботи в браузері або в Node.js.
Чим PouchDB відрізняється від баз даних, таких як Minimongo? Тим, що, за замовчуванням, це не тільки база даних всередині пам'яті, вона використовує IndexedDB для зберігання даних. IndexedDB - це низькорівнева API для зберігання клієнтських структурованих даних значних обсягів, включаючи файли. Це означає, що дані PouchDB зберігаються на диску, і будуть доступні навіть після поновлення сторінки (проте, дані, збережені за допомогою одного браузера не будуть доступні для інших браузерів).
Різні адаптери дозволяють змінювати базові дані.
Відношення до CouchDB
PouchDB – це реалізація JavaScript'у з CouchDB, і наслідує її API настільки близько, наскільки це можливо.
У CouchDB, можна отримати всі документи, використовуючи цей API виклик:
/db/_all_docs?include_docs=true
У PouchDB це робиться так:
db.allDocs({include_docs: true})
PouchDB дозволяє додаткам зберігати дані локально в автономному режимі, а потім синхронізувати їх з CouchDB, коли з'являється доступ до Інтернету.
Тепер давайте подивимося, як ви можете використовувати PouchDB у своїх додатках.
Встановлення
Для того, щоб почати використовувати PouchDB вам просто потрібно включити клієнтську бібліотеку PouchDB. Ви можете використовувати автономну збірку, що робить конструктор PouchDB глобально доступниим на об'єкті window.
<script src="https://cdn.jsdelivr.net/pouchdb/5.4.5/pouchdb.min.js"></script>
або, якщо ви використовуєте його в середовищі Node.js/browserify/webpack, ви можете встановити його з npm.
$ npm install pouchdb --save
Потім у JavaScript:
var PouchDB = require('pouchdb');
(Цікавий факт: npm isntall pouchdb також працює!)
Робота з PouchDB
Створення бази даних
Створити бази даних у PouchDB так само просто, як викликати конструктор PouchDB. Давайте створимо базу даних під назвою «Movies».
var movies = new PouchDB('Movies');
Після виконання цього коду, ви побачите основну інформацію про вашу базу даних, використовуючи метод info, який повертає Promise.
movies
.info()
.then(function (info) {
console.log(info);
})
Наступний код виводить:
{"doc_count":0,"update_seq":0,"idb_attachment_format":"binary","db_name":"Movies","auto_compaction":false,"adapter":"idb"}
adapterвказує на те, що у ньому використовується IndexedDB.
Робота з документами
PouchDB – це NoSQL, документ на основі бази даних, до того ж ви можете просто вставити JSON-документ. Давайте подивимося, як ви можете вставляти, оновлювати, отримувати або видаляти документи.
Створення документу
Ви можете створити документ, використовуючи метод put:
// повертає promise
db.put(doc, [docId], [docRev], [options])
Параметри у квадратних дужках не є обов'язковими. Кожен документ має поле _id, яке пов'язаний з ним і працює в якості унікального ідентифікатора.
Додайте новий документ в раніше створеній базі даних Movies, виконавши наступний код:
movies
.put({
_id: 'tdkr',
title: 'The Dark Knight Rises',
director: 'Christopher Nolan'
}).then(function (response) {
console.log("Success", response)
}).then(function (err) {
console.log("Error", err)
})
Відповідь, у разі успішного виконання, буде такою:
Success {ok: true, id: "tdkr", rev: "3-f8afdea539618c3e8dceb20ba1659d2b"}
Виклик movies.info() тепер покаже {doc_count: 1} поряд з іншими даними, що вказують, що наш документ дійсно був включений.
Поле rev після виконання програми вказує на перегляд документа. Кожен документ має поле під назвою _rev. Кожен раз, коли документ оновлюється, _rev поле документа змінюється. Кожне виправлення вказує на попереднє виправлення. PouchDB зберігає історію кожного документа (так само, як git).
Читання документа
PouchDB надає API метод get для отримання документа по його ID, виконаймося:
movies
.get('tdkr')
.then(function(doc) {
console.log(doc)
})
.catch(function (err) {
console.log(err)
})
Це дасть такий результат:
{title: "The Dark Knight Rises", director: "Christopher Nolan", _id: "tdkr", _rev: "3-f8afdea539618c3e8dceb20ba1659d2b"}
Оновлення документа
Припустимо, ми хочемо додати поле «year» до нашого документу. Вам потрібно оновити вище створений документ, виконавши:
movies
.get('tdkr')
.then(function(doc) {
doc.year = "2012" // нове поле
console.log(doc._rev) // документ має '_rev' поле
return db.put(doc) // виконаємо put, це призведе до нової перевірки
}).then(function (res) {
console.log(res)
})
При оновленні документа, необхідно вказати поле _rev.
Ви повинні побачити подібне в консолі: {ok: true, id: "tdkr", rev: "4-7a34189fb8f2e28fe08b666e699755b8"} із зазначенням нової редакції документа.
Видаленння документів
Видалення документу в PouchDB передбачає встановлення властивості _deleted на true. Можна викликати .remove(), щоб зробити це:
.get('tdkr')
.then(function(doc) {
return movies.remove(doc) // return the promise
}).then(function(res) {
console.log("Remove operation response", res)
})
Це рівносильно:
movies
.get('tdkr')
.then(function (doc) {
doc._deleted = true
return db.put(doc)
})
.then(...)
Видалення бази даних
Ви можете видалити базу даних, викликавши destroy() на об'єкті з бази даних.
// повертає promise
movies.destroy()
Масові операції
До сих пір ми працювали з окремими документами в PouchDB. Проте, у API також є можливість для роботи з колекцією документів. PouchDB надає два методи для масових операцій - bulkDocs() для об'ємного запису і allDocs() для читання в цілому.
Метод bulkDocs() досить простий. Він просто бере масив документів, які потрібно вставити в базу даних.
Вставка декількох документів
// Повертає promise
movies.bulkDocs([
{
_id: 'easy-a',
title: "Easy A",
// інші атрибути
},
{
_id: 'black-swan',
title: 'Black Swan',
// ...
}
])
Приклад відповіді:
[
{
"ok": true,
"id": "easy-a",
"rev": "1-84abc2a942007bee7cf55007cba56198"
},
{
"ok": true,
"id": "black-swan",
"rev": "1-7b80fc50b6af7a905f368670429a757e"
}
]
Якщо ви хочете вставити кілька документів, використання основного обсягу API, як правило, краще, ніж робити кілька put() запитів. Масові операції, як правило, швидші, ніж окремі операції, так як вони можуть бути об'єднані в одну транзакцію або один запит HTTP (для віддаленого сервера CouchDB).
Отримання кількох документів
Для читання декількох документів, PouchDB використовує allDocs().
// без {include_docs: true}, тільки id документів повертається
movies
.allDocs({include_docs: true})
.then(function (docs) {
console.log(docs)
})
Це швидкий і дуже корисний метод. З документації PouchDB:
_allDocs() – це нова частина PouchDB. Цей метод не тільки приводить документи в порядок, він також дозволяє змінити порядок, фільтрує за _ID, сортує, використовуючи "більше ніж" і "менше ніж" операції на id, і багато іншого.
За замовчуванням документи повертаються в порядку зростання _id. Можна вказати {descending: true}, щоб змінити порядок.
movies
.allDocs({
include_docs: true,
descending: true
})
.then(...)
Ви також можете вказати startkey і endkey параметри, щоб отримати документи в межах певного діапазону. Наприклад, щоб отримати всі фільми, чиї _id починаються з «a» або «b», ви могли б виконати цей запит:
movies
.allDocs({
include_docs: true,
startkey: 'a',
endkey: 'c'
})
.then(console.log)
.catch(console.log)
Параметри startKey і endKey особливо корисні для сторінкових API.
В реальному часі з ChangeFeeds
Ми говорили про те, як PouchDB використовує поле _rev для відстеження виправлень, кожне виправлення вказує на попереднє виправлення. PouchDB і CouchDB використовують цей ланцюжок виправлень для копіювання баз даних.
Проте, застосування цього алгоритму копіювання є те, що він дозволяє побачити історію бази даних, таким чином, можна відповісти на такі питання:
-
Які зміни були внесені в базу даних в даний момент часу?
-
Які зміни були внесені в конкретний документ?
В цей час з'являється метод changes(). Для того, щоб показати всі зміни з самого початку:
db.changes({
since: 0,
include_docs: true
}).then(function (changes) {
console.log(changes)
}).catch(...)
Проте, в веб-додатках, в яких ви, як правило, більше зацікавлені, можна спостерігати зміни в базі даних, які відбуваються після початкового завантаження сторінки, так що ви можете змінити призначений для користувача інтерфейс відповідним чином.
db
.changes({
since: 'now',
live: true,
include_docs: true
})
.on('change', function (change) {
// Тут виможете модифікувати UI, основуючись на змінах в БД.
// change.id містить doc id, change.doc містить doc
if (change.deleted) {
// документ видалено
} else {
// документ додано/модифіковано
}
})
.on('error', function (err) {
// опрацювання помилок
})
Тому, якщо у вас, скажімо, є базовий додаток для складання списку, то ви можете додавати елементи в одному вікні, а вони з'являтимуться в іншому вікні в режимі реального часу.
Синхронізація: Отримайте PouchDB дані поза браузером
У більшості додатків потрібно буде зберігати дані на задньому плані, тобто поза програмою, а не тільки в браузері, так що ви можете використовувати PouchDB, щоб зберегти ваші дані локально, а також синхронізувати його з фоновими даними CouchDB, так що дані будуть доступні в будь-якому місці, а не тільки в цьому конкретному браузері.
PouchDB надає дуже просту API, щоб зробити це. Припускаючи, у вас є повна база даних CouchDB, синхронізуючи її – це просто питання двох рядків у JavaScript.
// локальна база даних, яка існує в браузері IndexedDB
var localDB = new PouchDB('mylocaldb')
// віддалена CouchDB
var remoteDB = new PouchDB('https://web.archive.org/web/20230324194928/http://localhost:5984/myremotedb')
Ви можете копіювати локальні зміни у віддалену базу даних, написавши:
localDB
.replicate
.to(remoteDB)
.on('complete', function () {
// local changes replicated to remote
}).on('error', function (err) {
// error while replicating
})
Однак, так як багато користувачів можуть мати доступ до тієї ж бази даних, то більш корисно мати можливість синхронізувати зміни з віддаленої бази даних до браузера. PouchDB дозволяє це зробити.
Двонаправлена синхронізація може бути досягнута за допомогою цього рядка JavaScript:
// повторюється раз
localDB.sync(remoteDB);
Або для синхронізації в реальному часі:
// продовжує синхронізувати зміни, як тільки вони відбуваються
localDB.sync(remoteDB, {live: true})
Висновки
PouchDB також має зростаючу екосистему плагінів і рамкових адаптерів. Крім того, при роботі з PouchDB, ви можете використовувати PouchDB Inspector chrome extension, яке забезпечує приємний графічний інтерфейс, щоб відобразити вашу базу даних.
Це був вступний огляд PouchDB. Це, безумовно, одна з найбільш цікавих БД, я сподіваюся, що ви зможете тепер використовувати її для створення офлайн-додатків та real-time додатків.
Ще немає коментарів