Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Hoodie.js Introduction – Salzburg Web Dev Meetup

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/

Stephan Bönnemann

June 17, 2014
Tweet

More Decks by Stephan Bönnemann

Other Decks in Programming

Transcript

  1. OFFLINEFIRST – NOBACKEND – DREAMCODE

    View full-size slide

  2. build apps in days
    DON'T WORRY ABOUT BACKENDS, DATABASES OR SERVERS

    View full-size slide

  3. Stephan @boennemann
    JAVASCRIPT – MOBILE – ANGULAR

    View full-size slide

  4. Stephan @boennemann
    USER – CONTRIBUTOR

    View full-size slide

  5. How we build
    APPS TODAY

    View full-size slide

  6. OFFLINE FIRST

    View full-size slide

  7. 's frontend, sync & backend
    summed up in one pic
    — Ola Gasidlo

    View full-size slide

  8. $('#signUpForm').submit(function (event) {
    event.preventDefault()
    var username = $('#signUpUsername').val()
    var password = $('#signUpPassword').val()
    hoodie.account.signUp(username, password)
    .done(sayThanks)
    .fail(showError)
    })

    View full-size slide

  9. /*$('#signUpForm').submit(function (event) {
    event.preventDefault()
    var username = $('#signUpUsername').val()
    var password = $('#signUpPassword').val()*/
    hoodie.account.signUp(username, password)
    /*.done(sayThanks)
    .fail(showError)
    })*/

    View full-size slide

  10. hoodie.account.signUp(username, password)

    View full-size slide

  11. hoodie.account.signUp(username, password)
    hoodie.account.signIn(username, password)

    View full-size slide

  12. hoodie.account.signUp(username, password)
    hoodie.account.signIn(username, password)
    hoodie.account.signOut()

    View full-size slide

  13. hoodie.account.changePassword(password, newpassword)
    hoodie.account.changeUsername(password, newusername)
    hoodie.account.resetPassword('[email protected]')

    View full-size slide

  14. onPathEnd = function (path) {
    hoodie.store.add('path', path)
    }
    hoodie.store.findAll('path').done(function (docs) {
    docs.forEach(drawPath)
    })

    View full-size slide

  15. //onPathEnd = function (path) {
    hoodie.store.add('path', path)
    //}
    hoodie.store.findAll('path')//.done(function (docs) {
    // docs.forEach(drawPath)
    //})

    View full-size slide

  16. hoodie.store.add(type, data)
    hoodie.store.findAll(type)

    View full-size slide

  17. 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)

    View full-size slide

  18. hoodie.store.on('add:path', function (doc, options) {
    if (options.remote) drawPath(doc)
    })

    View full-size slide

  19. hoodie.store.on('add', handler)

    View full-size slide

  20. 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)

    View full-size slide

  21. 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)

    View full-size slide

  22. $('#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')
    ]
    })
    }
    })

    View full-size slide

  23. /*$('#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')
    ]
    })
    /*}
    })*/

    View full-size slide

  24. hoodie.email.send(data)

    View full-size slide

  25. Everything
    BECAUSE PLUGINS

    View full-size slide

  26. PAYMENTS SOCIAL
    SIGNUP SMS PUSH
    NOTIFICATIONS
    ACHIEVMENTS

    View full-size slide

  27. How we build
    APPS WITH

    View full-size slide

  28. hood.ie
    git.io/hoodie
    bit.ly/hoodietalks

    View full-size slide

  29. THANKS
    @boennemann

    View full-size slide

  30. 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

    View full-size slide