Frontend JavaScript Eco System

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, 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