1. Без Бэкенда
Андрей Саломатин
@filipovskii
MoscowJS 12

2. основная работа
на сервере
Раньше

4. Сейчас
Развитие браузеров и
мобильных устройств
Появление облачной
инфраструктуры

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

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

8. Сейчас
wow
SUCH CLOUD
very frontend

9. Как не думать о сервере?
1. Использовать только локальное хранилище
2. Прикрутить готовый бэкенд
3. Гибридное решение

10. Локальные хранилища
Cookie
Local
Storage
IndexedDB

11. Local Storage

12. Local Storage
API
localStorage.setItem(‘key’, ‘value’);
localStorage.getItem(‘key’);
localStorage.removeItem(‘key’);

13. Local Storage
Tricks
localStorage.setItem(
‘key’, JSON.stringify(obj));
JSON.parse(localStorage.getItem(‘key’));

14. CanIUse
Local Storage

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

16. IndexedDB

17. IndexedDB Local Storage
API
Размер
Запросы
Поддержка
Сложное
Не ограничен
На индексах
Нет в Safari, Opera Mini
Простое
5Mb
Не поддерживаются
Нет в Opera Mini

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

19. Локальные vs Удалённые
За локальные:
Работа в оффлайн, при медленном интернете
За удалённые:
Синхронизация между устройствами

20. Когда локального хранилица
достаточно?
Игры
Прототипы
Другие приложения, которые не требуют
синхронизации

21. BaaS
на примере

22. Parse
инициализация
Parse.initialize(
“your-application-id”,
“your-javascript-key”);

23. Parse
регистрация
Parse.User.signUp(username, password)
.done(function(user) {})
.fail(function(error) {});

24. Parse
авторизация
Parse.User.logIn(username, password)
.done(function(user) {})
.fail(function(error) {});
Parse.User.logOut();

26. Parse
сохранение
var todo = new Parse.Object.extend(“Todo”);
todo.set(“text”, “Nothing”);
todo.set(“checked”, true);
todo.save()
.done(function(saved) {})
.fail(function(error) {});

27. 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) {});

28. Parse
Data Browser

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

30. BaaS

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

32. Альтернативы
Parse
Apache usergrid_ (на его основе Apigee)
Kinvey
Built.io

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

34. Hoodie
инициализация
var hoodie = new Hoodie(
“http://localhost:6007/_api“);

35. Hoodie
регистрация
hoodie.account.signUp(username, password)
.done(function(user) {})
.fail(function(error) {});

36. Hoodie
авторизация
hoodie.account.signIn(username, password)
.done(function(user) {})
.fail(function(error) {});
hoodie.account.signOut();

37. Hoodie
сохранение
var hoodie = new hoodie();
hoodie.store.add(‘todo’, {
text: ‘nothing’, checked: true })
.done(function(todo) {})
.fail(function(error) {});

38. Hoodie
запросы
hoodie.store.findAll(‘todo’)
.done(function(results) {})
.fail(function(error) {});

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

40. Фото Maddie

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

43. Hoodie vs
Всё Остальное
За Hoodie:
Offline по-умолчанию
Расширения на node.js
За Всё Остальное:
Hoodie пока только в разработке (web + iOS)
Серверный код Hoodie нужно развернуть самому

44. Альтернативы
Hoodie

45. Альтернативы
Hoodie
PouchDB (IndexedDB <-> CouchDB)

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

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

48. Думайте о пользователе.
Не о сервере.

49. Материалы:
http://andreysalomatin.me/
no-backend