Specifying Libraries

Choosing libraries and packages through generative AI

In the context of JavaScript, a library and a package are both terms used to describe collections of code that can be used to add functionality to a JavaScript application. However, there are some differences between the two.

Library

A library is a collection of code that provides a set of pre-built functions or modules that can be used to perform specific tasks or add functionality to a JavaScript application. Libraries typically provide a set of APIs that can be called from within an application to perform specific tasks, such as manipulating the DOM, making HTTP requests, or performing data validation.

Some popular JavaScript libraries include jQuery, React, and Vue.js. Libraries can be used to speed up development time and improve code quality by providing pre-built functionality that can be easily integrated into an application.

Package

A package, on the other hand, is a collection of code that can include libraries, modules, and other resources needed to run a JavaScript application or module. Packages are typically distributed using a package manager, such as npm or Yarn, and can include metadata about the package, such as version numbers and dependencies.

Packages can be used to manage dependencies and versioning in a JavaScript application, and can make it easier to share code between different applications or modules. Packages can include libraries, modules, and other resources needed to run a JavaScript application, and can be installed using a package manager.

In summary, a library is a collection of code that provides pre-built functionality for a JavaScript application, while a package is a collection of code and resources needed to run a JavaScript application or module, which can include libraries, modules, and other resources.

Example: Changing Map Libraries

Let's look at a use case for the bicycle rental application, displaying bicycles on a map so that users can see what bikes are close to them.

First of mind, is to use Google Maps to display bikes that are close to the customer.

Prompt

chatgpt-3.5:
create a react component in chakra ui using next js to show a bicycle icon using google maps

Response:

Sure, here's an example of a React component in Chakra UI using Next.js to show a bicycle icon using Google Maps:

First, you need to install the required dependencies:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion google-map-react

Then, create a file called MapWithBikeIcon.js in your components directory:

import React from "react";
import GoogleMapReact from "google-map-react";
import { Box } from "@chakra-ui/react";
import { FaBicycle } from "react-icons/fa";

const AnyReactComponent = () => (
  <Box color="red" fontSize="2xl" as={FaBicycle} />
);

const MapWithBikeIcon = ({ center, zoom }) => {
  return (
    <Box height="400px" width="100%">
      <GoogleMapReact
        bootstrapURLKeys={{ key: "YOUR_API_KEY" }}
        defaultCenter={center}
        defaultZoom={zoom}
      >
        <AnyReactComponent lat={center.lat} lng={center.lng} />
      </GoogleMapReact>
    </Box>
  );
};

export default MapWithBikeIcon;

In this component, we're importing GoogleMapReact and Box from Chakra UI, and FaBicycle from react-icons/fa. We're also defining a functional component AnyReactComponent that will render the bicycle icon.

MapWithBikeIcon is the main component that takes two props, center and zoom, to determine the initial position and zoom level of the map. In the component's return statement, we're rendering a Box with a fixed height and width to contain the Google Map. Inside the GoogleMapReact component, we're passing the required bootstrapURLKeys, defaultCenter, and defaultZoom props, and rendering the AnyReactComponent with the lat and lng values from center.

Replace YOUR_API_KEY with your actual Google Maps API key. Then, you can use this component in any other React component in your Next.js app:

jsxCopy codeimport React from "react";
import { Box } from "@chakra-ui/react";
import MapWithBikeIcon from "../components/MapWithBikeIcon";

const center = { lat: 37.7749, lng: -122.4194 };
const zoom = 13;

const MapPage = () => {
  return (
    <Box>
      <MapWithBikeIcon center={center} zoom={zoom} />
    </Box>
  );
};

export default MapPage;

Here, we're importing Box from Chakra UI, and MapWithBikeIcon from the component we just created. We're defining the center and zoom props, and passing them to MapWithBikeIcon inside a Box. You can customize the center and zoom values to show the map at any location and zoom level you want.

That's it! You should now see a map with a red bicycle icon in the center of the page when you navigate to the MapPage route in your Next.js app.

Discussion

In the above, the instructions and component are largely clear. I think the naming of AnyReactComponent could be better, and could be improved through a quick replacement prompt of rename the AnyReactComponent to BicyleIcon.

However, let's assume that in discussing looking at Google Map's features and pricing, you find that Google Maps has more features than you need, and you're simply looking for a simpler more cost effective mapping solution. After some research, you decide to use MapBox.

Let's use a replacement prompt to change to a mapbox implementation:

Prompt:

chatgpt-3.5: 
replace google maps with mapbox library

Response:

Sure! Here's an example of how you can modify the React component we previously created to use the Mapbox library instead of Google Maps:

First, you need to install the required dependencies:

perlCopy codenpm install @chakra-ui/react @emotion/react @emotion/styled framer-motion react-map-gl

Then, create a file called MapWithBikeIcon.js in your components directory:

javascriptCopy codeimport React from "react";
import { Box } from "@chakra-ui/react";
import { FaBicycle } from "react-icons/fa";
import ReactMapGL, { Marker } from "react-map-gl";

const AnyReactComponent = () => (
  <Box color="red" fontSize="2xl" as={FaBicycle} />
);

const MapWithBikeIcon = ({ viewport }) => {
  return (
    <Box height="400px" width="100%">
      <ReactMapGL
        {...viewport}
        mapboxApiAccessToken={process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN}
        onViewportChange={(nextViewport) => viewport = nextViewport}
      >
        <Marker latitude={viewport.latitude} longitude={viewport.longitude}>
          <AnyReactComponent />
        </Marker>
      </ReactMapGL>
    </Box>
  );
};

export default MapWithBikeIcon;

In this component, we're importing ReactMapGL and Marker from react-map-gl instead of GoogleMapReact. We're also using process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN to access your Mapbox API access token, which you should add to your .env.local file.

MapWithBikeIcon is the main component that takes a viewport object as a prop, which contains the initial position and zoom level of the map. In the component's return statement, we're rendering a Box with a fixed height and width to contain the Mapbox map. Inside the ReactMapGL component, we're passing the mapboxApiAccessToken and viewport props, and rendering the AnyReactComponent with the latitude and longitude values from the viewport object.

You can use this component in any other React component in your Next.js app:

javascriptCopy codeimport React from "react";
import { Box } from "@chakra-ui/react";
import MapWithBikeIcon from "../components/MapWithBikeIcon";

const center = { latitude: 37.7749, longitude: -122.4194 };
const zoom = 13;

const MapPage = () => {
  const [viewport, setViewport] = React.useState({
    latitude: center.latitude,
    longitude: center.longitude,
    zoom: zoom
  });

  return (
    <Box>
      <MapWithBikeIcon viewport={viewport} onViewportChange={setViewport} />
    </Box>
  );
};

export default MapPage;

Here, we're defining the center and zoom values as latitude and longitude in the viewport object, and passing it to MapWithBikeIcon. We're also using the onViewportChange function to update the viewport state.

That's it! You should now see a Mapbox map with a red bicycle icon in the center of the page when you navigate to the MapPage route in your Next.js app.

Discussion:

As expected, ChatGPT successfully replaced the Google-Maps-React library with a MapBox implementation.

The ability to quickly iterate through various libraries makes it efficient to create POCs (proof of concepts) or try different products out during the RFP (request for product) process.