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
- Tooling
- Integrations
Libraries
The first stop of this series looked at UI libraries however there are other types of libraries out there.
Visualization Libraries
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
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
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
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
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
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
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
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.
Photo in Image by Free-Photos from Pixabay
Top comments (2)
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.
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/