Без Бэкенда

Андрей Саломатин@filipovskii

MoscowJS 12

основная работана сервере

Раньше

Сейчас

Развитие браузеров и мобильных устройств

Появление облачной инфраструктуры

2004простой клиент

2014сложный клиент

Сейчасwow

SUCH CLoUD

very frontenD

Как не думать о сервере?

1. Использовать только локальное хранилище

2. Прикрутить готовый бэкенд

3. Гибридное решение

Локальные хранилища

Cookie LocalStorage IndexedDB

Local Storage

Local StorageAPI

localStorage.setItem(‘key’, ‘value’);localStorage.getItem(‘key’);localStorage.removeItem(‘key’);

Local StorageTricks

localStorage.setItem(

‘key’, JSON.stringify(obj));

JSON.parse(localStorage.getItem(‘key’));

CanIUseLocal Storage

ОграниченияLocal Storage

5 MbКлючи и значения — строкиЗапросы не поддерживаются

IndexedDB

IndexedDB Local Storage

API

Размер

Запросы

Поддержка

Сложное

Не ограничен

На индексах

Нет в Safari, Opera Mini

Простое

5Mb

Не поддерживаются

Нет в Opera Mini

Локальное хранилище

Локальные vs УдалённыеЗа локальные:Работа в оффлайн, при медленном интернете

За удалённые:Синхронизация между устройствами

Когда локального хранилица достаточно?

Игры

Прототипы

Другие приложения, которые не требуют синхронизации

BaaSна примере

Parseинициализация

Parse.initialize( “your-application-id”, “your-javascript-key”);

Parseрегистрация

Parse.User.signUp(username, password) .done(function(user) {}) .fail(function(error) {});

Parseавторизация

Parse.User.logIn(username, password) .done(function(user) {}) .fail(function(error) {});

Parse.User.logOut();

Parseсохранение

var todo = new Parse.Object.extend(“Todo”);todo.set(“text”, “Nothing”);todo.set(“checked”, true);todo.save() .done(function(saved) {}) .fail(function(error) {});

Parseзапросы

var Todo = Parse.Object.extend(‘Todo’);var query = new Parse.Query(Todo);query.equalTo(‘checked’, false);query.find() .done(function(array) {}) .error(function(error) {});

ParseData Browser

Другие возможности

Parse

CloudCode (кастомный код, node.js)Push уведомленияРабота с файлами…

BaaS

BaaS vs Свой БэкендЗа BaaS:SDK для всех платформЗатраты на разработку, поддержку

За Свой Бэкенд:Хранение критичных пользовательских данныхКастомный код на сервере

Альтернативы

Parse

Apache usergrid_ (на его основе Apigee)KinveyBuilt.io

Гибридные решенияна примере

Hoodieинициализация

var hoodie = new Hoodie( “http://localhost:6007/_api“);

Hoodieрегистрация

hoodie.account.signUp(username, password) .done(function(user) {}) .fail(function(error) {});

Hoodieавторизация

hoodie.account.signIn(username, password) .done(function(user) {}) .fail(function(error) {});

hoodie.account.signOut();

Hoodieсохранение

var hoodie = new hoodie();hoodie.store.add(‘todo’, { text: ‘nothing’, checked: true }) .done(function(todo) {}) .fail(function(error) {});

Hoodieзапросы

hoodie.store.findAll(‘todo’) .done(function(results) {}) .fail(function(error) {});

АрхитектураHoodie

Фото Maddie

АрхитектураHoodie

Hoodie vsВсё Остальное

За Hoodie:Offline по-умолчаниюРасширения на node.js

За Всё Остальное:Hoodie пока только в разработке (web + iOS)Серверный код Hoodie нужно развернуть самому

Альтернативы

Hoodie

Альтернативы

Hoodie

PouchDB (IndexedDB <-> CouchDB)

Когда без бэкендане обойтись?

Когда без бэкендане обойтись?

Нужна высокая произоводительностьREST API недостаточноМного работы не от фронтенда

Думайте о пользователе.

Не о сервере.

Материалы:http://andreysalomatin.me/

no-backend