What Do You Know: StateCharts

Presentation for the WebDirections What Do You Know night.

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