Skip to content

javascript.md

Latest commit

 

History

History
151 lines (113 loc) · 7.54 KB

javascript.md

File metadata and controls

151 lines (113 loc) · 7.54 KB

Javascript

Books

Videos

Notes

  • ES2022 (ES13) is the most recent version with good browser coverage (see feature summary)
  • ES6 (ES2015) has the most comprehensive browser support and is a good starting point for core language features
  • In general, the N-2 version is a choice for new projects as it will be recent and have good browser support.
  • When writing code for newer versions of the language, use a transpiler.

Design Goals

  • "language for the masses"
  • Easy to use and accessible for developers
  • Suitable for dynamic and interactive web experiences
  • Lightweight and interpreted, rather than compiled
  • Compatibility with wider range of browsers
  • Interoperable with other web standards - HTML and Document Object Model (DOM) for structuring web pages and CSS for styling elements
  • Safety to run untrusted code on users' devices within a sandbox
  • Performance

Language features

  • High level, interpreted scripting language
  • Just-in-time (JIT) compiled
  • Conforms to ECMAScript standard
  • Dynamic, weak, duck typing
  • Multi-paradigm for functional, object-oriented and procedural programming styles.
  • Prototype-based object orientation
  • First class functions
  • Event-driven to handle user interactions
  • Asynchronous
  • Client-side and server-side
  • Cross-platform (OS, browser, server, desktop, mobile)
  • Variable scoping: global (defined outside function or block), function (locally scope using var), block (using let and const)
  • Variable hoisting where variable and function declarations are conceptually moved to top of containing scope when compiling so that variables can be used and functions called before they are declared in code without causing a ReferenceError. var and function are hoisted with undefined value until initialized. let, const and class are hoisted but not initialized and will raise ReferenceError if used in "Temporal Dead Zone" before their declaration line.
  • Zero-based array indexing

Tools and Frameworks

Runtime Environments:

  • NodeJS is an open source, cross-platform runtime built on Chrome's V8 engine for high performance and is used for running javascript outside a browser such as for server-side web applications. Asynchronous, event-driven. Fast, scalable.
  • Deno built on V8 and Rust, providing modern and secure runtime for Javascript and Typescript
  • Bun aims for NodeJS compatibility, web compatibility, support for Typescript and JSX and being an all-in-one toolkit with bundler, test runner, package manager and transpiler. Written in Zig for speed.
  • Browser-based: Chrome V8, Firefox Spidermonkey, Safari JavaScriptCore

Package Managers:

  • YARN - fast
  • pnpm - fast, disk space efficient
  • npm - Node Package Manager

Bundlers:

  • Vite - instant server start using native ES modules, fast hot-module replacement, support for Typescript and JSX, zero configuration, uses Rollup bundler with tree-shaking, and plugins
  • Parcel - fast, zero config, written in Rust, built on SWC
  • Rolldown - written in Rust, Rollup compatible, esbuild compatible, bundler in vite
  • Webpack

Transpilers:

  • Transpilers convert code written in one version or dialect of the language into another for backwards compatibility with older browsers and runtimes. Newer features (superset of javascript) are translated into javascript.
  • esbuild written in Go for speed (10-100x faster than webpack) and simplicity
  • SWC Speedy Web Compiler, written in Rust for speed (20x faster than Babel single threaded)
  • Babel is slower but more modular with configurability and plugins
  • tsc Typescript converter. Superset of javascript that adds static typing.

Formatters:

  • biome - 97% compatible with Prettier and 35x faster. Supports javascript, typescript, JSX, TSX, HTML, CSS and GraphQL. Formatter and linter.
  • prettier - opinionated, widely supported

Frontend Frameworks:

  • React.js
  • Next.js - extends React with server-side rendering, file-system routing, API routes, and server components
  • Angular
  • Vue.js
  • Nuxt - full stack framework for Vue.js
  • Svelte
  • SolidJS

Backend Frameworks:

  • Express.js
  • NestJS

Testing:

  • vitest - Vite powered, Jest compatible, uses Chai for assertions, tinyspy for mocking, code coverage using v8 or istanbul, smart watch to re-run tests based on changes, ESM, Typescript and JSX support.
  • Jest - zero-config, suitable for unit and component testing
  • Mocha, Chai, Jasmine - simple unit testing and assertions
  • Cypress for end-to-end browser-based testing, runs in browser.
  • Playwright for end-to-end browser-based testing, runs outside the browser. Supports a variety of languages and browsers. More complex to setup but handles more complex scenarios (cross-browser, multi-tab/window, mobile emulation)
  • Istanbul for code coverage

Template engines:

  • JSX
  • TSX
  • Handlebars
  • Pug
  • Mustache

Data visualization:

  • Nivo uses d3 and react
  • Echarts
  • Recharts uses react components
  • d3
  • three.js

Utilities:

  • lodash
  • underscore

Misc:

  • Axios - promise-based HTTP client

Editors:

  • VS Code with plugins
    • Prettier
    • ESLint
    • ES6 code snippets
    • ES7+ React/Redux/React-Native Snippets:
  • WebStorm by Jetbrains
  • jsFiddle to edit HTML, CSS and Javascript in web editor