【译】UI工程的元素

在我以前的文章中，我讨论了关于咱们存在知识漏洞问题。大家也许会总结为我提倡平庸，并非，这是很宽的领域。

我坚信你能从任何地方开始学习，而且不须要听从特定的顺序。可是获取足够的经验仍是有很大的价值的。我我的已经对建立用户界面很是感兴趣了。

我一直在思考我真正了解和认为有价值的是什么。固然，我熟悉一些技术（好比JavaScript和React）。但更重要的经验教训是难以捉摸的。我从未试图用语言表达出来。这是我第一次尝试将它们罗列出来而且对它们进行描述。

---

市面上有不少关于技术或库的学习路线。哪一个库将在2019流行？2020又会是什么？你应该学习Vue或者React吗？Angular？Redux或者Rx吗？你须要学习Apollo？REST或者GraphQL吗？这是很容易迷茫的。若是做者错了呢？

我学习的最大突破不是学习一门固定的技术。而是，当我在解决一个特定的UI问题时学到了不少。有时，我会在以后发现一些库或者同伴帮助了我。在其余状况下，我会想到本身的解决方案（好的或者坏的）。

理解问题、尝试使用解决方案、应用不一样的策略，这些组合使得我获取了最具价值的学习经验。这篇文章主要就是探讨这些问题的。

---

若是你主要工做于用户页面，你可能处理了很多这样的挑战——直接的或使用库。不管如何，我鼓励你建立一个不依赖库的小应用，而后进行复现和解决这些问题。它们都没有一个正确的解。学习来自于探索问题领域和尝试不一样可能的权衡。

🤔列举出页面开发中的一些问题，本身思考解决

---

• 一致性（Consistency）。 你点击了“like”按钮后，文本变成了：“你和你另外的三个朋友喜欢了这篇文章。”你再此点击，文本又变回去了。听起来很简单吧。可是在屏幕上好几个地方都存在这样的标签。也许有一些其余的提示须要改变（例如按钮的背景色）。‘likers’列表已经提早从服务端获取到了，而且当鼠标移上去的时候也应该可以看到你的名字了。若是你导航到另外一个屏幕并返回，博客不该该“忘记”它被喜欢过。即便是局部一致性自己，也会带来一些挑战。可是其它的用户可能也会改变咱们展现的一些数据（例如喜欢咱们正在看的帖子）。咱们怎样保证屏幕上不一样部分同步相同的数据呢？咱们如何以及什么时候使本地数据与服务器一致，反之亦然？
• 响应性（Responsiveness）。 人们只能在有限的时间内忍受他们的行为缺少反馈。对于手势和滚动等连续性操做，这个限制很低。(即使是跳过一个16ms的帧也会让人感受很“不爽”。)对于像点击这样的离散操做，有研究代表，用户认为任何小于100ms的延迟都很快。若是一个动做须要更长的时间，咱们须要显示一个视觉指示器。但也有一些违反直觉。致使页面布局的“跳跃”或经历几个加载阶段的指示器会让动做感受比之前更慢。相似地，在20ms内处理交互(以丢帧为代价)比在30ms内处理交互要慢，并且没有删除帧。大脑并非基准。咱们如何保证咱们的应用响应不一样的输入呢？
• 延迟（Latency）。 计算和网络连接都须要时间。有时，若是不影响目标设备的响应能力，咱们能够忽略计算成本（确保在低配的设备上测试过你的应用）。可是处理网络延迟是无可避免的——它将消耗几秒钟！咱们的应用不能静止等待数据或代码加载。可是那有可能发生在每个屏幕中。如何在不显示“loading”加载或空白状况下优雅地处理延迟呢？如何避免“跳跃”布局呢？以及如何在每次不“从新链接”代码的状况下更改异步加载项呢？
• 导航（Navigation）。 当咱们与页面交互时，咱们指望UI可以保持“稳定”。事物不该该就在咱们眼前消失。导航，不管是在应用程序内部启动（如单机连接），仍是因为外部事件（如单击“后退”按钮），都应该听从这一原则。例如，在配置文件屏幕上的/profile/likes和/profile/following选项卡之间切换不该该清除选项卡视图以外的搜索输入。尽管导航到另外一个屏幕中就像走进了一间房间同样。人们指望可以走回去并能找到他们留下的东西。若是你在导航中，单击一个连接，而后返回，你失去了在导航中的位置，这是使人沮丧的——或者等待它再次加载。咱们如何在不丢失重要上下文的状况下设计应用程序来处理任意导航。
• 陈旧（Staleness）。 经过引入本地缓存，咱们可使“后退”按钮导航当即生效。在缓存中，咱们能够“记住”一些数据，以便快捷访问，即便理论上咱们能够从新获取它。可是缓存自身也存在着一些问题。缓存可能会过时。如何处理当我改变了一个头像，缓存也应该会更新的问题。若是我建立了一篇新的文章，也应该当即出如今缓存中，不然缓存将是无效的。这将变得困难且容易出错。若是发布失败了呢？缓存在内存中停留多长时间？当咱们从新获取提要时，是将新获取的提要与缓存的提要“整合”，仍是将缓存丢弃？如何在缓存中表示分页或排序？
• 熵（Entropy）。 热力学第二定律是这样说的，随着时间的推移，物质会变得一团糟（嗯，不彻底是）。这也一样适用于用户界面。咱们不能准确地预测用户交互及其顺序。在任什么时候间点，咱们的应用程序可能处于数量惊人的状态下。咱们尽最大努力使结果可预测而且限制咱们的设计。咱们不想看到一个bug截图，而后疑惑“这是怎样发生的？”。对于N个可能的状态，它们之间有N*(N - 1)个可能的跃迁。例如，若是一个按钮能够处于5种不一样的状态之一（正常，激活，悬停，危险，禁用），对于5×4=20个可能的转换，更新按钮的代码必须是正确的——或者禁止其中一些。咱们如何控制可能状态的组合爆炸，并使视觉输出可预测？
• 优先级（Priority）。 有些事情比其它事情更重要。对话框可能出如今产生它的按钮的“上方”，并“跳出”其内容的剪辑边界。新调度的任务(例如响应单击)可能比已经启动的长时间运行的任务(例如在屏幕折叠下方呈现下一篇文章)更重要。随着咱们应用程序的成长，它的部分代码是由不一样的人和团队编写的，它们争夺有限的资源，如处理器、网络、屏幕空间和包大小预算。有时您能够根据“重要性”的共享级别对竞争者进行排序，好比CSS z-index属性。可是它不多有好的结局 每一个开发人员都偏颇地认为他们的代码很重要。若是一切都很重要，那么什么都不重要!咱们如何让独立的小部件合做，而不是争夺资源?
• 可访问性（Accessibility）。 没法访问的网站不是一个小众问题。例如，在英国，每5我的中就有1人患有残疾。（这是一张不错的信息图表）我也有这种感受。虽然我只有26岁，但我仍是很难阅读字体细、对比度低的网站。我试着减小使用触控板的次数，我担忧有一天我将不得不经过键盘来浏览功能不佳的网站。咱们须要让咱们的应用程序对于有困难的人来讲不那么可怕——好消息是有不少唾手可得的成果。首先是教育和工具。但咱们也须要让产品开发人员作正确的事情。咱们能够作些什么来使易访问性成为默认而不是过后考虑?
• 国际化（Internationalization）。 咱们的应用程序须要在全世界各地运行。人们不只会说不一样的语言，并且咱们还须要用产品工程师最少的工做量来支持从右到左的布局。咱们如何在不牺牲延迟和响应性的状况下支持不一样的语言？
• 交付（Delivery）。 咱们须要将应用程序代码发送到用户的计算机。咱们使用什么传输和格式?这听起来很简单，可是这里有不少权衡。例如，本机应用程序倾向于提早加载全部代码，代价就是使得应用程序变得更大。Web应用程序的初始负载每每较小，但在使用过程当中会有更多的延迟。咱们如何选择在哪一个点引入延迟？咱们如何基于使用模式优化咱们的交付？最优解须要什么样的数据？
• 伸缩性（Resilience）。 若是你是昆虫学者你可能会喜欢bugs，但你可能不喜欢看到它们出如今你的程序中。然而，你的一些bug将不可避免地进入生产环境。而后会发生什么？一些bug会致使错误但定义良好的行为。例如，你的代码可能在某些条件下显示不正确的输出。可是若是渲染代码崩溃了呢?那么咱们就不能有意义地继续，由于视觉输出会不一致。一个帖子的崩溃不该该“拉下”整个feed，也不该该让它进入一个致使更多崩溃的半中断状态。咱们如何编写代码来隔离渲染和获取失败，并保持应用程序的其他部分运行？容错对于用户界面意味着什么？
• 抽象（Abstraction）。 在一个小的应用程序中，咱们能够硬编码许多特殊的状况来解决上述问题。可是应用程序每每会增加。咱们但愿可以重用、分叉和联接代码的各个部分，使它们可以一块儿工做。咱们想在不一样的人熟悉的片断之间定义清晰的界限，避免使常常变化的逻辑过于僵化。咱们如何建立隐藏特定UI部分实现细节的抽象？咱们如何避免在咱们的应用增加过程当中再次引入咱们刚刚解决的问题？

---

固然，还有不少我没有提到的问题。这个列表毫不是详尽的!例如，我没有谈到设计人员和工程协做，或者调试和测试。也许下一次我会写的更详尽。阅读关于这些问题的文章时，很容易想到使用特定的视图库或数据获取库做为解决方案。可是我鼓励你伪装这些库不存在，从这个角度再读一遍。您将如何解决这些问题?去试试构建一个小的应用程序吧!(我很乐意看到你在GitHub上作的实验——你能够发推特（Twitter）回复我。)

这些问题的有趣之处在于，它们中的大多数都能以任何规模出现。你能够在诸如typeahead或工具提示这样的小工具中看到它们，也能够在诸如Twitter和Facebook这样的大型应用程序中看到它们。

想一想你喜欢使用的应用程序中的一个非试验性的UI元素，仔细检查一下这个问题列表。您能描述一下它的开发人员所选择的一些折衷方案吗?尝试从头建立一个相似的行为!

经过在不使用库的小型应用程序中试验这些问题，我学到了不少关于UI工程的知识。我向任何想对UI工程中权衡利弊的人推荐一样的方法。

说明💡：翻译👉Dan Abramov🤩的文章是一件很愉悦的事情，乐在其中并乐此不疲。但因为我的能力有限，一些翻译的很差的地方或者理解不对的地方，但愿发现问题的同窗能指出，共同窗习！

原文连接：overreacted.io/the-element…