# Questions for SU20 week 6

## Webpack

### 1. Difference between library and frameworks
* A library is just a collection of functions.
* A framework also can be a library(or collection of libraries). But for the framework, all the control flow is already there so it will lead us to do certain actions or fill out predefined spots with our code.

* sub-questions
- Are Vuetify/bootstraps can be called as a library?
- Are plugins/Babel/Lodash/ESlint library?
-> A(Answer): It is hard to decide what is what as there are some gray area to decide.

### 2. What is npm?
- Are `npm` a collection of libraries? or framework?
-> A: Could be both.

- Why `npm` is associated with `node.js`?
-> A: It is because `npm` is a open source library that run in Node JS environment. (e.g. Microsoft program in Window environment)

- Can we just grab Github source code instead of npm to borrow their code? What's special about NPM?
-> A: We can use Github `code` for some projects. But `npm` manages dependencies for your app whereas Github does not. If you were to unpack a project and use it outside `NPM`, you would have to do this(check dependency, download it, and update it) every time you want to use/update the project. `NPM` does this for you. You always know what version you're on (by checking `JSON` file).

### 3. Node_modules
- Why do we have to download so many node_modules beforehand?
-> A: The `node_modules` directory is like build tools for your app. Most of the frameworks and libraries we are using depend on a lot of different modules. That makes `node_modules` that large.

* When you run `npm install` to use that libraries/framework, `package.json` file in the app root shows what libraries will be installed into `node_modules`.

### 4-1. What is JSON file?
### 4-2. What is XML file?
* Sub-question: JSON file usage
- storing data?
- carrying source code for entire homepage(e.g wordpress JSON file)?
- collection of dependencies?

-> A: `JSON`, `XML` are file format like `.ppt` or `.csv`. They are like two different representations of data/contents.

-> A: `JSON` : They have object notation like `JS`, but it only accepts `string`. It shows data structures we declare in programming languages. It can be used for storing data, collection of dependencies or more.

-> A: `XML` : XML uses tag structures for presenting items, like ``<tag>happy</tag>``.

### 5. Using Firebase in Webpack
* Follow along with this tutorial!
- https://vuefire.vuejs.org/vuefire/

* Cool features that Vuefire provides
- VueFire makes our life easier by syncing your data with `data:`, `firebase:` objects inside of Vue instance!

### 6. Using extension in VS code
* Sub-question: We already set up ESLint as a default when we initiate a new Vue project. However, in Vue mastery course(Real-world Vue), an instructor asked me to install this ESLint extension in VS Code. Why do we need to download a different ESlint again?


-> In this case, when you download ESLint in VS code editor, ESLint should work while you are using VS Code. Also, when you run npm in your terminal, check whether a package is installed in local scope or global scope. It might not work accordingly because of scope issue.

### 7. What's for Lodash?
* `_.` --> this is for Lodash!

* Lodash is a great example of a Library (Refer to question 1).

* It helps programmers write more concise code and usually is used for an array.
- https://lodash.com/

* Check Underscore.js! It is similar to Lodash but simple and easy to start.
- https://underscorejs.org/

## Extra- self

#### npx and npm- difference?
- NPM stands for Node Package Manager. A text-based program for Nodejs package management.
- Whereas NPX is a Node Package Runner. Its function is to execute the Nodejs package.