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

    View Slide

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

    View Slide

  3. It’s All About the WIP

    View Slide

  4. Saving is Easy

    View Slide

  5. Life
    Happens

    View Slide

  6. Close the Browser by Accident

    View Slide

  7. Juggling Too Many Workflows At One Time

    View Slide

  8. We Have
    Some
    Options

    View Slide

  9. Some Are
    Clearly
    Better Than
    Others

    View Slide

  10. Option A: You Leave, You Lose Changes

    View Slide

  11. Option B: You Can’t Leave!

    View Slide

  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

    View Slide

  13. Option D: Give Up?

    View Slide

  14. What Do You Do?

    View Slide

  15. Use WIP

    View Slide

  16. Save WIP
    Automatically
    What Stories Should We Handle ?
    Get WIP
    Cancel WIP
    Listen for
    Changes
    Tell the User

    View Slide

  17. View Slide

  18. Breeze
    Import/Export
    API’s
    Key Technical Features
    Angular
    Directives
    HTML5 Local
    Storage
    Angular
    Services

    View Slide

  19. How Do We Know When to Stash?
    Listen to breeze
    Broadcast a
    custom message

    View Slide

  20. How Do We Export an Entity ?
    Stash all WIP
    Serialize entity,
    changes and state

    View Slide

  21. How Do We Import an Entity ?
    Return the newly
    imported entity
    Grab the stashed
    WIP
    Import the WIP
    into Breeze

    View Slide

  22. Update the asterisk
    and counter
    How Do We Tell the User ?

    View Slide

  23. The WIP data
    Who tells the
    directive when
    WIP changes
    WIP directive
    How Do We Tell the User ?

    View Slide

  24. How Do We Interact with WIP ?

    View Slide

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

    View Slide

  26. Enjoy it!

    View Slide

  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

    View Slide

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

    View Slide