天天看點

BlazorUI 元件開發周記 - 2

作者:六月六的牛人

使用 Blazor 開發全新的元件庫,這已經是進入到了第二周了。這周成果很滿。完成了布局元件、資料集元件的基礎、輸入框元件的基礎。還完成了寫說明文檔用于展示代碼的代碼高亮元件等。

得益于使用了 Bootstrap 5.3。依托她良好的 css 布局風格以及科學的元件樣式架構,在我完成了基于 Blazor 架構的元件實作的基礎邏輯與方法後,目前生産新元件的速度是很快、也很順暢的。

BlazorUI 元件開發周記 - 2

Blazor 前景看好

這兩周深度地使用了 Blazor 架構,以及閱讀了 net8 中 Blazor的一些新源碼與新實作。更加對 Blazor 好感加深。比起 Vue,React等,Blazor 現在缺生态,也缺一些好的開源項目的支撐。但相較 Vue,React 這些已成熟的架構。 Blazor 顯得更現代化,更科學,構架也更合理。文檔也更詳細。上手容易,使用友善。目前除了 Server 版連接配接的問題,WebAssembly 下檔案大的問題,我基本上覺得 Blazor 是一個很完美的前端Web的開發架構了。

在 Blazor 中完全使用 C#, 用來實作前端的業務邏輯與互動邏輯,不需要 JavaScript。那種舒服與爽快,隻有自己真正使用體會過,才知道有多過瘾!當然,這種爽快,目前僅适用于開發一些資料管理系統。如果要做複雜的 UI 互動,也都避免不了要使用 JavaScript 的底層支援。

實際上,在一般性的資料管理系統的開發上,微軟自己有一套完整的生态。包括權限、微服務、容器、消息隊列、前端UI、多平台部署、資料庫、 ORM,日志,依賴注入等都有非常好、非常成熟的解決方案。而且相較于 Java 那些開源的項目,微軟自己的這些,全都有更詳細的說明文檔。Github 上也有很多源碼可供參考。相對來說,反而較 Java 的開源項目的學習成本更少。建構的項目結構也更輕型些。

在我們團隊使用 Blazor 建構内部的管理系統時,參考 Github 上的源碼方案,學習微軟自己的說明文檔,很快就讓團隊擋建了系統的基本架構。總的來說,我是非常看到 Blazor 現在提供的這套前端架構解決方案的。

Blazor 的尴尬

國内真正使用 Blazor 來進行項目開發的,應該是沒有。雖然我們團隊在使用 Blazor 做内部系統的開發,但做商業化、市場化的産品。目前還沒有任何一家公司或團隊會使用 Blazor 來做項目落實。原因我就不多說了,這是顯而易見的。

Blazor 還需要幾年的機會來發展和壯大。當然,在未來的幾年中,最怕的是微軟那鬼德性,對自家的技術動不動就下馬,換新的東西。這讓跟随者無所适從。這也是微軟這幾年在網際網路開發語言中不占上風的主要原因。

盡管如此,但Blazor 作為個人的技術儲備和技術學習的提高,是很好的開始。誰也說不好,哪天突然發現用 Blazor 的人就多起來了。也不用感到有什麼奇怪!畢竟,用 C# 來實作前端邏輯,比 JavaScript 是友善的不是一點兩點的事。

Blazor 經過幾年的完善,幾個版本的疊代更新,解決了痛點後,自然是不二的選擇。這也需要微軟不作死。至少目前來看,在 net8 中,Blazor 還是有春天的。

現在使用 Blazor 的人少,是很自然的事,因為 Blazor 不能讓他們找到更好的工作,不能給他們帶來實在的價值和利益。誰會花更多時間去深究 Blazor 呢?Blazor 出來也有兩三年了,不說在國内,在國外也是不溫不火的。看好的人有,但應用的還沒開始。

他的尴尬在于來的太晚。但總算還是來了。

BlazorUI 元件開發周記 - 2

Blazor 的優勢明顯

不是說現在正在開發 Blazor 元件庫,我就說 Blazor 有多好。反而是,我本人覺得 Blazor 相較其他前端開發架構,确實是我用起來最舒服,效率最高,代碼最清爽的一個架構。正好相反,是我覺得 Blazor 優秀,是以才會有想選擇給 Blazor 開發一套元件庫的想法。

Blazor 的适用場景很多,尤其在大部分人正在從事的管理系統、後端應用、B端業務上,有更好的優勢。今天,也不想展開來比較 Blazor 與其他前端架構的優勢與不足。因為這可以新寫一篇長文。今天隻根據本個的使用感想。總結一句話,Blazor 有他自己的優秀之處,也有作為目前我所從事的系統管理開發上的優勢所在。是以,我看好 Blazor,也選擇了不 Blazor。

待元件庫開發的工作到一家階段後,我再好好來介紹一下 Blazor。

BlazorUI 元件開發周記 - 2

本周 Blazor UI 元件庫開發進度

本周是開發 Blazor UI 元件庫的第二周。目前累計已完成可傳遞的元件共 20 多個,較上周新開發了約十來個新元件。新元件包括:

  1. CheckBox 複選框
  2. Input 輸入框
  3. OptionsBar 多項單選條
  4. Select 下拉選擇器
  5. Switcher 開關切換
  6. FlexBox 流式布局容器框
  7. HorizontalFlex 水準流式布局
  8. VerticalFlex 垂直流式布局
  9. ListBox 清單框
  10. Table 表格
  11. Dicttag 字典标簽
  12. Separator 分隔線
  13. CodeBlock 代碼塊
BlazorUI 元件開發周記 - 2
BlazorUI 元件開發周記 - 2
BlazorUI 元件開發周記 - 2

結束語

元件庫的開發是很系統性的工作。比較之開發某一單個元件,其難度系數不可同語。如果隻是開發某一單個元件,可能不用想太多,達到該元件的基本互動與邏輯就行。但要開發一套完整,且可用性很高的元件,考慮的不是某個元件的互動、界面。而是需要系統化的考慮到元件的穩定、可擴充、易用、精緻、風格統一、互動統一、命名規範等多方因素。還要考慮代碼的複用、代碼的科學性、簡潔性等。要抽離、提取、封裝很多東西。總之,其不比開發一套複雜的系統輕松。

目前元件開發了二周有餘。核心基礎基本完成,重點任務還沒開始。但架構已成型。下周開始重點把元件庫中幾個難點搞定。包括支援大資料集的虛拟化實作、消息彈層的實作。搞定這兩個難點後。再進一步開發複雜元件。如: DataGrid 資料表格、多條件查詢與過濾、可支援拖動、可改變大小的元件等。

目前、關注我開發 BlazorUI 元件仍然很少。

但我現在需要一些夥伴一起來幹活。我對開源不太了解,需要一些朋友的支援和幫助。我也沒太多的時間對元件進行細化的測試與驗證,尤其是示例與文檔,同樣也需要花費很多的時間與精力。需要一些朋友一起來完成、需要更多的支援與幫助。

如果有對 Blazor 有興趣的,可以互相了解下。我們一起來開幹!

繼續閱讀