Learn Once, Use Everywhere — Framework-Agnostic Front-end Tools

Contents

• Intro
• Another great experience
• One testing lib to rule them all
• List of Framework-Agnostic Front-end Tools

Intro

Sometime ago I need to build complex and reusable table component in React project with features like pagination, drag and drop columns, filter, sort, search, show and hide columns and many other features and project was build around MUI component. There was some third party packages but not according to our design and customization doesn’t work for our needs, other option was creating table from scratch by myself so I can build it around our design and needs but I didn’t have time to build everything from scratch. I had a lot of research about it and then I found a nice solution with TanStack Table which is headless lib and it handle all of the logic and functionality so you can only focus on UI and combine it with your component lib and customize it as you need!

While I like their approach, and I amazed with lib and how it works, more interesting idea for me, not only they support React, but also they support Vue, Svelte, Solid and many other frameworks(even Vanilla!), You can learn the mental model one time and then use it in many other frameworks. This is amazing that you could use same lib in other frameworks(some syntax and setup is different but mental model remains same).

Another great experience

Few days ago, I started working on project which build with Vue and in that project I noticed API calls and storing data could be simpler and it would be nice to have a caching system. In the past, I had a great experience using TasStack Query in React. Since TanStack Table supports many frameworks I thought maybe this also applies to TanStack Query then I found it works with Vue!

It’s amazing how implementation in React and Vue are so close!

Vue implementation:

<script setup lang="ts">
import { useQuery } from '@tanstack/vue-query'

const { data, isPending, error } = useQuery({
	queryKey: ['todos'],
	queryFn: () => fetch('/api/todos').then((r) => r.json())
})
</script>

<template>
	<ul v-if="data">
		<li v-for="t in data" :key="t.id">{{ t.title }}</li>
	</ul>
	<span v-else-if="isPending">Loading...</span>
	<span v-else>Oops!</span>
</template>

React implementation:

import { useQuery } from '@tanstack/react-query'

function Todos() {
	const { data, isPending, error } = useQuery({
		queryKey: ['todos'],
		queryFn: () => fetch('/api/todos').then((r) => r.json())
	})

	if (isPending) return <span>Loading...</span>
	if (error) return <span>Oops!</span>

	return (
		<ul>
			{data.map((t) => (
				<li key={t.id}>{t.title}</li>
			))}
		</ul>
	)
}

export default Todos

One testing lib to rule them all

When I learning about testing and unit tests, I found Testing-library for testing React components. Instead of testing implementation details, it renders component in isolated DOM and then it works with it just like user works with component. You can have a lof of refactor on your code but as long as output remains same then unit tests are passing.

Latter I found you can use Testing-library in many other frameworks.

List of Framework-Agnostic Front-end Tools

I decided to list of agnostic tools with their usage. Maybe it’s going to be useful for others, if you have similar experience of using Agnostic tools, please share it in comments and I will add them to this list. Thank you.

Name	Description
TanStack Query	Powerful asynchronous state management, server-state utilities and data fetching. Fetch, cache, update, and wrangle all forms of async data in your TS/JS, React, Vue, Solid, Svelte & Angular applications all without touching any “global state”
TanStack Table	Supercharge your tables or build a datagrid from scratch for TS/JS, React, Vue, Solid, Svelte, Qwik, Angular, and Lit while retaining 100% control over markup and styles.
Testing-library	Simple and complete testing utilities that encourage good testing practices
TanStack	Headless, type-safe, & powerful utilities for Web Applications, Routing, State Management, Data Visualization, Datagrids/Tables, and more.
Storybook	Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free.
Jest	Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!
Vite	Vite (French word for “quick”, pronounced /vit/, like “veet”) is a build tool that aims to provide a faster and leaner development experience for modern web projects.
Playwright	Playwright enables reliable end-to-end testing for modern web apps.
Vitest	A Vite-native testing framework. It’s fast!