如今“鄙視鏈”體現在生活的方方面面，各行各業都有默認一致的鄙視鏈。IT圈子因為開發語言多樣、工程師崗位種類多、技術框架多，也有自己圈子內的鄙視鏈。按照開發工程師的崗位形成的鄙視鏈是：
架構師>后端研發＞前端研發＞產品經理＞運營＞UI設計師
架構師認為：沒有我，哪有他們，架構是一切的根基
后端開發認為：前端只會“畫圖”
前端開發認為：產品經理“嘴上功夫”
產品經理認為：我的產品已經很厲害了，還需要用力運營嗎？
運營師認為：我拼盡全力拉來的用戶，都被測試沒發現的bug搞丟了，而且UI不夠美觀交互不夠人性。
在IT行業的鄙視鏈中，前端工程師是介於純后端開發和產品經理中間的，常受“夾板氣”。前端工程師首先得保證產出的網頁與產品經理的Mock-up一致，且需要接收后方的接口、數據、業務邏輯處理等。測試人員也會將前端界面的測試結果以Bug的形式反饋給前端開發工程師，前端開發工程師就得根據Bug排查和剖析原因，判斷是前端還是后端導致的。因此，前端工程師需要跟多方打交道，溝通能力、前端開發技術、業務需求理解、UI及UX設計一個都不能少。所以才會有了網絡上那么多前端工程師的發問：
那么，前端工程師到底有多難？
前端開發難度高，技能要求雜
我們簡單列舉一下前端開發需要掌握的技能：
-
HTML，CSS和JavaScript三種基礎語言
-
維護和優化網站的頁面及用戶界面、用戶體驗等
-
優化網站，使其在不同的終端設備和瀏覽器中的行為一致
-
管理和優化軟件工作流
-
優化頁面SEO
-
滿足新需求和提升處理流程的可用性
-
轉換UX/UI的設計稿為實際運轉的界面
-
提升web頁面加載速度
-
確保 Web的可訪問性
-
測試和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還提供在線編輯器，讓用戶可以在網頁上可視化地調整報表上的文字、樣式甚至數據的計算邏輯。有了在線編輯器，我們就能把報表設計功能開放給用戶，讓他們自己對報表進行微調（大部分場景下，用戶只是希望改幾個文字或者顏色），一勞永逸。
總結
前端開發，“道阻且長”。但只要我們善於搜索發現，也有很多資源、框架和控件能助力我們的開發之路。祝各位前端開發工程師好運！