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

Angular and WIP: Progressive Saving

John Papa
January 16, 2014

Angular and WIP: Progressive Saving

Quite often we force users to to save or cancel data, before moving on when what they really want is to leave the page in a changed state and come back to their work in progress later, perhaps after closing the browser. This requires change tracking, local storage, serializing and rehydrating complex object graphs, not to mention visual indicators to improve the user experience. Come learn how when AngularJS meets BreezeJS we can light up this scenario.

John Papa

January 16, 2014
Tweet

More Decks by John Papa

Other Decks in Technology

Transcript

  1. Progressive Saving of Work in Progress John Papa @john_papa

  2. @john_papa http://johnpapa.net Blog: http://jpapa.me/cc-ng-z Live demo:

  3. It’s All About the WIP

  4. Saving is Easy

  5. Life Happens

  6. Close the Browser by Accident

  7. Juggling Too Many Workflows At One Time

  8. We Have Some Options

  9. Some Are Clearly Better Than Others

  10. Option A: You Leave, You Lose Changes

  11. Option B: You Can’t Leave!

  12. Option C: Auto-Save as User Types What if the Data

    is Invalid ? What if the Data is Incomplete ? This may not work out so well
  13. Option D: Give Up?

  14. What Do You Do?

  15. Use WIP

  16. Save WIP Automatically What Stories Should We Handle ? Get

    WIP Cancel WIP Listen for Changes Tell the User
  17. None
  18. Breeze Import/Export API’s Key Technical Features Angular Directives HTML5 Local

    Storage Angular Services
  19. How Do We Know When to Stash? Listen to breeze

    Broadcast a custom message
  20. How Do We Export an Entity ? Stash all WIP

    Serialize entity, changes and state
  21. How Do We Import an Entity ? Return the newly

    imported entity Grab the stashed WIP Import the WIP into Breeze
  22. Update the asterisk and counter How Do We Tell the

    User ?
  23. The WIP data Who tells the directive when WIP changes

    WIP directive How Do We Tell the User ?
  24. How Do We Interact with WIP ?

  25. Angular and Breeze WIP Library http://jpapa.me/ng-z-wip

  26. Enjoy it!

  27. Pluralsight Courses Angular Fundamentals - Joe Eames/Jim Cooper http://jpapa.me/ngfundps Build

    Angular and Breeze Apps Part 1 and 2 John Papa http://jpapa.me/spangz and http://jpapa.me/ spangz2
  28. @john_papa http://johnpapa.net Blog: http://jpapa.me/cc-ng-z Live demo: