Webview for an English conversation proficiency assessment (CAF) service within the app.

Tech Stack - React.js, Next.js, Typescript, nx, React-Native, react-query, yarn, pnpm, Context API, TailwindCSS, Emotion

Duration - November-December 2022, February-March 2023

✔️ Project Details

A. Adopted Native App WebView Development Approach

As the beta service required frequent updates, an evaluation was conducted to find a development approach suitable for the project, allowing effective responses to frequent changes.

Considerations

• An implementation approach that allows for minimal app updates while accommodating frequent planning and development changes.
• An implementation approach that maximizes development productivity by considering potential expansion to mobile web and desktop web.

Results

• Chose a webview development approach that reduced the dependency on native app updates and allowed for the reuse of UI code when implementing the mobile web.
• Addressed the majority of UI and planning changes through web updates, minimizing mobile app updates (3 updates in 2 months) and reducing user attrition due to frequent app updates.

B. Reduced App Dependency Through Header and Popup Component Transfer to Webview

Identifying Improvements After the First Release

1. For the initial release, the popup and top header areas were developed as native app components. However, frequent changes in these areas led to the continued need for app updates despite using a webview approach.
   • In the second release, to reduce app updates resulting from this issue, the top header and pop-up were replaced with webviews. The screen back button in the header, which includes a back functionality, was implemented using a screen pop method through post messages.
2. Because page navigation logic was done through post messages, the code for screen navigation was not intuitive and was not consolidated, resulting in slightly different code written for each use case.
   • Created a custom hook to abstract app page navigation logic and rewrote the code to be concise and easy to understand by integrating the scattered logic.
3. The navigation logic only worked in the React Native environment, making it inconvenient to test as a webview in browsers.
   • Added fallback handling to the navigation logic to enable page navigation using next/router in a browser environment.

Incorporating Improvements and Outcomes

• Reduced native app dependency, minimizing update frequency, and improving development productivity.
• Enhanced code readability for navigation logic and enabled swift responses to screen navigation logic changes.
• Streamlined testing efficiency for the QA team.

C. Chart Library Selection

Conducted preliminary research in collaboration with the app developer and UX designer to select a chart library for the project. As visualization through graphs was crucial for the project, explored chart libraries that offer both high development productivity and extensive customization freedom.

Criteria for Library Selection:

• Availability of various chart types and the ability to customize them extensively (support for multi-type charts, real-time charts, etc.).
• Support for Server-Side Rendering (SSR) and Scalable Vector Graphics (SVG) for pixel stability on high-resolution screens and chart interaction.
• Ability to manipulate the chart state through click and hover handlers for implementing interactions.

Outcome:

• Researched and compared chart libraries such as Victory, recharts, react-chartjs-2, GoogleChart, react-d3, and nivo. Based on the selection criteria mentioned above, chose nivo for its stability and high degree of customization.
• Used the d3.js generator to implement additional chart layers to meet specific requirements. Through rapid prototyping and iterative collaboration with the designer, fine-tuned the chart UI to completion.