Modern JavaScript Explained For Dinosaurs. by Peter Jang. 2017
Modern JavaScript Explained For Dinosaurs
great article i read many years ago.
- https://peterxjang.com/blog/modern-javascript-explained-for-dinosaurs.html
- Modern JavaScript Explained For Dinosaurs
- 18 Oct 2017
- Peter Jang
node js
bower. JavaScript package manager
npm. JavaScript package manager
yarn. JavaScript package manager
spm. JavaScript package manager
SPM (Static Package Manager) is a package manager for the browser built by the Chinese developer community, specifically driven by Alipay. It manages CommonJS packages and is recommended for use with the Sea.js module loader.
Key characteristics include:
Binary Management: It manages binaries via a publish command similar to npm, rather than fetching directly from git endpoints like Bower.
Target Audience: It gained popularity within the Chinese developer community for front-end development before npm and browserify became more optimized for this use case.
Current Status: The project is largely considered inactive; the packaging server spmjs.io is offline, and the main GitHub repository notes that SPM no longer manages component lifecycles as of version 3.9, recommending npm for component management instead.
There are also unrelated tools with the acronym "spm" on npm, such as a Stupid Package Manager for Node.js (which installs to ~/.node_libraries) and Sematext Performance Monitoring agents for application performance monitoring, but these are distinct from the browser-focused SPM.
AI-generated answer. Please verify critical facts.
browserify. JavaScript bundler (2017)
bundler is tool that takes a js file, find all the “requires”, and bundle them into a single js file.
js did not have modules system before JS: ECMAScript 2015 . People created CommonJS Module System , and is used in nodejs.
it loads library by code like
const math = require('./math.js');
but this isn't supported by browsers.
Thus, use bundler to merge all the js files into one.
JavaScript user interface framework
js compiler
vite. js frontend build tool
Vite is a next-generation, blazing fast frontend build tool and development server created by Evan You (creator of Vue.js) and backed by VoidZero Inc. Pronounced "veet" (French for "quick"), it is designed to provide a leaner, faster development experience for modern web projects by leveraging native ES modules in the browser for instant startup and Hot Module Replacement (HMR).
It consists of two main parts: a development server that serves code on-demand via native ESM for rapid feedback, and a build command that bundles code for production using Rolldown. Vite is framework-agnostic, supporting React, Vue, Svelte, and vanilla JavaScript/TypeScript out of the box, making it a popular, lightweight alternative to heavier tools like Webpack or Create React App.
AI-generated answer. Please verify critical facts.
SWC (Speedy Web Compiler) is a high-performance, Rust-based JavaScript and TypeScript compiler designed as a faster alternative to Babel and the native TypeScript compiler (tsc). It is widely integrated into modern developer tools and frameworks, including Next.js, Vite, Parcel, and Deno, to accelerate build times and hot module replacement (HMR).
Key Characteristics:
- Performance: SWC is approximately 20x faster than Babel on a single thread and 70x faster on multi-core systems due to its Rust implementation and parallel processing capabilities.
- Functionality: It handles transpilation (e.g., TypeScript to JavaScript, JSX transformation), minification, and bundling, often replacing separate tools like Terser.
- Configuration: It uses a .swcrc configuration file similar to Babel’s .babelrc but offers a more streamlined setup for modern development workflows.
- Limitations: SWC focuses on fast syntax transformation and does not perform type-checking; developers typically pair it with tsc (for type checking) or use frameworks that handle this separation.
AI-generated answer. Please verify critical facts.
grunt js. task runner
gulp js. task runner
npm scripts (task runner)
