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

2. About “Why” and “How” A story between LINE LIVE & SwiftUI
3. Agenda - Why a new UI framework - Why SwiftUI - How to migrate - How does it feel
4. Should I use SwiftUI? Why and How
5. Why a new UI framework What’s wrong with the current stack?
6. LINE LIVE - a medium scale native iOS app ~200k lines of Swift UIKit MVC From 2015 Why a new UI framework
7. Massive View Controller LINE LIVE - potential tech risk ~200k lines of Swift UIKit From 2015 Why a new UI framework
8. LINE LIVE - potential tech risk ~200k lines of Swift UIKit Massive View Controller From 2015 Why a new UI framework
9. Complexity and Mental Burden UIKit and MVC are too flexible ਺஋࣠ .VUBCJMJUZ $PEF
   $PNQMFYJUZ )VNBO
   $POUSPM
10. Mental Burden and Bugs Complexity and Mental Burden UIKit and MVC are too flexible ਺஋࣠ .VUBCJMJUZ $PEF
    $PNQMFYJUZ )VNBO
    $POUSPM
11. Mental Burden and Bugs Complexity and Mental Burden UIKit and MVC are too flexible ਺஋࣠ .VUBCJMJUZ $PEF
    $PNQMFYJUZ )VNBO
    $POUSPM
12. Mental Burden and Bugs Complexity and Mental Burden UIKit and MVC are too flexible ਺஋࣠ .VUBCJMJUZ $PEF
    $PNQMFYJUZ )VNBO
    $POUSPM
13. Complexity and Mental Burden UIKit and MVC are too flexible ਺ᆴᇠ .VUBCJMJUZ $PEF
    $PNQMFYJUZ )VNBO
    $POUSPM - Reduce code complexity - Reduce mutability
14. Complexity and Mental Burden UIKit and MVC are too flexible ਺ᆴᇠ .VUBCJMJUZ $PEF
    $PNQMFYJUZ )VNBO
    $POUSPM - Reduce code complexity - Reduce mutability - Declarative
15. Complexity and Mental Burden UIKit and MVC are too flexible ਺ᆴᇠ .VUBCJMJUZ $PEF
    $PNQMFYJUZ )VNBO
    $POUSPM - Reduce code complexity - Reduce mutability - Declarative - Functional
16. Declarative & Functional A proven best practice for frontend/client UI
17. WWDC 2019 SwiftUI released
18. Why SwiftUI After 3 years from its initial release
19. WWDC 2022 SwiftUI promoted
20. SwiftUI vs. UIKit New frameworks SwiftUI-only frameworks WidgetKit ActivityKit Swift Charts
21. SwiftUI vs. UIKit SwiftUI is getting more resources Popular WWDC 21/22 Lounge Fast Bug Reporting Feedback Clear Swift Syntax
22. How to migrate Using SwiftUI in a risk-free way
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
24. First Step - Debug Panel
25. - Only used in internal debug builds First Step - Debug Panel
26. - Only used in internal debug builds - Used only by developers and the QA team First Step - Debug Panel
27. - Only used in internal debug builds - Used only by developers and the QA team - Understand the basics of SwiftUI First Step - Debug Panel
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
29. More complicated scene
30. - In-app logger More complicated scene
31. - In-app logger - Record/display logs such as API requests More complicated scene
32. - In-app logger - Record/display logs such as API requests - Filtering, log sending, live logging More complicated scene
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
34. A Step Further - Tool app
35. - A standalone app to inspect downloadable resources A Step Further - Tool app
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
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
38. Limited use in Production
39. - Some simple scenes were rewritten in SwiftUI Limited use in Production
40. - Some simple scenes were rewritten in SwiftUI - Easy enough to quick rollback if necessary Limited use in Production
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
42. Build new features
43. - Complicated layout and styles Build new features
44. - Complicated layout and styles - Self-contained module Build new features
45. - Complicated layout and styles - Self-contained module - Seamlessly integrated with other UIKit components Build new features
46. - Complicated layout and styles - Self-contained module - Seamlessly integrated with other UIKit components - Start to build with pure SwiftUI Build new features
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….
48. Migration Path Solve problems in early stage.           ࢛݄ ޒ݄ ࿡݄ ࣣ݄ ະ໋໊
     Debug Panel Debug Logger Inspector App Simple Scene Complex Scene From very simple to moderately complex
49. How does it feel Some of our experiences and ideas
50. Risk of ObservedObject Log List
51. Risk of ObservedObject Log List Log Settings
52. Risk of ObservedObject
53. Risk of ObservedObject
54. Risk of ObservedObject
55. Risk of ObservedObject Log List Log Settings
56. Risk of ObservedObject
57. Risk of ObservedObject
58. Risk of ObservedObject
59. Risk of ObservedObject
60. Solve these Problems A better pure functional, redux-like architecture Complex State Management - Single statement management mechanism - Clear, understandable, and no surprises
61. Dependency & Data Sharing Child View Child View
62. Dependency Injection Pure Child View Pure Child View Pure Child View
63. Dependency Injection Pure Child View Parent View Pure Child View Pure Child View
64. Dependency Injection Pure Child View Parent View Pure Child View Pure Child View compose
65. Dependency Injection Pure Child View Parent View Pure Child View Pure Child View
66. Dependency Injection Pure Child View Parent View Pure Child View Pure Child View
67. Dependency Injection Pure Child View Parent View Pure Child View Pure Child View deliver data
68. Dependency Injection Pure Child View Parent View Pure Child View Pure Child View deliver data
69. Dependency Injection Pure Child View Parent View Pure Child View Pure Child View deliver data
70. Dependency Injection Pure Child View Parent View Pure Child View Child View deliver data
71. Dependency Injection Pure Child View Parent View Pure Child View Child View deliver data API client, user credentials, etc
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
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
74. The Composable Architecture
75. The Composable Architecture - Store wraps a State and drives the View
76. The Composable Architecture - Store wraps a State and drives the View - The view sends actions
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
78. Dependency Injection Pure Child View Pure Child View deliver data API client, user credentials, etc
79. Dependency Injection Pure Child View Pure Child View deliver data Pass through TCA Dependency chain
80. Dependency Injection Pure Child View Pure Child View compose Pullback through TCA reducer
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
82. - The new community feature in LINE LIVE Previews
86. UIKit SwiftUI With SwiftUI + TCA, Previews dramatically boosted development time Development Time (Estimated) Estimated ~50% in this case
87. ~200k lines of Swift UIKit Massive View Controller From 2015 Declarative & Functional
88. ~200k lines of Swift UIKit SwiftUI MVC TCA From 2015 Declarative & Functional
89. Should I use SwiftUI? The Choice Is Yours!
90. Uncontrolled Scale ਺ᆴᇠ .VUBCJMJUZ $PEF
    $PNQMFYJUZ )VNBO
    $POUSPM ਺ᆴᇠ .VUBCJMJUZ $PEF
    $PNQMFYJUZ )VNBO
    $POUSPM
91. Uncontrolled Scale ਺ᆴᇠ .VUBCJMJUZ $PEF
    $PNQMFYJUZ )VNBO
    $POUSPM ਺ᆴᇠ .VUBCJMJUZ $PEF
    $PNQMFYJUZ )VNBO
    $POUSPM
92. Uncontrolled Scale ਺ᆴᇠ .VUBCJMJUZ $PEF
    $PNQMFYJUZ )VNBO
    $POUSPM ਺ᆴᇠ .VUBCJMJUZ $PEF
    $PNQMFYJUZ )VNBO
    $POUSPM
93. Before Fully Adopting Helpful if you can understand these
94. Before Fully Adopting Helpful if you can understand these View lifecycle Identifier based
95. Before Fully Adopting Helpful if you can understand these View lifecycle Layout system Identifier based Proposed & Cooperative
96. Before Fully Adopting Helpful if you can understand these View lifecycle Layout system Version evolution Identifier based Proposed & Cooperative Use latest technology
97. WWDC 2022 SwiftUI promoted
98. Thank you