What Do You Know: StateCharts

Transcript

1. Simplify your Events Geoffrey Donaldson @geoffreyd

2. So you’re building an App?

3. The Cool Cats Say • Design: MVC, MVVM, MVP •

   Framework: Backbone, Batman, Sammy, SproutCore, JavascriptMVC ... • Templates: Handlebars, Moustache, Jade, Plain old HTML ...

4. View View Controller Model

5. View View Controller Model

6. View View Controller Model

7. Data View Controller Model

8. Data View Controller Model

9. Events ? View Controller Model

10. Events ? View Controller Model

11. Events ? View Controller Model

12. Errrr

13. Events ? View Controller Model

14. Events ? View Controller Model

15. Which One? Views User Controller Models Contact Controller Client Controller

    Booking Controller Login Controller

16. StateCharts Logic Controllers for your App Login (Is NOT logged

    in) CHECK AUTHORIZATION endLogin Show Login Running (Is Logged in) beginLogin

17. Which One? Views Models User Controller Contact Controller Client Controller

    Booking Controller Login Controller

18. StateCharts - Logic Controllers Views User Controller Models Contact Controller

    Client Controller Booking Controller Login Controller StateChart

19. Data Goes to Views Views User Controller Models Contact Controller

    Client Controller Booking Controller Login Controller StateChart

20. Events Goes to StateChart Views User Controller Models Contact Controller

    Client Controller Booking Controller Login Controller StateChart

21. StateChart Respond to Events Views User Controller Models Contact Controller

    Client Controller Booking Controller Login Controller StateChart

22. Responsible for View Setup Views User Controller Models Contact Controller

    Client Controller Booking Controller Login Controller StateChart

23. So How does it work? Show me already!!

24. Login (Is NOT logged in) CHECK AUTHORIZATION endLogin Show Login

    Running (Is Logged in) beginLogin

25. Login (Is NOT logged in) CHECK AUTHORIZATION endLogin Show Login

    Running (Is Logged in) beginLogin statechart.addState({ parentState: “App”, name: “login”, initialSubState: “checkAuthorization” })

26. statechart.addState({ name: “checkAuthorization”, parentState: “login”, enterState: function() { if (userLoggedIn())

    { this.goToState(“Running”) } else { this.goToState(“ShowLogin”) } } }) Login (Is NOT logged in) CHECK AUTHORIZATION endLogin Show Login Running (Is Logged in) beginLogin

27. statechart.addState({ name: “showLogin”, parentState: “login”, enterState: function() { // Show

    Login View }, exitState: function() { // Hide Login View }, beginLogin: function() { // Send data to server }, endLogin: function() { // Receive response, Then go to Running State } }) Login (Is NOT logged in) CHECK AUTHORIZATION endLogin Show Login Running (Is Logged in) beginLogin

28. statechart.addState({ name: “Running”, parentState: “App”, enterState: function() { // Show

    App Views }, exitState: function() { // Hide App Views } }) Login (Is NOT logged in) CHECK AUTHORIZATION endLogin Show Login Running (Is Logged in) beginLogin

29. Login (Is NOT logged in) CHECK AUTHORIZATION endLogin Show Login

    Running (Is Logged in) beginLogin Testing

30. Login (Is NOT logged in) CHECK AUTHORIZATION endLogin Show Login

    Running (Is Logged in) beginLogin Testing Pass 1 Logged Out, Successful response

31. Login (Is NOT logged in) CHECK AUTHORIZATION endLogin Show Login

    Running (Is Logged in) beginLogin Pass 1 Logged Out, Successful response Pass 2 Logged Out, Failed response Testing

32. Login (Is NOT logged in) CHECK AUTHORIZATION endLogin Show Login

    Running (Is Logged in) beginLogin Pass 1 Logged Out, Successful response Pass 2 Logged Out, Failed response Pass 3 Already Logged In Testing

33. Login (Is NOT logged in) CHECK AUTHORIZATION endLogin Show Login

    Running (Is Logged in) beginLogin Pass 1 Logged Out, Successful response Pass 2 Logged Out, Failed response Pass 3 Already Logged In Testing DONE!

34. StateCharts • Put your App logic in the right place

    • Each State is responsible for it’s visual state • Separate concerns • Easy to Test

35. StateCharts You to can use them github.com/etgryphon/stativus