如今“鄙視鏈”體現在生活的方方面面，各行各業都有預設一致的鄙視鏈。IT圈子因為開發語言多樣、工程師崗位種類多、技術框架多，也有自己圈子內的鄙視鏈。按照開發工程師的崗位形成的鄙視鏈是：

架構師>後端研發＞前端研發＞產品經理＞運營＞UI設計師

架構師認為：沒有我，哪有他們，架構是一切的根基

後端開發認為：前端只會“畫圖”

前端開發認為：產品經理“嘴上功夫”

產品經理認為：我的產品已經很厲害了，還需要用力運營嗎？

運營師認為：我拼盡全力拉來的使用者，都被測試沒發現的bug搞丟了，而且UI不夠美觀互動不夠人性。

在IT行業的鄙視鏈中，前端工程師是介於純後端開發和產品經理中間的，常受“夾板氣”。前端工程師首先得保證產出的網頁與產品經理的Mock-up一致，且需要接收後方的介面、資料、業務邏輯處理等。測試人員也會將前端介面的測試結果以Bug的形式反饋給前端開發工程師，前端開發工程師就得根據Bug排查和剖析原因，判斷是前端還是後端導致的。因此，前端工程師需要跟多方打交道，溝通能力、前端開發技術、業務需求理解、UI及UX設計一個都不能少。所以才會有了網路上那麼多前端工程師的發問：

那麼，前端工程師到底有多難？

前端開發難度高，技能要求雜

我們簡單列舉一下前端開發需要掌握的技能：

  1. HTML，CSS和JavaScript三種基礎語言

  2. 維護和優化網站的頁面及使用者介面、使用者體驗等

  3. 優化網站，使其在不同的終端裝置和瀏覽器中的行為一致

  4. 管理和優化軟體工作流

  5. 優化頁面SEO

  6. 滿足新需求和提升處理流程的可用性

  7. 轉換UX/UI的設計稿為實際運轉的介面

  8. 提升web頁面載入速度

  9. 確保 Web的可訪問性

  10. 測試和Debug

入門似乎門檻很低，只需要掌握HTML，CSS和JavaScript這三種基礎語言即可。程式碼簡單，易上手，熟能生巧，只要勤於練習，學起來很快。似乎前端也沒有那麼難？那是因為這屬於入門，一入前端深似海。

當我們開始進行專案實戰時，需要的技能就如下圖了。滿螢幕的詞雲，不知道如何下手才好。更大的麻煩來自“移動網際網路”。移動裝置的演化速度快，為了適應更快速地迭代交付專案，前端的流行技術和框架也得快速迭代更新。對前端工程師而言，再也不是隻精通某一門語言就可以應付的了。

我們再重新梳理下，前端需要的技能：

這些還僅僅是技術層面，前端工程師的工作是將業務需求、互動設計、資料等糅合在一起開發出來展現給使用者，涉及與UI設計師、互動設計師、產品經理、後端工程師，測試等不同的角色溝通協作。跟人打交道比電腦更難，這需要良好的溝通技能和更多種領域的知識。

由此可見，由於前端工程師需要掌握的技能多而雜，不可避免地成為專案開發中至關重要的角色。

根據在前端行業混了這麼多年的經驗，如果我們聚焦在開發技術層面，確實有一些強有力的工具，能讓前端開發的日子好過一些。

跨平臺框架簡化UI/UX實現

持續整合、框架、工具、腳手架這些東西關注的都是開發體驗和開發效率，而UI/UX關注的是前端自身的價值。剛才我提到，UI/UX（使用者體驗設計和使用者介面設計）這兩個要素對於產品至關重要，並且必須緊密合作。然而，前端工程師大概最痛苦的就是設計師的“視覺糖”。“視覺糖”確實更美觀，動畫酷炫，但真實反饋資料的價值和意義卻不多。為了實現“視覺糖”的全部效果，會耗費掉前端工程師的大量精力。而且，頁面效果的載入也需要引入大量的設計素材，從而導致整個前端頁面的效能低下，優化起來更是撓頭。

所以，前端開發工程師在進行UI/UX開發前，應該儘可能多地參與到設計稿的Review會議，及早地建議設計師慎用無意義的視覺糖設計，多從實現業務邏輯的角度出發，儘量簡化設計。

在開發階段，我們可以優先選擇跨平臺的框架，自帶美觀的樣式，還能抹平不同平臺的差異，大幅降低編碼工作量。更重要的是，作為前端工程師，咱們還可以把這些框架的樣式和效果推薦給UI與UX設計師，以期達成“打哪指哪”的效果。這裡有一些常見的框架，提供給前端開發工程師和設計師們。

Uni-APP

這是一個使用 Vue.js開發所有前端應用的框架，開發者編寫一套程式碼，可釋出到iOS、Android、Web（響應式）、以及各種應用（微信/支付寶/百度/頭條/QQ/快手/釘釘/淘寶）、快應用等多個平臺。

ElementUI

官網地址:http://element-cn.eleme.io/#/zh-CN

Github: https://github.com/ElementUI/element-starter

ElementUI這款由餓了麼前端開源的 UI 框架，一經面世，就俘獲大量程式設計師的芳心，在github 上高達 29.8k 的 star 早已說明一切。它用於開發 PC 端的頁面還是綽綽有餘的。

Ant Design of Vue

它是 Ant Design 的 Vue 實現，開發和服務於企業級後臺產品。

官網地址：https://www.antdv.com/docs/vue/introduce-cn/

特性：

  • 提煉自企業級中後臺產品的互動語言和視覺風格。

  • 開箱即用的高質量 Vue 元件。

  • 共享Ant Design of React設計工具體系。

Flutter

官網地址:https://flutterchina.club/

Github: https://github.com/flutter/flutter

Flutter 是谷歌的移動 UI 框架，可以快速在 iOS 和 Android上構建高質量的原生使用者介面，是一個很好的跨端解決方案。

Quasar Framework

官方文件：http://www.quasarchs.com/

GitHub 地址：https://github.quasar.dev

Quasar-Framework 是一款基於 vue.js開發的開源的前端框架，支援只寫一次程式碼即可釋出到多個平臺，支援 website, PWA,Mobile App 和 Electron App 。

前端控制元件降低報表開發工作量

不管是哪個行業系統，主體都是資料的錄入和展示。錄入部分相對簡單一些，展示環節通常充滿了挑戰。

相比於有固定模式的資料錄入環節，資料展示則是完全個性化的。尤其是前端報表，資料量大、圖表多、樣式要求高，耗費了前端工程師大量的時間。報表中簡單的當屬二維表的資料展示形式，包含資料透視表、表格類報表展示等。對前端開發來說，我們需要結合資料結構，使用合適的演算法及標籤將佈局展示出來，整體過程中通常會涉及到資料計算、分頁控制、單元格合併等，細節的問題還有交替行顏色設定、主題設定、邊線設定，及自動增加的彙總行列展示等，實現這些目標的演算法可能會非常複雜，而且還經常遇到效能瓶頸。

所有以固定格式呈現資料的，都可以歸類為報表。除了傳統的二維表格類外，前端工程師需要面對的報表還有Word報告類，涉及到左標題右資料、圖文混排、動態表格展示、頁首頁尾等技術細節；也包含由大量圖表構成的視覺化儀表板，如數十種型別的圖表樣式、資料預警、嵌入表格的迷你圖等。

更可怕的是，在國內的報表專案中，前端工程師還需要適配多終端多瀏覽器型別。我想前端工程師在這裡的心態是崩潰的，同樣一種佈局在Chrome裡面就表現很良好，但是IE中面目全非。

既然前端開發的工作量和難點集中在報表領域，自然有更多人為這一細分賽道提供各種利器，下面是一些開發前端報表時常用的工具，讓前端開發事半功倍。

Apache Echart.js圖表控制元件

ECharts是一個使用 JavaScript 實現的開源視覺化庫，底層依賴向量圖形庫ZRender，效能和樣式都OK。Echarts是一個應用非常廣泛的圖表庫，可以滿足大部分場景的需求，而且開源免費。

阿里AntV G2圖表控制元件

阿里AntV是支付寶團隊推出的資料視覺化解決方案，其中G2是一套面向常規統計圖表的控制元件，一條語句即可使用Canvas 或 SVG構建出各種各樣的可互動的統計圖表。當前端工程師需要做圖表時，如果echarts不合適，可以看看G2。

葡萄城ActiveReportsJS報表控制元件

如果你面對的需求不是簡單的圖表，而是由表格和圖表構成的複雜報表，還是去看看商業化的報表控制元件吧。ActiveReportsJS是大名鼎鼎的ActiveReports.NET的純前端版本，支援Excel報表、 Word文件、移動端報表、圖表、資料過濾、資料鑽取、精準套打，純HTML5實現，相容Angular、Vue、React等框架。

值得一提的是，ActiveReportsJS還提供線上編輯器，讓使用者可以在網頁上視覺化地調整報表上的文字、樣式甚至資料的計算邏輯。有了線上編輯器，我們就能把報表設計功能開放給使用者，讓他們自己對報表進行微調（大部分場景下，使用者只是希望改幾個文字或者顏色），一勞永逸。

總結

前端開發，“道阻且長”。但只要我們善於搜尋發現，也有很多資源、框架和控制元件能助力我們的開發之路。祝各位前端開發工程師好運！