Everything in Frontend Dev, page 38
Vite's Plugin System: Extending Dev and Build
Vite's plugin system extends its dev server and build process, leveraging Rollup's mature ecosystem. Use it to add framework support or handle custom assets. The footgun is forgetting to control execution order with enforce, causing compatibility issues.
SvelteKit Adapters: Bridge Your App to Production
A SvelteKit adapter is a power plug for your app, making your universal build fit a specific deployment target like Vercel or a Node server. You configure it based on your host, like adapter-static for static sites. The footgun is forgetting one entirely.
Vite Config: The Control Panel for Your Build
Think of vite.config.js as a dynamic script, not a static file. It lets you programmatically change your build based on context, like serving for development versus building for production.
Vite's HMR API: Manually Controlling Hot Reloads
Vite's HMR API lets a module handle code changes without a full reload. While frameworks usually manage this, you can use it for custom tooling. The footgun: forgetting to wrap HMR code in if (import.meta.hot) will crash your production build.
SvelteKit: From Zero to Dev Server
Spin up a new SvelteKit app with npx sv create. This command scaffolds a project, prompting you to add tools like TypeScript. Then, npm run dev starts your dev server. The key footgun: forgetting to install dependencies before starting the server.
ng new: Your Angular Project Starter Kit
The ng new command is your starter kit for any Angular project. It scaffolds a complete, runnable application with a standard folder structure and dependencies, letting you skip manual setup.
Scaffolding a Vite Project with `create-vite`
Use create-vite to instantly generate a new web project with your chosen framework. It's the fastest way to start a Vue, React, or Svelte app without manual setup. The footgun is forgetting you can pass a --template flag to skip interactive prompts.
Vue's Reactivity: JavaScript That Acts Like a Spreadsheet
Vue's reactivity system makes your data act like a spreadsheet: change a value, and dependent parts of your app update automatically. It works by wrapping your data in special objects. The footgun: reactivity is lost if you replace a whole object.
Vue: Options API vs. Composition API
Options API organizes Vue components by property type (data, methods). Composition API organizes them by logical feature. Use Composition API for complex components with tangled logic or for creating reusable 'composable' functions.
Why Svelte Skips the Virtual DOM
Svelte skips the Virtual DOM, treating it as runtime overhead. It acts as a compiler, generating precise JavaScript to update the DOM directly. This avoids the 'diffing' step of frameworks like React, leading to smaller bundles and faster updates.
Angular's Hierarchical Dependency Injection
Angular's DI is a tree of injectors mirroring your components. When a component needs a service, Angular walks up the tree to find the first provider. Use it to scope services to UI branches, but beware: providing at a component level creates a new instance.
Vue Single-File Components (SFCs)
Vue Single-File Components (.vue files) colocate a component's template, logic, and styling into one modular unit. This is the standard for building Vue SPAs and static sites, enabling scoped CSS and pre-compiled templates. Remember, SFCs require a build step.
Why Angular Relies on TypeScript
Angular uses TypeScript to build large, scalable apps with confidence by enforcing structure through static types. This is key for its dependency injection and component architecture, ensuring pieces fit together.
Svelte: A Compiler, Not Just a Framework
Svelte is a compiler that turns your component files into efficient, imperative vanilla JavaScript at build time. This avoids shipping a large runtime, leading to smaller bundles. The footgun is thinking of it as just a runtime; its power is in the build step.
Angular: The 'Batteries-Included' Framework
Angular is a 'batteries-included' framework, providing a complete, official toolkit for routing, forms, and more. This is ideal for large teams needing consistency, but its opinionated nature means fighting the framework if you prefer different tools.
Vue: The Progressive Framework Philosophy
Vue's progressive philosophy means you can use as little or as much of it as you need. Use it for a single interactive widget, or scale it up to a full SPA with official libraries.
TypeScript Namespaces: The Original Module System
TypeScript namespaces bundle related code under a single global name, preventing name collisions. They are useful for older projects or UMD library types, but the footgun is using them in modern apps; prefer standard ES modules.
Identifying JS Library Structure for TypeScript Types
To type a JS library, first identify its structure: module, global, or UMD. This dictates your .d.ts file's shape. You'll check docs for import/require or <script> usage. The footgun is misidentifying a UMD library, leading to incorrect import types.
Shipping TypeScript Types in package.json
The types field in package.json tells TypeScript where to find your package's type definitions. Use it when publishing a library to enable autocompletion for users. The footgun is putting type dependencies in devDependencies instead of dependencies.
export = : TypeScript's CommonJS Export Syntax
Think of export = as TypeScript's version of module.exports. It replaces a module's entire export with a single value, like a class or function. It's used for compatibility with CommonJS modules. The footgun is mixing it with standard exports.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles