The Frontend Hitchhiker's Guide: 3rd Party Code
Tags: codenewbie, webdev, javascript, gatsby
Published: 2021-07-18 02:27:35

# There's a package for that
You don't need to build your entire web app from scratch. There are many libraries, tools, APIs and SDKs to help you along the way.

# 3rd Party Resources
* Libraries
  * [Visualization Libraries](#visualization-libraries)
  * [Utility Libraries](#utility-libraries)
  * [Graphics Frameworks](#graphics-frameworks)
  * [Template Systems](#template-systems)
* Tooling
 * [Static Site Generators](#static-site-generators)
 * [Task Runners](#task-runners)
* Integrations
 * [REST APIs](#rest-apis)
 * [SDKs](#sdks)

## Libraries
The first stop of this series looked at UI libraries however there are other types of libraries out there.

### Visualization Libraries

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4r97afibuuhwudt0bnq2.png)
 
While tables are cool, data visualizations like maps, or charts can often provide more insight and bring more visibility to latent trends. [Highcharts](https://www.highcharts.com/) and [Chart.js](https://www.chartjs.org/) are often the gotos for charts but a newer library like [nivo](https://nivo.rocks/) can somewhat offer a more stylized look to your charts.

### Utility Libraries

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ydw4ji4clmn24sgp846.png)
 
These are libraries that are small and focused on making a specific problem easier for the developer. [Moment.js](https://momentjs.com/) can make displaying time based data and perform various operations with it. [Underscore](https://underscorejs.org/) adds a collection of functional programming primitives to JavaScript if that's your cup of tea. [Lodash](https://lodash.com/) is similar in providing functions to make working with arrays, numbers objects easier.

### Graphics Frameworks

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oj5bzdyyx6d2yf85b6j5.png)

These technologies allow you render beautiful experiences on the web. Whether it be AR/VR with [AFrame](https://aframe.io/), exciting browser games with [phaser](https://phaser.io/) or everything else with the likes of [three.js](https://threejs.org/) and [D3.js](https://d3js.org/). These technologies let you tap into the power of the [canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) and [webGL](https://get.webgl.org/).
 

### Template Systems

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6bkidswnehuqrsua5ieh.png)
 

In the days of the earlier UI Libraries [template systems](https://en.wikipedia.org/wiki/Web_template_system#Client-side_systems) were a often a popular companion. These libraries focused solely on adding data-binding and templating syntax that newer libraries like react offer out of the box. Some popular examples are [mustache](https://github.com/janl/mustache.js) and [handlebars](https://handlebarsjs.com/), though they are more used on the server side in nodejs projects these days.

## Tooling
This category is similar to the Build Tools stop in this series. They are command line software that deal how the project is built and deployed.

### Task Runners

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/exaa52e5t3qr1uchhzvp.png) 

One can say task runners were the precursor to build tools which was explored in the 4th stop in this series. Task runners let you automate tasks like minification, transpilations, deployment and using other CLI tools. The two most popular task runners are [grunt](https://gruntjs.com/) and [gulp](https://gulpjs.com/).

### Static Site Generators

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wh3lxw3m8is041j31370.png)
 
Static Site Generators (SSGs) are CLI tools which let you focus on writing content of static websites such as blogs. Typically they turn formatted markdown files to fully functional websites.

[Gatsby](https://www.gatsbyjs.com/) is a modern static site generator written in react. Gatsby is different from other SSGs in that it offers features usually seen in frameworks, like components and integration with rest APIs. [Jekyll](https://jekyllrb.com/) is another popular SSG and [Eleventy](https://www.11ty.dev/) sites boast really good performance.

## Integrations
Integrations let you incorporate 3rd party products and services into you app.

### REST APIs

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0no4xcq54kqgpj7l8cwt.png) 

REST Application Programming Interfaces are web services that your web app can use to provide features. For example the [PokeAPI](https://pokeapi.co/) let's you create your own pokedex! There are also many [public APIs](https://github.com/public-apis/public-apis) available to power your apps.


### SDKs

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hzren79ikfd9460vfc90.png)
 

Software Development Kits, are a collection of libraries and tooling that let you integrate your code with a service. You can use the [Twitter API](https://developer.twitter.com/en/docs) to retrieve tweets or use the Firebase SDK to add [Firebase](https://firebase.google.com/) features to your application.

# Conclusion

With that The Frontend Hitchhickers Guide is finally completed. It's my hope that this series helped you better understand the often overwhelming frontend web ecosystem. 

I would like to offer my heartfelt gratitude to everyone who shared, read and engaged with this series. 
The positive feedback went a long way to keep me writing for 8 weeks.

You can find me on [twitter](https://twitter.com/snickdx) to find out what I'm writing on next and I intend to share more web tech there from time to time as well.

![hitchhikers (6)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1hxthv57v5gtuly9j71s.png)
 

Photo in Image by <a href="https://pixabay.com/photos/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=691581">Free-Photos</a> from <a href="https://pixabay.com/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=691581">Pixabay</a>
# Resources
* [Collection of WEB GL Libraries](https://gist.github.com/dmnsgn/76878ba6903cf15789b712464875cfdc)
* [Task Runners](https://blog.logrocket.com/node-js-task-runners-are-they-right-for-you-bb29ea30b7fa/)