Intermediate everything in Vue, Angular & Svelte, page 6
<ng-container>: Group Elements Without a DOM Footprint
<ng-container> is an Angular grouping element that doesn't render to the DOM. Use it to apply a structural directive like *ngIf to multiple elements without adding an extra <div> that could break your layout.
Angular Template Reference Variables: A #handle for Elements
A template reference variable is a handle to a DOM element or component within your template. Use the #varName syntax to grab an input's value or call a child component's method. Its scope is limited to the template where it's defined.
Svelte's `bind:`: Two-Way Data Binding Made Simple
Svelte's bind: turns one-way data flow into a two-way street, letting child elements update parent state. It's essential for syncing form inputs without manual event handlers. The footgun: an invalid number input yields undefined, not 0.
Container vs. Presentational: A Component Separation Pattern
Split components into 'smart' containers that handle data and logic, and 'dumb' presentational components that just render UI. This lets you reuse state across different views, like showing a product list in a grid or a table.
Angular Schematics: Automating Code Modification Safely
Think of a schematic as a safe, scriptable code generator. It operates on a virtual copy of your project, applying changes only after verifying the entire operation. Use them to enforce conventions or package library code.
Module Federation: The Multi-Framework "Hydra"
Module Federation can unite micro frontends from different frameworks (e.g., Angular, React) in one app. This is a last resort for migrations or integrating legacy code, not a standard pattern, as it increases complexity and bundle size.
Angular's angular.json: Your Workspace Blueprint
angular.json is the blueprint for your workspace, telling the CLI how to build, serve, and generate code. It defines project paths, build targets, and default prefixes. The footgun: assuming the projects section mirrors the file system.
ng generate: Your Project's Code Wizard
ng generate is a command-line wizard for scaffolding new Angular features. It doesn't just create files; it wires them into your app. Use ng g component my-component to create components, services, and more.
Svelte's Reactivity: A Compiler, Not a Library
Svelte achieves reactivity at compile time, not runtime. It's a compiler that turns your component files into efficient, imperative JavaScript that updates the DOM directly, skipping the virtual DOM. The footgun: reactivity only triggers on assignment.
Angular's Default Change Detection with Zone.js
Zone.js tells Angular to re-check your entire app whenever any async event finishes. This is Angular's default magic: a variable updates after an HTTP call, and the UI just works. The footgun? This "check everything" approach is expensive in large apps.
Angular NgModules: Organizing Legacy Code
Think of an NgModule as a shipping container for related features, bundling components, directives, and pipes. You'll find them organizing code in older Angular apps.
SvelteKit Prerendering: Build-Time HTML for Faster Sites
SvelteKit prerendering creates static HTML files at build time for instant loads. It's ideal for content that doesn't change per user, like marketing pages or blog posts. The main footgun: unlinked pages won't be found unless you explicitly list them.
Angular: Run Code Only on Browser or Server
Angular Universal runs your app twice: on a server and in a browser. Use isPlatformBrowser to run code only where it's safe, like accessing window or document, to prevent your server-side render from crashing.
Nuxt Server Data Fetching: useAsyncData & useFetch
Avoid client-side request waterfalls by fetching data on the server and embedding it in the page. Nuxt's useAsyncData and useFetch handle this SSR hydration for you. The main footgun: not providing a stable key, leading to re-fetches.
Vue's <script setup>: Less Boilerplate, More Performance
Vue's <script setup> is compile-time sugar that automatically exposes variables and functions to your template, cutting boilerplate. It yields more succinct, performant components with better type-safety.
Configuring the Angular Compiler (ngc)
The Angular Compiler (ngc) transforms your templates into optimized JavaScript ahead-of-time. You tune it in tsconfig.json to create smaller production builds or publish reusable libraries.
Angular Ivy: The Tree-Shakable Compiler
Angular's Ivy engine compiles components like separate puzzle pieces, making apps smaller and faster. This enables effective tree-shaking for smaller bundles and faster rebuilds.
Playwright: E2E Tests That Aren't Flaky
Playwright makes E2E tests reliable by automatically waiting for UI elements to be ready. Use it to test critical user journeys across Chrome, Firefox, and WebKit. The footgun is using brittle CSS selectors instead of user-facing locators like getByRole.
Angular's TestBed: A Sandbox for Component Testing
Angular's TestBed creates a mini-app just for your test, letting you check how a component renders and behaves with mock dependencies. It's for testing component-template interactions in isolation.
Vitest Mocking: Isolating Code with `vi.mock`
Vitest's vi.mock replaces a module with a fake version, isolating your code for tests. This is key for preventing real network or database calls. The footgun: calls are "hoisted" to the top of the file, running before other code and breaking variable access.
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