Vue 更新到 3.2 版本了，你還學(xué)得動(dòng)嗎？

不久前，前端框架 Vue 發(fā)布 3.2 版本，對(duì)單文件組件功能、網(wǎng)絡(luò)組件、服務(wù)端渲染以及性能等做出改進(jìn)。而當(dāng)時(shí)距離 Vue 3.0 Beta 版本的發(fā)布才不到一年半，Vue 的更新速度不可謂不快。

 

有此感想的不是一個(gè)人：在尤雨溪官宣 Vue 3.2 版本的微博下面，赫然出現(xiàn)了一排“學(xué)不動(dòng)了”的感慨……

 

 

“學(xué)不動(dòng)了”這句話相信能夠引起無(wú)數(shù)前端開(kāi)發(fā)者的共鳴，快速更新迭代的技術(shù)常常讓人懷疑“學(xué)海無(wú)邊，何處是岸”。

 

然而，技術(shù)迭代并非前端開(kāi)發(fā)中最大的難點(diǎn)。在目前流行的前后端分離開(kāi)發(fā)模式下，前端作為軟件開(kāi)發(fā)流程中的銜接者，既需要面對(duì)多變的產(chǎn)品需求、UI 設(shè)計(jì)，還要和后端進(jìn)行交互，以保證代碼質(zhì)量和開(kāi)發(fā)效率。招聘公司 Hired 近期發(fā)布的《2021 年軟件工程師現(xiàn)狀報(bào)告》顯示，后端、全棧和前端工程師的需求仍然最高，占軟件工程師所有面試請(qǐng)求的一半以上，前端工程師人才短缺也從側(cè)面說(shuō)明前端開(kāi)發(fā)并不簡(jiǎn)單。

 

那么，前端開(kāi)發(fā)到底面臨哪些難題呢？我們與多位從業(yè)者進(jìn)行了交流，并整理了相關(guān)資料，總結(jié)出以下幾點(diǎn)。

 

前端開(kāi)發(fā)，難在哪里？

1. 多方協(xié)作

在目前常見(jiàn)的前后端分離模式中，前端開(kāi)發(fā)是非常重要的一環(huán)，它既銜接了 UI 設(shè)計(jì)與后端，同時(shí)也直接面對(duì)來(lái)自多樣化的需求。這就意味著大量的團(tuán)隊(duì)協(xié)作與溝通：在實(shí)際工作中，前端工程師需要與產(chǎn)品、UI 設(shè)計(jì)、后端、測(cè)試、運(yùn)營(yíng)等各種角色進(jìn)行交流與協(xié)作，這要求前端工程師具備足夠的領(lǐng)域知識(shí)和強(qiáng)大的溝通能力。

2. 業(yè)務(wù)邏輯復(fù)雜多變

前端邏輯復(fù)雜度主要在于數(shù)據(jù) + UI + 交互的實(shí)現(xiàn)。產(chǎn)品開(kāi)發(fā)往往面臨大量需求，甚至是頻繁變更的需求。當(dāng)需求發(fā)生變化時(shí)，前端可以說(shuō)是首當(dāng)其沖，比如復(fù)雜的 UI/UX 設(shè)計(jì)、頻繁的 UI 更改、產(chǎn)品功能迭代等，有時(shí)甚至需要前端重新開(kāi)發(fā)。如何評(píng)估需求，解決頻繁變化的需求，成為前端開(kāi)發(fā)面臨的一大難點(diǎn)。

3. 瀏覽器兼容性

展示是前端的主要功能之一。然而不同瀏覽器對(duì)同一段代碼有不同的解析，進(jìn)而導(dǎo)致頁(yè)面渲染效果不統(tǒng)一，這就是瀏覽器兼容性問(wèn)題。目前，市面上存在大量瀏覽器，比如我們熟悉的 Chrome、safari 等，且同一種瀏覽器存在多個(gè)版本。不同的瀏覽器使用的標(biāo)準(zhǔn)和實(shí)現(xiàn)方式不同，導(dǎo)致兼容性問(wèn)題；而同一瀏覽器的不同版本存在功能上的差異，也會(huì)導(dǎo)致兼容性問(wèn)題。

 

總體而言，瀏覽器兼容性問(wèn)題可分為三類：HTML 兼容、CSS 兼容和 JavaScript 兼容。此外，移動(dòng)端產(chǎn)品的盛行還帶來(lái)了 H5 移動(dòng)端 iOS/Android 兼容性問(wèn)題。前端開(kāi)發(fā)人員需要從邊距、空隙到 event 兼容等大大小小的問(wèn)題入手，解決瀏覽器兼容性問(wèn)題。

4. 性能優(yōu)化

性能優(yōu)化是前端開(kāi)發(fā)的重要課題之一，它不僅直接影響用戶體驗(yàn)，而且對(duì)于商業(yè)公司而言，網(wǎng)頁(yè)性能的優(yōu)劣更關(guān)乎流量變現(xiàn)效率的高低。例如 DoubleClick by Google 發(fā)現(xiàn)：

 

• 如果頁(yè)面加載時(shí)間超過(guò) 3 秒，53% 的用戶會(huì)選擇終止當(dāng)前操作并離開(kāi)；

• 網(wǎng)站加載時(shí)間在 5 秒內(nèi)的發(fā)布商比 19 秒內(nèi)的廣告收入至少多出一倍。

因此，如何實(shí)現(xiàn)性能優(yōu)化是前端開(kāi)發(fā)人員的重要研究方向。前端開(kāi)發(fā)者可以通過(guò)減少 HTTP 請(qǐng)求、優(yōu)化網(wǎng)絡(luò)連接、優(yōu)化資源加載、減少重繪重排等方式實(shí)現(xiàn)性能優(yōu)化。

 

除此之外，前端開(kāi)發(fā)人員還面臨著如何提高開(kāi)發(fā)效率、UI/UX 復(fù)雜設(shè)計(jì)、前端框架集成等問(wèn)題。

 

在了解廣義的前端開(kāi)發(fā)所面臨的難題之后，我們將通過(guò)特定細(xì)分領(lǐng)域進(jìn)一步探究該問(wèn)題，例如報(bào)表開(kāi)發(fā)。

 

當(dāng)前端開(kāi)發(fā)遇上報(bào)表

報(bào)表存在于幾乎每一個(gè)行業(yè)，其主要功能是幫助企業(yè)訪問(wèn)、格式化數(shù)據(jù)，并把數(shù)據(jù)信息以可靠和安全的方式呈現(xiàn)給使用者。簡(jiǎn)而言之：報(bào)表就是通過(guò)表格、圖表等形式來(lái)動(dòng)態(tài)顯示數(shù)據(jù)，并為使用者提供瀏覽、打印、導(dǎo)出和分析功能，可以用公式表示為：“報(bào)表 = 多樣的布局 + 動(dòng)態(tài)的數(shù)據(jù) + 豐富的輸出”。

 

中國(guó)式復(fù)雜報(bào)表示例

 

然而，報(bào)表的制作過(guò)程較為繁瑣，且需要大量單調(diào)、重復(fù)勞動(dòng)，這就為報(bào)表開(kāi)發(fā)帶來(lái)了需求。報(bào)表技術(shù)經(jīng)歷了從紙質(zhì)報(bào)表到電子化報(bào)表甚至自助式報(bào)表的轉(zhuǎn)變，隨著信息化進(jìn)程的加快，動(dòng)態(tài)化、可視化、交互式成為報(bào)表開(kāi)發(fā)的關(guān)鍵詞。

 

那么，當(dāng)前端遇到報(bào)表開(kāi)發(fā)會(huì)擦出怎樣的火花，遇到哪些問(wèn)題呢？

 

數(shù)據(jù)展示

數(shù)據(jù)展示是報(bào)表的主要功能之一。鑒于報(bào)表類型的多樣性，報(bào)表在數(shù)據(jù)展示方面也需要滿足多樣化的需求。

 

報(bào)表根據(jù)用途可分為財(cái)務(wù)報(bào)表、技術(shù)報(bào)表、銷售報(bào)表、統(tǒng)計(jì)報(bào)表；依據(jù)數(shù)據(jù)表達(dá)形式可分為列表式、摘要式、矩陣式、鉆取式；按照布局、數(shù)據(jù)源結(jié)構(gòu)、打印方式，還可分為清單報(bào)表、分欄報(bào)表、交叉報(bào)表、套打報(bào)表、交互式報(bào)表等。此外還有表頭復(fù)雜、多數(shù)據(jù)來(lái)源、計(jì)算復(fù)雜、結(jié)構(gòu)較為隨意的中國(guó)式復(fù)雜報(bào)表。因此，如何以恰當(dāng)?shù)男问竭M(jìn)行報(bào)表數(shù)據(jù)展示，以滿足數(shù)據(jù)分析需求，最大限度地挖掘出數(shù)據(jù)的價(jià)值，是報(bào)表開(kāi)發(fā)需要解決的重要問(wèn)題。

 

傳統(tǒng)的 Excel 報(bào)表具備一定的數(shù)據(jù)展示能力，但其操作較為復(fù)雜，能夠使用的圖表類型有限，且界面較為簡(jiǎn)陋。用 Python 進(jìn)行數(shù)據(jù)展示也是一種可行途徑，但這要求用戶會(huì)寫代碼，門檻相對(duì)較高。那么，有沒(méi)有一種方式能夠簡(jiǎn)潔高效地實(shí)現(xiàn)報(bào)表數(shù)據(jù)展示，幫助用戶以直觀、簡(jiǎn)潔的方式理解業(yè)務(wù)數(shù)據(jù)呢？純前端報(bào)表控件 ActivereportsJS 或可一試。

 

該控件內(nèi)置豐富的圖表、迷你圖、圖標(biāo)集樣式，用于呈現(xiàn)并分析企業(yè)信息化系統(tǒng)中常見(jiàn)的數(shù)據(jù)可視化場(chǎng)景。此外，它支持將報(bào)表設(shè)計(jì)器及報(bào)表展示功能集成到項(xiàng)目中，使用 Viewer 組件在頁(yè)面中展示報(bào)表。

 

ActivereportsJS 將報(bào)表展示功能直接集成在頁(yè)面中

 

可視化編輯器

實(shí)現(xiàn)優(yōu)秀的數(shù)據(jù)展示效果，離不開(kāi)可視化編輯器。

 

此類編輯器需要具備可視化編輯功能，支持在畫布上拖拽元素；具備豐富的樣式配置；支持將常用業(yè)務(wù)抽離成組件，并支持配置組件參數(shù)。此外，可視化編輯器還需考慮兼容性問(wèn)題，并能夠適應(yīng)不同的業(yè)務(wù)需求。

 

和前端開(kāi)發(fā)一樣，報(bào)表開(kāi)發(fā)也面臨著高頻多變的需求，如何高效地完成需求是開(kāi)發(fā)可視化編輯器的優(yōu)先考慮點(diǎn)。對(duì)此，控件產(chǎn)品是一個(gè)不錯(cuò)的選擇?？丶菍?duì)數(shù)據(jù)和方法的封裝。這類工具封裝了大量基礎(chǔ)功能，且支持復(fù)用、可以與其他對(duì)象進(jìn)行交互，是一種減少重復(fù)工作、提升開(kāi)發(fā)效率的利器，能夠?yàn)轫?xiàng)目開(kāi)發(fā)和軟件交付提供便利。

 

在報(bào)表開(kāi)發(fā)領(lǐng)域，純前端報(bào)表控件 ActivereportsJS 具備拖拽式跨平臺(tái)報(bào)表設(shè)計(jì)器和純前端報(bào)表設(shè)計(jì)器，能夠快速設(shè)計(jì) Excel 報(bào)表、Word 文檔、移動(dòng)端報(bào)表、數(shù)據(jù)過(guò)濾、數(shù)據(jù)鉆取、精準(zhǔn)套打等類型報(bào)表。值得注意的是，其純前端 Web 設(shè)計(jì)器可與前端應(yīng)用集成，開(kāi)發(fā)人員可以使用其內(nèi)置 API 實(shí)現(xiàn)定制化的在線報(bào)表編輯器，為最終用戶提供自助式報(bào)表編輯的功能。

 

此外，就兼容和擴(kuò)展能力而言，這款報(bào)表控件產(chǎn)品支持 Node.js、Vue、Angular、React 等主流前端開(kāi)發(fā)框架，用戶可直接在 Angular、React、Vue 等前端框架中調(diào)用其報(bào)表設(shè)計(jì)組件。

結(jié)語(yǔ)

近年來(lái)，前端迎來(lái)快速發(fā)展。JavaScript 連續(xù)九年蟬聯(lián) Stack Overflow 開(kāi)發(fā)者調(diào)查報(bào)告最常用編程語(yǔ)言，Angular、React 和 Vue 三大框架形成各自的生態(tài)，前端開(kāi)發(fā)也從基于瀏覽器的開(kāi)發(fā)邁向了服務(wù)器端、移動(dòng)端和小程序端等，各種前端技術(shù)不斷更新迭代。

 

然而不管技術(shù)趨勢(shì)如何變幻，在這個(gè)效率至上的時(shí)代，提高開(kāi)發(fā)效率仍然是重中之重。從這個(gè)角度來(lái)看，純前端開(kāi)發(fā)控件不失為一個(gè)好的選擇。

- END -