葡萄城首席架构师：前端开发与Web表格控件技术解读
講師：Issam Elbaytam，葡萄城集團全球首席架構師（Chief Software Architect
of GrapeCity Global）。曾任 Data Dynamics.Inc 創始人兼資深產品經理，個人研究方向主要為 MS.NET語言及平臺、動態化系統構建，以及高性能大型分布式Web系統架構，主導了葡萄城多款暢銷控件產品的系統架構與性能優化。
?
“25年來每天只休息4小時，除了日常作息時間，Issam不是在研究技術和產品，就是在去研究技術發展趨勢的路上”這就是葡萄城同事對他的一致評價。
為何他如此癡迷于前端開發技術？在他的眼中，前端開發未來將走向何方？面對當今大熱的HTML5、JavaScript，以及區塊鏈等新興技術，他又有哪些不同的看法和觀點？他倡導的用前端開發技術，實現“在線Excel”系統的捷徑又是什么？本期葡萄城公開課，我們就來一探究竟。
?
?
?
- 觀看地址：https://live.vhall.com/347833693
- 直播時間：2019-11-20（星期三） 下午14:00
- 直播大綱：
- Web表格控件的處理性能，與哪些因素相關？
- SpreadJS 的技術架構和設計理念如何？
- 兼容450余種Excel公式，SpreadJS是如何做到的？
- 前端開發技術日新月異，未來將走向何方？
課程摘要
本期公開課，Issam將就企業信息化系統如何通過先進的前端開發技術和開發工具，在瀏覽器或Web應用中嵌入類Excel 模塊，快速實現數據填報、在線文檔、類 Excel UI 設計等業務場景，并詳細介紹SpreadJS 的HTML5 Canvas界面繪制方式和稀疏數組（Sparse Array）模型。
與此同時，還會為大家深入解讀“面對不斷變化的業務需求，開發者如何保持并不斷提升Web應用的開發迭代速度”。
最后，作為一名技術狂熱愛好者， Issam還會就當今最熱的前端技術發展趨勢發表看法。
下面，是本期公開課的核心內容，更多精彩分享，請點擊此處觀看。
企業Web應用中“Excel”的重要性
Excel 作為一款深受用戶喜愛的電子表格工具，借助其直觀的界面、出色的計算性能、數據分析和圖表，已經成為數據統計領域不可或缺的軟件之一。Excel對于企業來說：
- “用Excel的數據說話”是企業走向自動化、信息化的第一步
- Excel 操作簡單，但卻隱藏巨大的力量和靈活性
- 許多Web應用程序都是從一張“電子表格”開始的
- 也許難以置信，Excel腳本的確是最流行的功能(性)語言之一
- Excel函數和公式無處不在
- 完整的圖靈機系統
- Excel甚至可以來畫畫和制作游戲（摸魚必備）
?
不過，企業真正看重的是Excel軟件本身嗎？
?
Excel對于企業應用的短板：
- Excel的管理模式混亂且低效
- 依賴Excel完成數據交互，將會大幅降低應用系統的運行效率
- Excel文件和企業已有應用接駁困難
- 用Excel保存文件簡單、通用性強
- 但數據易遭篡改
- Excel非常適合基于文件的分析
- 但難以同時整合、分析和匯總多個文件
?
在企業應用項目中，高度類似Excel，但不依賴于Excel實現的數據排序、篩選、分類匯總等各項功能，才是企業真正所需，亦是信息化系統必不可少的功能模塊。比如：
- LoB 應用
- 降低安全風險并防止敏感數據的臨時拷貝
- 權限管控下的應用
- 集中的數據庫存儲，以及可用于更深入的分析和報告
?
因此，對于企業應用系統來說，如果有一款開發工具能夠克服Excel的短板，將Excel的功能，嵌入到Web系統中，實現Web Excel 組件開發、數據填報、在線文檔、圖表公式聯動、類 Excel UI 設計等業務場景，并完全兼容Excel 公式和文檔類型，無疑會為企業帶來巨大的價值。
而這些，不過是純前端表格控件SpreadJS的基本功能之一。
?
Web表格控件 —— SpreadJS誕生記
SpreadJS?的誕生即在意料之外，又在情理之中。
自1996年中國全功能接入互聯網起， 人們對Web產品的期望愈發殷切。如今，Web開發者不僅需要面對來自PC端單方面的壓力，接到更多移動端、PWA（小程序）、app hybird等平臺的需求也成了家常便飯。
迫于業務不斷變化的壓力，導致了開發者需要不斷提升Web應用開發迭代的速度，在最大程度縮短項目交付周期的同時，也需時刻保持產品的易用性和穩定性。
有挑戰，便存在機遇。
美國一位名叫Issam Elbaytam的工程師在開發過程中發現：大部分用戶在處理數據、統計數據時，更習慣使用Excel來做。然而，對于企業Web項目來說， Excel的短板也非常明顯，例如：和企業已有應用接駁困難、無法完全脫離Office套件、高昂的授權價格、無法分布式修改數據等。
在了解到這些短板后，一個絕佳的想法就此誕生：如果用純JavaScript開發一套功能和UI 都與Excel高度類似的電子表格控件供開發者使用，這樣既可以滿足應用系統當下流行的B/S架構需求，讓用戶進一步把應用遷移B/S端，也可以完全脫離Office套件使用。
然而，實現這樣一個純前端類Excel的開發工具到底有多難？除了要投入大量的研發成本和時間外，即便如葡萄城一般積累了多年 .NET控件開發經驗的集團公司，在沒有深入研究過前端數據渲染、框架集成、前后端Excel數據交互邏輯的情況下，空有人力物力也無法成功。別的不說，光是用JavaScript 實現Excel數量龐大的公式和函數，就足夠耗費數倍的精力。。。
?
?
?
葡萄城的Spread.NET表格控件
?
換做其他人也許已經放棄，但Issam沒有。連續20年，在每天只休息4小時的情況下，Issam基于葡萄城Spread.NET表格控件的基礎，終于在2015年，研發出了一款真正的純前端電子表格控件——SpreadJS。
?
?
?
SpreadJS與Excel 的數據交互結構
?
付出的努力，一定會贏得收獲。短短5年時間，SpreadJS已為國內外多所知名企業和機構賦能，助力如天弘基金、華為、中國平安、招商銀行等行業巨頭，實現了Web Excel組件開發、數據填報、在線文檔、圖表公式聯動、數據可視化等核心業務場景?！昂唵蔚囊话俣嘈写a配合 SpreadJS 的類 Excel 操作習慣，讓我們的用戶就像使用 Excel 一樣使用內部系統，也為我們系統開發完成后的用戶遷移工作節約了大量培訓時間，SpreadJS 優秀的性能讓我們高枕無憂?！?華為的相關負責人坦言。
?
如何快速開發實現“在線Excel”的功能
?
?
?
SpreadJS是基于JavaScript 和 HTML5最完整、速度最快的電子表格控件，其體系架構分別由存儲層、指令系統、計算引擎、展示層、導入導出接口和渲染層構成，如下所示：
?
?
?
?
在此架構基礎之上，SpreadJS提供的核心功能包含：
1. 業界領先的 Excel 兼容度，如：
-
- 支持Excel 的53 項單元格格式、18 種條件格式、3 種數據高亮，及 60 種表格樣式
- 支持450 種以上的 Excel 公式函數
- 支持 32 種圖表、18 種迷你圖和 182 種形狀
- 具備數組公式和動態數組支持的完整函數庫
- 純前端導入、導出 Excel 文件
2. 超越Excel的獨特之處，如：
-
- 自定義迷你圖和條形碼
- 自定義輸入單元格類型、單元格標簽、填充、按鈕和下拉列表
- 動態形狀
3. 一流的框架支持及擴展：
-
- 全面兼容 Angular、React、Vue等前端開發框架
- 符合 UMD 規范，可按需加載
4. 極高的處理性能和響應速度
-
- 采用比 DOM 更為先進的 HTML5 Canvas 繪制交互界面，能夠在不影響訪問性能的前提下，最大化的節省存儲空間
?
基于上述核心功能，SpreadJS的適用場景主要包含以下三個方面：
- 數據填報
- 類 Excel 報表設計
- 在線協同編輯
?
Web表格控件的處理性能，與哪些因素相關
SpreadJS?的目標是成為滿足所有開發需求的最佳控件！達成這一目標的前提，必須滿足企業極高的性能要求。
首先，SpreadJS從一開始就使用了 Canvas 的方式來繪制整個交互界面，與 DOM 拼接不同，使用 Canvas 的優勢是能夠給用戶提供更加流暢的交互體驗：不會因為表格數據增多，而導致瀏覽器的卡頓。
其次，在數據存儲方面，SpreadJS 采用了稀疏數組（Sparse Array）結構，能夠在不影響訪問性能的前提下，最大化的節省存儲空間。
?
?
?
正是基于上述技術的實現，SpreadJS 才可以在瀏覽器中依然保持極高的處理性能和響應速度。
未來前端開發技術的應用與趨勢
總的來說，前端開發可以歸結為兩個時代：小前端時代和大前端時代。
?
小前端時代
隨著JavaScript被發明，前端開發進入了小前端時代，那么JavaScript為什么會被發明出呢？
1995年，網上沖浪開始興起，但當時用戶還是通過一條28.8 kbit/s的調制解調器連接互聯網，例如用戶如果要簡單的做注冊表單驗證，和服務器交互一輪就需要近30秒。讓我們試想一下，在經過了半分鐘的等待后，服務器告知你的一個字段忘填了，將是怎樣的一種心情。
?
?
?
（圖片來自網絡）
基于客戶端運行的腳本語言需求逐漸增大，由Netscape于1995年開發的JavaScript前身LiveScript應運而生，后來為了傍Java這個時髦詞匯，LiveScript更名為了JavaScript。有了JavaScript 客戶端也可以做邏輯判斷，動態交互等行為。
所以由HTML為骨架、CSS為外貌、JavaScript為交互的搭配正式被固定下來了。后來隨著Ajax技術的興起，Web由1.0時代，邁入了2.0時代，web頁除了基礎的內容展示功能外，還具備了數據處理、動態效果、優秀的用戶體驗等功能。
?
大前端時代
隨著對前端動效、數據交互的需求量越來越強，jQuery跨瀏覽器的工具庫應運而生，它為Web帶來了新的活力，使開發者能更方便的開發操作DOM，數據交互，動態交互等行為，開發者的思路被進一步打開。
后來，谷歌V8引擎發布，Node誕生，為前端開發提供了使用同一語言實現全棧開發的機會（JavaScript不再是一個只能寫頁面交互的前端語言）。隨后React、Angular、Vue 等 MVVM 前端框架的出現，使前端實現了項目真正的應用化。前端迎來了大前端時代，前端開發的從業者也終于告別了 “切圖仔”的稱謂，因為他們有了全新的職稱“前端開發工程師”。
2009年開始，大屏智能手機陸續出現，從4G時代到5G時代， 人們對Web產品的要求和期望也越來越高，未來具備“短、平、快”特征的產品一定會備受歡迎。
Issam對未來前端開發趨勢的看法
JavaScript和瀏覽器的不斷發展，也為基于Web應用程序的系統開發提供了良好的性能支持和運行環境。
面對中國開發者，Issam 也坦言道，“中國開發人員喜歡使用最新和最好的技術， 而優秀的前端開發工具，如SpreadJS，也一定會為他們的項目提供強大的支撐，幫助這些開發人員在財務、預算、工程、統計等領域的信息系統中，通過強大的計算引擎和靈活的數據可視化呈現，為商業表單控制面板提供更為豐富、有效的內容信息?！?/p>
最后，作為一名技術狂熱愛好者，Issam對未來充滿期待，相信隨著未來前端技術的發展，以及不斷更新迭代的Web程序集，這些技術將為用戶提供前所未有且越來越強大的解決方案。
總結
以上是生活随笔為你收集整理的葡萄城首席架构师：前端开发与Web表格控件技术解读的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Cannot access 'age'
- 下一篇： js画矢量图