$30 off During Our Annual Pro Sale. View Details »

Hoodie Presentation at apps.berlin.js

Alex Feyerke
February 28, 2013

Hoodie Presentation at apps.berlin.js

Slides for our first public demo of Hoodie.

High-quality video here (the end is missing, though :/ ) https://www.youtube.com/watch?v=X3Ttb0BD8pg

There's also a low-quality google hangout recording here, for completeness: http://www.youtube.com/watch?v=eGvZr5EFk7M&feature=player_detailpage#t=8096s

Check out the project at http://github.com/hoodiehq

Thanks for your interest!

Alex Feyerke

February 28, 2013
Tweet

More Decks by Alex Feyerke

Other Decks in Programming

Transcript

  1. View Slide

  2. apps.berlin.js 28.02.2013

    View Slide

  3. Gregor
    @gr2m
    Alex
    @espylaub
    Jan
    @janl

    View Slide

  4. What about you?

    View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. // Step 1: Instantiate Hoodie with API endpoint
    var hoodie = new Hoodie(‘http://api.appname.dev‘);

    View Slide

  10. // Step 2: Signup
    $('.signUp .submit').click(function(event){
    event.preventDefault();
    var username = $('.signUp .username').val();
    var password = $('.signUp .password').val();
    hoodie.account.signUp(username, password).done(function(){
    $('#modal').modal('hide');
    $('.welcome').text('Hello, '+hoodie.account.username);
    });
    });

    View Slide

  11. // Step 3: Save a task to the Hoodie store
    $('.addTask .submit').click(function(event){
    event.preventDefault();
    var desc = $('.addTask .desc').val();
    hoodie.store.add('task', {desc: desc});
    });

    View Slide

  12. // Step 4: Listen for the add event from the store, update view
    hoodie.store.on('add:task', function(task) {
    $('.taskList').append(''+task.desc+'');
    });

    View Slide

  13. // Step 5: Find all tasks of this user and populate the task list
    hoodie.store.findAll('task').done(function(tasks){
    $('.taskList').empty()
    tasks.forEach( function( task ){
    $('.taskList').append(''+task.desc+'');
    });
    });

    View Slide

  14. View Slide

  15. Frontend Backend
    localStorage
    hoodie.store
    App
    .add()
    .find()
    .on()
    Sync
    CouchDB
    Modules
    Users
    Shares
    Emails
    Payments

    REST

    View Slide

  16. Hoodie is Open Source
    (Apache 2)
    github.com/hoodiehq

    View Slide

  17. Hoodie is a developer preview

    View Slide

  18. THANK YOU!

    View Slide

  19. ANY QUESTIONS?

    View Slide