網頁技術的概廓(1)

本周研讀主題是：網頁技術的概廓

我想的部落格撰文風格,是一一列出參考資料，但寫下閱讀的重點筆記。目的是當讀者(或是自己將來回顧)想省點時間，只想了解概念的時候，可以不用按連結去看全文。

前端

首先，先看一篇2014翻譯文章在某臉書上：為什麼我們找不到前端工程師？　其英文原文現今已經網頁失效，我依照標題找到另處：Why can't we find Front End Developers (2014)　簡體中文網站某人的知乎專欄有收錄


重點摘要：

• 2014時，前後端分工還是很新的領域。（現今已經再說『全端』）
• 古典網頁設計分為視覺設計和技術部分
• 一般人誤解：前端只是視覺設計。
• 其實，前端應該包含：視覺設計，支持視覺設計的技術選擇與執行，前後端的技術考量，行銷需求考量，使用者經驗考量(UI/UX)。
• 好的前端工程師不會只重視Web技術跟其使用的語言，反而是在不同的元件，系統跟概念上擁有豐富的經驗。

比較特別的幾組資料，我摘錄如下

前端工程師真正在做的事：

1.  建立一種設計師與工程師之間(溝通用)的圖像化語言。
2. 從視覺設計的角度來看，定義一組元件來呈現內容、品牌跟功能等...
3. 建立一套Web應用程式的基礎，包含規範、框架、需求、圖像化語言( Visual language )跟規格。
4. 定義Web應用程式支援的範疇，包含裝置、瀏覽器、螢幕與動畫。
5. 寫一份QA指南，以確保品牌忠誠度、程式碼品質，以及產品都有讓相關人士審視過。
6. 刻(Style)一個Web應用程式，要運用適當的空間、圖片、排版(typography)、標題、字型、icon、內外邊距(padding / margin)、格線系統(grid)等。
7. 刻(Style)一個Web應用程式，要能考慮到不同解析度的圖片，多種裝置為導向的樣版圖，還要兼顧設計指南。
8. 下Web應用程式的標籤時，要考慮到語義 ( semantic )，accessibility，SEO，schemas 和 microformats.
9. 連 API 抓資料時，要能採用友善，不耗電，了解目前用戶端與裝置狀況的方式 ( 譯者按：舉例來說：針對行動用戶的網路與硬體的限制，改變拉資料的方式來避免電池與頻寬的消耗 )。
10. 用戶端的程式開發，要能呈現順暢的動畫、過場效果、延遲載入(lazy loading)、互動效果及操作流程，其中大多數的時間都耗費在漸進增強與向下相容標準。 ( 譯者按：漸進增強：例如為了在設計與效能間取得平衡，某些前端的效果，例如漸層色，陰影等，只能有條件的支援舊版IE)
11. 確保與後端間的連線是安全的，考慮使用跨網域資源分享 Cross Origin Resource Sharing (CORS) 時，要避免XSS跟CSRF的狀況發生。
12. 不要忘了，不管多嚴格的結案期限，專案相關人士多靠北的要求，以及裝置的限制，永遠都要把使用者擺在第一。

不好的前端工程師會：

1. 濫用Javascript 函示庫，因為他們不懂怎麼使用原生 Javascript (例如：無處不用 jQuery )。
2. 濫用Javascript 外掛，用別人寫的程式碼但沒辦法看懂別人寫什麼 (例如：jQuery.doParallaxPls.js )。
3. 不看需求，設計文件，也沒做任何比較跟評估，就在Web應用程式裡用了 CSS 框架 ( Bootstrap, Foundation, Skeleton )，卻只用其中 5% 的 CSS / JS。
4. 用了CSS 框架，網站是響應式(RWD)的，或認為響應式設計只是一種你隨時可以可以加到Web應用程式裡的調味料而已。
5. 把「響應式網頁設計(Responsive Web Design」掛在嘴邊，卻不知道 Server 端有哪些解決方案可以用。
6. 不遵守規範，不使用前置處理器(Pre-processor)，命名規則，好的典範，並且同時過度的使用CSS selector，id，CSS裡面有某個神奇的數值, !important。
7. 忽視效能，memory leak (或是根本不知道這是什麼)，也不做程式碼的檢查跟評量。
8. 展示成品的時候沒做任何的評估，或者評估就是「這在我的電腦 / 瀏覽器 / 裝置上會動」
9. 過度的閉門造車(譯者按：就是重複打造輪子的意思吧)，忽略了已經發展30年的軟體工程。

好的前端工程師應該知道:

1. DNS解決方案，使用CDN，把資源檔的請求分散到多個不同域名上。
2. HTTP Headers (Expires, Cache-Control, If-Modified-Since )
3. 所有Steve Sounders說的規範，參考：高效能網頁 ( http://shop.oreilly.com/product/9780596529307.do )
4. 如何解決所有PageSpeed, YSlow, Chrome Dev Tools Audit, Chrome Dev Tools Timeline 上列出的問題。
5. 什麼時候要把事情交給Server，什麼時候要交給前端。
6. 利用快取(cache), 預先抓取(pre-fetching) 跟 延後載入(post-load) 技巧
7. 原生Javascript，知道何時要自己刻，何時要去找別人的程式碼來參考，同時還能夠評估出優點跟缺點再去做。
8. 新潮的MVC Javascript 函式庫知識跟用法( 例如：AngularJS, EmberJS, ReactJS )，圖形函式庫( 例如：D3, SnapSVG )，DOM 操作函式庫( 例如：JQuery, Zepto )，延遲載入(lazy loading) 或是 package管理函式庫( 例如：RequireJS, CommonJS ), 任務管理( 例如：Grunt, Gulp )，package管理 ( 例如：Bower, Componentjs ) 及 測試 ( 例如：Protractor, Selenium ).
9. 圖片格式，優點，何時使用哪一種，如何使用。圖片的優化技巧，載入的策略 ( Sprites, lazy loading 技巧, 快取刷新, PNG交錯)
10. CSS標準的知識與用法，現代規範與策略 ( 例如：BEM, SMACSS, OOCSS )
11. Javascript 在電腦科學的部分 ( memory management,single threaded nature, garbage collector algorithms, timeouts, scoping, hoisting, patterns )