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 toprops
? - 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?
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。