2021年度總結 | 葡萄城軟件開發技術回顧(上)

2021年度總結 | 葡萄城軟件開發技術回顧(上)

隨着冬奧會各項精彩比賽的進行,2022年的序幕逐漸被拉開。

這一年,雲原生領域風起雲湧,容器大規模應用,k8s可稱爲炙手可熱的話題;這一年,大數據技術體系1.0基本成型,跨過技術復興與狂潮期,數據平臺的商業價值也在逐漸顯現,帶來大量投資創業機會;這一年,Vue、React、Angular三駕馬車仍舊在大前端領跑,整體技術逐漸趨於穩定,未來可期;這一年,元宇宙風頭正旺,.net 6的上線也爲大家津津樂道。

而這一年對葡萄城而言,也同樣是從未停止開發"賦能開發者"腳步,不斷探索的一年。

2021,我們依舊秉持着"賦能開發者"使命,匠心、耐心做技術,真心、恆心來分享。

接下來讓葡萄帶着你一起來看看——葡萄城的2021。

你的"前端表格"請注意查收

你可能沒聽過SpreadJS,,但是你一定聽過在線協同辦公。

作爲純前端的類Excel表格控件,在線協同一直是我們的強項。在過去一年的分享中,我們爲大家分享了葡萄城在純前端電子表格中的許多技術內幕,包括雙緩存畫布和油畫分層畫布繪製公式引擎的底層邏輯系列、利用稀疏矩陣進行時空置換提升性能問題,以及金融專業數據IRR/NPV的計算處理,大家有興趣可以自行查看。

現在我們有一些新傢伙,向大家介紹。

集算表(TableSheet)

爲了讓前端的表格不但具備類 Excel 的公式計算能力,同時還擁有了傳統表格控件的高性能,我們希望將傳統的高性能結構化表格 (Grid) 與公式計算引擎 (CalcEngine)結合在一起。

爲了實現這樣的設計,我們首次提出了數據管理容器 (DataManager) 的概念,將原有在後端才具備的關係數據引擎,完全在前端實現,從而實現了在大量數據(百萬行)的情況,秒級的加載、排序、篩選,而這所有的操作,都是完全在前端瀏覽器中,通過JavaScript 代碼實現。

  • 數據管理容器 (DataManager)不僅承擔了數據存儲與索引的功能,同時還實現了多數據表關係、視圖、CRUD等功能。
  • 集算表(TableSheet)則負責將數據管理容器 (DataManager)中整理好的數據、視圖、關係通過SpreadJS 本身的"Canvas畫布"呈現在網頁中。

通過上述功能的結合,在面對大數據量的分析、合併、處理場景上,可以爲用戶提供更穩健的支持,減少傳統表格系統對後臺的過度依賴,可以將更多的數據操作在前端完成,從而釋放寶貴的後端和帶寬資源。

其他亮點

在前端計算引擎性能與兼容問題上,我們也進行了一些優化:

  • 兼容性方面:支持了微軟最新的 XLOOKUP/XMATCH系列函數,同時在新版本中加入了對剛剛發佈的 LAMBDA 函數的兼容

  • 在功能方面:內置450種以上的標準 Excel函數支持,同時支持自定義函數、異步函數擴展能力

  • 在性能方面:秒級完成上萬公式的解析及計算

同時,隨着流行前端框架的不斷更新,現在也實現了對 Vue3、Angular 13的支持。

除了前端性能的優化,後端的GcExcel現可以支持.NET 6 平臺;爲了讓打印更加方便,集成了打印驅動,直連物理打印機,完成內容直接輸出打印。

學道須當猛烈,始終確守初心,對於表格領域的技術探索,我們從未停止,是匠心,更是創新。

讓複雜報表不再複雜的報表

複雜報表的複雜,做過報表的同學都瞭解。2021年,報表領域的深耕我們同樣不曾停止。

.Net平臺

首先必須要提的就是Blazor Viewer。

Blazor是基於.NET平臺及ASP.NET Core技術構建交互式客戶端Web UI的框架。開發者可以使用 C# 而不是 JavaScript 構建交互式 Web UI。如此可以方便開發者使用C#編寫客戶端和服務器代碼。

爲了更加方便進行報表查看,現在推出了新的報表查看器組件——Blazor Viewer。它爲應用程序提供了報表渲染,展示,交互,打印導出的全功能,方便我們更加高效的地構建 Web應用。

主要功能包括:

  • 用.NET代碼在服務器端渲染用戶界面

  • 在服務器端用.NET代碼處理用戶交互

  • 爲開發人員提供C# API,用於打開報表、處理事件和定製報表展示界面

同時隨着2021年.Net 6的升級和VS2022的推出,也一併升級兼容。

JavaScript 平臺

在過去的版本中,ARJS採用的npm包使用的是CommonJS,AMD等模塊規範。但是這些規範在使用過程中,會出現一些問題。如CommonsJS比較適合服務端,在服務器讀取模塊都是在本地磁盤,加載速度很快;但是如果在客戶端,加載模塊的時候有可能出現"假死"狀況。

爲了解決這個問題,我們將報表控件的npm包全包採用ES6本身支持的模塊化語法。

npm 包公開了原生 ES 模塊,利用 ES 模塊可以爲我們應用程序的開發和構建提供卓越的性能。

現在只要瀏覽器支持ES6的模塊化,項目工程就不用再費時間和精力去進行編譯和打包,項目工程體積更小,編譯的性能會更快。

同時框架支持更爲豐富, Vite.js,Vue 3, Angular 13等前端框架現在都完全支持。

除了以上兩點,爲了保證報表性能適應更大體量的數據報表生成,我們一直致力於優化報表引擎以提升報表性能,基於平臺和開發語言的限制,精細化的優化各個報表生成的關鍵節點,此次採用變量式數據結構存儲,使得整個報表的性能提升非常顯著。

對於性能提升,很難將JavaScript中的 "1+1"運算優化,但可以優化內存分配,並將比較操作的數量減少到2個,因此我們採用形如以下的變量存儲方法:

{ Type: 'float' | 'string' | 'boolean' | 'int16' | 'int32' … Value: object }

變量用於結果展示時候,在進行數據引擎交互計算,因此執行如"1+1"表達式時只需要執行三次內存分配和4次轉換,而不計算條件運算符的數量如switch和if,從而減少時間和內存的消耗。

在實際測試中,我們也發現這種方法可以有效提升報表性能,真正實現了增量式大數據量緩存加載機制。

同時,爲了進一步突破報表功能限制,爲報表控件實現了靜默打印。有興趣同學可以查看之前的文章:https://www.cnblogs.com/powertoolsteam/p/15502771.html

複雜報標報表固然複雜,但我們依舊在不斷努力,讓複雜報標報表不再那麼複雜,成爲人人手中皆可用好的實用開發工具。

總結

技術的發展與融合比我們想象的更爲迅速,在元宇宙、AI、前端、雲、數據、運維等無數關鍵詞的裹挾下,計算機網絡技術正在不斷生長和演進。

而我們也從未停下前進的腳步,從前端電子表格技術、BI數據分析,到複雜報表的處理解決與風頭正盛的低代碼,立足當下,展望未來。

本次我們從葡萄城歷史最悠久的控件出發,爲大家介紹了今年的技術亮點與突破,在下篇內容中,我們將繼續帶大家回顧葡萄城過去一年在新興領域中,有哪些可圈可點的技術升級。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章