Нужны ли нам пакеты npm после Chat GPT?

Что ж, небольшие модули npm должны быть объявлены устаревшими или станут бесполезными.

Под капотом

Эта история снова является еще одним предсказанием в прошлой истории, я говорил о кросс-языке программирования, который может быть потенциальным языком для работы в браузере на устройствах IOS и Android, что также было предсказанием.

Я делаю прогнозы или выкладываю какие-то новые идеи или, может быть, даю новые идеи.

Кого волнует, что важно, что история должна и должна продолжаться.

Chat GPT в качестве модуля npm или заменит

Итак, начнем, я использую Chat GPT в большинстве своих разработок.

Я разрабатываю приложение, ориентированное на реакцию, и хочу добавить скелет загрузки при извлечении данных.

Теперь у меня есть 2 варианта

• Используйте пакет npm или сторонний компонент
• Разрабатываем самостоятельно

Раньше, до чата GPT, разработка любого небольшого модуля была трудоемким процессом.

Теперь у нас есть чат GPT, поэтому я могу напрямую попросить его дать мне кодовую базу для создания скелета в react-native.

Базовый код готов, как показано ниже.

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;

Это легко, далее нам нужно настроить его под свои нужды, например таймаут, цвета и оттенки.

Теперь мне не нужно

• Сторонний модуль,
• есть мой пользовательский компонент
• очень настраиваемый в соответствии с моим дизайном
• менее трудоемкий процесс

Таким образом, используя Chat GPT, я могу легко заменить эти небольшие модули npm.

Почему маленький? Я оставляю вам подумать над ответом, не стесняйтесь упоминать его в разделе комментариев.

Как только это будет сделано, мой скелет загрузки готов к использованию.

Настройка

я не остановилась на этом

Прошу в чат GPT добавить над ним анимацию пульса.

Вот код

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>
  );
};

Я прошу Chat GPT для пульсирующей анимации, и, как и ожидалось, ниже приведен код

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>
  );
};

Пользовательские модули?

• Я уменьшил размер репозитория
• Иметь компоненты, изготовленные по индивидуальному заказу
• Чем меньше размер пакета, тем производительнее будет приложение.
• Изготовленные на заказ компоненты настраиваются
• Используйте сборник рассказов для предварительного просмотра компонентов
• Вы можете выпускать свои собственные компоненты в виде модуля npm.

Это безумие: с помощью ИИ мы можем решить массу проблем, нам не нужно запоминать маленькие свойства и классы и больше сосредотачиваться на всей системе.

Это как быть разработчиком, я также являюсь основателем репозитория кода, который я разрабатываю, создаю или над которым работаю.

Я могу уделить внимание архитектуре и завершению экранов пользовательского интерфейса и логике приложения.

Это выглядит многообещающе, и если у нас будет расширение VS-Code, это будет полезный инструмент.

Заключение

Используйте Chat GPT для создания пользовательских компонентов и максимально возможной замены небольших модулей npm.

Мы даже можем попробовать удалить пакеты npm большого размера, чтобы уменьшить размер репозитория или приложения.

Chat GPT сыграет решающую роль в экономии времени и предоставлении точных решений за один раз.

Это все на сегодня.

Продолжайте развивать
Shrey
iHateReading

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .