Web 前端開發面臨的挑戰主要有哪些？

01-12

阿當的一篇blog http://hi.baidu.com/cly84920/blog/item/8a37ff2e0946ca4e4ec226e0.html 引發我討論的興趣，想多找些人來聊聊。另外一個問題是：Web後端開發，主要的挑戰有哪些？
http://www.zhihu.com/question/19984900

前端和後端沒有可比性

前端的開發，如果沒有總體的設計思路，會成為一種碎片似地程序，一個效果一坨代碼，一個功能一灘腳本，一個需求片邏輯，我曾經遇到過，因為ue調整，把整個前端的代碼除了核心數據處理函數保留，其餘的全部修改的情況。

基本上前端的開發，處於dom操作，數據處理，數據交互三部分，如果合理的分配這三部分的功能，那麼前端的代碼就很容易擴展和調整。可惜現在優秀的前端開發者很少，因為前端門檻很低。

那麼接下來我回答挑戰所在：真正的前端開發的挑戰，還在於開發者的思路，兼容性，布局，css js都不是問題，問題在於如何合理的組織語言邏輯，如果正確抽象出需求中的模塊，在如何用代碼處理。清楚的用代碼表達出思路，清楚的寫好注釋，給後續維護者一個可閱讀的思路。

前端的改動量，是後端的數倍，前端沒有絕對，只有跟隨需求不停的修改。

第一大挑戰還是兼容性。雖然微軟已經決定將ie6安樂死，ie9/10看起來相當標準。向後兼容似乎輕鬆了，但向前兼容又開始越來越讓人頭疼了。打算搞一個web app，你會發現android上的webkit是多麼混亂。在桌面瀏覽器上總是有css hack可以擺平，但在mobile上只能考慮退化方案。從兼容瀏覽器（外加套殼的瀏覽器）到兼容設備，實際上兼容性變得更複雜了。

第二大挑戰是交互的複雜度。和目前UI/交互的要求相比瀏覽器引擎給我們接囗的確太低級了。於是今年前端技術的熱門話題是各種javascript, css的預處理器、各種mvc框架、和微框架的討論。

第三大挑戰是代碼可維護性。複雜度的提升直接影響代碼的維護性。JS/CSS/HTML代碼生命周期越來越長，也就越來越需要從代碼質量、架構和工具上保證它們的可維護性。代碼的歷史問題是永遠的痛點。

第四大挑戰是性能。

第五大挑戰是個人成長。

已經有三個同志邀請回答了，不得不先挖個坑放著，待我過幾天得空了再來把提綱擴充成正文。

提綱草稿如下：

我個人認為Web前端開發確實是一項具有獨特挑戰的工作。我將挑戰歸納為五個方面：

1. Web架構的獨特性

2. Web標準和相關技術的紛繁複雜和飛速發展

3. 瀏覽器兼容性

4. 交叉領域和多重目標

5. 組織架構和開發流程

正文待寫。

【2015年1月註：以上提綱寫於3年前（2012年1月）。此問題短期內不會再更新。請各位根據提綱自行腦補吧。如將來機緣巧合，或許會單獨撰文。】

1) css和dom提供的介面都太low level了，而BOM提供的控制項只有input、select、textarea這幾種最基本的，稍複雜一點的UI效果，都要前端自己利用css和dom去組合創造。看到一個需求，腦子裡第一步要想如何利用css、dom這些基本的零件組合成最終的這個效果，實現最終效果其實是一個「創造」的過程，比如說tabView,treeView,richEditor,colorPicker這種看起來常見的組件,其實在前端里都是沒有現成可用的，需要自己去實現。

2) 前端語言的膠水性需求太強。css、dom、js是三種不同的技術，這也是前端知識系統中要掌握的最重要的三個基本功。server端編程當然也會需要不同方向的知識，比如php、sql等，但server端編程大部分時間只用專註在某一個知識點上，只要必要時粘一下其它語言。但前端不同，前端的效果是通過css、dom和js三者配合起來最終呈現出來的，脫了任何一個技術都寸步難行，時刻要同時考慮多個方向的知識點。這麼說吧，server端編程像是一個單線程，即使有技術交差，也是串列的，而前端編程像是開了三個線程同時在跑，複雜度是成倍增長的。

3）css+dom+js的組合實在太強大了，同一個效果可以有多種完全不同的實現方式，每一種實現方式都會有不同的開發難度、擴展性、可維護性。解決方案太多，看到一個效果首先會先想到如何用dom和css里那些low level的介面實現他，這是一個「創造」的過程，這時腦子裡可能冒出好多種不同的實現方法，「創造」完了之後還要「比較」，權衡各種解決方案的優劣，糾結一陣之後，才能選出最適合的方案。當然，並非前端都是完美主義，一定要選一個最好的方式出來,而是因為前端是GUI編程，直接面向用戶，是最直接的產品呈現的部分，是門面了。正因為如此，所以前端也是最容易被反覆修改的部分。反覆「修改」有多可怕，是個程序員都懂的，如果可維護性不好，那簡直是惡夢。所以前端不得不重視可維護性，不重視可維護性直接等於自虐。

4）瀏覽器兼容性。瀏覽器各類非常多，ie、firefox、chrome、opera、還有眾多的ie加殼瀏覽器，搜狗傲遊360什麼的，再加上這些瀏覽器的移動終端版本。。。需要有了web標準，前端的知識大部分是通用於各個瀏覽器，但還是會有歷史遺留問題，不同的瀏覽器有不同的問題特別是市場佔有率最高的ie系，就ie自己市面上就有6、7、8、9這4個版本，4個版本之間各有各的問題。如果不積累點經驗，面對疑難雜症那是一頭霧水。

挑戰#1: 解決瀏覽器兼容性，各種瀏覽器，不同版本，不同操作系統。

挑戰#2: 優化性能，主要是DOM方面，需要很多技巧。

挑戰#3: 設計、交互感覺，經常為一個UI細節反覆折騰。

挑戰#4: 耐心，在國內互聯網公司前端工作非常雜，經常為別人擦屁股，卻得不到重視，堅持下來的都是牛人。

是人民日益增長的物質文化需要同落後的社會生產之間的矛盾

1. 溝通。前端工程師在項目中處於一個中間位置，對下要和後端工程師商定介面，對上要和產品、設計有良好的溝通。無論哪一個環節中出現的問題，都會在前端最先表現出來，良好的溝通可以保證儘早發現並解決這些問題。

2. 寫出可維護的代碼。前端三大語言html,css,javascript都是十分靈活的，寫出可以工作的代碼並不難，真正難的是保證代碼的可維護性。代碼可維護性涉及的問題包括，（html）標籤語義化，標籤結構化，(css) 規則體系化，組件化，（js）框架的選擇，模塊化，高內聚，低耦合。

3. 寫出高性能的Js代碼。包括字元串操作，dom操作，ajax操作。需要考慮性能問題的環節實在很多。

4. 兼容性。兼容性問題仍在拖慢前端工程師工作進度的主要問題，等ie6死掉，國產瀏覽器外殼質量做的好一些，情況可能會有所好轉。

5. 技術更新快。前端技術更新速度十分快，html5,css3，nodejs, commonJs，按需載入，等等都是最近幾年出來的。google又搞出一個Dart語言，鬼知道它會會真的把js取代了。

Internet Explorer

10年時我寫過篇BLOG有說起過這個水想前端（一）：鳥瞰。

在咱前端的頭上，有三座大山：設計、後台、兼容性。

一前一後都不如別人專業，而兼容性問題，看得出問題、卻看不出水平。不禁仰天長嘆：我勒個去！
從這點上來看，前端挺像秘書，做的是潤滑劑，但卻有點吃力不討好。

---

而從現在看來，前端的發展道路太多太多了，他是個發展太快的領域，所以現在呈現出一片混亂的局勢——這同時也是前端的機遇，亂世總能做更多事情的。

在我看來，這一片混亂的局勢才是挑戰的主要來源。

面臨的挑戰有：

來自多終端的挑戰：內容型網頁的響應式設計。單純IE與標準瀏覽器的角逐已經開始告一段落，開始進入更混亂的手機/平板/桌面三分天下的局勢。頁面重構童鞋們任重道遠。
功能與開發效率的平衡：前端開始在非大眾產品上嶄露頭角，尤其是後台管理系統、組織信息反饋系統等。這時我才不管什麼low Level API呢，君不見ExtJS, YUIjs等哥斯拉久盛不衰？這時前端童鞋面臨的往往是前後端甚至包括數據層面通吃的局面，這何嘗不是挑戰。（我一直覺得，這方面才是最適合後端轉前端的路線）
混合式APP的大潮：不管是桌面端還是移動端，都越來越多軟體/應用開始使用混合式的開發，從而在保證核心功能體驗的同時、提升總體的開發效率。（Hybrid App，反正我的理解是原生代碼與WebView混合）
作為可互動終端：使得信息傳達能更具體化、可視化、互動化。最典型的就是數據可視化方面的挑戰（當然我覺得不止於此）。d3js的團隊從protovis全力轉入到d3js中就可見一斑：d3js更加強調可視化呈現的動畫、以及即時反饋的交互能力。這在我看來也是WEB的未來之一。誰說WEB就必須是大眾使用的呢？一個統一的標準總比每次都訂做圖形引擎來得要好。

歡迎補充。

兼容性和溝通

兼容性是前端的宿命，沒辦法的，除非開發內部系統只用管一個瀏覽器。

溝通：前端需要負責好與PM，設計，後端的溝通。有時覺得和PM、設計溝通是很不愉快的，尤其是那些不懂技術還愛指手畫腳自以為是的PM和設計。和後端溝通明顯好很多，大家都是搞技術的，只要一解釋：[前端可以過濾，但後端過濾是必須的，因為前端驗證可以被繞過]，後端都是欣然接受。

前端的難度其實是創意 (還有前端不僅僅是指html 和 js)

我很贊同前端比後端更難的觀點, 中國的企業包括大企業很多時候意識不到這點. 未來的重點是人機交互,這也是為什麼微軟,蘋果,google都大力發展新的科技人機交互,這些都是前端的範疇.

作為同樣編寫代碼,我覺得語言差異不大, 目前前端基本上是標準混亂,雖然增加了學習複雜性但實際和後台差不多. 重點不在css, dom,js 和後端語言差異,

前端難在表現層和代碼的結構上.這點後端真的沒法比,

而且就中國來說,用的都是國外的語言,框架,開源的技術, 基本對計算機發展沒起到什麼作用,無論是前端和後端不存在後端技術比前端更難的說法.

前端的難度重點1 表現層, 現在前端還是2D, 慢慢以後3D發展, 對表現層要求更高, 很多演算法沒有3-4年根本沒法做. 其次人機交互的提升,滑鼠事件,觸摸事件 kinnect 等等以後的技術對表現交互要求很高. 實際上,要想做好必須要有一個設計師的出發點來審美,否則很難做好. 說白了就是創意.設計,實現. 再也不是後端那種工廠介面寫好完善的代碼就可以的了.

最重要一點就是前端必須找出最優解才可以,否則就很難用. 而後端只要代碼完備實現功能,不一定要最優解解決問題.

第二點是代碼結構, 就是說數據必須和表現層綁定在一起層顯出來才是數據,否則看不到數據後台傳過來對用戶來講沒什麼用. 由於數據是和前端綁定在一起,而後端不需要呈現只負責儲存和傳輸, 那麼對代碼的複雜度來講肯定低很多, 不同的呈現組件都需要不同的方法在綁定數據,當交互越來越複雜,結構也越來越複雜, 就像國外很多框架都是為了解決代碼結構組織. 但是做到實際的自己項目只能自己去解決這些問題. 不像後端,資料庫都是自己用現成的,後端做資料庫也很難,但目前國內好像沒有自己做過什麼資料庫的,都是直接拿來mysql就用. 還有一點就是前端技術目前成熟度不高,比較混亂,做出好東西很不容易.

就是說想要做出前端的好東西, 沒有創意,設計技術再厲害是沒用的, 前端是需要天分的. 這也是為什麼即使想騰訊,百度,淘寶,做出來的東西也和國外有很大差距.

我做前端半年不到，最大的感觸是，前端不僅僅是頁面布局、兼容的事情。

更多的要和後端結合，進行數據、事件的操作。好的前端要通吃後端了。

更不消說移動響應式布局，這也只是滄海一粟。

json確實強大，配上js，後端的很多東西都可以涉獵了。

最怕前端沒品位。

女朋友。

Web 前端的開發主要問題在於這是一個變化過快的領域，剛有沉澱就可能已經更新換代。不過自從 Yahoo 提出了前端工程（Front-end Engineering）的概念之後，可以說已經打開了一個新的局面，通過把軟體工程中一些成熟的思想引入 Web 前端領域，一些重要的概念開始得到廣泛的關注和實踐，比如頁面的架構化設計、定量分析、瀏覽器兼容矩陣等。我看到目前最大的挑戰還是在 Web 前端的根基，即瀏覽器標準上。

Web 前端要基於瀏覽器才能呈現給最終用戶，交互也嚴重依賴於瀏覽器提供的基礎構件，目前的瀏覽器局面，基本上不是慢慢歸一，而是愈見複雜，這對開發者提出的要求就過高了，當然跨瀏覽器的代碼框架發展也很好很快，不過還是一個即有效又不失靈活性的基本標準才是治本之道。

補充一條。客戶端 JavaScript 缺少一個標準的模塊化系統

有些底層庫（如 jQuery, underscore）會把所有模塊打包成一個文件，造成代碼冗餘

有些大型庫（如 ExtJS, Closure）都有自己的模塊系統，且代碼不能通用

重複造的輪子在前端開發圈，比後端多很多

舉個例子，幾乎每一個流行框架都有一套自己的 DOM wrapper 。FML。

從服務端轉前端，表示前後各有各的難處，主要還是看你自己的意願吧

我來說一點：移動化

說到底還是人機交互的平台從PC遷徙到手持設備後，所需要面臨的變化

原先在PC平台的各種經驗，到達手持設備上未必有用，且可能本身就變成錯誤了！