Tutorials covering the frameworks and libraries that shape how modern applications are built — Angular, React, Vue, and the ecosystem tools that surround them. Each chapter is standalone, built around real examples and verified facts.
The previous chapters covered the global store with actions, reducers, effects, and selectors, and then went deeper with effects and entity. The global store is designed for application-wide state — the kind that outlives any single component and is shared across features. But not all state belongs in the global store. A component that opens…
React Testing Library (RTL) is not a test runner. It is a set of utilities that render a React component into a DOM and provide queries for finding elements the way a user would find them—by role, by label, by text—rather than by implementation details like component state or class names . The library’s guiding…
Vue’s reactivity system is undergoing its most significant architectural change since Vue 3.0. In Vue 3.6, the core dependency-tracking algorithm is being replaced with Alien Signals, a standalone signal library developed by Vue core contributor Johnson Chu . The change is not a surface-level optimization; it is a rewrite of the mechanism that answers the…
The previous chapters covered the global NgRx store with actions, reducers, and effects, and then ComponentStore as the component-scoped alternative. Signal Store (@ngrx/signals) is the newest entry in the NgRx ecosystem, and it is the one NgRx now recommends for new projects. It combines the structure and composability of NgRx with the reactivity of Angular…
A component test that renders markup and asserts on the output is only half a test. The other half is the interaction: the user types into a field, clicks a button, presses Escape, tabs through a form, or holds a modifier key while clicking. React Testing Library’s userEvent library exists to simulate those interactions with…
Vue’s reactivity system is often described as “magic,” but the mechanism is a small set of cooperating functions. A Proxy intercepts property access and calls track to record who is reading. The same Proxy intercepts property writes and calls trigger to notify everyone who was recorded. The EffectScope wraps this machinery in a lifecycle boundary,…
Internationalization is the process of designing an application so that it can be adapted to various languages and regions without engineering changes. Angular provides built-in internationalization tools, commonly abbreviated as i18n, to help you achieve this. The framework’s approach is primarily compile-time: translations are extracted from your source code, translated, and then merged back into…
Mock Service Worker is not a Jest mock. It is a network-level interceptor. When your React component calls fetch(‘/api/users’), MSW intercepts that request before it leaves the process, matches it against the handlers you defined, and returns the mocked response as if it came from a real server . The component’s actual fetch call runs,…
Vue’s reactivity system exposes a small set of utility functions for inspecting and normalizing reactive values. These functions are not the ones application code uses most often—ref, computed, and reactive are—but they are the ones composables and libraries use to handle arguments that might be a raw value, a ref, or a reactive object. The…
The previous chapter covered the fundamentals of Angular’s internationalization pipeline: marking text with the i18n attribute, extracting translations, and building localized variants. This chapter goes deeper. It covers the $localize function for translating strings in TypeScript code, the ICU expression system for plurals and selections, the TRANSLATIONS token for runtime translation loading, the distinction between…