Shared Concepts
Study Shared Concepts
Cross-cutting frontend patterns and practices
Topics
S Single Responsibility Principle SRP
SRP says a class, module or component should have one and only one reason to change. In React that usually means splitting fetching, validation, submission and rendering into separate hooks/components, so a UI tweak doesn't risk…
O Open Closed Principle OCP
OCP says you should be able to add new behaviour by writing new code, not by editing the code that already works. In practice that means programming against interfaces (payment processors, strategy objects, plugin registries) so a new…
L Liskov Substitution Principle LSP
LSP says any implementation of an interface must be usable wherever the interface is expected, without surprises. Throwing "not supported" from a method you were forced to declare is the classic violation — it pushes type-shaped runtime…
I Interface Segregation Principle ISP
ISP says clients should never be forced to depend on methods they don't use. Split fat interfaces into focused capability slices (Playable, Seekable, Fullscreenable) so an audio player isn't pretending to support fullscreen — and so…
D Dependency Inversion Principle DIP
DIP says high-level code (components, use-cases) should depend on abstractions, not on the concrete classes that implement them. Injecting a StorageService interface instead of new LocalStorageService() is what makes the component swap…
Async Await Deep Dive
async/await is syntactic sugar over promises: an async function always returns a promise, await suspends execution and resumes the continuation as a microtask, and rejected promises surface as ordinary thrown errors. A senior answer…
Base Keyword
super is how a derived class reaches its parent: super(...) invokes the base constructor and super.method() extends inherited behavior. The key rule an interviewer checks is that super() must run before any use of this in a derived…
CLR & Garbage Collector (GC)
JavaScript engines use generational garbage collectors to reclaim memory from unreachable objects.
CLR & Garbage Collector (GC) Practical Example
Use this walkthrough to explain how you investigate memory leaks in frontend apps.
CQRS Pattern
CQRS separates command (write) operations from query (read) operations to keep models focused.
Decorator Pattern
Decorators wrap an object or function to add behavior without changing the original.
Dependency Injection Lifetimes
Angular's hierarchical injectors decide how long a service instance lives and how widely it's shared: root providers are app-wide singletons, module/feature providers are singletons per feature boundary, and component providers create a…
Factory Pattern
Provide a single place to create related objects without exposing construction details.
FIFO Queues In .NET
A FIFO queue processes items in the order they were added — first in, first out. The interview trap is the naive array implementation: Array.push + Array.shift makes dequeue O(n) because every remaining element shifts down. The fix is a…
Forcing Garbage Collection
In production JavaScript, you generally do not force GC. Let the engine manage it.
Frontend Architecture
Use these patterns across JavaScript, TypeScript, Angular, and React projects to keep codebases maintainable.
IDisposable Patterns
JavaScript doesn’t have IDisposable, but you still need explicit cleanup for resources.
Mediator Pattern
The Mediator pattern introduces a central hub that coordinates interactions between components so they never reference each other directly, replacing a tangle of many-to-many dependencies with a clean star topology. It shines for…
Memory Allocation Discipline Example
This example highlights how frequent allocations can impact performance and how to avoid them.
Memory Allocation Discipline Example Async
This example shows how async flows can leak memory when subscriptions aren't cleaned up.
Micro Frontends
Micro frontends extend the concept of microservices to the frontend, allowing teams to build, deploy, and maintain independent features or applications that compose into a unified user experience.
Micro Frontends
Micro frontends split a large UI into independently owned and deployed slices, composed into a single user experience.
Nameof Keyword
JavaScript doesn’t have a nameof keyword. Use constants or keyof to keep names in sync.
NET Generational Garbage Collection (GC) Deep Dive
JavaScript engines use generational GC to optimize for short-lived objects.
O1 Constant Time
Operations that execute in a fixed amount of time regardless of input size.
Observer Pattern
Observers subscribe to changes from a subject and react when it emits updates.
OLogN Logarithmic Time
O(log n) logarithmic time means each step discards a constant fraction of the remaining work, so cost barely grows even as input explodes — a million elements take only ~20 steps. It's the complexity of binary search and balanced-tree…
ON Linear Time
O(n) linear time means cost grows in direct proportion to input size — double the data, double the work. It's the complexity of a single pass: map, filter, reduce, or one for loop over a collection. Linear is usually the practical…
ON2 Quadratic Time
O(n²) quadratic time means the work grows with the square of the input — doubling the data quadruples the cost. It's the signature of nested loops over the same collection or Array.includes inside a loop, and it's the complexity class…
ONLogN Linearithmic Time
O(n log n) linearithmic time is the cost of doing log-many passes over n elements — the floor for comparison-based sorting and the hallmark of divide-and-conquer algorithms like merge sort and quicksort. It's only slightly worse than…
Overview
This repository now targets modern frontend development in the order JavaScript → TypeScript → Angular → React. Use this overview to navigate the stack-specific folders and understand how notes, practice prompts, and generators fit…
RabbitMQ
RabbitMQ is a message broker used for asynchronous workflows, eventing, and background processing.
Reflection Overview
Reflection is the ability to inspect and manipulate objects dynamically at runtime — enumerating keys with Object.keys, probing membership with in or Object.hasOwn, and reading or writing properties via the Reflect API. It powers…
Scalable Responsive Design
Building applications that scale gracefully across devices, user loads, and team sizes requires intentional architecture decisions. This guide covers scalability (handling growth) and responsive design (adapting to different contexts).
Scalable Responsive Design
Scalable UI systems stay consistent as teams and features grow. Responsive design ensures the UI adapts across devices and layout contexts.
Server Vs Workstation GC
JavaScript engines tune GC differently depending on environment and workload.
Sorted Collections Interview Notes
🧠Practice Prompt: Explain how you’d pick between SortedList and SortedDictionary for a price ladder updated multiple times per second.
Sorting Algorithms
Use this sheet to explain trade-offs quickly and reference JavaScript examples.
Space Complexity
Space complexity measures how much memory an algorithm uses relative to input size.
SSR And Prerendering
SSR and pre-rendering are techniques used to generate HTML on the server or at build time, primarily aimed at improving SEO and initial page load performance. However, these approaches come with significant trade-offs that must be…
Strategy Pattern
Encapsulate algorithms behind a shared interface so you can swap behavior without branching logic.
Struct Vs Class When To Use Which
Use this guide to explain how primitives and objects behave in JavaScript.
Tooling Vite Npm Pnpm Npx
Senior interviews often probe whether you understand what runs when, what bundles what, and why your tooling choices matter for DX, CI speed, and production performance.
Types
Use these notes to explain when to use types, interfaces, and classes in TS.