DEV Community: AnuraG Singh

benefits of parcel as a bundler

AnuraG Singh — Wed, 10 Jul 2024 19:12:37 +0000

benefits of parcel

dev tools
HMR - hot modules replacement --->> how - by using file watching algorithms made in c++ which keep track of your code and as soon as you try to save the file it refreshes the server with new code
local server http://localhost:1234
cache memory mang. ---> makes its fast
image optimization
compresses the file
bundling
content hashing
differential bundling babel
can also run on ssl https
tree shaking ---> removing the extra code or function which are not used

content hasing : -Content hashing in Parcel involves generating unique SHA-256 hashes for each file based on its content. Before deploying the application, Parcel compares these hashes with those stored in its cache directory ( .parcel-cache). If a file's hash matches its cached version, Parcel uses the cached file, avoiding unnecessary rebuilds and optimizing deployment speed. When a file's content changes, its hash updates, prompting Parcel to rebuild only the modified files and update them on the server. This approach not only improves build performance by reusing unchanged files but also ensures that browsers receive updated content reliably through unique filenames based on file hashes, preventing caching issues during deployment.

hmr in detail - so basically when file is modified i.e its hash is now different that of older version the modified file is only updated in the browser and all the other file whose hash are same of older hash uses the .parcel-cache file which reduce the time and avoid the rebuilding the whole application from scratch and this all thing is triggered every time when the programmer save the file && the browser is running that application (live)

differential bundling : since babel is used for bundling in parcel -- it perform several task
- babel convert the es6+ js code into the es5 code which necessary for you application to run in older browser
- It convert the jsx code of react into the js code (jsx into js object (ast)) as we all know browser's v8 engine is unable to understant the jsx code
- It also convert typescript in JavaScript as TS is superset of js that add static type to js

npm Overview and Key Concepts

AnuraG Singh — Mon, 08 Jul 2024 20:27:44 +0000

npm, short for Node Package Manager, is a package manager for JavaScript and the default package manager for the Node.js runtime environment. It helps developers manage dependencies in their projects and provides a vast registry of reusable code packages.
Basically it is a configuration for npm

Key Features of npm

Package Management:

Install, update, and uninstall packages (libraries or modules).
Manage dependencies required for your project.

Versioning:

Specify the version of a package to ensure compatibility and stability.

Script Running:

Define and run custom scripts for various development tasks, such as
testing, building, and deploying, through the scripts section in
package.json.
- Custom script can be run using npm run <script-name>

Dependency Management:

Automatically handle dependency conflicts and ensure that the correct
versions of dependencies are used.
Different types of dependencies can be specified in the package.json
file, such as regular dependencies, devDependencies, peerDependencies,
and optionalDependencies.

Package-lock.json

It keeps the track of all the dependency's version in hash form(SHA)
The package-lock.json file ensures consistency across different environments by locking the exact versions of all installed dependencies. It helps avoid dependency conflicts and ensures that the correct versions of dependencies are used. Basically avoids version mis-match.

for eg your project is buid using react 18 and if the project is setup on any other pc with older version of react pre-installed let say react 17 then it will hampers the proper functioning of the code or your project , Here package-lock.json comes into role i.e when ever you deploy you project into any other environment it will instantly install the react 18 regardless of pre-installed react 17

package.json Code

{
  "name": "my-project", //app or project name
  "version": "1.0.0", // apps version 
  "description": "A sample project",
  "main": "index.js", 
  "scripts": {
    "start": "node index.js", // npm run start will run index.js
    "test": "echo \"Error: no test specified\" && exit 1", // use jest
    "build": "webpack --config webpack.config.js",
    "lint": "eslint .", //catches error
    "deploy": "npm run build && firebase deploy" //builds and deploy onto //firebase
  },
  "dependencies": {
    "express": "^4.17.1",
    "react" : "^18.0"
  },
  "devDependencies": {
    "eslint": "^7.11.0",
    "webpack": "^4.44.2"
  }
}

Manual DOM Rendering with JavaScript vs. React's Virtual DOM

AnuraG Singh — Wed, 03 Jul 2024 17:43:12 +0000

Introduction

This documentation explains how to manually create and render DOM elements using plain JavaScript. We will cover the implementation of a custom rendering function and its comparison to how JSX is processed in React.

creating a custom render function
we created a customRender function which takes two parameters

imgTag : object which specifies the property
root : parent element where the element is to be appended

Inside function definition we created img tag and added attributes to it
and in the end we appended it in the root div

overall we made the manually created the DOM and rendered it on the web page

manual insertion

let imgtag = {
    type:'img',
    props:{
        src:'https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png',
        alt:'image of google'
    }
}
function IMGrender(imgtag,root){
    let div = document.createElement(imgtag.type)
    for (const key in imgtag.props) {
        if(key === "children") continue;
        div.setAttribute(key,imgtag.props[key])
    }

    root.appendChild(div)
}

IMGrender(imgtag,root)

Comparison to React

The customRender function manually performs tasks that React handles automatically when processing JSX. React uses a virtual DOM to efficiently manage and update the actual DOM.

here in react we can use JSX to make a component (html tags) which later get converted into the object like a object in a customRender function

Vite uses esbuild as its bundler to parse JSX code into JavaScript objects (AST - Abstract Syntax Tree).

using react

import React from 'react'
import ReactDOM from 'react-dom/client'
function Img(){
  return(
    <img src='https://www.google.com/images/branding/googlelogo/1x/googlelogo_light_color_272x92dp.png' alt='img'></img>
  )
}

Summary

The custom render function demonstrates manual DOM manipulation, where you directly create and update elements. In contrast, React abstracts these details away using JSX and the virtual DOM, which allows for more efficient updates and simpler, more declarative UI code.