阅读 1234

《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国际技术”致力于与你共享高质量的技术文章

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



关注下面的标签,发现更多相似文章
评论