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

翻译自: https://www.freecodecamp.org/news/how-we-harnessed-the-power-of-reactive-programming-with-refract-87f269ac779e/

refract推导