Do we need npm packages after Chat GPT?

Well, small npm modules have to be deprecated or will become useless.

Under the Hood

This story is again another prediction in the last story, I talked about Cross programming language that can be the potential language to run on the browser to IOS and Android devices, well was also a prediction.

I am making predictions or laying some new ideas or maybe giving new ideas.

Who cares what’s important the story should and must go on.

Chat GPT as the npm module or will replace

So let’s start, I am using Chat GPT in most of my development work.

I am developing a react-native application and want to add a loading skeleton while fetching data.

Now I have 2 options

Use

• the npm package or third-party component
• Develop on our own Earlier before chat GPT, developing anything small module it a time-consuming process.

Now we have chat GPT so I can directly ask him to give me the codebase for creating a skeleton in react-native.

The basic code is ready as shown below

import React, { useEffect, useState } from 'react';
import { StyleSheet, View } from 'react-native';

const SkeletonLoadingComponent = () => {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoading(false);
    }, 1000);

    return () => clearTimeout(timer);
  }, []);

  return (
    <View style={styles.container}>
      {isLoading && <View style={styles.loadingIndicator} />}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: 20,
    backgroundColor: '#f2f2f2',
    borderRadius: 4,
  },
  loadingIndicator: {
    flex: 1,
    backgroundColor: '#e6e6e6',
    borderRadius: 4,
  },
});

export default SkeletonLoadingComponent;

This is easy, next, we need to customise it according to our needs, for example, timeout, colours and shades.

Now I don’t need

• Third-party module,
• have my custom component
• highly customisable according to my design
• less time consuming process So using Chat GPT I can easily replace those small npm modules.

Why small? I leave it up to you to think about the answer, feel free to mention it in the comment section.

Once this is done, my loading skeleton is ready-to-use.

Customising

I didn’t stop there

I Ask to Chat GPT to add pulse animation above it.

Here is the code

const SkeletonLoadingComponent = () => {
  const pulseScale = useSharedValue(1);

  const startPulseAnimation = () => {
    pulseScale.value = withTiming(
      1.2,
      {
        duration: 1000,
        easing: Easing.inOut(Easing.ease),
      },
      () => {
        pulseScale.value = withTiming(
          1,
          {
            duration: 1000,
            easing: Easing.inOut(Easing.ease),
          },
          startPulseAnimation
        );
      }
    );
  };

  React.useEffect(() => {
    startPulseAnimation();
  }, []);

  const pulseStyle = {
    transform: [{ scale: pulseScale.value }],
  };

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.loadingIndicator, pulseStyle]} />
    </View>
  );
};

I ask Chat GPT for ripple animation and as expected below is the code.

import React, { useEffect, useRef } from 'react';
import { StyleSheet, View } from 'react-native';
import Pulse from 'react-native-pulse';
import Ripple from 'react-native-ripple';

const SkeletonLoadingComponent = () => {
  const pulseRef = useRef(null);

  useEffect(() => {
    startPulseAnimation();
  }, []);

  const startPulseAnimation = () => {
    pulseRef.current && pulseRef.current.start();
  };

  return (
    <Ripple style={styles.container} rippleDuration={500} rippleCentered={true}>
      <View style={styles.loadingIndicator}>
        <Pulse
          ref={pulseRef}
          color="#e6e6e6"
          numPulses={3}
          diameter={200}
          initialDiameter={100}
          duration={2000}
          interval={1000}
        />
      </View>
    </Ripple>
  );
};

Custom modules?

• I’ve reduced the repository size
• Have custom-made components
• Less package size more performant the app will be
• Custom-made components are customisable
• Use the storybook to preview the components
• You can release your own custom-made components as the npm module This is crazy using AI we can solve tonnes of problems, we don’t need to remember small properties, and classes and focus more on the complete system.

It’s like being a developer, I am also a founder of the code repository I am developing or creating or working on.

I can pay attention to architechture and completing UI screens and logic behind the application.

This looks promising and if we can have a VS-Code extension around it it would be a helpful tool.

Conclusion

Use Chat GPT to create custom-made components and replace small npm modules as much as possible.

We can even try removing large-size npm packages to reduce the repository or app size.

Chat GPT will play a crucial role in saving time and giving accurate solutions in one go.

That’s it for today.

Keep developing
Shrey
iHateReading

Comments

[Ervin Szilagyi]

Unfortunately, articles like perfectly reflect the problem with code generation tools based on AI. The problem is the confidence, with which ChatGPT/Copilot/etc. are offering us a seemingly flawless solution.

Certainly, small npm packages can have their on problems with possibility of having undiscovered bugs. But I would very much trust some code written and reviewed by actual humans, rather than code generated by a statistical model.

Please use due diligence and don't just rely on code generated by AI.

[Ben Calder]

^ this!
Carefully selected small npm modules are usually well established and tested in the wild. If an issue is found it is reported and the issue can be fixed. The maintenance burden is distributed and, in general, this is a reliable model (albeit with some risks).

ChatGPT will at best give you equivalent code to one of these modules and leave you with the maintenance burden and not warn you of an issue is found. I see no advantage whatsoever 🤷

[shrey vijayvargiya]

That's a good point to be mentioned, I think Chat GPT will give the way out to maintain these packages, not sure but AI has the capability

[Ben Calder]

Maybe later something will come along that can maintain the code it provides you; but right now ChatGPT is totally incapable of doing that. It simply doesn't work that way...
And that's the great conceit. So much hype; but it's just the accumulation of huge amounts of stolen data. There's no "intelligence" there whatsoever. It's the technical equivalent of Donald Trump...

[Robert Moskal]

Go far down this road and you and chatgpt are going to be maintaining lots of code.

[shrey vijayvargiya]

Yeah definitely!!

[Alfredo Salzillo]

Please add the language tag to the codeblocks

[shrey vijayvargiya]

Sure!!!

[Ray Thurne Void]

I agree, i see many good points in the comments about maintainability and be able to solve only trivial tasks.
I think this is not the time yet but we may end up in this direction, maybe we'll see "library" specific fine tuned models that are able to generate code and even update the code when a change is made in the main repository (even if you have customized the code); this is theoretically possible, just very hard and probably 2-5 years away.

[shrey vijayvargiya]

Yeah, agreed!!!!

[shrey vijayvargiya]

I will take care of it next time!!!