$30 off During Our Annual Pro Sale. View Details »

SwiftUI in LINE LIVE iOS - Technology Selection and Implementation

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

Tech-Verse2022
PRO

November 18, 2022
Tweet

More Decks by Tech-Verse2022

Other Decks in Technology

Transcript

  1. None
  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

  83. None
  84. None
  85. None
  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