SwiftUI in LINE LIVE iOS - Technology Selection and Implementation

Wei Wang (onevcat) (LINE / LIVE Client Development Team / Senior Engineer)

https://tech-verse.me/ja/sessions/19
https://tech-verse.me/en/sessions/19
https://tech-verse.me/ko/sessions/19

Transcript

1. View Slide

2. About “Why” and “How”
   A story between
   LINE LIVE & SwiftUI
   

   View Slide

3. Agenda
   - Why a new UI framework
   - Why SwiftUI
   - How to migrate
   - How does it feel
   

   View Slide

4. Should I use SwiftUI?
   Why and How
   

   View Slide

5. Why a new UI framework
   What’s wrong with the current stack?
   

   View Slide

6. LINE LIVE - a medium scale native iOS app
   ~200k lines
   of Swift
   UIKit MVC
   From 2015
   Why a new UI framework
   

   View Slide

7. Massive View
   Controller
   LINE LIVE - potential tech risk
   ~200k lines
   of Swift
   UIKit
   From 2015
   Why a new UI framework
   

   View Slide

8. LINE LIVE - potential tech risk
   ~200k lines
   of Swift
   UIKit
   Massive View
   Controller
   From 2015
   Why a new UI framework
   

   View Slide

9. Complexity and Mental Burden
   UIKit and MVC are too flexible
   ਺஋࣠
   .VUBCJMJUZ
   $PEF$PNQMFYJUZ
   )VNBO$POUSPM
   

   View Slide

10. Mental Burden and Bugs
    Complexity and Mental Burden
    UIKit and MVC are too flexible
    ਺஋࣠
    .VUBCJMJUZ
    $PEF$PNQMFYJUZ
    )VNBO$POUSPM
    

    View Slide

11. Mental Burden and Bugs
    Complexity and Mental Burden
    UIKit and MVC are too flexible
    ਺஋࣠
    .VUBCJMJUZ
    $PEF$PNQMFYJUZ
    )VNBO$POUSPM
    

    View Slide

12. Mental Burden and Bugs
    Complexity and Mental Burden
    UIKit and MVC are too flexible
    ਺஋࣠
    .VUBCJMJUZ
    $PEF$PNQMFYJUZ
    )VNBO$POUSPM
    

    View Slide

13. Complexity and Mental Burden
    UIKit and MVC are too flexible
    ਺ᆴᇠ
    .VUBCJMJUZ
    $PEF$PNQMFYJUZ
    )VNBO$POUSPM
    - Reduce code complexity
    - Reduce mutability
    

    View Slide

14. Complexity and Mental Burden
    UIKit and MVC are too flexible
    ਺ᆴᇠ
    .VUBCJMJUZ
    $PEF$PNQMFYJUZ
    )VNBO$POUSPM
    - Reduce code complexity
    - Reduce mutability
    - Declarative
    

    View Slide

15. Complexity and Mental Burden
    UIKit and MVC are too flexible
    ਺ᆴᇠ
    .VUBCJMJUZ
    $PEF$PNQMFYJUZ
    )VNBO$POUSPM
    - Reduce code complexity
    - Reduce mutability
    - Declarative
    - Functional
    

    View Slide

16. Declarative & Functional
    A proven best practice for frontend/client UI
    

    View Slide

17. WWDC 2019
    SwiftUI released
    

    View Slide

18. Why SwiftUI
    After 3 years from its initial release
    

    View Slide

19. WWDC 2022
    SwiftUI promoted
    

    View Slide

20. SwiftUI vs. UIKit
    New frameworks
    SwiftUI-only frameworks
    WidgetKit ActivityKit Swift Charts
    

    View Slide

21. SwiftUI vs. UIKit
    SwiftUI is getting more resources
    Popular
    WWDC 21/22
    Lounge
    Fast
    Bug Reporting
    Feedback
    Clear
    Swift
    Syntax
    

    View Slide

22. How to migrate
    Using SwiftUI in a risk-free way
    

    View Slide

23. Do not affect existing components or development schedule
    Evaluate the cost compared to UIKit to guide future work
    Help all team members to become familiar with SwiftUI
    Migration Goals
    

    View Slide

24. First Step - Debug Panel
    

    View Slide

25. - Only used in internal debug builds
    First Step - Debug Panel
    

    View Slide

26. - Only used in internal debug builds
    - Used only by developers and the QA team
    First Step - Debug Panel
    

    View Slide

27. - Only used in internal debug builds
    - Used only by developers and the QA team
    - Understand the basics of SwiftUI
    First Step - Debug Panel
    

    View Slide

28. - Only used in internal debug builds
    - Used only by developers and the QA team
    - Understand the basics of SwiftUI
    - Verify layout, styles, and concepts quickly
    First Step - Debug Panel
    

    View Slide

29. More complicated scene
    

    View Slide

30. - In-app logger
    More complicated scene
    

    View Slide

31. - In-app logger
    - Record/display logs such as API requests
    More complicated scene
    

    View Slide

32. - In-app logger
    - Record/display logs such as API requests
    - Filtering, log sending, live logging
    More complicated scene
    

    View Slide

33. - In-app logger
    - Record/display logs such as API requests
    - Filtering, log sending, live logging
    - Verify navigating, data sharing, and basic
    architecture
    More complicated scene
    

    View Slide

34. A Step Further - Tool app
    

    View Slide

35. - A standalone app to inspect downloadable
    resources
    A Step Further - Tool app
    

    View Slide

36. - A standalone app to inspect downloadable
    resources
    - A side-project with the concurrency
    refactoring in the LINE LIVE app
    A Step Further - Tool app
    

    View Slide

37. - A standalone app to inspect downloadable
    resources
    - A side-project with the concurrency
    refactoring in the LINE LIVE app
    - Verify networking, performance, data
    model, and complex architecture
    A Step Further - Tool app
    

    View Slide

38. Limited use in Production
    

    View Slide

39. - Some simple scenes were rewritten in
    SwiftUI
    Limited use in Production
    

    View Slide

40. - Some simple scenes were rewritten in
    SwiftUI
    - Easy enough to quick rollback if necessary
    Limited use in Production
    

    View Slide

41. - Some simple scenes were rewritten in
    SwiftUI
    - Easy enough to quick rollback if necessary
    - Verify actual behavior in production build
    Limited use in Production
    

    View Slide

42. Build new features
    

    View Slide

43. - Complicated layout and styles
    Build new features
    

    View Slide

44. - Complicated layout and styles
    - Self-contained module
    Build new features
    

    View Slide

45. - Complicated layout and styles
    - Self-contained module
    - Seamlessly integrated with other UIKit
    components
    Build new features
    

    View Slide

46. - Complicated layout and styles
    - Self-contained module
    - Seamlessly integrated with other UIKit
    components
    - Start to build with pure SwiftUI
    Build new features
    

    View Slide

47. - Complicated layout and styles
    - Self-contained module
    - Seamlessly integrated with other UIKit
    components
    - Start to build with pure SwiftUI
    Build new features
    We will talk more about it soon….
    

    View Slide

48. Migration Path
    Solve problems in early stage.
    
    
    
    
    
    
    
    
    
    
    ࢛݄ ޒ݄ ࿡݄ ࣣ݄ ະ໋໊
    Debug Panel
    Debug Logger
    Inspector App
    Simple Scene
    Complex Scene
    From very simple to moderately complex
    

    View Slide

49. How does it feel
    Some of our experiences and ideas
    

    View Slide

50. Risk of ObservedObject
    Log List
    

    View Slide

51. Risk of ObservedObject
    Log List
    Log Settings
    

    View Slide

52. Risk of ObservedObject
    

    View Slide

53. Risk of ObservedObject
    

    View Slide

54. Risk of ObservedObject
    

    View Slide

55. Risk of ObservedObject
    Log List
    Log Settings
    

    View Slide

56. Risk of ObservedObject
    

    View Slide

57. Risk of ObservedObject
    

    View Slide

58. Risk of ObservedObject
    

    View Slide

59. Risk of ObservedObject
    

    View Slide

60. Solve these Problems
    A better pure functional, redux-like architecture
    Complex State Management
    - Single statement management mechanism
    - Clear, understandable, and no surprises
    

    View Slide

61. Dependency & Data Sharing
    Child View
    Child View
    

    View Slide

62. Dependency Injection
    Pure Child View Pure Child View Pure Child View
    

    View Slide

63. Dependency Injection
    Pure Child View
    Parent View
    Pure Child View Pure Child View
    

    View Slide

64. Dependency Injection
    Pure Child View
    Parent View
    Pure Child View Pure Child View
    compose
    

    View Slide

65. Dependency Injection
    Pure Child View
    Parent View
    Pure Child View Pure Child View
    

    View Slide

66. Dependency Injection
    Pure Child View
    Parent View
    Pure Child View Pure Child View
    

    View Slide

67. Dependency Injection
    Pure Child View
    Parent View
    Pure Child View Pure Child View
    deliver data
    

    View Slide

68. Dependency Injection
    Pure Child View
    Parent View
    Pure Child View Pure Child View
    deliver data
    

    View Slide

69. Dependency Injection
    Pure Child View
    Parent View
    Pure Child View Pure Child View
    deliver data
    

    View Slide

70. Dependency Injection
    Pure Child View
    Parent View
    Pure Child View Child View
    deliver data
    

    View Slide

71. Dependency Injection
    Pure Child View
    Parent View
    Pure Child View Child View
    deliver data
    API client, user credentials, etc
    

    View Slide

72. Solve these Problems
    A better pure functional, redux-like architecture
    - Keep smaller components independent and composable
    - Stable, scalable, and compiler-friendly
    Difficult to Perform Dependency Injection
    Complex State Management
    - Single statement management mechanism
    - Clear, understandable, and no surprises
    

    View Slide

73. The Composable Architecture
    (TCA)
    Building applications in a consistent and understandable way,
    with composition, testing, and ergonomics in mind
    https://github.com/pointfreeco/swift-composable-architecture
    

    View Slide

74. The Composable Architecture
    

    View Slide

75. The Composable Architecture
    - Store wraps a State and drives the
    View
    

    View Slide

76. The Composable Architecture
    - Store wraps a State and drives the
    View
    - The view sends actions
    

    View Slide

77. The Composable Architecture
    - Store wraps a State and drives the
    View
    - The view sends actions
    - Action derives the next state and
    execute side-effect
    

    View Slide

78. Dependency Injection
    Pure Child View Pure Child View
    deliver data
    API client, user credentials, etc
    

    View Slide

79. Dependency Injection
    Pure Child View Pure Child View
    deliver data
    Pass through TCA Dependency chain
    

    View Slide

80. Dependency Injection
    Pure Child View Pure Child View
    compose
    Pullback through TCA reducer
    

    View Slide

81. Solve these Problems
    A better pure functional, redux-like architecture
    - Keep smaller components independent and composable
    - Stable, scalable, and compiler-friendly
    Difficult to Perform Dependency Injection
    Complex State Management
    - Single statement management mechanism
    - Clear, understandable, and no surprises
    

    View Slide

82. - The new community feature in LINE LIVE
    Previews
    

    View Slide

83. View Slide

84. View Slide

85. View Slide

86. UIKit SwiftUI
    With SwiftUI + TCA,
    Previews dramatically boosted
    development time
    Development Time
    (Estimated)
    Estimated ~50% in this case
    

    View Slide

87. ~200k lines
    of Swift
    UIKit
    Massive View
    Controller
    From 2015
    Declarative & Functional
    

    View Slide

88. ~200k lines
    of Swift
    UIKit
    SwiftUI
    MVC
    TCA
    From 2015
    Declarative & Functional
    

    View Slide

89. Should I use SwiftUI?
    The Choice Is Yours!
    

    View Slide

90. Uncontrolled Scale
    ਺ᆴᇠ
    .VUBCJMJUZ
    $PEF$PNQMFYJUZ
    )VNBO$POUSPM
    ਺ᆴᇠ
    .VUBCJMJUZ
    $PEF$PNQMFYJUZ
    )VNBO$POUSPM
    

    View Slide

91. Uncontrolled Scale
    ਺ᆴᇠ
    .VUBCJMJUZ
    $PEF$PNQMFYJUZ
    )VNBO$POUSPM
    ਺ᆴᇠ
    .VUBCJMJUZ
    $PEF$PNQMFYJUZ
    )VNBO$POUSPM
    

    View Slide

92. Uncontrolled Scale
    ਺ᆴᇠ
    .VUBCJMJUZ
    $PEF$PNQMFYJUZ
    )VNBO$POUSPM
    ਺ᆴᇠ
    .VUBCJMJUZ
    $PEF$PNQMFYJUZ
    )VNBO$POUSPM
    

    View Slide

93. Before Fully Adopting
    Helpful if you can understand these
    

    View Slide

94. Before Fully Adopting
    Helpful if you can understand these
    View
    lifecycle
    Identifier based
    

    View Slide

95. Before Fully Adopting
    Helpful if you can understand these
    View
    lifecycle
    Layout
    system
    Identifier based Proposed & Cooperative
    

    View Slide

96. Before Fully Adopting
    Helpful if you can understand these
    View
    lifecycle
    Layout
    system
    Version
    evolution
    Identifier based Proposed & Cooperative Use latest technology
    

    View Slide

97. WWDC 2022
    SwiftUI promoted
    

    View Slide

98. Thank you
    

    View Slide