1. WARNING These slides are not optimized for printing or exam preparation. These are for lecture delivery only. These slides are made for PowerPoint 2010. They may not show up well on other PowerPoint versions. You can download PowerPoint 2010 viewer from here.here These slides contain a lot of animations. For optimal results, watch in slideshow mode.

2. TEAMMATE WAITING working WAITING

6. The View from the Top: Architecture

7. CS2103/T, Lecture 4, Part 1, [Sep 4, 2015] Architecture Architecture Architecture Architecture Architecture Architecture Architecture Architecture Architecture Architecture Architecture Architecture Architecture

8. + (important technical decisions) Architecture

9. Architecture

10. Architecture

11. Architecture TEAMMATES

12. + (important technical decisions) Architecture

13. Architecture a a b b c c d d

14. Architecture a a b b c c d d

15. a a b b c c d d Architecture styles

16. a a b b c c d d Architecture styles

17. n-tier | Client-server| Transaction processing | service-oriented | pipes and filters Architecture styles

18. Tier 0 Tier 1 Tier 2 Tier n Storage Logic UI Hardware Access Network Protocol Encryption FTP Access GUI Console n-tier | Client-server| Transaction processing | service-oriented | pipes and filters Architecture styles

19. Server Client 2 Client 1 Client n Web Server Browser 2 Browser 1 Mobile Browser Game Server Game Client 1 Game Client 2 Web Network n-tier | Client-server| Transaction processing | service-oriented | pipes and filters Architecture styles

20. Dispatcher Transaction creator n Transaction creator 1 Transaction executor 1 Transaction executor n T4T4 T4T4 T5T5 T5T5 T6T6 T6T6 T1T1 T1T1 T3T3 T3T3 T2T2 T2T2 Dispatcher Teller n Teller 1 Account Manager Currency Mgt System C4C4 C4C4 A5A5 A5A5 A6A6 A6A6 A1A1 A1A1 C3C3 C3C3 A2A2 A2A2 n-tier | Client-server| Transaction processing | service-oriented | pipes and filters Architecture styles

21. Internet eBookShop xml data n-tier | Client-server| Transaction processing | service-oriented | pipes and filters Architecture styles Web services

22. n-tier | Client-server| Transaction processing | service-oriented | pipes and filters Architecture styles

23. Architecture a a b b c c d d

24. Architecture a a b b c c d d

27. Architecture a a b b c c d d [Application Programming Interface]

28. UI A A B B C C [Application Programming Interface]

29. UI A A B B C C [Application Programming Interface]

30. UI A A B B C C [Application Programming Interface]

31. UI A A B B C C [Application Programming Interface]

32. UI A A B B C C [Application Programming Interface]

33. UI A A B B C C [Application Programming Interface]

34. Define APIs systematically to match features UI A A B B C C [Application Programming Interface]

35. System: Minesweeper Use case: 01 - play game Actors: Player MSS: 1. Player starts a new game. 2. Minesweeper shows the mine field with all cells initially hidden. 3. Player marks or clears a hidden cell. 4. Minesweeper shows the updated mine field. Steps 3-4 are repeated until the game is either won or lost. 5. Minesweeper shows the result. Use case ends.

36. System: Minesweeper Use case: 01 - play game Actors: Player MSS: 1. Player starts a new game. 2. Minesweeper shows the mine field with all cells initially hidden. 3. Player marks or clears a hidden cell. 4. Minesweeper shows the updated mine field. Steps 3-4 are repeated until the game is either won or lost. 5. Minesweeper shows the result. Use case ends. The architect

37. System: Minesweeper Use case: 01 - play game Actors: Player MSS: 1. Player starts a new game. 2. Minesweeper shows the mine field with all cells initially hidden. 3. Player marks or clears a hidden cell. 4. Minesweeper shows the updated mine field. Steps 3-4 are repeated until the game is either won or lost. 5. Minesweeper shows the result. Use case ends.

38. UI MSLogic Storage History

39. UI [interactions between components for a given scenario]

40. :UI [interactions between components for a given scenario] operation returned value

41. :UI

48. SD for PC phone Complete this Sequence diagram. System: PC Phone Actor: phone user MSS: 1. User presses digit 2. System shows digit Repeat step 1-2 until telephone number is entered. 3. User press ‘send’ 4. System connects the call. Telephone conversation takes place. 5. User press ‘end’ 6. System disconnects the call Use case ends. :PCPhoneUI ‘send’ call connected ‘end’ call disconnected User press key Shows digit loop[Until full number]

49. :UI

51. :MSLogic

52. :UI :MSLogic

54. I want a foo() No way!

55. I want a foo() I give you bar() OK

58. :UI :MSLogic

59. :UI :MSLogic

60. :UI :MSLogic

61. :UI :MSLogic Reference frame

62. :UI :MSLogic

63. :UI :MSLogic

64. :Storage :History

67. Assume you are implementing a minesweeper game. Explain how you would eliminate the possibility of losing the game on the first click. first {answer} e.g. first blah blah blah first {answer} e.g. first blah blah blah 77577 OR tinyurl.com/answerpost feed2103 blah blah..

68. a a c c Architecture b b d d 1.…… 2…………

69. Architecture a a b b c c d d

71. agile camp full-design camp

73. Architecture a a b b c c d d

74. Architecture a a b b c c d d

75. UI MSLogic Storage History

76. UI MSLogic Storage History UI MSLogic Storage History

77. UI MSLogic Storage History UI MSLogic Storage History

78. MSLogic

81. Top-down design Minesweeper UI MSLogic Storage History MSLogic ?? ??? History ???

82. Minesweeper UI MSLogic Storage History MSLogic ?? ??? History ??? Bottom-up design

84. Which one is better?

86. UI MSLogic Storage History Start with a ‘walking skeleton’

87. Define architecture to work in parallel Define API systematically Can use architectural styles When to stop? Depends on agility Can be top-down or bottom-up. SDs help to discover APIs

88. Somewhat relevant Define APIs first Use SDs where necessary Force yourself to be top-down OK to be agile