Can GPT Outshine Human Developers? A Gesture Handling Adventure in the React Native ECharts Project

Abstract: In this article, we explore the potential of using OpenAI’s GPT-4 to assist in maintaining and improving open-source projects. We focus on a case study involving integrating React Native gesture handling and discuss GPT’s capabilities in answering questions, code generation, documentation, and more. We also share valuable lessons learned throughout the development process.

Introduction

React Native ECharts is a React Native library for displaying ECharts charts, I am the maintainer of the open-source project. Open-source projects are essential to the software development ecosystem, providing invaluable resources and tools for developers. However, maintaining and improving these projects can be challenging, particularly as they grow in size and complexity.

In this article, we’ll explore how GPT, a powerful language model developed by OpenAI, can assist in maintaining open-source projects while making the journey enjoyable and engaging. We’ll focus on a case study involving React Native gesture handling and examine GPT’s capabilities in answering questions, code generation, documentation, and more.

I will give my subjective feeling score out of 10 in the dimension of intelligent performance.

Answering Questions

Intelligent performance: 10.

Initially, there was a discussion on the project issue about using RNGH instead of PanResponder. The PanResponder worked fine, and the issue was shelved after that. An issue like this in open-source projects may stay on the shelf forever if no one remembers it.

It would be fascinating to have GPT answer the question for us. I pasted the issue content and all the comments into ChatGPT and asked it how it would answer the question. I was very impressed with its response. It expressed appreciation for the feedback, introduced and compared PanResponder and react-native-gesture-handler, and suggested solutions like a veteran open-source project author. My only complaint is that the text could be more concise.

Here is the answer:

Thank you for your suggestion; we greatly appreciate feedback from developers. We will seriously consider your recommendation to replace React Native’s built-in PanResponder with react-native-gesture-handler (RNGH). Allow me to first explain the advantages of these two libraries.

PanResponder is a gesture handling library built into React Native. It can handle various gesture actions and is tightly integrated with the React Native framework. However, PanResponder’s functionality is relatively limited, and it may not be sufficient for some complex gesture operations.

On the other hand, react-native-gesture-handler is an independent gesture handling library with richer features and better performance. Its advantages include:

1. More accurate gesture recognition and handling: RNGH can more accurately recognize and handle various gestures, improving the interactivity of applications.
2. Better performance: RNGH outperforms PanResponder, especially when dealing with a large number of gesture operations.
3. Better cross-platform compatibility: RNGH supports more platforms, including iOS and Android.
4. More flexible API: RNGH provides a richer API, allowing developers to customize gesture handling logic.

Given these advantages, we will seriously consider replacing PanResponder with react-native-gesture-handler. We will evaluate our existing code to determine the cost of replacement and potential issues. Additionally, we will consider offering react-native-gesture-handler as an option, allowing developers to choose the gesture handling library according to their needs.

Please give us some time to assess this suggestion. In the meantime, if you have any recommendations or ideas regarding the implementation process, feel free to comment on this issue. We will respond and make a decision as soon as possible. Thank you again for your suggestion!

ChatGPT has proven to be a valuable resource when it comes to answering questions, as it can quickly respond and accurately understand the context of the problem. However, it’s essential to provide enough background information for the model to generate a more accurate answer.

Coding

Intelligent performance: 6.

Next, I tried having ChatGPT help write the code. Due to context size constraints, I simplified the task into 2 steps:

1. Convert the gesture handling code originally implemented using PanResponder to be handled by react-native-gesture-handler.
2. Allow users to choose to use PanResponder or react-native-gesture-handler by configuring the props. React-native-gesture-handler is an optional dependency and relegated to PanResponder if it is not installed.

First, I posted the full code for handling gestures using PanResponder to ChatGPT and asked it to convert it to the react-native-gesture-handler version.

It quickly gave me the converted code, explained the code and gave instructions on how to use it, which looked very smart and fast. I took the explained part of the code as follows:

In this rewritten version, we imported react-native-gesture-handler and used PanGestureHandler and PinchGestureHandler. we created a component called GestureHandler that associates the gesture handler with the corresponding event handler We create a component called GestureHandler that associates the gesture handler with the corresponding event handler. This component takes a zrenderId prop and a children prop. children can be any React component that requires gesture handling.

The original PanResponder instance is replaced with a PanGestureHandler, and the onGestureEvent and onHandlerStateChange events are used to handle gesture changes. For the zoom function, we introduce the PinchGestureHandler and set up an onPinchGestureEvent event handler for it. These two handlers are responsible for handling dragging and zooming gestures respectively.

To handle both dragging and zooming gestures, we use the simultaneousHandlers property so that the PanGestureHandler and PinchGestureHandler can handle gestures at the same time.

Now, to apply gesture processing to a component, simply wrap the GestureHandler component around that component and pass it the zrenderId.

After simply handling type errors and minor bugs, it works, which is astounding, and if I were to write it myself, this would probably take an hour!

But! After I checked the documentation for react-native-gesture-handler, I found out that:

PanGestureHandler and PinchGestureHandler are both soon to be deprecated APIs, and we are officially advised to use the new gestures API.

Of course, this is understandable, as the knowledge base deadline for ChatGPT is September 2021, when things were different.

I tried to get it coded using the new gestures API. Unfortunately, without that part of the knowledge, it then started guessing how to use the new API, and not correctly.

When doing anything with ChatGPT assistance, you need to maintain a certain level of skepticism. Here is the wrong code:

// ...
import { PanGesture, PinchGesture } from 'react-native-gesture-handler';
// ...
export const GestureHandler = ({ zrenderId, children }) => {
  const panRef = useRef();
  const pinchRef = useRef();
  const onPanGestureEvent = useMemo(
    () => ({ nativeEvent }) => {
      dispatchEvent(zrenderId, ['mousemove'], nativeEvent, 'change');
    },
    [zrenderId]
  );

  const onPanStateChange = useMemo(
    () => ({ nativeEvent }) => {
      const { state } = nativeEvent;

      if (state === 'began') {
        dispatchEvent(zrenderId, ['mousedown', 'mousemove'], nativeEvent, 'start');
      } else if (state === 'end') {
        dispatchEvent(zrenderId, ['mouseup', 'click'], nativeEvent, 'end');
      }
    },
    [zrenderId]
  );

  // const onPinchGestureEvent = ...

  return (
    <PanGesture
      ref={panRef}
      simultaneousHandlers={pinchRef}
      onGestureEvent={onPanGestureEvent}
      onStateChange={onPanStateChange}
    >
      <PinchGesture
        ref={pinchRef}
        simultaneousHandlers={panRef}
        onGestureEvent={onPinchGestureEvent}
      >
        {children}
      </PinchGesture>
    </PanGesture>
  );
};

Then I posted the demo and documentation for the use of panGesture and pinchGesture in the new gestures API to it and had it regenerate the code. After a few rounds of tweaking, I finally got the code working and it just needed a few simple tweaks to get it working. Its ability to understand and learn from unknown knowledge is also great.

Immediately after, I told it I wanted react-native-gesture-handler to be optional to install, and ChatGPT behaved very usefully.

After a more detailed test, there were still some bugs, and I still asked ChatGPT to help me solve them. The whole process was not smooth, but it was still useful to help me locate the problems quickly and provide coding suggestions.

For example, I found in my testing that the onStart event of panGesture was triggered late. ChatGPT told me that it might be because react-native-gesture-handler needs to collect enough gesture information to determine whether the gesture has been recognized. There is a delay in this process. To solve this problem, we can try using onBegin instead of onStart, since onBegin is triggered when the gesture handler starts receiving touches. The corresponding code is also provided, as well as the possible risks associated with it, which was very helpful to me.

Overall, when you can clearly describe your requirements, such as decomposing the task well and providing enough complete background knowledge, ChatGPT will be a handy assistant for you.

Summary Modification

Intelligent performance: 9.

The whole process is done through dialogue, so we can summarize the information easily. Here is the summary provided by ChatGPT, which can be used directly after a few modifications.

Commit message:

feat: Add support for optional use of react-native-gesture-handler

PR description:

This PR adds support for the optional use of `react-native-gesture-handler` in the project. Users can now choose to use `react-native-gesture-handler` for handling gestures by specifying the `useRNGH` parameter. When `react-native-gesture-handler` is not installed or `useRNGH` is set to `false`, the component will gracefully fall back to using the built-in pan gesture.

Changes include:
- Update gesture configuration to use `runOnJS(true)` for callbacks to run on the JS thread.
- Add a `useRNGH` parameter to control whether to use `react-native-gesture-handler` or the built-in pan gesture.
- Handle cases where `react-native-gesture-handler` is not installed, and use the built-in pan gesture as a fallback.
- Update example code with the new configuration options.

This update improves the flexibility of the component and allows users to choose the best gesture handling option for their specific use case.

Working with ChatGPT to write the PR description and commit message was a smooth experience. By providing clear instructions and input, the model generated concise and informative content that accurately reflected the changes made in the project.

Generate Documents

Intelligent performance: 9.

You can also use ChatGPT to generate usage documentation, which is also very convenient and will not be detailed here. Here is the modified documentation for using RNGH in @wuba/react-native-echarts.

Writing a Blog Post

Intelligent performance: 7.

As the final step in the process, I asked ChatGPT to help me write a blog post documenting the entire experience. This blog post is the result of that collaboration, showcasing how ChatGPT can be used to draft coherent and engaging content.

Guess how much of the content here is generated by ChatGPT. 😄

Conclusion

Throughout the development process, I learned several important lessons about using ChatGPT for software development:

1. Breaking tasks into smaller steps can significantly improve efficiency.
2. The knowledge database of ChatGPT can be outdated, so providing the relevant information is crucial for obtaining accurate code samples.
3. While ChatGPT is helpful for textual tasks, it still cannot replace human expertise when it comes to actual coding.
4. ChatGPT acts like a highly intelligent assistant, offering valuable consultation and advice throughout the project.

In conclusion, AI language models like ChatGPT have immense potential to assist developers in various tasks, from planning and coding to documentation and content creation. As AI technology continues to advance, we can expect even more powerful and versatile tools that can further streamline the software development process and improve the overall efficiency of developers.

Finally, if you want to draw cool charts in your react native application, try our project.