From a small open source project to a huge open source matrix, how did he do it?

Hello everyone, I'm Casson.

Many open source authors have gone through the following process:

• Have a good open source idea
• Roll up your sleeves and work hard
• Open source projects are recognized by the community, star the quantity is their driving force
• As the maintenance time becomes longer, there are setbacks (the consumption of time, the incomprehension of the party...)
• Frustrated and phasing out maintenance

The protagonist Tanner Linsley to introduce today is the author of React Table and React Query .

Unlike other open source authors whose projects are gradually abandoned after the passion dissipates, Tanner Linsley not only continues to iterate projects, but also forms a project matrix as more and more projects are maintained.

React Table 、 React Query ，再加上其他四个项目已经合并到TanStack项目下，形成了统一的品牌（ TanStack ):

How did he do it? This article will talk about the open source road of Tanner Linsley .

Welcome to join the human high-quality front-end framework group , with flying

open source benefits

When it comes to open source , many labels come to mind - free , generating electricity with love , contributing ...

But in fact, any job is very difficult to sustain without stable material benefits (yes, money).

Traditionally, open source authors have mostly relied on sponsorships (eg Github Sponsor ).

Sponsorships are often a drop in the bucket compared to the amount of open source work. Therefore, it is difficult for open source authors to expand the scale of their maintenance projects.

Tanner already has 180 sponsors on Github Sponsor , which is pretty good.

But in terms of scaling up maintenance projects , it's not nearly enough.

So what makes Tanner have a stable income, so as to maintain more projects?

The answer is: courses.

TanStack The official course in the matrix TanStack Query (ie React Query )
8w copies have been sold. According to the current discount price of 156 dollars, this part of the income has 1200w before tax.

Although the actual income will certainly not reach this amount, there are still millions of dollars in income.

Therefore, as long as you continue to produce excellent open source projects, you can obtain stable course benefits and form positive feedback.

So, how does a good open source project come into being? Next, let's talk about the development history of React Table .

History of React Table

In 2015, Tanner was the co-founder of a startup, nozzle .

nozzle 's main business is: reverse crawling Google search result page data, after integrating and analyzing these data, provide it to the ads that SEO need host.

This requires a lot of data visualization related work.

At that time, the technology stack of ---ee2aae13123a98bf3ed56ffae2914d40 nozzle was Angular , and the table was implemented using ag-grid .

For the follow-up development of the project, Tanner decided to migrate the entire project to the React technology stack.

But at the time React the technology stack didn't have a good table component, so he decided to implement one himself.

The conflict between self-use and open source

The initial version of React Table is completely for personal use, and open source is just a matter of convenience.

As an open source component, React Table was originally used as follows:

 <ReactTable
  data={data}
  columns={columns}
/>

Unlike in -house components , open source components need to meet the needs of as many people as possible.

So, with the React Table of star more and more, issues also followed.

for example:

• Can pagination be implemented?
• Can I pass a custom --- Header component to props ?
• Can I use CSS-In-JS ?

These customization requirements make Tanner exhausted, and it also leads to React Table becoming more and more bloated.

In the end, React Table with 137 props configuration items to meet these customization requirements:

How to maintain it next? Are the configuration items of React Table constantly expanding?

Fortunately, Tanner found a solution, which is render props . The revised version is as follows:

ReactTable The component is only responsible for the core logic of the table, and the internal logic is handed over to render props for implementation.

Want to customize the header? do it yourself.

Want to paginate? do it yourself.

When the render props version of React Table is about to be implemented, React core team released Hooks .

So, React Table redeveloped the version based on Hooks :

At first glance, the render props Hooks version just changes the ReactTable component to useTable .

But in reality, it's a giant leap.

Because, the pattern opened up.

pattern open

render props can be considered as a feature of React , which is related to React .

And Hooks itself is just a function with special functions, which means that it can exist independently from React .

Thanks to the idea of React Hooks being widely accepted by the community, more and more frameworks have implemented their own Hooks (such as Vue3 in Composition API ).

So, the new version React Table is designed to be Framework Agnostic.

To put it simply, by @tanstack/table-core plus different frameworks adapter can realize the table components for different frameworks:

For example, for Solid.js , only need to adapt his fine-grained update and context , you can achieve Solid Table :

This framework-agnostic open source component expands the audience of the component and reduces the onboarding cost for developers after migrating the technology stack.

postscript

Open source is not a fight, but a worldly way.

It stands to reason that AG Grid should be a direct competitor of Tanstack Table . However, based on the attitude of cooperation and win-win , the two formed a partnership to work together to:

• Educate front-end developers on the differences between these two libraries and how to choose
• When a library does not meet the requirements, recommend the other. In order to jointly cover as many application scenarios as possible

AG Grid The team is even a big sponsor of Tanstack :

This kind of open source model of win-win cooperation and making the cake bigger (or oligopoly ) together is worthy of reference for the majority of open source authors.

Have you ever used React Table or React Query ? What do you think of the achievements and benefits they have achieved so far?