ITT 2017 - Sangsoo Nam - Application Architecture for Scaled Agile

An agile software development was introduced to focus more on individuals, interactions, working software, customer collaboration and responding to change. An agile team usually consists of 4 to 6 members including product owner, testers, designers, developers and agile coach. It is straightforward for smaller companies to apply. As a company grows, you might wonder how to keep the agile. Spotify has mainly formed agile teams based on features. However, teams’ autonomous could be restricted by an application architecture. We’ve changed an application architecture to support a scaled agile. Several ideas are borrowed from a longest time used architecture, WWW(world wide web). In this talk, Sangsoo Nam describes Spotify's application architecture with lessons.

Transcript

1. Application Architecture for Scaled Agile Sangsoo Nam sangsoo@spotify.com
2. Sangsoo Nam Android Engineer at Spotify sangsoonam.github.io @sangsoonam • Full stack Engineer • Scrum Master • Software Tester
3. Agile 1
4. Agile Manifesto http:/ /agilemanifesto.org/
5. Agile Manifesto Individuals and interactions over processes and tools http:/ /agilemanifesto.org/
6. Agile Manifesto Individuals and interactions over processes and tools Working software over comprehensive documentation http:/ /agilemanifesto.org/
7. Agile Manifesto Individuals and interactions over processes and tools Working software over comprehensive documentation Customer collaboration over contract negotiation http:/ /agilemanifesto.org/
8. Agile Manifesto Individuals and interactions over processes and tools Working software over comprehensive documentation Customer collaboration over contract negotiation Responding to change over following a plan http:/ /agilemanifesto.org/
9. Make a Car
10. Make a Car
11. Agile Way
12. Agile Way Not like this…
13. Agile Way Not like this… Like this!
14. Agile Team
15. Agile Team Android
16. Agile Team Backend Android
17. Agile Team Backend Android Designer
18. Agile Team Product Owner Backend Android Designer
19. Agile Team Product Owner Agile Coach Backend Android Designer
20. Agile Team Tester Product Owner Agile Coach Backend Android Designer
21. Agile Team Tester Product Owner Agile Coach Backend Android Designer iOS
22. Agile Team Tester Product Owner Agile Coach Backend Android Designer iOS Web
23. Agile Development Cycle Sprint Backlog Product Backlog
24. Agile Development Cycle Sprint Backlog 2-3 weeks Product Backlog
25. Agile Development Cycle Sprint Backlog 2-3 weeks Daily Meeting 24 hours Product Backlog
26. Agile Development Cycle Sprint Backlog 2-3 weeks Daily Meeting 24 hours Shippable Product Increment Product Backlog
27. Scaled Agile 2
28. 100 million active users 50 million subscribers Over 30 millions songs 60 markets Growing Fast
29. Hundreds of developers 0.5 Million lines of code How Can We Keep Our Velocity?
30. Agile Team Solve an end to end problem
31. Multiple Agile Teams
32. Multiple Agile Teams ARTIST
33. Multiple Agile Teams ARTIST ALBUM
34. Multiple Agile Teams ARTIST ALBUM CHART
36. ARTIST
37. ARTIST ALBUM
38. ARTIST ALBUM CHART
40. Autonomy is the key!
41. Autonomy =
42. Autonomy = Local Responsibility
43. Autonomy =
44. Autonomy = No Blocking Dependency
46. ARTIST ALBUM CHART
47. ARTIST ALBUM CHART RUNNING RADIO CONCERT DISCOVER SEARCH BROWSE
48. ARTIST ALBUM CHART RUNNING RADIO CONCERT DISCOVER SEARCH BROWSE … ... … … … … … … … … … … … … … … … … … … … … … … … …
49. “Any organization that designs a system will produce a design whose structure is a copy of the organization's communication structure.” Conway’s law by Melvin Conway
50. Application Architecture 3
52. Dependency
53. Consistency Dependency
54. Dynamic Consistency Dependency
55. Dependency
56. Dependency between Client and Backend
57. Open ChartActivity
58. Click Open ChartActivity
59. Click Open ChartActivity
60. Click Open ChartActivity gridView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { Intent i = new Intent(getContext(), ChartActivity.class); i.putExtra(EXTRA_CHART_ID, chartIds.get(position)); startActivity(i); } });
61. Click Open ChartActivity gridView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { Intent i = new Intent(getContext(), ChartActivity.class); i.putExtra(EXTRA_CHART_ID, chartIds.get(position)); startActivity(i); } });
62. Christmas 50 Show Christmas 50 for Christmas season
63. Christmas 50 Show Christmas 50 for Christmas season
64. Christmas 50 This is not the Chart but the Playlist! Show Christmas 50 for Christmas season
65. Open PlaylistActivity gridView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { if (position == 3) { Intent i = new Intent(getContext(), PlatlistActivity.class); i.putExtra(EXTRA_PLATLIST_ID, chartIds.get(position)); startActivity(i); } else { Intent i = new Intent(getContext(), ChartActivity.class); i.putExtra(EXTRA_CHART_ID, chartIds.get(position)); startActivity(i); } } });
66. Open PlaylistActivity gridView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { if (position == 3) { Intent i = new Intent(getContext(), PlatlistActivity.class); i.putExtra(EXTRA_PLATLIST_ID, chartIds.get(position)); startActivity(i); } else { Intent i = new Intent(getContext(), ChartActivity.class); i.putExtra(EXTRA_CHART_ID, chartIds.get(position)); startActivity(i); } } });
67. Dependency between Views (or Teams)
68. Open AlbumActivity
69. Open AlbumActivity
70. Open AlbumActivity Click
71. Open AlbumActivity gridView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { Intent i = new Intent(getContext(), AlbumActivity.class); i.putExtra(EXTRA_ALBUM_ID, albumIds.get(position)); startActivity(i); } }); Click
72. Open AlbumActivity gridView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { Intent i = new Intent(getContext(), AlbumActivity.class); i.putExtra(EXTRA_ALBUM_ID, albumIds.get(position)); startActivity(i); } });
73. Consider Feature Flag gridView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { Intent i; if(FeatureFlags.get("NewAlbum")) { i = new Intent(getContext(), NewAlbumActivity.class); } else { i = new Intent(getContext(), AlbumActivity.class); } i.putExtra(EXTRA_ALBUM_ID, albumIds.get(position)); startActivity(i); } });
74. Consider Feature Flag gridView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { Intent i; if(FeatureFlags.get("NewAlbum")) { i = new Intent(getContext(), NewAlbumActivity.class); } else { i = new Intent(getContext(), AlbumActivity.class); } i.putExtra(EXTRA_ALBUM_ID, albumIds.get(position)); startActivity(i); } });
75. Dependency After Feature Flag ARTIST ALBUM
76. Dependency After Feature Flag ARTIST ALBUM NEW
 ALBUM
77. Dependency After Feature Flag ARTIST ALBUM NEW
 ALBUM CHART
78. Dependency After Feature Flag ARTIST ALBUM NEW
 ALBUM CHART
79. What is the Most Popular Architecture for Scaled Environment?
80. WWW (World Wide Web)
82. URL (Uniform Resource Locator)
83. URL(Uniform Resource Locator) URL Resolver www.spotify.com
84. URL(Uniform Resource Locator) URL Resolver www.spotify.com Resource Location (e.g. IP Address)
85. Spotify URI (Uniform Resource Identifier)
87. Spotify URI Resolver ARTIST CHART ALBUM NEW
 ALBUM …
88. Spotify URI Resolver ARTIST CHART ALBUM NEW
 ALBUM Spotify URI Resolver …
89. Spotify URI Resolver ARTIST CHART ALBUM NEW
 ALBUM Spotify URI Resolver … ALBUM URI
90. Spotify URI Resolver ARTIST CHART ALBUM NEW
 ALBUM Spotify URI Resolver … ALBUM URI
91. Spotify URI Resolver ARTIST CHART ALBUM NEW
 ALBUM Spotify URI Resolver … ALBUM URI
92. Spotify URI Resolver ARTIST CHART ALBUM NEW
 ALBUM Spotify URI Resolver …
93. Spotify URI Resolver ARTIST CHART ALBUM NEW
 ALBUM Spotify URI Resolver … ALBUM URI
94. Spotify URI Resolver ARTIST CHART ALBUM NEW
 ALBUM Spotify URI Resolver … ALBUM URI
95. Spotify URI Resolver ARTIST CHART ALBUM NEW
 ALBUM Spotify URI Resolver … ALBUM URI
96. No Blocking Dependencies with Spotify URI
97. Consider Feature Flag gridView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { Intent i; if(FeatureFlags.get("NewAlbum")) { i = new Intent(getContext(), NewAlbumActivity.class); } else { i = new Intent(getContext(), AlbumActivity.class); } i.putExtra(EXTRA_ALBUM_ID, albumIds.get(position)); startActivity(i); } });
98. No Feature Flag Logic gridView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { Intent i = SpotifyUriResolver.resolve(
 getContext(), uris.get(position) ); startActivity(i); } });
99. No Feature Flag Logic gridView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { Intent i = SpotifyUriResolver.resolve(
 getContext(), uris.get(position) ); startActivity(i); } });
100. No Feature Flag Logic gridView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { Intent i = SpotifyUriResolver.resolve(
 getContext(), uris.get(position) ); startActivity(i); } }); Just resolve the URI
101. Open PlaylistActivity gridView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { if (position == 3) { Intent i = new Intent(getContext(), PlatlistActivity.class); i.putExtra(EXTRA_PLATLIST_ID, chartIds.get(position)); startActivity(i); } else { Intent i = new Intent(getContext(), ChartActivity.class); i.putExtra(EXTRA_CHART_ID, chartIds.get(position)); startActivity(i); } } });
102. No PlaylistActivity Logic gridView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { Intent i = SpotifyUriResolver.resolve(
 getContext(), uris.get(position) ); startActivity(i); } });
103. No PlaylistActivity Logic gridView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { Intent i = SpotifyUriResolver.resolve(
 getContext(), uris.get(position) ); startActivity(i); } });
104. No PlaylistActivity Logic gridView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { Intent i = SpotifyUriResolver.resolve(
 getContext(), uris.get(position) ); startActivity(i); } });
105. No PlaylistActivity Logic gridView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { Intent i = SpotifyUriResolver.resolve(
 getContext(), uris.get(position) ); startActivity(i); } }); Just resolve the URI
106. Dynamic Consistency Dependency
107. Consistency
108. Consistency … ... … … … … … … … … … … … … … … … … … … … … … … … …
110. Rounded
111. Rounded No Bold
112. CSS (Cascading Style Sheets)
113. CSS(Cascading Style Sheets)
114. Don’t (Inline Style) <button style="width:100px;height:30px;border:1px solid;padding:10px" type="button">Save</button> CSS(Cascading Style Sheets)
115. Don’t (Inline Style) <button style="width:100px;height:30px;border:1px solid;padding:10px" type="button">Save</button> Do (Global Style) .button { width: 100px; height: 30px; border: 1px solid; padding: 10px } <button type="button">Save</button> CSS(Cascading Style Sheets)
117. GLUE (Global Language For Unified Experience)
118. GLUE (Global Language For Unified Experience) Color
119. GLUE (Global Language For Unified Experience) Fonts Color
120. GLUE (Global Language For Unified Experience) Fonts Color Component
123. Card
124. Card
125. Card CompactCard
126. ARTIST CHART ALBUM NEW
 ALBUM Spotify URI Resolver …
127. ARTIST CHART ALBUM NEW
 ALBUM Spotify URI Resolver … GLUE
128. Dynamic Consistency Dependency
129. Dynamic
130. Release Cycle
131. Release Cycle 2 weeks
132. Release Cycle 2 weeks PlayStore Review
133. Release Cycle 2 weeks PlayStore Review Users
135. Release it Immediately
136. HTML (Hyper Text Markup Language)
137. HTML (Hyper Text Markup Language) Server Web Browser
138. HTML (Hyper Text Markup Language) Server Request Web Browser
139. HTML (Hyper Text Markup Language) Server Request Web Browser Response (HTML) <div class="offer"> <h3 class="offer-title">Spotify Family</h3> <a class="btn btn-link btn-sm" href="/us/family/">Learn more</a> ...
140. WebView?
141. No. Not WebView but Native Renderer
142. Response { "text":"Today's Top Hits", "image": { ... }, "link": { ... "uri": "spotify:user:spotify:playlist:5FJXhjdILmRA2z5bvz4nzf" }, }, { "text":"RapCaviar", "image": { ... }, "link": { ... "uri": "spotify:user:spotify:playlist:5yolys8XG4q7YfjYGl5Lff" }, }
143. Response with Render Type { "card": { "text":"Today's Top Hits", "image": { ... }, "link": { ... "uri": "spotify:user:spotify:playlist:5FJXhjdILmRA2z5bvz4nzf" }, } }, { "card": { "text":"RapCaviar", "image": { ... }, "link": { ... "uri": "spotify:user:spotify:playlist:5yolys8XG4q7YfjYGl5Lff" }, } }
144. Response with Render Type { "card": { "text":"Today's Top Hits", "image": { ... }, "link": { ... "uri": "spotify:user:spotify:playlist:5FJXhjdILmRA2z5bvz4nzf" }, } }, { "card": { "text":"RapCaviar", "image": { ... }, "link": { ... "uri": "spotify:user:spotify:playlist:5yolys8XG4q7YfjYGl5Lff" }, } }
145. Response with Render Type { "carousel": { "items": [ { "card": { "text":"Today's Top Hits", "image": { ... }, "link": { ... "uri": "spotify:user:spotify:playlist:5FJXhjdILmRA2z5bvz4n }, } }, { "card": { "text":"RapCaviar", "image": { ... }, "link": { ... ]
146. Response with Render Type { "carousel": { "items": [ { "card": { "text":"Today's Top Hits", "image": { ... }, "link": { ... "uri": "spotify:user:spotify:playlist:5FJXhjdILmRA2z5bvz4n }, } }, { "card": { "text":"RapCaviar", "image": { ... }, "link": { ... ]
147. Response with Render Type { "carousel": { "items": [ { "card": { "text":"Today's Top Hits", "image": { ... }, "link": { ... "uri": "spotify:user:spotify:playlist:5FJXhjdILmRA2z5bvz4n }, } }, { "card": { "text":"RapCaviar", "image": { ... }, "link": { ... ]
148. Response with Header { "header": { "text": "Popular Playlists" } }, { "card": { "text":"Today's Top Hits", "image": { ... }, "link": { ... "uri": "spotify:user:spotify:playlist:5FJXhjdILmRA2z5bvz4nzf" }, } } ...
149. Response with Header { "header": { "text": "Popular Playlists" } }, { "card": { "text":"Today's Top Hits", "image": { ... }, "link": { ... "uri": "spotify:user:spotify:playlist:5FJXhjdILmRA2z5bvz4nzf" }, } } ...
150. Response with Header { "header": { "text": "Popular Playlists" } }, { "card": { "text":"Today's Top Hits", "image": { ... }, "link": { ... "uri": "spotify:user:spotify:playlist:5FJXhjdILmRA2z5bvz4nzf" }, } } ...
151. ARTIST CHART ALBUM NEW
 ALBUM Spotify URI Resolver … GLUE
152. ARTIST CHART ALBUM NEW
 ALBUM Spotify URI Resolver … GLUE Native Renderer
153. DEMO!
164. Same Experience
165. Same Experience
166. Same Experience
167. Personalization
168. Personalization
169. Personalization
170. Personalization
171. Conclusion
172. Autonomy is the key!
173. Autonomy = Local Responsibility
174. Autonomy = No Blocking Dependency
175. ARTIST ALBUM CHART RUNNING RADIO CONCERT DISCOVER SEARCH BROWSE … ... … … … … … … … … … … … … … … … … … … … … … … … …
176. Architecture for Scaled Agile RUNNING CHART BROWSE GENRE …
177. • Dependency Architecture for Scaled Agile RUNNING CHART BROWSE GENRE …
178. • Dependency Architecture for Scaled Agile RUNNING CHART BROWSE GENRE Spotify URI Resolver …
179. • Dependency Architecture for Scaled Agile RUNNING CHART BROWSE GENRE Spotify URI Resolver … From URL
180. • Dependency • Consistency Architecture for Scaled Agile RUNNING CHART BROWSE GENRE Spotify URI Resolver … From URL
181. • Dependency • Consistency Architecture for Scaled Agile RUNNING CHART BROWSE GENRE Spotify URI Resolver … GLUE From URL
182. • Dependency • Consistency Architecture for Scaled Agile RUNNING CHART BROWSE GENRE Spotify URI Resolver … GLUE From CSS From URL
183. • Dependency • Consistency • Dynamic Architecture for Scaled Agile RUNNING CHART BROWSE GENRE Spotify URI Resolver … GLUE From CSS From URL
184. • Dependency • Consistency • Dynamic Architecture for Scaled Agile RUNNING CHART BROWSE GENRE Spotify URI Resolver … GLUE Native Renderer From CSS From URL
185. • Dependency • Consistency • Dynamic Architecture for Scaled Agile RUNNING CHART BROWSE GENRE Spotify URI Resolver … GLUE Native Renderer From CSS From URL From HTML
187. We Keep Our Velocity with Better User Experience
188. Questions Sangsoo Nam sangsoo@spotify.com