不久前，前端框架 Vue 發(fā)布 3.2 版本，對單文件組件功能、網(wǎng)絡(luò)組件、服務(wù)端渲染以及性能等做出改進(jìn)。而當(dāng)時距離 Vue 3.0 Beta 版本的發(fā)布才不到一年半，Vue 的更新速度不可謂不快。
有此感想的不是一個人：在尤雨溪官宣 Vue 3.2 版本的微博下面，赫然出現(xiàn)了一排“學(xué)不動了”的感慨……
“學(xué)不動了”這句話相信能夠引起無數(shù)前端開發(fā)者的共鳴，快速更新迭代的技術(shù)常常讓人懷疑“學(xué)海無邊，何處是岸”。
然而，技術(shù)迭代并非前端開發(fā)中最大的難點(diǎn)。在目前流行的前后端分離開發(fā)模式下，前端作為軟件開發(fā)流程中的銜接者，既需要面對多變的產(chǎn)品需求、UI 設(shè)計，還要和后端進(jìn)行交互，以保證代碼質(zhì)量和開發(fā)效率。招聘公司 Hired 近期發(fā)布的《2021 年軟件工程師現(xiàn)狀報告》顯示，后端、全棧和前端工程師的需求仍然最高，占軟件工程師所有面試請求的一半以上，前端工程師人才短缺也從側(cè)面說明前端開發(fā)并不簡單。
那么，前端開發(fā)到底面臨哪些難題呢?我們與多位從業(yè)者進(jìn)行了交流，并整理了相關(guān)資料，總結(jié)出以下幾點(diǎn)。
前端開發(fā)，難在哪里?
1. 多方協(xié)作
在目前常見的前后端分離模式中，前端開發(fā)是非常重要的一環(huán)，它既銜接了 UI 設(shè)計與后端，同時也直接面對來自多樣化的需求。這就意味著大量的團(tuán)隊協(xié)作與溝通：在實(shí)際工作中，前端工程師需要與產(chǎn)品、UI 設(shè)計、后端、測試、運(yùn)營等各種角色進(jìn)行交流與協(xié)作，這要求前端工程師具備足夠的領(lǐng)域知識和強(qiáng)大的溝通能力。
2. 業(yè)務(wù)邏輯復(fù)雜多變
前端邏輯復(fù)雜度主要在于數(shù)據(jù) + UI + 交互的實(shí)現(xiàn)。產(chǎn)品開發(fā)往往面臨大量需求，甚至是頻繁變更的需求。當(dāng)需求發(fā)生變化時，前端可以說是首當(dāng)其沖，比如復(fù)雜的 UI/UX 設(shè)計、頻繁的 UI 更改、產(chǎn)品功能迭代等，有時甚至需要前端重新開發(fā)。如何評估需求，解決頻繁變化的需求，成為前端開發(fā)面臨的一大難點(diǎn)。
3. 瀏覽器兼容性
展示是前端的主要功能之一。然而不同瀏覽器對同一段代碼有不同的解析，進(jìn)而導(dǎo)致頁面渲染效果不統(tǒng)一，這就是瀏覽器兼容性問題。目前，市面上存在大量瀏覽器，比如我們熟悉的 Chrome、safari 等，且同一種瀏覽器存在多個版本。不同的瀏覽器使用的標(biāo)準(zhǔn)和實(shí)現(xiàn)方式不同，導(dǎo)致兼容性問題;而同一瀏覽器的不同版本存在功能上的差異，也會導(dǎo)致兼容性問題。
總體而言，瀏覽器兼容性問題可分為三類：HTML 兼容、CSS 兼容和 JavaScript 兼容。此外，移動端產(chǎn)品的盛行還帶來了 H5 移動端 iOS/Android 兼容性問題。前端開發(fā)人員需要從邊距、空隙到 event 兼容等大大小小的問題入手，解決瀏覽器兼容性問題。
4. 性能優(yōu)化
性能優(yōu)化是前端開發(fā)的重要課題之一，它不僅直接影響用戶體驗(yàn)，而且對于商業(yè)公司而言，網(wǎng)頁性能的優(yōu)劣更關(guān)乎流量變現(xiàn)效率的高低。例如 DoubleClick by Google 發(fā)現(xiàn)：
如果頁面加載時間超過 3 秒，53% 的用戶會選擇終止當(dāng)前操作并離開;
網(wǎng)站加載時間在 5 秒內(nèi)的發(fā)布商比 19 秒內(nèi)的廣告收入至少多出一倍。
因此，如何實(shí)現(xiàn)性能優(yōu)化是前端開發(fā)人員的重要研究方向。前端開發(fā)者可以通過減少 HTTP 請求、優(yōu)化網(wǎng)絡(luò)連接、優(yōu)化資源加載、減少重繪重排等方式實(shí)現(xiàn)性能優(yōu)化。
除此之外，前端開發(fā)人員還面臨著如何提高開發(fā)效率、UI/UX 復(fù)雜設(shè)計、前端框架集成等問題。
在了解廣義的前端開發(fā)所面臨的難題之后，我們將通過特定細(xì)分領(lǐng)域進(jìn)一步探究該問題，例如報表開發(fā)。
當(dāng)前端開發(fā)遇上報表
報表存在于幾乎每一個行業(yè)，其主要功能是幫助企業(yè)訪問、格式化數(shù)據(jù)，并把數(shù)據(jù)信息以可靠和安全的方式呈現(xiàn)給使用者。簡而言之：報表就是通過表格、圖表等形式來動態(tài)顯示數(shù)據(jù)，并為使用者提供瀏覽、打印、導(dǎo)出和分析功能，可以用公式表示為：“報表 = 多樣的布局 + 動態(tài)的數(shù)據(jù) + 豐富的輸出”。
(中國式復(fù)雜報表示例)
然而，報表的制作過程較為繁瑣，且需要大量單調(diào)、重復(fù)勞動，這就為報表開發(fā)帶來了需求。報表技術(shù)經(jīng)歷了從紙質(zhì)報表到電子化報表甚至自助式報表的轉(zhuǎn)變，隨著信息化進(jìn)程的加快，動態(tài)化、可視化、交互式成為報表開發(fā)的關(guān)鍵詞。
那么，當(dāng)前端遇到報表開發(fā)會擦出怎樣的火花，遇到哪些問題呢?
數(shù)據(jù)展示
數(shù)據(jù)展示是報表的主要功能之一。鑒于報表類型的多樣性，報表在數(shù)據(jù)展示方面也需要滿足多樣化的需求。
報表根據(jù)用途可分為財務(wù)報表、技術(shù)報表、銷售報表、統(tǒng)計報表;依據(jù)數(shù)據(jù)表達(dá)形式可分為列表式、摘要式、矩陣式、鉆取式;按照布局、數(shù)據(jù)源結(jié)構(gòu)、打印方式，還可分為清單報表、分欄報表、交叉報表、套打報表、交互式報表等。此外還有表頭復(fù)雜、多數(shù)據(jù)來源、計算復(fù)雜、結(jié)構(gòu)較為隨意的中國式復(fù)雜報表。因此，如何以恰當(dāng)?shù)男问竭M(jìn)行報表數(shù)據(jù)展示，以滿足數(shù)據(jù)分析需求，最大限度地挖掘出數(shù)據(jù)的價值，是報表開發(fā)需要解決的重要問題。
傳統(tǒng)的 Excel 報表具備一定的數(shù)據(jù)展示能力，但其操作較為復(fù)雜，能夠使用的圖表類型有限，且界面較為簡陋。用 Python 進(jìn)行數(shù)據(jù)展示也是一種可行途徑，但這要求用戶會寫代碼，門檻相對較高。那么，有沒有一種方式能夠簡潔高效地實(shí)現(xiàn)報表數(shù)據(jù)展示，幫助用戶以直觀、簡潔的方式理解業(yè)務(wù)數(shù)據(jù)呢?純前端報表控件 ActivereportsJS 或可一試。
該控件內(nèi)置豐富的圖表、迷你圖、圖標(biāo)集樣式，用于呈現(xiàn)并分析企業(yè)信息化系統(tǒng)中常見的數(shù)據(jù)可視化場景。此外，它支持將報表設(shè)計器及報表展示功能集成到項(xiàng)目中，使用 Viewer 組件在頁面中展示報表。
(ActiveReportsJS 將報表展示功能直接集成在頁面中)
可視化編輯器
實(shí)現(xiàn)優(yōu)秀的數(shù)據(jù)展示效果，離不開可視化編輯器。
此類編輯器需要具備可視化編輯功能，支持在畫布上拖拽元素;具備豐富的樣式配置;支持將常用業(yè)務(wù)抽離成組件，并支持配置組件參數(shù)。此外，可視化編輯器還需考慮兼容性問題，并能夠適應(yīng)不同的業(yè)務(wù)需求。
和前端開發(fā)一樣，報表開發(fā)也面臨著高頻多變的需求，如何高效地完成需求是開發(fā)可視化編輯器的優(yōu)先考慮點(diǎn)。對此，控件產(chǎn)品是一個不錯的選擇?？丶菍?shù)據(jù)和方法的封裝。這類工具封裝了大量基礎(chǔ)功能，且支持復(fù)用、可以與其他對象進(jìn)行交互，是一種減少重復(fù)工作、提升開發(fā)效率的利器，能夠?yàn)轫?xiàng)目開發(fā)和軟件交付提供便利。
在報表開發(fā)領(lǐng)域，純前端報表控件 ActivereportsJS 具備拖拽式跨平臺報表設(shè)計器和純前端報表設(shè)計器，能夠快速設(shè)計 Excel 報表、Word 文檔、移動端報表、數(shù)據(jù)過濾、數(shù)據(jù)鉆取、精準(zhǔn)套打等類型報表。值得注意的是，其純前端 Web 設(shè)計器可與前端應(yīng)用集成，開發(fā)人員可以使用其內(nèi)置 API 實(shí)現(xiàn)定制化的在線報表編輯器，為最終用戶提供自助式報表編輯的功能。
此外，就兼容和擴(kuò)展能力而言，這款報表控件產(chǎn)品支持 Node.js、Vue、Angular、React 等主流前端開發(fā)框架，用戶可直接在 Angular、React、Vue 等前端框架中調(diào)用其報表設(shè)計組件。
結(jié)語
近年來，前端迎來快速發(fā)展。JavaScript 連續(xù)九年蟬聯(lián) Stack Overflow 開發(fā)者調(diào)查報告最常用編程語言，Angular、React 和 Vue 三大框架形成各自的生態(tài)，前端開發(fā)也從基于瀏覽器的開發(fā)邁向了服務(wù)器端、移動端和小程序端等，各種前端技術(shù)不斷更新迭代。
然而不管技術(shù)趨勢如何變幻，在這個效率至上的時代，提高開發(fā)效率仍然是重中之重。從這個角度來看，純前端開發(fā)控件不失為一個好的選擇。
歡迎關(guān)注微信公眾號：“葡萄城社區(qū)”
（免責(zé)聲明：本網(wǎng)站內(nèi)容主要來自原創(chuàng)、合作伙伴供稿和第三方自媒體作者投稿，凡在本網(wǎng)站出現(xiàn)的信息，均僅供參考。本網(wǎng)站將盡力確保所提供信息的準(zhǔn)確性及可靠性，但不保證有關(guān)資料的準(zhǔn)確性及可靠性，讀者在使用前請進(jìn)一步核實(shí)，并對任何自主決定的行為負(fù)責(zé)。本網(wǎng)站對有關(guān)資料所引致的錯誤、不確或遺漏，概不負(fù)任何法律責(zé)任。
任何單位或個人認(rèn)為本網(wǎng)站中的網(wǎng)頁或鏈接內(nèi)容可能涉嫌侵犯其知識產(chǎn)權(quán)或存在不實(shí)內(nèi)容時，應(yīng)及時向本網(wǎng)站提出書面權(quán)利通知或不實(shí)情況說明，并提供身份證明、權(quán)屬證明及詳細(xì)侵權(quán)或不實(shí)情況證明。本網(wǎng)站在收到上述法律文件后，將會依法盡快聯(lián)系相關(guān)文章源頭核實(shí)，溝通刪除相關(guān)內(nèi)容或斷開相關(guān)鏈接。 ）
