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.

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