《JavaScript DOM编程艺术》作者谈：原型代码与生产代码之间的矛盾

原文作者：Jeremy Keith

译者：UC 国际研发 Jothy

写在最前：欢迎你来到“UC国际技术”公众号，我们将为大家提供与客户端、服务端、算法、测试、数据、前端等相关的高质量技术文章，不限于原创与翻译。

在 Clearleft 做前端开发时，我们通常以组件库的形式提供生产代码。 这意味着我们的优先级是性能，可访问性，健壮性和其他 Web 开发方面的质量指标。

但我们却总是使用前端开发的原材料-HTML，CSS 和 JavaScript，来生成不适合生产环境的东西——我说的是原型制作。

现在市面上有很多无代码的原型制作工具，我们的设计师经常会用它们传达交互设计等细微之处。 但是，当真实用户测试原型时，我们发现它无法比拟 HTML，CSS 和 JavaScript 的灵活性，后者只需要把它加载到浏览器中就完事儿了。

我们做了很多设计冲刺项目，其第一要义是时间。 冲刺的倒数第二天产出的原型肯定不是符合生产质量的，但它足以通过测试。

有趣的是 - 在进行原型制作时 - 我们平时考虑的前端优先级可能最终将成为过眼云烟。 现在最高优的就是速度， 而如果这意味着牺牲语义或性能，那没关系，牺牲就牺牲。 如果我在构建一个原型的时候想着“现在，我该给这个组件设定什么 class？”，那么我知道我的思维方式错了。 这个问题可能对实际生产代码有效，但这对原型来说纯粹是浪费时间。

所以这两种工作体现的是非常不同的态度。 对于生产工作，质量是关键。而原型设计，快速制作是重点。

虽然在开发公共项目时，我会仔细考量第三方库和框架带来的性能影响，但在制作原型时我不会考虑它。 尽管给出你想要的所有 JavaScript 框架和 CSS 库吧（虽然我会觉得 CSS Grid 等浏览器技术降低了 Bootstrap 这样的 CSS 库的重要性，即使只是原型设计上）。

在生产项目和原型项目之间切换还挺有趣，有趣中带点迷惑，就像我必须在翻转大脑中的开关来改变音轨一样。

当原型效果很好、测试良好时，真正的陷阱是使用原型代码作为最终产品的基础代码。请别这么做！ 我曾经就犯过这个错误，结果总是很糟糕。相比从一个纯净的项目开始，我最终花了更多的时间来将原型代码对齐到生产级别。

正确做法是：制作原型来测试想法，设计，交互和接口......然后把代码丢弃。 原型的价值在于回答问题和测试假设。 当切换到生产模式时，不要坠入沉没成本谬论。

毋庸讳言，请无论如何也不要将原型代码发布到生产中！

但是…

貌似越来越多的在线网站都采用了原型设计理念。人们不考虑是否适合，就都使用重量级的 JavaScript 框架。而可访问性，也总被降级为事后的想法。大多网站都采用脆弱的架构——依赖于首次加载然后执行 JavaScript，接着呈现基本内容。 开发人员体验总是优先于用户体验。

Heydon 最近 highlight 了一篇文章，为有抱负的 Web 开发人员提供了这个技巧：

对于 HTML，目前没有太多可以学习的，你可以随时学习，但在开发你的第一个页面之前，你得先搞清楚内联元素（比如 span）和块级元素（比如 div）之间有什么区别。

这对正在构建原型的你来说，是个非常在理的建议... 但是，如果你正在构建一些公众消费的站点，请务必考虑到最终用户。

英文原文：

https://adactio.com/journal/14562

好文推荐：

Bootstrap 发布了个 v3.4 版本？是不是搞错了？

quicklink 为你的页面实现秒开

“UC国际技术”致力于与你共享高质量的技术文章

欢迎关注我们的公众号、将文章分享给你的好友