Concepts in Vue, Angular & Svelte, page 7
Universal Rendering: Server-First, Client-Interactive
Universal Rendering sends a pre-built HTML page from the server for a fast load, then adds interactivity on the client. It's the default in frameworks like Nuxt for better SEO, but the footgun is writing code that crashes on the server by assuming a browser.
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.
Angular TransferState: Avoid Double Data Fetching in SSR
TransferState is a key-value cache that bridges your Angular SSR server and the browser, preventing the client from re-fetching data the server already got. Use it to pass resolved API data from the server render to the client, avoiding wasted network calls.
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.
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.
SvelteKit Server-Only Modules: Keep Your Secrets Secret
SvelteKit's server-only modules are a firewall for your code, preventing sensitive data like API keys from ever being bundled for the browser. Use them for database clients or secret logic.
ISR: Static Speed for Dynamic Content
Incremental Static Regeneration (ISR) gives users a fast, static page while regenerating it in the background. It's ideal for e-commerce catalogs or blogs that update periodically.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
<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's ng-template: Reusable UI Blueprints
ng-template defines a reusable UI blueprint that isn't rendered by default. Use it with ngTemplateOutlet to create configurable components, like passing a custom item layout to a generic list.
Angular's `async` Pipe: Manage Observables in Templates
Angular's async pipe is a self-managing subscription for your templates. It unwraps values from Observables or Promises directly in your HTML, triggering updates on new emissions. It automatically unsubscribes, preventing the common footgun of memory leaks.
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