Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Backlog Mobile Apps Migration To Declarative UI

Backlog Mobile Apps Migration To Declarative UI

Avatar for 株式会社ヌーラボ

株式会社ヌーラボ

March 27, 2024
Tweet

More Decks by 株式会社ヌーラボ

Other Decks in Technology

Transcript

  1. Introduction • Taichiro Yoshida • @dataich • Mobile Applications Section

    Manager / Engineer • Work with foreigners Backlog Meetup in Hanoi 2
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. After struct IssueView: View { var body: some View {

    VStack { Text("Issue title") Text("Issue description") } } } Backlog Meetup in Hanoi 14
  9. 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
  10. After @Composable fun Issue() { Column { Text(text = "Issue

    title") Text(text = "Issue description") } } Backlog Meetup in Hanoi 17
  11. 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
  12. 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