SwiftUI in LINE LIVE iOS - Technology Selection and Implementation

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Should I use SwiftUI? Why and How

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

WWDC 2019 SwiftUI released

Slide 18

Slide 18 text

Why SwiftUI After 3 years from its initial release

Slide 19

Slide 19 text

WWDC 2022 SwiftUI promoted

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

How to migrate Using SwiftUI in a risk-free way

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

First Step - Debug Panel

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

- 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

Slide 29

Slide 29 text

More complicated scene

Slide 30

Slide 30 text

- In-app logger More complicated scene

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

- 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

Slide 34

Slide 34 text

A Step Further - Tool app

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

- 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

Slide 38

Slide 38 text

Limited use in Production

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Build new features

Slide 43

Slide 43 text

- Complicated layout and styles Build new features

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

- 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….

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

How does it feel Some of our experiences and ideas

Slide 50

Slide 50 text

Risk of ObservedObject Log List

Slide 51

Slide 51 text

Risk of ObservedObject Log List Log Settings

Slide 52

Slide 52 text

Risk of ObservedObject

Slide 53

Slide 53 text

Risk of ObservedObject

Slide 54

Slide 54 text

Risk of ObservedObject

Slide 55

Slide 55 text

Risk of ObservedObject Log List Log Settings

Slide 56

Slide 56 text

Risk of ObservedObject

Slide 57

Slide 57 text

Risk of ObservedObject

Slide 58

Slide 58 text

Risk of ObservedObject

Slide 59

Slide 59 text

Risk of ObservedObject

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Dependency & Data Sharing Child View Child View

Slide 62

Slide 62 text

Dependency Injection Pure Child View Pure Child View Pure Child View

Slide 63

Slide 63 text

Dependency Injection Pure Child View Parent View Pure Child View Pure Child View

Slide 64

Slide 64 text

Dependency Injection Pure Child View Parent View Pure Child View Pure Child View compose

Slide 65

Slide 65 text

Dependency Injection Pure Child View Parent View Pure Child View Pure Child View

Slide 66

Slide 66 text

Dependency Injection Pure Child View Parent View Pure Child View Pure Child View

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

The Composable Architecture

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

Slide 82

Slide 82 text

- The new community feature in LINE LIVE Previews

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

Should I use SwiftUI? The Choice Is Yours!

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

Before Fully Adopting Helpful if you can understand these

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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