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

2. apps.berlin.js 28.02.2013
3. Gregor @gr2m Alex @espylaub Jan @janl
4. What about you?
9. // Step 1: Instantiate Hoodie with API endpoint var hoodie = new Hoodie(‘http://api.appname.dev‘);
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); }); });
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}); });
12. // Step 4: Listen for the add event from the store, update view hoodie.store.on('add:task', function(task) { $('.taskList').append('<li>'+task.desc+'</li>'); });
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('<li>'+task.desc+'</li>'); }); });
15. Frontend Backend localStorage hoodie.store App .add() .find() .on() Sync CouchDB Modules Users Shares Emails Payments … REST
16. Hoodie is Open Source (Apache 2) github.com/hoodiehq
17. Hoodie is a developer preview
18. THANK YOU!
19. ANY QUESTIONS?