Intermediate concepts in Vue, Angular & Svelte, page 2
Angular's Reactive Form Classes: FormControl, FormGroup, FormArray
Reactive forms build a data model in your code, not the template. Use FormControl for one input, FormGroup for a set of fields like a login form, and FormArray for dynamic lists. The main footgun is forgetting to import ReactiveFormsModule.
SvelteKit Form Actions: Server-Side Logic for Forms
SvelteKit Form Actions link HTML forms directly to server-side code, handling submissions without client-side boilerplate. They're perfect for logins or registrations and work without JavaScript.
VeeValidate: Vue Forms Without the Boilerplate
VeeValidate manages the entire lifecycle of a Vue form—tracking values, validation, and submissions—so you don't write the state boilerplate. Use it for simple contact forms or complex wizards, especially with async validation. The footgun is mixing its APIs.
TanStack Query: Managing Server State, Not Client State
TanStack Query manages asynchronous server state, not client-side UI state. It treats server data as a cached resource. Use it to fetch, cache, and update remote data automatically. The footgun is using it for synchronous client state like form inputs.
Vue Dynamic Routes: Using Parameters
Dynamic routes use one component for many URLs, like a User page for /users/johnny and /users/jolyne. Define a path with a param like /users/:id and access its value via $route.params.id.
Nested Routes: Mapping URLs to Component Trees
Nested routes map URL segments to components inside other components, like a sub-page within a main layout. This is common for user dashboards with sections like 'profile' and 'settings'. The footgun is forgetting the child router outlet.
Navigation Guards: Vue's Route Bouncers
Think of navigation guards as bouncers for your app's routes. They intercept route changes to check permissions or fetch data before rendering a page. The old next() callback is a trap; accidentally calling it twice can break navigation.
File-Based Routing: Your Filesystem is Your API
File-based routing makes your directory structure the single source of truth for your app's URLs. Creating a file at routes/about/+page.svelte automatically creates the /about page, no central config needed.
Angular: Reading URL Query Parameters
Angular gives you two ways to read URL query params: a static snapshot for the initial value, or a queryParams Observable for live updates. Use it for values like ?search=term.
Vue Composables: Reusable Stateful Logic
A Vue composable is a function for bundling reusable stateful logic, like tracking mouse position. Use it to share complex logic like API fetches across components. The footgun: each component gets a fresh, independent state, not a shared one.
Angular Custom Attribute Directives
An Angular attribute directive changes the appearance or behavior of an existing DOM element without adding a new one, applied as a plain HTML attribute so reusable behavior like hover effects or validation can be attached declaratively across many templates.
Angular HttpInterceptor: A Pipeline for API Requests
Think of an HttpInterceptor as a pipeline for every API call, letting you inspect or modify requests and responses globally. Use it to automatically add auth headers or show a loading spinner.
Vue Async Components: Defer Loading Until Needed
Vue async components defer loading a component's code until it's rendered, speeding up initial app loads. Use them for heavy components not needed right away, like modals or admin panels. The footgun is a blank UI if you don't handle loading/error states.
Angular's OnPush: Faster Apps by Doing Less
OnPush tells Angular to only re-render a component when its inputs change or its own events fire, not on every global event. It's a key performance boost for large apps, but mutating an input object directly won't trigger a re-render, causing a stale UI.
List Virtualization: Rendering the Viewport, Not the Dataset
List virtualization renders only the visible slice of a huge dataset, keeping your app fast by maintaining a tiny DOM. Use it for long lists or infinite scroll feeds.
JavaScript Bundle Analysis: Seeing Your App's Weight
Think of it as an X-ray for your compiled JavaScript, showing which libraries take up the most space. Use it to diagnose slow load times by finding large or duplicated dependencies.
The Testing Trophy: Prioritize Integration Tests
The Testing Trophy flips the classic pyramid, arguing for "mostly integration tests" to maximize your return on investment. It's for UI apps where testing component interactions gives more confidence than isolated unit tests.
Svelte Testing Library: Test Components Like a User
Test Svelte components like a user would use them. Svelte Testing Library interacts with the rendered DOM, not internal state, to verify behavior. This avoids brittle tests tied to implementation.
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.
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.
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