JavaScript: Modern JavaScript Development

Explore the tools, workflows, and ecosystems that professional JavaScript developers use every day.

npm and yarn Basics

npm (Node Package Manager) and yarn are package managers that let you install, update, and manage third-party libraries in your JavaScript projects. npm ships with Node.js: no extra install needed.

`Package Managers`

Package managers handle all your project's external dependencies so you do not copy-paste library code manually.

npm install: installs all dependencies listed in package.json
npm install lodash: adds lodash as a dependency
npm install -D eslint: adds ESLint as a dev-only dependency
npm run dev: runs the "dev" script defined in package.json
yarn is an alternative with faster installs and a deterministic lockfile

Common npm Commands

These commands are run in your terminal: they manage what's in your node_modules folder.

package.json

package.json is the manifest file at the root of every Node.js project. It describes the project, lists its dependencies, and defines command shortcuts via scripts.

`package.json Structure`

package.json is the single source of truth for your project's metadata, dependencies, and runnable commands.

dependencies: packages needed at runtime (shipped to users)
devDependencies: packages needed only during development (linters, bundlers, test runners)
scripts: shortcut commands: npm run dev runs whatever "dev" maps to
main: the entry point file Node.js loads when someone imports your package

package.json Overview

Scripts, production deps, and dev deps are the three sections you touch most often.

Build Tools: Vite, Webpack, Parcel

Build tools transform your source code by bundling modules, transpiling syntax, and optimising assets into production-ready files the browser can load efficiently.

`Build Tools Overview`

Every modern JavaScript project uses a build tool: Vite is the current default for new projects.

Vite: instant dev server using native ES modules, fast production build via Rollup, recommended for new projects
Webpack: highly configurable, massive ecosystem, slower dev server, still dominant in enterprise codebases
Parcel: zero-configuration, good for small projects and prototypes
All three: bundle JS modules, process CSS, handle assets, output minified production files

Vite vs Webpack at a Glance

Vite serves source files directly in dev mode: no bundling until production build.

Babel: Transpilation

Babel converts modern JavaScript (ES2022+) into older syntax that runs in browsers which do not support the latest features. It is often included automatically by build tools.

`Babel`

Babel lets you write cutting-edge JavaScript today while still supporting older browsers.

Transpiles arrow functions, optional chaining, async/await, class fields, and more
Configured via .babelrc or the babel key in package.json
Uses @babel/preset-env to target specific browsers automatically
Vite and Next.js include their own transpilation pipeline: you rarely configure Babel manually

What Babel Does

You write modern syntax: Babel outputs equivalent code older browsers can run.

ESLint: Code Quality

ESLint is a static analysis tool that finds problems in your JavaScript code before you run it. It enforces consistent coding rules across a team and catches real bugs like unused variables and undefined references.

`ESLint`

ESLint catches logic errors, enforces best practices, and flags dangerous patterns before runtime.

Configured in .eslintrc.json or eslint.config.js
Rules have three levels: off, warn, error
Run with npx eslint src/ or integrate with your editor for real-time feedback
Many rule sets available: eslint:recommended, Airbnb, Standard

ESLint Catches Common Mistakes

ESLint flags these issues in your editor before you even run the code.

Prettier: Code Formatting

Prettier is an opinionated code formatter. It takes your code and reprints it in a consistent style, eliminating all debates about spacing, quotes, and line length in a team.

`Prettier`

Prettier formats automatically on save: no more manual alignment or style arguments in code reviews.

Configured via .prettierrc: set tab width, single/double quotes, semicolons, print width
Run with npx prettier --write src/ to format all files
Install the VS Code Prettier extension and enable "Format on Save"
Use eslint-config-prettier to disable ESLint rules that conflict with Prettier

Before and After Prettier

Prettier reformats any code style into one consistent output automatically.

Testing Basics and Jest

Unit tests verify that individual functions or modules work correctly in isolation. Jest is the most popular JavaScript testing framework: it provides a test runner, assertion library, and mocking tools in one package.

`Unit Testing with Jest`

Tests catch regressions automatically: a broken function fails its test before it reaches production.

describe(): groups related tests into a suite
it() / test(): defines a single test case
expect(value).toBe(expected): asserts the value matches
Run tests with npx jest or npm test
Watch mode (jest --watch) re-runs tests on every file save

Jest Unit Tests

describe groups tests, it defines each case, expect + toBe asserts the result.

Version Control with Git

Git tracks every change to your code, lets you work on features in branches, and enables teams to collaborate without overwriting each other's work.

`Git Essentials`

Commit early and often with clear messages: your Git history is your project's change log.

git init: initialise a repository in the current folder
git add . && git commit -m "message": stage and save a snapshot
git branch feature-x && git checkout feature-x: create and switch to a new branch
git merge feature-x: bring a branch's changes into the current branch
git push origin main: upload commits to GitHub/GitLab

Git Daily Workflow

Branch, commit, merge, push: the four-step rhythm of professional version control.

Browser DevTools: Advanced Debugging

The browser DevTools are the most powerful debugging environment available. Beyondconsole.log, the Sources panel lets you pause execution, inspect every variable, and step through code line by line.

`DevTools Debugging Features`

Breakpoints replace console.log: they pause execution so you can inspect the full application state.

Breakpoints: click a line number in the Sources panel to pause execution there
Step Over (F10): run the current line and pause on the next
Step Into (F11): jump inside the function being called
Watch expressions: add variables to watch: their values update as you step
Call stack panel: shows every function call that led to the current paused line
Conditional breakpoints: right-click a breakpoint to only pause when a condition is true

Using Breakpoints and debugger

Place a debugger statement or click a line number in Sources to pause and inspect state.

JavaScript Frameworks Overview

Frameworks provide structure, component systems, and state management for building complex user interfaces. They do not replace JavaScript knowledge: they are built on top of it.

`React, Vue, Angular`

Master vanilla JavaScript first: frameworks become easy once you understand the language they are built on.

React: UI library by Meta, component-based, large ecosystem, uses JSX
Vue: progressive framework, gentle learning curve, great for adding interactivity to existing sites
Angular: full framework by Google, opinionated, TypeScript-first, suited for large enterprise apps
Use a framework when: app has many interactive components, complex shared state, or a large team
Avoid a framework for: static pages, simple scripts, or when vanilla JS is sufficient

Vanilla JS vs React vs Vue

All three do the same thing: frameworks add reactivity and component structure on top.

Tool	Category	Purpose	When to use
npm / yarn	Package manager	Install and manage dependencies	Every project
Vite	Build tool	Dev server + production bundle	New projects
Babel	Transpiler	ES2022+ to older JS	Legacy browser support
ESLint	Linter	Find code quality issues	Every project
Prettier	Formatter	Auto-format code style	Every project
Jest	Test runner	Unit and integration tests	Any tested codebase
Git	Version control	Track changes, collaborate	Every project
React / Vue	UI framework	Component-based UIs	Complex interactive apps

Knowledge Check

1. What is the purpose of package.json?

2. What does Babel do?

3. What is the difference between ESLint and Prettier?

4. What is a unit test?

5. What does a breakpoint do in browser DevTools?

6. What is the main advantage of using a framework like React or Vue?

7. What is the key difference between Vite and Webpack?

Previous Next