Easy everything in Vue, Angular & Svelte, page 4
Programmatic Navigation: Changing Routes with Code
Instead of a user clicking a link, you trigger navigation from your JavaScript. This is useful for redirecting after an action, like a successful login. The main footgun: params are ignored if you also provide a path—use a named route instead.
RouterLink: Client-Side Navigation in Angular
RouterLink is Angular's replacement for <a> tags, preventing full page reloads in a Single-Page App. Use it on any element to navigate between views. The common footgun is using a standard <a href="...">, which reloads the page and loses application state.
Client-Side Routing: No More Full Page Reloads
Client-side routing fakes page navigation. Instead of fetching new HTML from a server, it just shows or hides components already loaded, making transitions feel instant. This powers single-page apps (SPAs).
SvelteKit's `load` Function: Pre-fetch Data for Pages
Think of SvelteKit's load function as a gatekeeper for your page, fetching data *before* it renders. It's used to grab data from an API or route params, like fetching a blog post. The footgun: load in +page.js runs on both server and client.
Angular HttpClient: Your App's API Connector
Angular's HttpClient turns network requests into RxJS Observables. Use it to fetch data or submit forms. The footgun: a request is never sent until you subscribe to the Observable it returns, a common mistake for beginners.
Using Angular Services for Simple State Management
An Angular service acts like a central data store. Components subscribe to it for data, rather than owning state, keeping data consistent across views. It's ideal for sharing user info or cart contents.
Vuex: A Central Store for Your App's State
Vuex acts as a global warehouse for your app's shared data, letting any component access state without complex prop-drilling. It's for large apps where components need to sync up. The footgun: For new projects, use Pinia, Vue's new official state library.
Angular's Built-in Form Validators
Angular's built-in validators are pre-made rules for your forms. Use them to easily check for required fields, min/max length, and valid email formats. The footgun is confusing required for text inputs with requiredTrue, which is only for checkboxes.
Component v-model: Two-Way Binding with defineModel
v-model on a component creates a two-way binding, letting a parent and child share and update data. The defineModel() macro is the modern way to enable this for custom form inputs. The footgun is that a default value can de-sync parent/child state.
Angular Template-Driven Forms: Logic in the HTML
Angular Template-Driven Forms put form logic directly in your HTML template. Using two-way data binding with [(ngModel)], they're great for simple scenarios like login or contact forms.
Angular Component Styles: Scoped by Default
Angular styles are scoped to their component by default, preventing one component's styles from accidentally breaking another. This lets you build reusable UI pieces without style conflicts. The footgun is using ::ng-deep, which breaks this isolation.
Svelte Scoped Styles: CSS That Can't Leak
Svelte styles are like house rules; they only apply inside that component and don't affect the neighbors. This is the default for any <style> tag in a .svelte file, preventing CSS conflicts.
Vue Scoped CSS: Keep Your Styles Local
Vue's Scoped CSS prevents styles from leaking out of a component. It adds a unique data attribute to your component's HTML and rewrites CSS to target it, ensuring styles only apply locally.
Svelte's Reactive Assignments with `$: `
Think of Svelte's $: as a magic label that automatically re-runs code when its inputs change. It's used to create derived values, like $: sum = a + b. The footgun: the compiler only tracks direct dependencies, not those hidden inside function calls.
Svelte Lifecycle: Mount, Destroy, and Tick
Svelte 5 simplifies the component lifecycle to just two events: creation (onMount) and destruction (onDestroy). Use onMount for DOM setup and return a cleanup function from it. The cleanup only works if the main callback is synchronous, not async.
Angular Component Lifecycle Hooks
Angular's lifecycle hooks are callbacks for a component's life events: creation, updates, and destruction. Use ngOnInit for one-time setup after inputs are ready, and ngOnChanges to react to input changes. The footgun: don't use the constructor for setup.
Vue Lifecycle Hooks: Running Code at the Right Time
Vue lifecycle hooks are your cues to run code at specific moments in a component's life. Use onMounted to fetch data or onUnmounted to clean up timers. The main footgun is that hooks must be registered synchronously during setup, not in an async callback.
Vue's v-model: Two-Way Binding Made Simple
v-model creates a two-way binding that synchronizes form inputs with your JavaScript data. Use it on any form element like an input or textarea. The footgun: it ignores initial HTML attributes; your JavaScript state is always the single source of truth.
Angular Structural Directives: Shape Your DOM
Structural directives shape your DOM by adding, removing, or manipulating HTML elements. Use *ngIf to show/hide a block or *ngFor to loop over a list. The footgun is forgetting the asterisk (*), which is critical syntactic sugar for a more complex template.
Vue's v-if vs. v-show: When to Use Which
v-if adds or removes elements from the DOM; v-show just hides them with CSS. Use v-if for conditions that rarely change (like admin access) and v-show for frequent toggles (like a dropdown menu), as it has a lower toggle cost.
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