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!

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