Easy everything in Vue, Angular & Svelte, page 5
Angular @Output(): Child Components Reporting Up
An @Output() lets a child component tell its parent something happened, using an EventEmitter. It’s the standard way to handle events like button clicks that the parent needs to act on. The footgun is forgetting to actually .emit() the event.
Vue Custom Events: Child-to-Parent Communication
Think of $emit as a child component sending a flare up to its parent. It's how children report actions upwards, reversing the top-down flow of props. Use it to trigger parent state changes, like closing a modal. The footgun: events don't bubble.
Svelte Props: Passing Data with `export let`
In Svelte, export let turns a variable into a prop, letting a parent component pass data down. It's how you pass a userName to a ProfileCard component. The footgun: forgetting export creates a private variable, not a prop, so data isn't received.
Angular's input() Function: Passing Data to Components
Angular's input() function lets a parent pass data to a child, defining the child's public API. Use it to configure a component, like passing a value to a slider. The footgun: the returned signal is read-only; the child cannot modify its own input.
Vue Component Props: Passing Data Downstream
Think of props as a component's 'arguments.' They let a parent pass data down to a child, making it reusable. Use them to pass dynamic data like a user's name to a profile card. The footgun: never mutate a prop directly inside the child component.
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.
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.
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