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.

謝謝閱讀。我希望本文能幫助您更好地理解使應用程序投入生產所需的所有“麻煩”。