02-Assignment 🔥

[mancho-ged]

Please Note: Write the answers and code on your own while finishing your assignments. Try to put down your thoughts into words by yourself in your own words. (This will help you develop muscle memory and you will remember all the concepts properly) ✌

Theory Assignment:

● - What is NPM? ● - What is Parcel/Webpack? Why do we need it? ● - What is .parcel-cache ● - What is npx ? ● - What is difference between dependencies vs devDependencies ● - What is Tree Shaking? ● - What is Hot Module Replacement? ● - List down your favourite 5 superpowers of Parcel and describe any 3 of them in your own words. ● - What is .gitignore? What should we add and not add into it? ● - What is the difference between package.json and package-lock.json ● - Why should I not modify package-lock.json? ● - What is node_modules ? Is it a good idea to push that on git? ● - What is the dist folder? ● - What is browserlists Read about dif bundlers: vite, webpack, parcel ● Read about: ^ - caret and ~ - tilda ● Read about Script types in html (MDN Docs)

Project Assignment:

• In your existing project ● - intialize npm into your repo ● - intialize git ● - install react and react-dom ● - remove CDN links of react ● - install parcel ● - ignite your app with parcel ● - add scripts for “start” and “build” with parcel commands ● - add .gitignore file ● - add browserlists ● - build a production version of your code using parcel build ● - create project on github and upload it

  References

  ● Creating your own create-react-app ● Parcel Documentation ● Parcel on Production ● BrowsersList: https://browserslist.dev/

[mancho-ged]

1. ● - What is NPM?

NPM is a package manager for Node. Although it doesn't stand for Node Package Manager actually it is. It's functions are downloading and updating packages, managing package versions (versioning) and running tasks. It has a largest one-language code repository in the world on npmjs.org.

2. ● - What is Parcel/Webpack? Why do we need it?

Parcel/Webpack are bundlers, that are helping us working with our projects and making them production ready. They are bundling our code, minimising and optimising it, help us to optimise images, make differential bundling for older browsers, has live http and https servers to ensure our code working on the server, HMR - Hot Module Replacement - that is helping us to see changes in the real time without reloading browser, tree shaking that is helping us to avoid unused and redundant code in our production build, code splitting and a lot of more useful features to help us develop fast and optimised solutions.

3. ● - What is .parcel-cache?

.parcel-cache is a folder in which Parcel cashes our working files for fast rebuilding of our project.

We doesn't need .parcel-cache folder on our remote github repository as it can be regenerated when we start parcel. So we must add this folder to .gitignore file in the root of our project, so that git doesn't track it. We add it to our .gitignore file like this: .parcel-cache

4. ● - What is npx ?

npx is npm command for running executables with npm. npx means execute with npm.

Executables installed with npm are downloaded in node_modules folder as other dependencies, but simlinks to their locations are stored in /bin hidden folder inside node_modules folder. So npx will execute this packages. For example "npx parcel index.html" will execute Parcel with entry point index.html.

5. ● - What is difference between dependencies vs devDependencies?

Our app uses dependencies code in development and production, but devDependencies are used only for development, so we doesn't need them to be installed in our production environment.

6. ● - What is Tree Shaking?

Tree Shaking is the action of getting rid of unused code from our dependencies or in our code. For example if we have a large library in our dependencies, but we use only several methods or classes from it in our application, Tree Shaking will ensure that unused and redundant code is not included in compiled version of our app. So we have minimal file size of our code, everything only essential and our application will be faster.

7. ● - What is Hot Module Replacement?

Hot Module Replacement is the process of recompiling our code in live time as soon as we save our changes in code, so that we don't need to reload our browser to see the changes.

8. ● - List down your favourite 5 superpowers of Parcel and describe any 3 of them in your own words.

The Parcel gives us superpowers while working on our code. My favourite superpowers of Parcel are: HMR, Tree Shaking, Cashing, Live Server, Bundling.

1. Cashing that the Parcel performs for us makes rebuilding our code extremely fast and helps us with fast and smooth developer experience.

2. Differential bundling helps us to write code and not care if it will be compatible with different versions of browsers. The Parcel and browserslist will take care for this.

3. Bundling will help us with bundling our code files to most optimised version to use with the browsers.

4. Development and production builds will help us to work in development and easily build our code for production.

5. ● - What is .gitignore? What should we add and not add into it?

The .gitignore file is the best way to exclude files from tracking with git. It is places in root of our git repository and contains list of files and folders we don't want to track with version control. If we want file or folder to be excluded from git in our root folder we write slash in front of it. for example: /node_modules. If we want files and folders with this name to be excluded everywhere we just write the name of file or folder, for example: .parcel-cache.

We add to .gitignore files and folders that could be regenerated, e.g. node_modules, dist, .parcel-cashe.

We never add files like: package.json, package-lock.json that contain essential metadata for our project or code files that we need to share or essential for working of our project.

10. ● - What is the difference between package.json and package-lock.json?

package.json includes metadata of our application, including list of all dependencies and their acceptable versions. package.json solves problems with versioning and includes list of exact versions of dependencies and transitive dependencies used in our project, including hashes of this files, so that we can reproduce exact versions of our project on any different install and environment.

11. ● - Why should I not modify package-lock.json?

package-lock.json is generated automatically when we install dependencies to our project, so it should not be updated manually.

12. ● - What is node_modules ? Is it a good idea to push that on git?

node_modules folder is folder where npm stores all code of our dependencies and their transitive dependencies locally, that generally becomes very heavy.

When we run npm install code for this package is downloaded in our node_modules folder in root of our project, which is created if it doesn't exist already.

The same package name with metadata is added to our package.json file under dependencies or devDependencies field and also metadata to reproduce exact version of our dependency and it's transitive dependencies is added to our package-lock.json file. So we doesn't need node_modules folder and we can recreate it using npm install command.

It is bad idea to push node_modules folder on git, as it can be regenerated, is huge and is not needed to recreate our project.

13. ● - What is the dist folder?

dist folder name stands for "distributable" and contains compiled code of our project, that is ready to be used in browser and in production.

14. ● - What is browserlists

browserslist is a package that helps us to create code compatible with versions of browsers we need to support. It is essentially config to share target browsers and node versions between different frontend tools. It will take care that compiled code is compatible with browsers we specify in package.json under "browserslist" property.