DEV Community

loading...
Cover image for The Frontend Hitchhiker's Guide: 3rd Party Code

The Frontend Hitchhiker's Guide: 3rd Party Code

Nicholas Mendez
Web Developer, Web Instructor
Updated on ・4 min read

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

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

Visualization Libraries

image

While tables are cool, data visualizations like maps, or charts can often provide more insight and bring more visibility to latent trends. Highcharts and Chart.js are often the gotos for charts but a newer library like nivo can somewhat offer a more stylized look to your charts.

Utility Libraries

image

These are libraries that are small and focused on making a specific problem easier for the developer. Moment.js can make displaying time based data and perform various operations with it. Underscore adds a collection of functional programming primitives to JavaScript if that's your cup of tea. Lodash is similar in providing functions to make working with arrays, numbers objects easier.

Graphics Frameworks

image

These technologies allow you render beautiful experiences on the web. Whether it be AR/VR with AFrame, exciting browser games with phaser or everything else with the likes of three.js and D3.js. These technologies let you tap into the power of the canvas and webGL.

Template Systems

image

In the days of the earlier UI Libraries template 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 and handlebars, 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

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 and gulp.

Static Site Generators

image

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 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 is another popular SSG and Eleventy sites boast really good performance.

Integrations

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

REST APIs

image

REST Application Programming Interfaces are web services that your web app can use to provide features. For example the PokeAPI let's you create your own pokedex! There are also many public APIs available to power your apps.

SDKs

image

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 to retrieve tweets or use the Firebase SDK to add Firebase 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 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)

Photo in Image by Free-Photos from Pixabay

Resources

Discussion (2)

Collapse
ryanroat profile image
Ryan Roat

Hi, great series. I just wanted to note on the 3rd-party info, Moment.js is in maintenance only mode. As the devs say on the following page, "We now generally consider Moment to be a legacy project in maintenance mode. It is not dead, but it is indeed done." momentjs.com/docs/#/-project-status/

The devs have a detailed explanation and recommendations for alternate packages to use going forward.

Collapse
goldfinger profile image
Caleb

I was going to reply with the same thing. The one piece I would add is that Date-FNS is a great replacement to Moment. It is lightweight and you can include only single pieces that you need, not the whole entire package on the component.

date-fns.org/