State Charts - Design & Develop

My first public talk about thinking in individual States your User and Application is in to make the design, build and maintaining of Products easier. State Charts give you the ability to think and develop on an individual State level and zoom-in/out of the overall Statechart to stay confident with projects of any size. The talk was on a high introduction level, but can be applied via code or paper, for design, development and/or documentation. Would love to hear feedback @140am !

Transcript

1. STATE CHARTS Design & Develop
2. Manuel KREUTZ developer
3. ISPRIME .com
4. “things” Let’s talk about
5. “things” you interact with..
6. “things” you interact with.. Mobile Phones
7. “things” you interact with.. Computer Software
8. “things” you interact with.. Websites
9. “things” you interact with.. Games
10. “things” you interact with.. iPhone Apps
11. “things” you interact with.. Android Apps
12. “things” you interact with.. Missile Defense Systems
13. “things” you interact with.. Web Applications
14. WHERE ARE “things” FROM?
15. WHERE ARE “things” FROM? idea
16. WHERE ARE “things” FROM? idea > design
17. WHERE ARE “things” FROM? idea > design > build
18. WHERE ARE “things” FROM? idea > design > build > testing
19. WHERE ARE “things” FROM? idea > design > build > testing DONE !
20. SIMPLE !
21. SIMPLE ?
22. WHERE ARE “things” FROM?
23. WHERE DO “things” GO?
24. WHERE DO “things” GO? ideas change !
25. WHERE DO “things” GO? ideas change often !
26. WHERE DO “things” GO? grow bigger !
27. WHERE DO “things” GO? more complex !
28. WHERE DO “things” GO? take longer to build !
29. HOW TO MAKE “things” EASIER? design build maintain
30. STATES MAKE “things” EASIER! design build maintain
31. STATE CHARTS A Visual Language
32. STATE CHARTS For Designers
33. STATE CHARTS For Developers
34. STATE CHARTS Used by Aircraft Industry est. 1987 - David Harel
35. STATE CHARTS Used by Apple est. 1987 - David Harel
36. STATE CHARTS Should be used more ! est. 1987 - David Harel
37. STATE CHARTS ? est. 1987 - David Harel
38. STATE CHARTS an individual State “View Email”
39. STATE CHARTS an individual State “Sending Email”
40. STATE CHARTS the place a State lives in “Main Window > View Email”
41. STATE CHARTS the place a State lives in “Main Window > List All Emails”
42. STATE CHARTS 101 in english / javascript
43. STATE CHARTS > createStatechart(); 101
44. STATE CHARTS > addState (“Logged Out”); Logged Out 101
45. STATE CHARTS > addState (“Logged In”); Logged Out Logged In 101
46. STATE CHARTS Functions go into States Logged Out Log In Logged In 101
47. STATE CHARTS > addState (“Logged Out”, {logIn: function…}); Logged Out Log In Logged In 101
48. MMKAY.. design build maintain
49. LET’s DO SOMETHING! design build maintain
50. STATE CHARTS > goToState (“Logged Out”); Logged Out Log In Logged In 101
51. STATE CHARTS > sendEvent (“Log In”); Logged Out Log In Logged In 101
52. STATE CHARTS calls “exitState” on “Logged Out” State Logged Out Log In Logged In 101
53. STATE CHARTS calls “enterState” on “Logged In” State Logged Out Log In Logged In 101
54. STATE CHARTS put things in “enterState” & “exitState” Logged Out Log In Logged In 101
55. STATE CHARTS put logic in “enterState” & “exitState” Logged Out Log In Logged In 101
56. STATE CHARTS put code in “enterState” & “exitState” Logged Out Log In Logged In 101
57. STATE CHARTS “Logged In” State NOT need a “Log In” function Logged Out Log In Logged In 101
58. SIMPLE “things” design build maintain
59. STATE CHARTS 101 what about bigger “things” ? Logged Out Logged In
60. STATE CHARTS what is going on in here ? Logged Out Logged In 101
61. STATE CHARTS ZOOM IN “Logged In” Top Menu Popup Main Window 101
62. STATE CHARTS what is going on in here ? Top Menu Popup Main Window 101
63. STATE CHARTS ZOOM IN “Top Menu” Search Menu Message Counter 101
64. STATE CHARTS ZOOM to tame Complexity Logged Out Logged In 101
65. STATE CHARTS what about parallel “things” ? Top Menu Popup Main Window 101
66. STATE CHARTS PARALLEL States Top Menu Popup Main Window 101
67. STATE CHARTS PARALLEL States call ALL States Top Menu Popup Main Window 101
68. OVERVIEW View Email design
69. OVERVIEW chart.addState(“View Email”, { answer: function() { this.goToState(“Reply Email”); }, enterState: function() { /* show email on page */ } }); design build
70. OVERVIEW Logged In ! Main Window ! View Email ! Email History design build maintain
71. BACK TO THE
 REAL WORLD
72. possible States & Activities THINK STATE
73. where do States live THINK STATE
74. focus on States THINK STATE
75. focus on User Experience THINK STATE
76. BUILD STATE Create States with Paper
77. Create States with Software BUILD STATE
78. Activities live in States BUILD STATE
79. Functions live in States BUILD STATE
80. Code goes into States BUILD STATE
81. Focus on small States BUILD STATE
82. Focus on small Steps BUILD STATE
83. tame Complexity FEEL STATE
84. Cleaner Work & Less Errors FEEL STATE
85. Communicate easier FEEL STATE
86. THANK YOU
87. MANUEL KREUTZ @140am