对ReactFest 2018的反思

黄金三镖客

《经济学人 》的前端开发团队(是的,我们有一支敬业的开发人员!)最近参加了伦敦的ReactFest。

如果您正在寻找ReactFest的一般评论或某些特定的演讲,那么这不是您要找的博客。

相反,本文包含在《经济学人 》的数字开发团队的背景下我对会议的一些印象。 我也了解了我认为进展顺利的地方以及可以改进的地方。

如果您是技术怪胎,请跳到我对下面各个“谈话”的思考。

一切顺利

多元化

《经济学人》是一个引以为傲的“多元化赞助商”,从我的多元化角度来看,ReactFest是成功的。

我很高兴看到,至少在ReactFest上,软件开发不再是“仅限男性”的聚会。 实际上,这是对我过去参加过的其他软件开发会议的一项重大改进。

感谢组织者和其他多元化赞助者(YLD,Formidable,Trainline和JP Morgan),以确保大多数小组成员都包括杰出的女性软件工程师和开发人员。

位置和大小

一个路堤是ReactFest的绝佳地点。 大约有200人参加,我认为这是进行亲密聊天的合适人数。 这也使我更容易敢于说:与陌生人“交流”!

会谈

以下是我最喜欢的ReactFest演讲的一些反思,其中包括与《经济学人》的数字化和开发经验相关的重点内容。

仅供参考-我们当前的技术堆栈(React,GraphQL,Node.js®,Docker,Redux,Relay…)。

佩吉·雷兹

我立即被阿波罗(Apollo)使用状态管理来通过单一事实来源解析外部和本地数据的方向所吸引。

我们使用诸如GraphQL-Tools之类的Apollo技术来创建用于可视化测试的模型服务器,但是目前我们并未使用Apollo Client。

我们将很快开始探索,以使用比我们的母舰更简单的代码库在辅助产品中对其进行评估。

借助Apollo,我们希望能够简化代码库,从而有可能删除Relay,一些相关的依赖项,例如isomorphic-relay和isomorphic-relay-router,以及Redux。

丹·阿布拉莫夫

当丹·阿布拉莫夫说话时,您肯定知道他有话要说。
如果您还没有看过,您肯定应该在JSConf Iceland 2018上观看他的演讲。

他在ReactFest上的演讲像往常一样好。 但是,我对JSConf Iceland 2018的第一部分印象深刻:

您在演示中看到的性能是我们在JS世界中不经常看到的。

数据团队的开发人员Evan Hensleigh在ReactFest上代表《经济学人》 。 他使用React来构建信息图表,在某些情况下可能非常复杂,并且具有可以被突变的巨大DOM。 这就是为什么我认为丹的冰岛谈话的第一部分比第二部分更令人印象深刻的原因。

马克切

Marcel很有趣,并且正确地说类型检查很困难。

我们的FrontEnd团队拥有广泛的资历。 我们拥有具有15年以上经验和多种语言背景的开发人员,他们的经验与新鲜,聪明的小伙子和姑娘们最近才开始喜欢JS,并且不了解其他语言。

初级开发人员的类型检查 很难 。 并不是因为他们难以理解它,而是因为他们每天都面临着其他挑战,这些挑战包括我们的标准所暗示的事情,例如编写高质量的代码,编写测试(单元,合同,集成,端到端,可视化)和棉绒。 只有这样,所有内容都需要由同行审阅者和核心审阅者进行审查,并通过人工QA。 因此,对于他们来说,这是更多值得担心的事情。

类型检查 很好 。 在我看来,作为技术主管,无论在API的错误检测和自我记录方面有什么优势,促使经验不足的开发人员更深入地思考其实现并以更干净的功能编程方式进行思考都是非常有用的。

尼古拉斯·科维拉特

在他发表演讲之前,我与Nicolas进行了很好的交谈,很高兴见到他。

我们将很快发布我们的第一个React Native应用程序(当前仅适用于iOS),我个人希望该团队可以有时间尝试一下https://github.com/necolas/react-native-web之类的东西,这引起了我的注意。注意。

萨拉维埃拉

萨拉是对的:“ BEM很烂”……现在。

今天肯定有更好的解决方案。 当我们开始构建新的www.economist.com(首次提交,2015年9月17日)以及更早的开源组件库时,BEM是最好的方法,尤其是考虑到我们团队中有使用CSS的Web开发人员/设计人员仅适用于JS。

BEM是让设计师编写样式而由开发人员编写功能组件的自然解决方案。

内联样式之类的建议解决方案对我们不利,因为我们希望使样式能够按需导入,并使它们与功能组件分开。

今天,我们正在评估放弃它,因为由于更多产品上的使用,我们需要更好地封装组件和样式。 无论如何,我们都希望保留样式作为一种选择,我们可以通过“高阶样式化组件”来实现。

我们目前正在评估Emotion作为CSS-in-JS解决方案。

悉达多·克谢特拉帕尔

我们正在将Auth-0用作对用户的身份验证服务,但这是另一回事了。

当我们在2015年开始对网站进行改版时,我们遇到了同样的问题,最终遇到了Siddharth在他的演讲中提到的类似解决方案。

这个想法曾经(现在仍然)非常棒:设计人员和开发人员使用一种通用的语言进行交流,从而简化了交互并加快了步伐,因为我们所有人都希望尽快向用户提供功能,而又不影响产品的质量。

确保设计师对此完全了解!

我们很幸运,因为我们与来自柏林的咨询公司Edenspiekermann及其出色的设计师合作。

他们提出了这种方法,对我来说这是一个启示。

悉达思(Siddharth)在演讲中清楚地解释了该概念的工作原理。
他们的团队使用T恤尺寸来抽象单位和值,并为颜色创建了易于使用点语法(例如colour.green.light)使用的颜色对象。

我们使用3个预设(在我们称为component时错误地)对内容进行了抽象化。

  • 色彩

经济学家组成部分/组成部分调色板
component-palette-ecoCSS的调色板,在postCSS变量中。 github.com

  :根 { 
--color-economist:#e3120b;
--color-beijing:#121212;
--color-kiev:#383e42;
...
}

除了我们品牌的红色外,其余调色板都有城市名称。
我们希望设计人员与开发人员快速建立原型,以避免出现以下情况:

设计师:“可以把它变成浅蓝色吗?”
开发人员:“稍微定义一下,然后重试”
设计师:“ …你知道吗? 浅蓝色就足够了……”
开发人员:“定义“ light”,然后重试”

这就是我们现在所拥有的:

设计师:“边界应为’伦敦’”
开发人员:“…边框:var(— color-london)…完成”

保留调色板的内容取决于设计人员而不是开发人员,以免失去理智。

  • 版式

经济学家成分/成分表
component-typography –印刷组件,包含postCSS变量,用于字体大小和每种字体的行高… github.com

我们创建了一个以数字“ 0”定义的起始值,因此开发人员可以轻松地上下移动以减小或增大字体大小。

  .post { 
font-family:var(-fontfamily-sans);
字体大小:var(-text-size-step-0,1rem):
行高:var(-text-line-height-sans-on-step-0,1rem);
}

如果设计师要求您增加字体大小,则将“ 0”替换为“ 1”,而当您必须减小值时,则将其更改为“ -1”(例如,从“ — text-size-step-0”更改为“ — text-size-step — 1’)。

  • 格网

经济学家组件/组件网格
component-grid –提供网格间距变量,供其他组件使用,以便它们显示… github.com

当我们开始编码时,设计只是一页,因为我们对交付物应用了非常增量的过程,因此每个人都清楚,没有什么是一成不变的。

这就是为什么我们最终使用动物大小作为间距而不是T恤大小(我们用于装订线)的原因。 由于垂直分隔在我们的响应式设计中的工作方式,装订线(垂直分隔线)得到了很好的定义,而间距(在这种情况下,我们指的是水平间距)仍在评估中。

如果我们使用T恤尺寸,那么如果设计师要求您在X和XL之间添加一个值,将会发生什么?

虽然总有一种动物可以适应刺猬和兔子!

  --grid-spacing-mouse:0.1em; 
--grid-spacing-hedgehog:0.35em;
<<<在此处添加您的豚鼠
--grid-spacing-rabbit:0.714em;
--grid-spacing-fox:1em;
--grid-spacing-sloth: