Infragistics|IgniteUI for Angular 開發者的最佳利器

infragistics log



一直以來,程式語言不斷的進步與創新,而在近幾年,前端的世界甚至開創了一個新的世代,Angular、Vue、React 三大巨頭,雖然這已經不是一個新潮的話題,但隨著時間的推進,巨頭們的基底也打得更深更穩,願意投入開發的使用者也隨之增加。從早期 JQuery 稱霸前端的時代,到現在的三大 Framework 林立,我們觀察到開發者的漸漸習慣也在改變,一切要從用戶的習慣來說起。

近年來用戶對於視覺上的感受越來越敏銳,對系統效能的耐性也越來越低,導致很多並非具有前端能力的開發者,已經慢慢意識到無法在用以前的開發方式來滿足用戶。但對於視覺上 UI/UX 的設計開發,除了要有該專業的背景,也需要一個團隊來共同開發護,同時也要兼顧前端效能問題,但並非每個企業都具有這類的人才,或是足夠的資源來滿足這樣的條件。因此,許多企業紛紛採用 Open Source 的 UI 套件來滿足需求,必竟術業有專攻。

但企業的情境往往是非常繁雜的,採用 Open Source 的解決方案在許多情境上會遇到挑戰,或是無法滿足需求的時後,更不用提到是否有漏洞修補、bug fix、持續維護的潛在議題。因此有很大一部份的企業用戶,也開始願意使用商用 UI 來滿足需求。在可負擔的預算內,享有一個專業的開發團隊不斷的維運、有設計感的 UI 元件、因應許多情境的觸發事件、既輕量又有品質的程式碼、專家的咨詢服務等等,最重要的是可以很舒服的完成企業需求。


igniteui logo


Infragistics IgniteUI,以 Angular 為開發基礎,正所謂站在 Google 這個巨人的肩膀上,風光必然明媚。為什麼 Infragistics 團隊採用了 Angular 為 IgniteUI 的開發語言,首先必需先來了解 Angular 幫助開發者達成哪些困難的任務,並化繁為簡,讓開發者可以快速的上手,享用其中帶來的絕佳優勢。

Angular 與其他 framework 都有很重要的一點,採用 component-base 的開發架構,每一個 component 有著專屬自已的 view 與邏輯,藉此提升專案的管理及可讀性,意即著程式碼的品質也大大提升。每一個 component 間相互關聯,但又各司其職,可以很簡單的進行程式碼的修改,而不用擔心影響到整個專案的運行。專案中都會具有一個入口點,一路將相關的 component 由上至下串連,最後形成一個完美的關聯樹。


angular service concept



Anuglar 引入了 Typescript、RxJS,意即著專案中可以很好的透過 TS 將程式碼結構化,降低 runtime-error 的機率,並享有 RxJS 對於資料流的各種強大的應用。再加上 Angular 採用 Dependency injection 的技術,統一管理邏輯層 (Service),讓專案的性能大幅提升。在效能方面,當 Angular 實際部署前會需要做 AOT 或 JIT 的諞譯動作,將 Typescript、HTML 轉成 javascript,過程中也將程式碼做最佳化,甚至是 Tree-Shaking 去除不必要的程式碼,將專案進一步瘦身,讓 Browser 端的執行效能更好。

IgniteUI 也是看準了 Angular 許多優勢,以及企業級的框架結構,進而採用為開發框架。企業在使用套件時,也是會考慮到對專案本身的影響程度,套件的品質有可能會造成專案效率不佳的狀況,所以 IgniteUI 除了採用 Angular 強大的框架以外,也將程式碼在 Github 上做開源,不怕全世界的專家來檢視,讓客戶可以百分百的放心使用 IgniteUI 於專案中。原始碼開源的另一個目的,也是希望在非商業用途中,可以讓大家享受套件帶來的便利,同時也鼓勵教育性使用,回饋廣大的莘莘學子。

igniteui angular tree shaking


如果是 Angular 的開發者,對於使用 Angular CLI 一定不陌生,IgniteUI 為了加速專案的初始化,也提供了 Ignite UI CLI,除了可以在專案中加入元素的部份程式碼以外,還可以建立一個完整的專案,包含了 Toolbar、Sidenav、以及 Login Authentication,透過 CLI 的對話式選項,也可以把希望使用的元素添加,並協助切好 Router,大大的省去專案初始化的時間,筆者也會在後續的文章中,特別帶大家一覽整個過程。

IgniteUI 目前支援了許多語言,Angular、React、ASP.NET Core、ASP.NET MVC、JQuery,Web Component,可使用的元素有 Grid、Chart、Gauges、Forms、Layout...等等,或是想要專案中的 theme 做全域色系切換,透過官網我們都能看到詳細文檔說明,同時文檔中也提供了 Angular 的基礎用法並帶入 IgniteUI 的使用,也有支援 i18n、SSR 。如果時常需要比對大量的資料,附帶圖表的顯示,Data analysis 的應用可能可以幫助到您,最後我們附上的影片帶大家一覽 IgniteUI 的樣貌。








延伸閱讀
aa71435723的大頭照
Winston

Eggplant DAI 自動化測試專家。

留言