Slide 1

Slide 1 text

Backlog mobile apps Migration to declarative UI Backlog Meetup in Hanoi 1

Slide 2

Slide 2 text

Introduction • Taichiro Yoshida • @dataich • Mobile Applications Section Manager / Engineer • Work with foreigners Backlog Meetup in Hanoi 2

Slide 3

Slide 3 text

Agenda • Introduction to the Backlog Mobile App • Current challenges being faced • Migration to declarative UI • Expected benefits • Migration from UIKit to SwiftUI • Migration from View (XML) to Compose Backlog Meetup in Hanoi 3

Slide 4

Slide 4 text

Introduction to the Backlog Mobile App • Backlog iOS app v1.0.0 • April 2014 • Backlog Android app v1.0.0 • Feb 2015 Backlog Meetup in Hanoi 4

Slide 5

Slide 5 text

Current challenges being faced • iOS • Implemented using UIKit and a custom UI framework. • Headache for developers who are new to the project. • Android • Implemented based on View (XML). • Headache for developers due to the use of outdated technology. Backlog Meetup in Hanoi 5

Slide 6

Slide 6 text

Headache for developers Backlog Meetup in Hanoi 6

Slide 7

Slide 7 text

We've started migration to SwiftUI/Compose Backlog Meetup in Hanoi 7

Slide 8

Slide 8 text

Expected benefits ≒ Headache for developers Backlog Meetup in Hanoi 8

Slide 9

Slide 9 text

Expected benefits • Quality • Code with fewer bugs through declarative syntax • Ease of testing • Development productivity • Real-time preview of UI implementation • Reducing cognitive load among developers. • The ecosystem, including features like exporting from Figma, is mature. • Ease of adoption • Suitable for both full-time employees and external contractors Backlog Meetup in Hanoi 9

Slide 10

Slide 10 text

Delivering value to users quickly Backlog Meetup in Hanoi 10

Slide 11

Slide 11 text

Incremental Migration • Migration screen by screen or component by component. • Availability of interoperable APIs. • Incremental releases to production • Ability to pause the migration if other development projects are needed. Backlog Meetup in Hanoi 11

Slide 12

Slide 12 text

Migrating from UIKit to SwiftUI Backlog Meetup in Hanoi 12

Slide 13

Slide 13 text

Before let view = UIStackView() view.axis = .vertical let title = UILabel() title.text = "Issue title" view.addSubview(title) let description = UILabel() title.text = "Issue description" view.addSubview(description) Backlog Meetup in Hanoi 13

Slide 14

Slide 14 text

After struct IssueView: View { var body: some View { VStack { Text("Issue title") Text("Issue description") } } } Backlog Meetup in Hanoi 14

Slide 15

Slide 15 text

Migrating from View(XML) to Compose Backlog Meetup in Hanoi 15

Slide 16

Slide 16 text

Before Backlog Meetup in Hanoi 16

Slide 17

Slide 17 text

After @Composable fun Issue() { Column { Text(text = "Issue title") Text(text = "Issue description") } } Backlog Meetup in Hanoi 17

Slide 18

Slide 18 text

Current progress: • Migration to SwiftUI: 80% done • Migration to Compose: 50% done • Already experiencing benefits such as improved quality and development productivity Backlog Meetup in Hanoi 18

Slide 19

Slide 19 text

Conclusion • Migrating UI development to SwiftUI/Compose • The rationale behind the migration and the expected benefits • An example of a simple implementation • Improving the codebase to deliver value to users more quickly Backlog Meetup in Hanoi 19

Slide 20

Slide 20 text

Thank you Backlog Meetup in Hanoi 20