External vs Internal Data Sources


Uncategorized

Updated Jul 11th, 2022

You may have an option to use internal data and when is it okay to do so?

Things like projects in a portfolio site is a great example for internal data. This idea is more for just that though.

You could also use a DB or other source to create the data and then later dump into JSON to keep the data internal. Now it doesn’t need a network request.

A website about local plant species is fine for internal data.

Pursuing this strategy for a fantasy sports lineup generator may result in stale data.

Have to weigh the pros and cons on a per project basis

Some considerations include do you plan on having a public facing API? Is the internal data gigantic? Do you anticipate making a lot of network requests to access this data if it is not stored internally, (I’m thinking of the lineup generator here)? Are you consuming an API to get the data?

Internal Data Types

JSON

{
  "stringwrapped": "yellow",
  "stringwrappedParent": {
    "first_name":"Your Name",
    "nicknames": [
     "slick rick", "Ricky Bobby", "Rick Van Dyke"
     ]
    }
}

Exported JS Object

export const importantData = [
  {
    id: 0,
    firstName: "Ben",
    lastName: "Franklin",
    alias: "Benny Boy"
    city: "Philadelphia"
  },
  {
    id: 1,
    firstName: "John",
    lastName: "Adams",
    alias: "John the Stiff"
    city: "Boston"
  },
]

Using Data for Menu

I love this idea. Keeps the data separate from the code, (credit: JS Mastery)

Note: Links will likely need a path.

export const links = [
  {
    title: 'Dashboard',
    links: [
      {
        name: 'ecommerce',
        icon: <FiShoppingBag />,
      },
    ],
  },

  {
    title: 'Pages',
    links: [
      {
        name: 'orders',
        icon: <AiOutlineShoppingCart />,
      },
      {
        name: 'employees',
        icon: <IoMdContacts />,
      },
      {
        name: 'customers',
        icon: <RiContactsLine />,
      },
    ],
  },
  {
    title: 'Apps',
    links: [
      {
        name: 'calendar',
        icon: <AiOutlineCalendar />,
      },
      {
        name: 'kanban',
        icon: <BsKanban />,
      },
      {
        name: 'editor',
        icon: <FiEdit />,
      },
      {
        name: 'color-picker',
        icon: <BiColorFill />,
      },
    ],
  },
  {
    title: 'Charts',
    links: [
      {
        name: 'line',
        icon: <AiOutlineStock />,
      },
      {
        name: 'area',
        icon: <AiOutlineAreaChart />,
      },

      {
        name: 'bar',
        icon: <AiOutlineBarChart />,
      },
      {
        name: 'pie',
        icon: <FiPieChart />,
      },
      {
        name: 'financial',
        icon: <RiStockLine />,
      },
      {
        name: 'color-mapping',
        icon: <BsBarChart />,
      },
      {
        name: 'pyramid',
        icon: <GiLouvrePyramid />,
      },
      {
        name: 'stacked',
        icon: <AiOutlineBarChart />,
      },
    ],
  },
];