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資料分析，到複雜報表的處理解決與風頭正盛的低程式碼，立足當下，展望未來。
本次我們從葡萄城歷史最悠久的控制元件出發，為大家介紹了今年的技術亮點與突破，在下篇內容中，我們將繼續帶大家回顧葡萄城過去一年在新興領域中，有哪些可圈可點的技術升級。
