by George Stepanek

通过乔治·斯蒂芬内克

都是关于“邪恶”的 (It’s all about the “-ilities”)

We were “feature complete.”

我们“功能齐全”。

Four weeks into a 10-week Free Code Camp project to build an environmental pledge web application, we had gotten all of the use cases working correctly.

在为期10周的免费代码训练营项目中建立环境承诺Web应用程序的四个星期中，我们已经使所有用例都能正常工作。

Which meant that we were finished, right?

那意味着我们完成了，对吧？

Not even close!

差远了！

It took another four weeks just to bring the app up to a professional level of quality. It wasn’t just about finding and fixing a few remaining bugs. Most of the work we still had to do was about sorting out the “–ilities”: non-functional requirements, such as usability and compatibility.

又花了四个星期才使应用程序达到专业水平。这不仅仅是寻找和修复一些剩余的错误。我们仍然要做的大多数工作是解决“ -ilities”：非功能性需求，例如可用性和兼容性。

The app was working OK. But now we needed to make it work better.

该应用程序运行正常。但是现在我们需要使它更好地工作。

“Two seconds is the threshold for ecommerce website acceptability. At Google, we aim for under a half second.” — Maile Ohye

“两秒钟是电子商务网站可接受性的门槛。在Google，我们的目标是不到半秒钟。” － Maile Ohye

性能 (Performance)

The application needed a multi-page look and feel, so people could share the URLs of individual pledges or of their own pledge achievements, but we couldn’t achieve the sub-second response times we wanted using a multi-page design. It was simply taking too long to download and render the pages.

该应用程序需要多页面的外观，因此人们可以共享各个承诺的URL或自己的承诺成就的URL，但是我们无法使用多页面设计达到我们想要的亚秒级响应时间。下载和呈现页面只花了很长时间。

Our solution was to refactor it into a React-based single-page application that catches the click events of the hyperlinks to control which ‘page’ to display:

我们的解决方案是将其重构为基于React的单页面应用程序，该应用程序可捕获超链接的click事件以控制显示哪个“页面”：

var self = this;$('a').click(function (event) {    var href = $(this).attr("href");    self.setState({ url: href });    window.history.pushState('', '', href);    event.preventDefault();});

This means that the application gets fully loaded only once (which may take a few seconds over a slow connection) and then each click within the site is much, much faster.

这意味着应用程序只需要完全加载一次 (在缓慢的连接上可能要花费几秒钟的时间)，然后每次点击网站的速度都快得多。

We also aggressively optimized the images with Adobe Photoshop to reduce download times, and made sure that the pages are readable even while their images are still being downloaded.

我们还使用Adobe Photoshop积极优化了图像，以减少下载时间，并确保即使在其图像仍在下载时页面也可读。

兼容性 (Compatibility)

When you put a web application up on the public internet, you don’t know who is going to access it, which browser they’re going to use, or how old their browser version will be. It has to work for everyone.

当您将Web应用程序放置在公共Internet上时，您不知道将要访问谁，将使用哪些浏览器或浏览器的版本多大。它必须为每个人工作。

One advantage of our single-page app design was that it was easy to get it to turn itself off for older browser versions that don’t support the APIs we needed, and fall back to using the hyperlinks as-is. Using the application this way is slower, of course, but it still works just fine.

我们的单页应用程序设计的一个优势是，对于不支持我们所需API的较旧版本的浏览器，很容易将其关闭，而可以直接使用超链接。当然，以这种方式使用应用程序的速度较慢，但仍然可以正常工作。

These days most modern browsers are reasonably compatible with each other, but you should still test as widely as possible. We found that we needed to put in special rules for older versions of Internet Explorer (which wasn’t unexpected) and iOS (which was).

如今，大多数现代浏览器可以合理地相互兼容，但您仍应进行尽可能广泛的测试。我们发现，我们需要为Internet Explorer的较早版本(这不是意外的)和iOS(过去的版本)设置特殊的规则。

“Don’t make me think” —Steve Krug

“不要让我思考”-Steve Krug

易用性 (Usability)

We thought that our application — with five categories that each contained a dozen or so pledges — was pretty simple.

我们认为我们的应用程序非常简单，它分为五个类别，每个类别包含十几个承诺。

But when we asked our friends and family to do user testing, some of them said they got confused as to where they were in the application, and didn’t really understand how to get to where they wanted to go.

但是，当我们要求我们的朋友和家人进行用户测试时，其中一些人说他们对应用程序中的位置感到困惑，并且并不真正了解如何到达他们想要去的地方。

It needed to be more intuitive.

它需要更加直观。

So we added icon breadcrumbs to the header to help people get an immediate sense of where they are in the hierarchy of pages, with hyperlinks to help them go back up.

因此，我们在标题中添加了图标面包屑，以帮助人们立即了解他们在页面层次结构中的位置，并通过超链接来帮助他们向上备份。

We also added next pledge and previous pledge arrows so people could easily click through from one pledge to the next without having to go back to the category page each time.

我们还添加了下一个质押和上一个质押箭头，因此人们可以轻松地从一个质押单击到下一个质押，而不必每次都返回类别页面。

设计 (Design)

The 1to1 Movement describes itself as a “branding organization” whose aim is to make environmentalism more appealing. Their main website has a modern and stylish design, and we wanted to carry that forward into our web application.

一对一运动将自己描述为一个“品牌组织”，其目的是使环保主义更具吸引力。他们的主要网站采用现代时尚的设计，我们希望将其延续到我们的Web应用程序中。

So we copied some of the main design aspects — full bleed images, low contrast thumbnails, specific fonts, turquoise highlight color — and then we asked a knowledgeable friend to give us design review to make sure we were using them correctly and consistently.

因此，我们复制了一些主要的设计方面-全出血图像，低对比度缩略图，特定字体，绿松石突出显示颜色-然后，我们请一位知识渊博的朋友给我们进行设计审查，以确保我们正确且一致地使用它们。

We wanted everyone to come away with a good impression, and part of that was checking that the website looks good on all screen sizes, all the way from mobile phones right up to high-resolution displays. Using a responsive UI framework like Bootstrap got us most of the way there, but we still needed check for glitches at various viewport widths. For example, we had to add { white-space: nowrap; } to the breadcrumbs section to prevent it from breaking up when the header line gets wrapped.

我们希望每个人都能留下良好的印象，其中一部分是检查网站在所有屏幕尺寸上(从手机到高分辨率显示器)的外观是否良好。使用类似Bootstrap的响应式UI框架可以帮助我们解决大部分问题，但是我们仍然需要检查各种视口宽度下的毛刺。例如，我们必须添加{white-space：nowrap; }到面包屑部分，以防止在标题行被换行时它破裂。

“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” —Martin Fowler

任何傻瓜都可以编写计算机可以理解的代码。好的程序员编写人类可以理解的代码。” -马丁·福勒

可维护性 (Maintainability)

Many of these fixes and improvements were for unusual browsers or versions, or for rarely encountered use cases. So one key thing we did was add meaningful comments to explain why each component was coded the way it was. We wanted future developers understand how everything worked, and make it easier for them to avoid breaking existing functionality when they add new features.

这些修复和改进中有许多是针对不寻常的浏览器或版本，或者是很少遇到的用例。因此，我们要做的一件事是添加有意义的注释，以解释为什么每个组件都按原样编码。我们希望未来的开发人员了解一切工作原理，并使其在添加新功能时更容易避免破坏现有功能。

A good set of unit tests would also help future developers, because they make it quick and easy to check for broken code. We used mocha and supertest to create automated tests for the back-end business logic in our API calls.

一套好的单元测试也将对将来的开发人员有所帮助，因为它们使检查损坏的代码变得容易快捷。我们使用mocha和supertest在API调用中为后端业务逻辑创建自动化测试。

下一步是什么？ (What’s Next?)

With all of this done, could we now walk away in good conscience? Not quite!

完成所有这些工作后，我们现在可以凭良心走开吗？不完全的！

Even though we’d made the application production-ready, we still needed to actually deploy it into production and properly hand it over to the client.

即使我们已经准备好将应用程序投入生产，我们仍然需要将其实际部署到生产环境中并正确地移交给客户。

But that’s a tale for another time…

但这是另一回事了……

Thanks for reading. I hope this article has helped you better understand all the “–ilities” involved in making an app production-ready.

谢谢阅读。我希望本文能帮助您更好地理解使应用程序投入生产所需的所有“麻烦”。