Backend driven UI on mobile apps, a hybrid approach @SoundCloud. For Mobos in Cluj. 14/02/2019

1. BACKEND DRIVEN UI ON
MOBILE APPS
A HYBRID APPROACH
@SOUNDCLOUD
02.2019, MOBOS

2. !"
➡
HELLO, I'M ANDREA
CIPRIANI!CORE CLIENTS @ SOUNDCLOUD

3. WHY THIS TALK, ANDREA?

4. WHY THIS TALK, ANDREA?
▸ One of the most successful projects I've seen at
SoundCloud

5. WHY THIS TALK, ANDREA?
▸ One of the most successful projects I've seen at
SoundCloud
▸ Experience after more than a year in production

6. WHY THIS TALK, ANDREA?
▸ One of the most successful projects I've seen at
SoundCloud
▸ Experience after more than a year in production
▸ Sharing our learnings

7. AGENDA

8. AGENDA
1. Backend Driven UI introduction

9. AGENDA
1. Backend Driven UI introduction
2. The hybrid approach @SoundCloud

10. AGENDA
1. Backend Driven UI introduction
2. The hybrid approach @SoundCloud
3. Live demo on a simple app

11. AGENDA
1. Backend Driven UI introduction
2. The hybrid approach @SoundCloud
3. Live demo on a simple app
4. Questions/Answers

12. BACKEND DRIVEN UI
INTRODUCTION

13. BUILDING UI, THE CLASSIC APPROACH
1. You build the UI on the clients
2.The server returns the data
3.The client fills out the UI with the given data

14. THE LIMITATIONS OF THE CLASSIC APPROACH

15. THE LIMITATIONS OF THE CLASSIC APPROACH
▸ Updating UI ➡ developer work on multi-platforms

16. THE LIMITATIONS OF THE CLASSIC APPROACH
▸ Updating UI ➡ developer work on multi-platforms
▸ Slow process, release cycles

17. THE LIMITATIONS OF THE CLASSIC APPROACH
▸ Updating UI ➡ developer work on multi-platforms
▸ Slow process, release cycles
▸ A/B testing support in the client

18. THE UI OF A CLIENT IS BACKEND
DRIVEN WHEN WE CAN CHANGE IT
WITHOUT MODIFYING ITS CODE.

19. BACKEND DRIVEN UI
▸The backend dictates how data should be presented
▸The client knows how to render some predefined UI elements

20. "THE HUB", SPOTIFY

21. MORE FLEXIBILITY, MORE PROBLEMS

22. MORE FLEXIBILITY, MORE PROBLEMS
▸ Overhead to build generic UI elements

23. MORE FLEXIBILITY, MORE PROBLEMS
▸ Overhead to build generic UI elements
▸ More error prone, untested UI paths?

24. MORE FLEXIBILITY, MORE PROBLEMS
▸ Overhead to build generic UI elements
▸ More error prone, untested UI paths?
▸ You have to consider retro-compatibility

25. Isn't Software Engineering
always about making the right
compromises?

26. HOW MUCH CONTROL DO WE NEED?

27. THE HYBRID APPROACH
AT SOUNDCLOUD

28. SOUNDCLOUD'S HOME

29. STEP 1: DEFINE A
CATALOG

30. SINGLE PLAYLIST CELL

31. !
SINGLE PLAYLIST CELL

32. SINGLE PLAYLIST CELL CUSTOMIZED

33. ANOTHER THEME

34. THE CATALOG

35. STEP 2: DEFINE A
CONTRACT

36. THE CONTRACT

37. STEP 3: IMPLEMENTING
THE CONTRACT

38. IT'S IMPLEMENTATION TIME

39. IT'S IMPLEMENTATION TIME
▸ Build the flexible UI elements on the clients

40. IT'S IMPLEMENTATION TIME
▸ Build the flexible UI elements on the clients
▸ Make sure everything is future-proof

41. IT'S IMPLEMENTATION TIME
▸ Build the flexible UI elements on the clients
▸ Make sure everything is future-proof
▸ Implement deeplinks support

42. STEP 4

43. STEP 4: ENJOY IT

44. When I opened the app and saw
a new section there...

45. CHARTS... FOR FREE

46. THE HYBRID APPROACH @SOUNDCLOUD

47. THE HYBRID APPROACH @SOUNDCLOUD
▸ We have control only over what we need

48. THE HYBRID APPROACH @SOUNDCLOUD
▸ We have control only over what we need
▸ We can't change the font, but do you need that?

49. THE HYBRID APPROACH @SOUNDCLOUD
▸ We have control only over what we need
▸ We can't change the font, but do you need that?
▸ Not every screen needs to be backend-controlled

50. THE HYBRID APPROACH @SOUNDCLOUD
▸ We have control only over what we need
▸ We can't change the font, but do you need that?
▸ Not every screen needs to be backend-controlled
▸ Navigation with deeplinks

51. PROS

52. PROS
▸ Productivity: changes without modifying the clients

53. PROS
▸ Productivity: changes without modifying the clients
▸ More flexibility for A/B tests

54. PROS
▸ Productivity: changes without modifying the clients
▸ More flexibility for A/B tests
▸ Unified UI: ensures consistency and reusability

55. DEMO TIMEGITHUB.COM/ANDREACIPRIANI/BDUDEMO

56. MULTUMESC!
THANKS!
GRAZIE!
DANKESCHÖN!

57. QUESTIONSAND (HOPEFULLY SOME) ANSWERS

58. SOUNDCLOUD IS HIRING
WWW.SOUNDCLOUD.COM/JOBS