Backlog Mobile Apps Migration To Declarative UI

Transcript

1. Backlog mobile apps Migration to declarative UI Backlog Meetup in Hanoi 1
2. Introduction • Taichiro Yoshida • @dataich • Mobile Applications Section Manager / Engineer • Work with foreigners Backlog Meetup in Hanoi 2
3. 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
4. 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
5. 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
6. Headache for developers Backlog Meetup in Hanoi 6
7. We've started migration to SwiftUI/Compose Backlog Meetup in Hanoi 7
8. Expected benefits ≒ Headache for developers Backlog Meetup in Hanoi 8
9. 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
10. Delivering value to users quickly Backlog Meetup in Hanoi 10
11. 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
12. Migrating from UIKit to SwiftUI Backlog Meetup in Hanoi 12
13. 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
14. After struct IssueView: View { var body: some View { VStack { Text("Issue title") Text("Issue description") } } } Backlog Meetup in Hanoi 14
15. Migrating from View(XML) to Compose Backlog Meetup in Hanoi 15
16. Before <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <TextView android:id="@+id/titleTextView" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Issue title" /> <TextView android:id="@+id/descriptionTextView" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Issue description" /> </LinearLayout> Backlog Meetup in Hanoi 16
17. After @Composable fun Issue() { Column { Text(text = "Issue title") Text(text = "Issue description") } } Backlog Meetup in Hanoi 17
18. 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
19. 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
20. Thank you Backlog Meetup in Hanoi 20