refract推導

by Joe McGrath

通過喬麥克格拉斯

我們如何利用Refract來利用React式編程的力量 (How we harnessed the power of reactive programming with Refract)

Have you ever wondered how open-source libraries built by companies come into existence?

您是否想過公司建立的開源庫是如何形成的？

I’ve always been curious about it. Do they start with the intention of creating an internal library? Is open-source the initial goal? If neither, how does it happen at all? Now that I’ve been lucky enough to see that through from start to finish, it feels worth sharing the story of how Refract came to exist!

我一直對此很好奇。他們是從創建內部庫開始嗎？開源是最初的目標嗎？如果兩者都不是，那它怎么發生的呢？現在，我已經足夠幸運地看到了從頭到尾的故事，值得分享有關Refract如何誕生的故事！

One of the first things I did after accepting FanDuel’s job offer was email the engineers who had interviewed me.

接受FanDuel的工作邀請后，我要做的第一件事就是給面試我的工程師發送電子郵件。

My previous employer had been an ambitious startup working on some cool ideas, but FanDuel was the real deal: a tech unicorn with a reputation as one of the top companies in the country. Since I had only a few months’ experience with React/Redux et al, it seemed a good idea to get a head-start… so I asked what tech to learn.

我以前的雇主曾是一個雄心勃勃的初創公司，致力于一些很酷的想法，但FanDuel是真正的交易：一家擁有美國頂級公司聲譽的科技獨角獸。因為我只有幾個月的React / Redux等經驗，所以搶先一步似乎是個好主意……所以我問要學習什么技術。

Among libraries and concepts both familiar and unfamiliar, one line in the reply caught my attention:

在熟悉和不熟悉的圖書館和概念中，答復中的一行引起了我的注意：

“xstream — we are very excited about using reactive programming”

“ xstream –我們對使用React式編程感到非常興奮”

I had heard of reactive programming — it was exactly the kind of powerful, flexible programming technique I was hoping to learn. However, I knew enough about it that the name xstream raised questions.

我聽說過React式編程-這正是我希望學習的一種強大，靈活的編程技術。但是，我對此一無所知，以至于xstream這個名字引起了疑問。

Generally, the combination of React and reactive programming meant redux-observable, and redux-observable used RxJS. Xstream is an alternative to RxJS. The fact that they used xstream meant either an adaptor or some kind of custom integration.

通常，React和React式編程的結合意味著可使用Redux進行觀察，以及可使用Redux進行觀察的RxJS。 Xstream是RxJS的替代品。他們使用xstream的事實意味著適配器或某種定制集成。

I hoped it was the latter. It fit with the company’s reputation for innovation, and felt like something which could be immensely interesting to work on.

我希望是后者。它符合公司在創新方面的聲譽，并且感覺像是一件非常有趣的事情。

I would not be disappointed.

我不會失望的。

探索的時刻 (A Time For Exploration)

There are advantages and disadvantages to starting a new job in mid-December. They are amplified if your first week happens to be a hackathon.

在12月中旬開始新工作有各有利弊。如果您的第一個星期恰好是駭客馬拉松，那么它們會被放大。

It would be a while before serious work would be sent my way, which in my case was a good thing. It meant I had time to explore. One quirk of my approach to learning is that I’m happy absorbing knowledge and context about a new codebase by simply reading the code.

認真的工作要經過一段時間才行，對我而言這是一件好事。這意味著我有時間去探索。我學習方法的一個怪癖是，我很高興通過簡單地閱讀代碼來吸收有關新代碼庫的知識和上下文。

My main goal was to understand the app from a general perspective, but I had other questions. I wanted to see how they used reactive programming — and it didn’t take long to find what I was looking for.

我的主要目標是從一般角度了解該應用程序，但是我還有其他問題。我想看看他們如何使用React式編程-很快就找到了我想要的東西。

Digging through several layers of abstraction led to a pair of higher-order components: withSideEffects and withPropsSideEffects.

深入研究多個抽象層會導致一對高階組件： withSideEffects和withPropsSideEffects 。

The former allowed you to observe a Redux store via actions or selectors. It was like redux-observable in concept, but embedded into a React component.

前者允許您通過操作或選擇器觀察Redux存儲。從概念上講，它就像可觀察到的redux一樣，但是被嵌入到React組件中。

The latter was even more interesting. It allowed you to observe the data flowing through React itself, something I had never even heard of as a possibility.

后者更有趣。它使您可以觀察到流過React本身的數據，這是我什至從未聽說過的可能性。

These two generalised HoCs formed the building blocks for a selection of more specialised ones. Each took a stream of data and performed a specific side-effect in response. One pair to dispatch analytics events, another pair to dispatch to the store. Yet another to trigger navigation changes. This was an obvious limitation: you could observe only one source at a time and cause only one type of effect.

這兩個廣義的HoC構成了一些更專業的選擇的基礎。每個人都采集了數據流，并做出了特定的React。一對發送分析事件，另一對發送到商店。另一個觸發導航更改。這是一個明顯的局限性：您一次只能觀察到一種來源，并且只能引起一種類型的影響。

Another flaw was that the HoCs had a very cryptic API. To configure them you had to pass in nested arrays, containing lists of things you wanted to observe and effects you wanted to cause in response.

另一個缺陷是HoC具有非常隱秘的API。要配置它們，您必須傳遞嵌套數組，其中包含您要觀察的事物列表以及您想引起響應的效果列表。

As a result, this hugely powerful feature was not used to its full potential. The ideas behind the code showed so much flexibility, but those flaws were holding it back.

結果，這個強大的功能沒有充分發揮其潛力。代碼背后的想法顯示了很大的靈活性，但是這些缺陷使它受阻。

So where did the flaws come from? What battles had this code weathered before it came to bear those scars?

那么缺陷是從哪里來的呢？在承受這些傷疤之前，這段代碼經歷了哪些戰斗？

It turns out that the code I first encountered was actually iteration number four. What were the earlier iterations, and how did they come to pass?

事實證明，我首先遇到的代碼實際上是第四次迭代。較早的迭代是什么，它們如何通過？

許多年前 (Many Eons Ago)

In 2015, FanDuel made the decision to create a new product for a potential new market. It was treated as a fresh start — a chance to try something new, to explore the potential advantages the popular React/Redux ecosystem might offer over the existing Angular app.

2015年，FanDuel決定為潛在的新市場開發新產品。它被視為一個嶄新的開始–一個嘗試新事物的機會，以探索流行的React / Redux生態系統相對于現有Angular應用程序可能提供的潛在優勢。

Thomas was one of the lead engineers on the project. He was convinced that reactive programming could unlock huge benefits, keen to find opportunities to use it in the app.

托馬斯是該項目的首席工程師之一。他堅信React式編程可以釋放巨大的利益，渴望找到在應用程序中使用它的機會。

The first seeds of Refract — the first iteration — came from every developer’s absolute favourite thing to work on: analytics.

Refract的第一個種子(第一個迭代)來自每個開發人員絕對喜歡的工作：分析。

We won’t explore this version here, because at the time Thomas wrote an article explaining the situation which remains well worth reading. The core of the feature involved streams embedded into a React component. It let you observe actions and selectors, and send data to analytics vendors in response.

我們不會在這里探討此版本，因為當時Thomas撰寫了一篇文章，解釋了這種情況，仍然值得一讀。該功能的核心涉及嵌入到React組件中的流。它使您可以觀察操作和選擇器，并作為響應將數據發送給分析供應商。

穩步前進 (The Steady March Of Progress)

The new app was considered a success, and the company decided to re-platform the flagship US product using the shiny new technology.

新應用程序被認為是成功的，該公司決定使用閃亮的新技術重新平臺化美國旗艦產品。

As is natural with such major changes to a product already used at scale, this would be a long-term project. At time of writing, several Angular views remain in use, and some even older legacy code clings to life in places.

對已經大規模使用的產品進行如此重大的更改是很自然的，這將是一個長期的項目。在撰寫本文時，幾個Angular視圖仍在使用中，有些甚至更舊的舊代碼仍在現場使用。

But that does not mean that life waits for the old code to catch up. Over time, the approach to side-effects evolved and improved.

但這并不意味著生命在等待舊的代碼趕上來。隨著時間的流逝，副作用的方法不斷發展和完善。

The second iteration of Refract will remain lost in time. To quote Thomas, “I’ve forgotten, and I think it’s better that way.”

Refract的第二次迭代將保持時間丟失。用托馬斯的話說： “我已經忘記了，我認為那樣會更好。”

The third iteration was similar to the approach I first encountered. Its API was even harder to read, and it was still limited to observing Redux.

第三次迭代與我第一次遇到的方法類似。其API甚至更難以閱讀，并且仍然僅限于觀察Redux。

The fourth iteration was a big leap. The ability to observe React props was introduced. Minor inconsistencies were ironed out. The imperative and declarative code was split into something akin to Redux’s reducers and action creators.

第四次迭代是一個巨大的飛躍。介紹了觀察React道具的能力。較小的矛盾得到了解決。命令性和聲明性代碼被拆分為類似于Redux的reducer和動作創建者的代碼。

This iteration was stable for over a year. It proved its value over time, and was considered a mature feature by the time I joined.

此迭代穩定了一年以上。隨著時間的推移，它證明了它的價值，并在我加入時被認為是成熟的功能。

一個新的想法 (A New Idea)

So, Refract started off as some proprietary code, considered stable but difficult to use, built inside a large app. How did we turn that into a self-contained library, ready for use by the wider community? What steps were taken along the way?

因此，Refract最初是在大型應用程序內部構建的一些專有代碼，這些代碼被認為穩定但難于使用。我們如何將其變成一個獨立的圖書館，供廣大社區使用？一路上采取了哪些步驟？

The project was actually sparked by an outside influence. FanDuel often hosts the Edinburgh React meetups, with at least one or two engineers attending.

該項目實際上是受到外界影響的。 FanDuel經常主持愛丁堡React堆聚會，至少有一到兩名工程師參加。

At one meetup, a talk explored redux-observable, and it struck one of the people present just how much more our code could do in comparison. We talked about it over the following weeks, feeling that it would be something well worth open-sourcing.

在一次聚會上，一場演講探討了redux-observable的問題，并引起與會人員之一的注意，相比之下，我們的代碼可以做什么。在接下來的幾周中，我們談到了這一點，認為這將是值得開源的。

For a while, nothing seemed to come of these discussions. While the company dedicates 10% of everyone’s time for professional development, everyone had other things they wanted to work on. Besides, the code seemed too complex for it to be a project which could actually succeed.

一段時間以來，這些討論似乎一無所獲。盡管公司將每個人的10％的時間用于專業發展，但每個人都有其他想從事的工作。此外，代碼似乎太復雜，以至于不能成為一個實際上可以成功的項目。

正在發生？ (It’s Happening?)

Then, one day in mid-April, a new slack channel appeared. The channel’s purpose: Discussion of a new API for side-effects, with OSS plan. Thomas posted a sketch of a new API he had in mind.

然后，在4月中旬的一天，出現了一個新的閑置頻道。渠道的目的： Discussion of a new API for side-effects, with OSS plan 。托馬斯(Thomas)發布了他所想到的新API的草圖。

The sketch was a lot simpler than the existing API. It made the developer experience much cleaner and more intuitive, and added even more flexibility. Over the following weeks we discussed ideas for improvements, while getting on with the serious business of bike-shedding on the name and logo for the project.

該草圖比現有的API簡單得多。它使開發人員的體驗更加整潔和直觀，并增加了靈活性。在接下來的幾周中，我們討論了改進的想法，同時在項目的名稱和徽標上進行了認真的騎車業務。

For a while we converged on the name Recoil without being too happy with it, but then the perfect name was suggested: Refract. Symbols were sketched, and then the final logo was completed. Progress!

有一會兒，我們對Recoil的名稱感到不太滿意，但隨后提出了一個完美的名稱： Refract 。草繪符號，然后完成最終徽標。進展！

With the serious work out of the way, we could get on with the remaining details — namely waiting for Thomas to write the code.

經過認真的工作，我們可以繼續進行其余的細節，即等待Thomas編寫代碼。

He extracted the existing code from the app, and tweaked it to match the new API design. We took the time to build some test projects, iterate on the details, and then write the documentation and examples. We pitched the idea to our CTO and other executives, gaining approval from a number of key stakeholders.

他從應用程序中提取了現有代碼，并對其進行了調整以匹配新的API設計。我們花了一些時間來構建一些測試項目，迭代細節，然后編寫文檔和示例。我們將此想法推薦給了CTO和其他主管，并獲得了許多關鍵利益相關者的認可。

So there you have it: at least in this case, our library has a much longer history than it may seem. It grew through many iterations before the first hints of open-source came to mind.

這樣就可以了：至少在這種情況下，我們的圖書館的歷史比看起來更長。經過很多迭代，它才逐漸浮現出開源的最初提示。

We published version one of Refract at the end of August 2018, after using it internally for a while, and it has been a joy to work with. But, as with the best origin stories, the end is merely the beginning of something greater.

我們在內部使用了一段時間后，于2018年8月底發布了Refract的版本一，使用它一直是一種樂趣。但是，就像最好的故事一樣，結局只是更大事情的開始。

新目的 (A New Purpose)

Our early experience using the library led us to some new ideas. We implemented the best of them, and Refract became something far more general purpose than we originally imagined.

我們使用圖書館的早期經驗使我們產生了一些新想法。我們實施了其中最好的產品，Refract變得比我們最初想象的要通用得多。

It is no longer just a library for isolating side-effects from your synchronous logic. It now lets you build your React app using reactive programming. This has huge implications for how we might structure our apps in the future.

它不再只是一個用于從同步邏輯中分離副作用的庫。現在，您可以使用React式編程來構建React應用 。這對我們將來如何構建應用程序具有重大影響。

But that’s best left to be explored another time.

但這最好留待下一次探索。

For now, if you want to find out more, check out our documentation and our numerous live code examples!

現在，如果您想了解更多信息，請查閱我們的文檔和眾多實時代碼示例！

Join us in our #refract channel on the Reactiflux Discord server if you have any questions or feedback, or to just talk about how you’d like to use the library. We look forward to hearing from you!

如果您有任何疑問或反饋，或者只是談論您要如何使用該庫，請加入我們在Reactiflux Discord服務器上的#refract頻道。我們期待您的回音！

Refract — DocumentationHarness the power of reactive programming to supercharge your componentsrefract.js.org

Refract —文檔 利用React式編程的力量來增強組件的性能 Refract.js.org