Frontend JavaScript Eco System
Tags: javascript, webdev, learning, career
Published: 2020-07-20 12:55:36

---
title: Frontend JavaScript Eco System
published: true
description: A high level description of a typical front end eco system
tags: JavaScript, webdev, learning, career
cover_image: https://i.picsum.photos/id/121/1600/1067.jpg?hmac=QDrnlQAvC_54xDpx2afpzKMbjCZvnRljseYvkK8XPCQ
---

# JavaScript EcoSystem
The following ecosystem seems to be a pretty standard one for a Front End role these days. Maybe you encounter way more or way less depending on your role. This high level description is my take away from Zell Liew's Javascript course I started yesterday. Like I mentioned in my [first post] (https://dev.to/robinhoeh/learning-javascript-again-2of4), I'm writing about what I learn each day from the course in an attempt to really solidify my JavaScript skills and fill any gaps of knowledge I have.

## Libraries
- A library can be a small to large repository of code which
allows you to add additional functionality to your website or app

- Could possibly be any size of code base, but most likely small and fixes or improves specific issues

- Examples include: Axios, D3 animation library or GSAP

### Context
- Many times at work someone might say, "Hey, can we use this animation library?" or "We use x UI library for x"

- `Axios` is a library and so is `jQuery`

# Frameworks
- Frameworks are usually considered big or huge code bases
- Examples include React, Vue and Angular
- They each have their own advantages and disadvantages

- Something that I really didn't understand when I first started learning JS was the concept of data being passed around and how it was managed

### Context
- At work we use Vue which I really like to use
- A lot of times you are able to use vanilla JS logic in the framework but if a solution exists leveraging the framework then I would probably choose that
- I could be wrong here, what's your thoughts on this?

# Plugins
- Plugins allow you to add extra functionality to the libraries and frameworks
- Off the top of my head I can't think of any plugins we use at work for Vue

### Context
- I think the only thing here to consider is if you are going to add a plugin on a production level app, you wanna make sure with another team member or your boss that you can't just recreate the functionality that the plugin you want has in a short amount of time

# npm
- This is what we use to install any dependencies we need for our application or site
- Node Package Manager allows you to install packages via the command line

### Context
- You may have heard of node modules(don't add them to your production build or github repo :) )
- Packages typically get saved in your `package.json` file and depending on how you save them they work globally or just for your dev environment
- If you don't remember a run command,  `package.json` is the place to look

# Tooling
- Could include GULP, Webpack, dev tools for a framework, Babel

### Context
- We use Webpack at work which helps bundle code together and strip away many unwanted stuff for production
- TBH, I never touched the setup for this and have not gone into it for about two years
- If you have a build issue, the webpack or GULP file would be one place to figure that out
- I see a lot of requirements for developers to know how to setup webpack and optimize the build process. Our senior dev takes care of it mostly so maybe if you were going for a senior role and going to be in charge of it, that would be a useful skill to have