《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國際技術」致力於與你共享高質量的技術文章

歡迎關注咱們的公衆號、將文章分享給你的好友