Hoodie.js Introduction – Salzburg Web Dev Meetup

These are the slides for a Hoodie.js Introduction I gave at the Salzburg Web Dev Meetup.

http://hood.ie/
http://www.meetup.com/salzburgwebdev/events/176014522/
http://lanyrd.com/2014/barcamp-salzburg-june/sczxqg/

Transcript

1. OFFLINEFIRST – NOBACKEND – DREAMCODE
2. build apps in days DON'T WORRY ABOUT BACKENDS, DATABASES OR SERVERS
3. Stephan @boennemann JAVASCRIPT – MOBILE – ANGULAR
4. Stephan @boennemann USER – CONTRIBUTOR
5. How we build APPS TODAY
13. OFFLINE FIRST
21. NOBACKEND
29. 's frontend, sync & backend summed up in one pic — Ola Gasidlo
30. DREAMCODE
31. Account
32. $('#signUpForm').submit(function (event) { event.preventDefault() var username = $('#signUpUsername').val() var password = $('#signUpPassword').val() hoodie.account.signUp(username, password) .done(sayThanks) .fail(showError) })
33. /*$('#signUpForm').submit(function (event) { event.preventDefault() var username = $('#signUpUsername').val() var password = $('#signUpPassword').val()*/ hoodie.account.signUp(username, password) /*.done(sayThanks) .fail(showError) })*/
34. hoodie.account.signUp(username, password)
35. hoodie.account.signUp(username, password) hoodie.account.signIn(username, password)
36. hoodie.account.signUp(username, password) hoodie.account.signIn(username, password) hoodie.account.signOut()
37. hoodie.account.changePassword(password, newpassword) hoodie.account.changeUsername(password, newusername) hoodie.account.resetPassword('joe@example.com')
38. Store
39. onPathEnd = function (path) { hoodie.store.add('path', path) } hoodie.store.findAll('path').done(function (docs) { docs.forEach(drawPath) })
40. //onPathEnd = function (path) { hoodie.store.add('path', path) //} hoodie.store.findAll('path')//.done(function (docs) { // docs.forEach(drawPath) //})
41. hoodie.store.add(type, data) hoodie.store.findAll(type)
42. hoodie.store.add(type, data) hoodie.store.update(type, id, data) hoodie.store.find(type, id) hoodie.store.findAll(type) hoodie.store.remove(type, id) hoodie.store.removeAll(type)
43. Sync
44. hoodie.store.on('add:path', function (doc, options) { if (options.remote) drawPath(doc) })
45. hoodie.store.on('add', handler)
46. hoodie.store.on('add', handler) hoodie.store.on('update', handler) hoodie.store.on('remove', handler) hoodie.store.on('change', handler) hoodie.store.on('add:note', handler) hoodie.store.on('add:uuid123:note', handler)
47. hoodie.remote.on('add', handler) hoodie.remote.on('update', handler) hoodie.remote.on('remove', handler) hoodie.remote.on('change', handler) hoodie.remote.on('add:note', handler) hoodie.remote.on('add:uuid123:note', handler)
48. Mails
49. $('#shareBtn').click(function () { var recipient = prompt('Who would you like to send your drawing to?') if (recipient) { hoodie.email.send({ to: recipient, subject: 'I drew a thing!', body: 'Made with hoodie-drawing', attachments: [ getDrawing('drawing.png') ] }) } })
50. /*$('#shareBtn').click(function () { var recipient = prompt('Who would you like to send your drawing to?') if (recipient) {*/ hoodie.email.send({ to: recipient, subject: 'I drew a thing!', body: 'Made with hoodie-drawing', attachments: [ getDrawing('drawing.png') ] }) /*} })*/
51. hoodie.email.send(data)
52. Everything BECAUSE PLUGINS
53. PAYMENTS SOCIAL SIGNUP SMS PUSH NOTIFICATIONS ACHIEVMENTS …
54. How we build APPS WITH
58. hood.ie git.io/hoodie bit.ly/hoodietalks
59. Q & A
60. THANKS @boennemann
61. Attribution https://secure.flickr.com/photos/rudlavibizon/1213670748/ https://secure.flickr.com/photos/peterv/93463384/ https://secure.flickr.com/photos/80471081@N04/8385628381/ http://media1.giphy.com/media/f1fpMxNfg8GQw/giphy.gif https://speakerdeck.com/espylaub/hoodie-presentation-at-apps-dot-berlin-dot-js https://speakerdeck.com/gr2m/look-ma-no-backend