Forem: The Modern Web

React in 2025: Why It's No Longer Just a Library (Server Components & Frameworks Explained)

mehdi — Sun, 03 Aug 2025 09:15:03 +0000

The Future of Frontend: Progressive Web Apps, Microfrontends, & JavaScript Frameworks in 2025

mehdi — Wed, 30 Jul 2025 17:53:44 +0000

The Rise of Adapters in the JavaScript Ecosystem

mehdi — Sun, 27 Jul 2025 00:56:25 +0000

The modern JavaScript landscape is characterized by rapid evolution and a proliferation of powerful tools, often referred to as meta-frameworks. As developers seek greater flexibility, performance, and maintainability, there's a growing emphasis on framework agnosticism and runtime agnosticism. This shift is paving the way for a new era where libraries and tools are designed with "adapters" in mind, allowing them to integrate seamlessly across different frameworks and runtime environments, thereby minimizing vendor lock-in and streamlining development workflows.

The Agnostic Tides: Framework and Runtime Independence

A key trend in contemporary web development is the move towards solutions that are not intrinsically tied to a single JavaScript framework or runtime. This allows developers to choose the best tool for the job without committing to an entire ecosystem.

Hono's Universal Reach: Hono, a relatively new framework, exemplifies this trend. It is described as a small, simple, and ultrafast web framework built on Web Standards. Its serverless design and embrace of modern web APIs caught the attention of developers due to its impressive speed and minimal footprint. Crucially, Hono works on practically any JavaScript runtime, including Cloudflare Workers, Fastly Compute, Deno, Bun, Vercel, Netlify, AWS Lambda, Lambda@Edge, and Node.js. This broad compatibility means you can write your code once and deploy it almost anywhere without major modifications.
Nitro's Deployment Versatility: Nitro, an open-source framework that builds web servers, is another champion of runtime agnosticism. It is designed to automatically make your code compatible with any deployment provider and runtime. Nitro can be used as the server engine for full-stack frameworks like Nuxt, or standalone. It focuses purely on server-side logic and APIs, making it more lightweight and potentially faster for API-only use cases compared to a full-stack framework like Nuxt.js. The underlying h3 library, used by Nitro, abstracts from Node.js, enabling support for serverless and other environments.
Vite as the Development Hub: Vite, known for its hot-reloading capabilities in the browser, has extended its utility to support modern backend frameworks like Hono. It provides a whole new way of developing full-stack applications by enabling hot module reloading for Hono applications. This flexibility in the development server allows developers to mix and match frontend and backend technologies more easily.

Unifying the Frontend-Backend Divide

The traditional division between frontend and backend development can introduce unnecessary complexities. Modern approaches aim to bridge this gap, often through shared tooling and type systems.

Sharing Types for Coherence: With a full-stack architecture like Vite + Hono, developers can reduce the unnecessary division between the backend and the frontend and improve the quality of code since Hono can share API types between the backend and the frontend. This type-sharing capability is a significant benefit, fostering consistency and reducing errors across the stack.
Meta-Frameworks and Their Server Engines: Frameworks like Next.js (React-based) and Nuxt.js (Vue.js-based) are popular examples of full-stack meta-frameworks that natively integrate server-side rendering (SSR). While they offer comprehensive features, if the primary goal is just an API server without server-rendered pages, Nitro would likely be the more efficient and streamlined choice due to its focus on server-side operations and lighter overhead.

The Power of Portable Libraries: Adapters in Action

The core of achieving true framework and runtime independence lies in adopting libraries that are designed to be portable and extensible through adaptation. These "adapters" allow a core logic to remain consistent while leveraging the unique benefits of the environment it's running in.

State Management with TanStack Query: As you mentioned, libraries like TanStack Store (and its related TanStack Query) are at the forefront of this movement. TanStack Query is described as a "powerful asynchronous state management for TS/JS, React, Solid, Vue, Svelte and Angular". This highlights its framework-agnostic nature, as it provides a unified API for data fetching and state management across multiple frontend frameworks. It handles caching, background updates, and stale data out-of-the-box with zero configuration, and there's no global state to manage, reducers, normalization systems, or heavy configurations to understand. Being backend agnostic and having zero dependencies further contributes to its portability and ease of integration. The concept of providing "adapters" for specific framework features (like leveraging Angular signals for reactivity) perfectly embodies how these libraries offer universal utility while still being able to optimize for the chosen environment.
Flexible Server-Side Rendering (SSR) Solutions: When it comes to SSR with Vite, several solutions are emerging that offer varying degrees of agnosticism and adaptation:
- SSRx: This Vite plugin focuses on smoothing out developer experience issues with Vite SSR and aims to "formalize a means of hooking 3rd party libraries into the SSR lifecycle, while remaining as flexible as possible". Its server-agnostic nature means it can be used with various Node.js/Bun servers or serverless HTTP frameworks, including Hono. This "hooking" mechanism acts as a form of adaptation, allowing developers to integrate their preferred tools.
- Vinxi: While Vinxi is coupled to the H3 http framework and Nitro web server, its author emphasizes that this coupling allows them to "build a shared library of trusted tools that can do the common operations across all the platforms" such as sessions, CORS, cookies, and authentication. This approach aims for versatility by standardizing a robust server runtime rather than being entirely server-agnostic like SSRx. Despite this, Vinxi still facilitates interoperability, with examples of its integration with TanStack Router (a framework-agnostic routing library) for SSR.
- Vike: Positioning itself as "Like Next.js / Nuxt but as do-one-thing-do-it-well Vite plugin," Vike offers a more full-featured solution compared to SSRx or Vinxi, notably featuring an integrated Client Router. While powerful, its integrated router might be a distinguishing factor if you prefer to use a separate client-side router like TanStack Router or React Router.
Build Tooling and Code Synchronization: The choice of build tools also plays a crucial role in enabling flexibility. For backend Node.js applications, the sources recommend using Rollup over tsc because tsc is "very bad at supporting TypeScript" with .ts extensions and can complicate a unified tsconfig.json for both frontend and backend. Rollup's ability to handle this, while maintaining a single tsconfig.json that works for both sides, is a practical example of adapting tooling to achieve a seamless full-stack development experience.
Type-Safe API Clients (Hono Client): Hono facilitates streamlined frontend-backend communication through its client. By importing the api variable from utils/frontend.ts, frontend components can "use it as if calling local functions". This Hono Client (hc) leverages TypeScript type inference to provide type-safe RPC-style APIs, abstracting away the underlying HTTP requests and making API interactions feel more like local function calls. This abstraction layer effectively serves as an "adapter" for consuming backend services, promoting easier refactoring and potential migration of frontend technologies.

The Future is Flexible

The trend towards framework and runtime agnosticism, powered by smart adaptation strategies, is a significant step forward in JavaScript development. By leveraging tools like Hono and Nitro for universal runtime deployment, Vite for flexible development environments, and portable libraries like TanStack Query for core functionalities, developers can build applications with less technical debt and greater agility. This "rise of adapters" allows for:

Reduced Vendor Lock-in: Developers are not tied to a single framework or runtime, enabling them to choose components based on project needs rather than ecosystem constraints.
Improved Developer Experience: Consistent APIs and patterns across different parts of the stack, facilitated by adapters, lead to a more intuitive and productive development process.
Future-Proofing: Applications built with this philosophy are inherently more adaptable to future changes in the ever-evolving JavaScript landscape.

This focus on foundational portability and adaptive integration ensures that the JavaScript ecosystem continues to provide innovative, high-performance solutions for a wide array of application needs.

🚀 The Rise of Adapters: Reimagining JavaScript Tooling in 2025

mehdi — Fri, 25 Jul 2025 21:45:53 +0000

🔄 From Framework Lock-in to Flexible Tooling

The JavaScript world has entered a renaissance. No longer are we tied into monolithic frameworks or rigid ecosystems. Instead, a wave of adapter-based tools is giving developers flexibility, portability, and reuse across frameworks, without sacrificing performance or ergonomics.

TanStack Store: More than Just a Library

Framework-Agnostic Core

TanStack Store is a lightweight, type-safe reactive store built independently from any framework. That means your state logic—derivations, updates, batching—runs identically in React, Solid, Vue, Angular, Svelte, or even vanilla JS/TS.

Framework Adapters

For each framework (React, Angular, Solid, Vue, Svelte), adapters translate the core reactive store into framework-native constructs—like signals in Angular or fine-grained updates in Solid.

Why It Matters

Your business logic and state manipulation remain portable. Only the UI glue layer differs, dramatically easing transitions when migrating between frameworks while preserving productivity.

Nitro & the UnJS Ecosystem: Runtime-Agnostic Superpowers

Nitro's Universal Server Toolkit

Nitro is a next-generation server toolkit built atop h3 and unenv, designed to run anywhere—Node.js, Deno, Bun, Cloudflare Workers, or other edge environments—without rewriting code.

Seamless Runtime Adapters

Nitro's architecture adapts your code seamlessly to each runtime’s APIs, offering fetch-compatible handlers, caching, storage, and HTTP routing out-of-the-box.

Commitment to Openness

Nitro maintains full neutrality and runtime agnosticism, reinforcing the vision of tooling without vendor lock-in.

The broader UnJS ecosystem also includes adapter-driven utilities like unstorage, ofetch, and unplugin, enhancing cross-runtime compatibility.

🧩 Why Adapters Are the New Frontier

Benefit	What It Means for Developers
Portability	Core logic (state, routing, fetch) remains framework/runtime-agnostic, while only adapters differ per target environment.
Migration-first	Framework migration becomes incremental: adapt only the UI layer, preserving business logic.
Ecosystem cohesion	Projects like TanStack Form, Table, Query, and Store interoperate seamlessly across frameworks through adapters.
Performance-first	Despite abstraction layers, tools like Nitro and TanStack Store remain minimal and optimized for performance.

🎉 What This Means for JavaScript Developers

We're witnessing a defragmentation, not fragmentation:

Write Once, Adapt Anywhere: Build core business logic once, adapting only as needed.
Unlock Flexibility: Choose frameworks or runtimes per project or team without massive rewrites.
Community-Driven Standards: Projects like Nitro and TanStack foster collaboration, openness, and innovation.

✅ Suggested Next Steps

Explore adapter-first libraries like TanStack Store, Nitro, h3, and HonoJS. Embrace this powerful shift to future-proof your projects, enhance flexibility, and rediscover joy in JavaScript development.

✨ Closing Thoughts

Adapter-based tooling is reshaping JavaScript projects across front-end, back-end, and full-stack environments. The capacity to write once in a neutral core and adapt seamlessly ensures your projects stay maintainable, flexible, and team-friendly. Now is the time to join this exciting new frontier.

TanStack

mehdi — Thu, 24 Jul 2025 08:25:01 +0000

TanStack resources

TanStack Start

Full-stack React and Solid framework powered by TanStack Router

TanStack Start

TanStack Router

Modern and scalable routing for React and Solid applications

TanStack Router

TanStack Query

Powerful asynchronous state management for TS/JS, React, Solid, Vue, Svelte and Angular

TanStack Query

TanStack Store

Framework agnostic type-safe store w/ reactive framework adapters

TanStack Store

Videos

WWDC25: Meet Containerization | Apple

mehdi — Wed, 23 Jul 2025 16:06:54 +0000

Turning an Angular application into React using VS Code Agent mode

mehdi — Tue, 22 Apr 2025 06:42:30 +0000

Fireside Chat with DHH, Matz and Tobias Lütke - Rails World 2024

mehdi — Fri, 18 Apr 2025 15:18:54 +0000

In a special #RailsWorld session, DHH (creator of Rails), Matz (creator of Ruby), and Shopify CEO Tobias Lütke sat down for a fireside chat about #Ruby, #Rails, and all things #opensource.

This is the first time that Matz and DHH shared a stage, and it would not have been possible without Tobi, who not only donated his keynote spot to make this session happen, but also led the discussion.

Source: https://www.youtube.com/watch?v=zPBbHu-BKpQ

Rails World 2024 Opening Keynote - David Heinemeier Hansson

mehdi — Thu, 17 Apr 2025 10:26:12 +0000

During DHH's Opening Keynote of Rails World 2024 in Toronto, Rails 8 beta was shipped with Authentication, Propshaft, Solid Cache, Solid Queue, Solid Cable, Kamal 2, and Thruster. No PaaS needed when building with the One Person Framework.

Source: https://www.youtube.com/watch?v=-cEn_83zRFw

Copilot agent mode new features in Visual Studio Code | GitHub Checkout

mehdi — Thu, 17 Apr 2025 05:00:25 +0000

In this GitHub Checkout episode, we explore the latest updates to GitHub Copilot's agent mode in Visual Studio Code, demonstrating how it automates codebase searches, terminal commands, and UI test generation through natural language prompts.

Technology #GitHubCopilot #CopilotAgentMode

▬▬▬▬▬▬ TIMESTAMPS ⌚ ▬▬▬▬▬▬

0:00 Introduction
00:29 Copilot Edits
01:34 GitHub Copilot agent mode
02:30 How to enable agent mode
04:41 Copilot agent mode in action
07:38 Running UI tests
11:15 How Copilot changes developers' workflows
12:50 What's new coming up?
13:37 Outro

▬▬▬▬▬▬ WANT TO LEARN MORE? 🚀 ▬▬▬▬▬▬

https://github.com/features/copilot
https://github.blog/news-insights/product-news/github-copilot-the-agent-awakens/

Source: https://www.youtube.com/watch?v=aKx5I0Mrr9g

GitHub Copilot: the agent awakens

mehdi — Thu, 17 Apr 2025 04:56:03 +0000

The most recent updates to VS Code and GitHub Copilot are game-changers for your productivity. From next edit suggestions, allowing Copilot to suggest the next edit you might be looking for in your file, to new models, to prompt files to provide even more context, to Agent Mode in Copilot Chat, allowing Copilot to iterate and reason over an entire project - and even resolve errors! See all the features in action, and explore them in your own projects and workloads. Read more in our blog post: https://github.blog/news-insights/product-news/github-copilot-the-agent-awakens/

Start using GitHub Copilot right now: https://gh.io/copilot

▬▬▬▬▬▬ TIMESTAMPS ⌚ ▬▬▬▬▬▬
0:00 Intro
0:15 Next Edit Suggestions
1:20 Copilot Chat and o3-mini
1:55 Copilot Edit
2:50 Copilot Vision
3:20 Copilot Edit - Agent Mode
4:50 Prompt files

Source: https://www.youtube.com/watch?v=C95drFKy4ss

The Only 3 Videos You Need to Get Started with MCP!

mehdi — Wed, 16 Apr 2025 06:25:05 +0000

In this video, I review 3 of the best MCP videos I’ve found that make learning Model Context Protocol simple, clear, and actually enjoyable. If you’re new to MCP or just want to cut through the noise and start with high-quality resources, this is the perfect place to begin.

🔎 Chapters:
00:00 Intro
01:22 The Future of AI in VS Code: MCP Servers Explained!
03:55 VS Code + MCP
06:35 Remote MCP servers using Azure Functions
08:36 Docs
9:46 Closing Remarks

Source: youtube.com/watch?v=YRfOiB0Im64