我 與 TDesignBlazor 的故事

前言

作者打拼了 .NET 十多年,屬于全棧應用類型的工程師,特別是對于前端的技術情有獨鐘,從純js到jquery,從bootstrap到自己寫css,從web到winform,還寫過一段時間的knockout.js,以至于公司里的前端的活都派給我,然后他們被裁了...

自從2018年接手了一個研發團隊,當前后端打架成為常態,當前端缺席進度延遲成為阻礙,當績效評估讓我頭疼,當敏捷推動一直不那么的絲滑,blazor 就成為那個我最終認為的那個解決方案,并且基于 Bootstrap 自行學習封裝了一套 Blazor 組件庫提供給自己團隊,自此,以上的問題全部迎刃而解。

ab1b5b6d46c65e0f151e84102cb90f8c.png

過往

在這個 TDesignBlazor 之前,我寫過Boostrap5的Blazor組件庫,后來發現類似的組件庫太多了,于是又寫了一個Semantic-UI的Blazor組件庫BlamanticUI,Github地址:https://github.com/AchievedOwner/BlamanticUI (已歸檔)。

但是在開發過程中,突然發現組件開發的共性,同時因為組件所需要的參數很多,相關的 CSS 組合也很多,非常的麻煩,畢竟重復性工作是十分枯燥的。因此,希望能有一個自動化的框架幫助我能完成80%的重復性工作,最起碼簡單的那些組件,比如?Button?之類的可以自動化一些。起初是在?BlamanticUI?組件庫中自己實現的自動化,后來在封裝 Bootstrap5 的 Blazor 組件庫時又把類似的功能復制了一遍,突然就獲得了一個靈感,并把它封裝了一個獨立的框架,即?ComponentBuilder?就此誕生。

Github:https://github.com/AchievedOwner/ComponentBuilder

ComponentBuilder 介紹:https://www.bilibili.com/video/BV1de4y1v7Fd/

該框架的初衷是讓更多的 Blazor 貢獻者加入開發組件庫

偶遇

但是我發現很多人其實并不知道 Somantic-UI 的存在,而現在的前端很流行 Ant Design,同時也找到了相關的 Ant Design Blazor 組件庫。后來經過一段時間的觀察和探索,發現國內的幾個大廠都在研究自己的組件庫,其中阿里的Ant Design、字節跳動的 Acro Design 和騰訊的 TDesign 都已經有了成品演示,于是就想著用自己的?ComponentBuilder?來大展身手。經過自己仔細的調研發現,Ant-Design 和 Acro-Design 幾乎一模一樣,就是 CSS 的前綴不同而已,再加上 Ant-Design-Blazor 已經慢慢滴成熟,而卻沒有人做 TDesign,這就是個機會,再幾番輾轉深思熟慮后,于2022年9月,創建 Github 倉庫,并借助?ComponentBuilder?框架的自動化優勢,在月底發布了 0.1 版本,實現了大多數的靜態組件的封裝,就此拉開了序幕。

4cd35ba54d3cbd8b592b7103240e2014.png

熱愛

我很喜歡 TDesign 的設計風格,所以在組件開發中,盡可能復制官方的命名、文檔、排版等。不過后來發現,在技術上因為語言不同,所遵循的規范也不太一樣。在我再三的糾結后,我決定不再盲目地跟風官方,還是需要符合《.NET 編程開發規范》,而且作為一款產品,要更加符合用戶的人性,《Don't make me think》的理念要始終貫徹在任何產品中,因此在某些命名和設計上我做了些變更。

堅持

研發出身的我想進一步轉型,畢竟開發出一款產品很容易,但是維持并運營下去卻很難。因此下定決心,堅持做好一款產品,以前都是聽PM得到用戶的二手聲音,我希望這次可以得到用戶最真實的反饋。

挑戰

我喜歡挑戰,因此 TDesignBlazor 也是一個挑戰,全程使用?RenderTreeBuilder?的 OOP 思想來編寫組件,因此在前端的具象思維上也是一個挑戰,因為它不同于 HTML 的所見即所得模式。我希望你和我一樣愛上挑戰!

8652ac257bbcd373abd1171ef3fcafff.png

貢獻

希望廣大的 Blazor 愛好者參與到貢獻中。最大的優勢有:

  • 使 Blazor 技術突飛猛進

  • 深入了解 PR + CI/CD 的 DevOps 流程

  • Kanban 敏捷方法的體驗

  • 擁有開源項目經驗

并且,TDesignBlazor已經獲得了騰訊的關注46417051bdcc9be7a28030447d7b99f6.png

Github 地址:https://github.com/AchievedOwner/TDesignBlazor

未來

  • 繼續基于 TDesign 的組件復刻為 Blazor 版本

  • 每2月一個大版本,每2周一個小版本

  • 以迅雷不及掩耳盜鈴之勢解決用戶反饋

鳴謝

c8d0e7e9962632aff350890dd95d9bb4.png

期待你的名字和頭像會出現在列表中126144ed9a3d737e0d6f3bf7f7af5919.png

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/280642.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/280642.shtml
英文地址,請注明出處:http://en.pswp.cn/news/280642.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

實驗數據

1.整段deng音頻200多秒 2.加xx(1000:1480)之后 轉載于:https://www.cnblogs.com/20179302yzl/p/10270632.html

25個好用的Shell腳本常用命令分享

1.列出所有目錄使用量,并按大小排序。復制代碼 代碼如下:ls|xargs du -h|sort -rn #不遞歸下級目錄使用du -sh2.查看文件排除以#開關和空白行,適合查看配置文件。復制代碼 代碼如下:egrep -v "^#|^$" filenamesed /#.*$/d; /^ *$/d3.刪除空格…

mysql中查詢一個字段屬于哪一個數據庫中的哪一個表的方式

mysql中查詢一個字段具體是屬于哪一個數據庫的那一張表:用這條語句就能查詢出來,其中 table_schema 是所在庫, table_name 是所在表 --mysql中查詢某一個字段名屬于哪一個庫中的哪一張表 select table_schema,table_name from information_schema.columns where col…

macos剪切_如何使用macOS的內置“ Kill and Yank”作為替代剪切和粘貼

macos剪切Everyone knows about cutting and pasting by now. But did you know that your Mac sort of has a second clipboard known as kill and yank? 現在,每個人都知道剪切和粘貼。 但是您是否知道Mac上還有第二個剪貼板,稱為“ kill and yank”&…

ExtJS 折線圖趟過的坑

問題: 1、根據條件檢索后繪制折線圖,之前的坐標沒有清除如圖 解決方案: 在繪制之前,清空坐票: leftLine.surface.removeAll(); leftLine.redraw(false); 完整代碼如下 storeBar.load({params: { SDate: bTime, EDate: …

EventBus的實現

EventBus概要 EventBus是消息傳遞的一種方式,基于一個消息中心,訂閱和發布消息的模式。這種方式的實現不僅僅局限于前端,在iOS中的消息消息中心也是如此實現。 設計模式:訂閱者發布者模式,這種設計模式在前端很常見。A…

Django05-1: 有名分組、無名分組與反向解析

有名、無名分組 分組正則表達式,加小括號 url(r^test/(\d), views.test),def test(request,xx):print(xx)return HttpResponse("OK") 無名分組 將括號正則表達式匹配的內容,當作位置參數傳遞到后面的視圖函數 有名分組 正則表達式起一個別…

Django的第一步(第一節)

寫下你的第一個Django應用第一部分讓我們通過例子來學習.在本教程中,我們將引導您完成基本投票應用程序的創建.其中包括兩部分:一個讓人們查看民意調查并投票的公共網站.允許您添加,更改和刪除民意調查的管理網站.我們假設你django已經安裝好了,你可以通…

ad中電源插座怎么封裝_您可以在房屋中安裝的各種電源插座

ad中電源插座怎么封裝You may already know about smart outlets, or outlets with integrated USB ports. But you might be surprised at how many “normal” outlets you can actually buy for your house. They’re all built for different situations, and you want to …

Arithmetic Slices

這兩天一直復習動態規劃,就想到leetcode上刷刷題,easy難度的很少,大部分都是medium和hard。本題是第一道DP類型medium難度的題目,但是用其他的方法比如暴力法也可以求解。首先來看題目描述: A sequence of number is c…

在Data Lake Analytics中使用視圖

在Data Lake Analytics中使用視圖 1. 概述 在Data Lake Analytics(以下簡稱DLA)中使用視圖(VIEW)功能,可以大大簡化對于重復SQL,特別是較為復雜的SQL語句的編寫和維護。目前DLA中還不支持SQL視圖的物化。在…

C# 實例詳解委托之Func、Action、delegate(精品)

概述委托是.NET編程的精髓之一,在日常編程中經常用到,在C#中實現委托主要有Func、Action、delegate三種方式,本節主要就這三種委托的用法通過實例展開講解。Func用法解析【Func】:Func是帶返回值的委托:原型函數如下(以…

Django05-2:路由分發/命名空間/偽靜態/虛擬環境/django版本區別

路由分發 補充:每一個應用可以有獨立的templates模板文件夾,static靜態文件加,urls.py 總路由 #方法一from app01 import urls as app01_urls from app02 import urls as app02_urlsurlpatterns [url(r^publisher_list/, views.publisher_…

Word中查找替換軟回車鍵和回車鍵

在Word中使用搜索功能搜索“^p”組合字符串可以查找文檔中的所有換行符(回車鍵),使用“^l”(英文輸入狀態下shift6與小寫字符L的組合)可以搜索所有的軟回車符。使用替換功能就可以搜索替換二者。轉載于:https://www.cn…

minecraft服務器_如何使用Minecraft領域設置簡單的無壓力Minecraft服務器

minecraft服務器There are a lot of ways to go about hosting a Minecraft game but it’s tough to beat the simplicity of buying a server directly from Mojang, the company behind Minecraft (and now it even comes with a free 30 day trial!) Read on as we show yo…

自動化測試基礎篇--Selenium瀏覽器操作

Selenium 主要提供的是操作頁面上各種元素的方法,但它也提供了操作瀏覽器本身的方法,比如瀏覽器的大小以及瀏覽器后退、前進按鈕等。一、控制瀏覽器窗口大小有時候我們希望能以某種瀏覽器尺寸打開,讓訪問的頁面在這種尺寸下運行。例如可以將瀏…

Sublime text3配置xdebug調試記錄

第一次配置遇到的問題記錄; 問題:配置php.ini的時候xdebug.remote_port 9001剛開始我一直配置9000端口沖突,然后一切弄好了訪問瀏覽器就一直在轉圈無法訪問; 現在開始配置: 1.打開sublime 輸入install Package如下顯示在按回車&a…

.NET Conf China 2022 今天(12.4) 日程一覽

點擊藍字關注我們.NET Conf China 2022 誠邀您的加入立即掃碼預約加入.NET年度盛宴!!CSDN 直播https://bbs.csdn.net/forums/DotNET?typeId20680 思否直播https://segmentfault.com/area/dotnetconf-2022主論壇分論壇前端專場-A會場出品人:張…

移動web開發適配rem

移動的meta標簽 <meta name"viewport" content"widthdevice-width, initial-scale1,user-scalableno"> 常見移動web適配方法&#xff1a; 1.定高&#xff0c;百分比布局 2.flex布局 3.media媒體查詢 rem&#xff08;font size of the root element…

Django06:視圖層/上傳文件/request 方法補充/FBV與CBV

三板斧 HttpResponse, 返回字符串類型render, 返回html頁面&#xff0c;而且在返回給瀏覽器之前&#xff0c;可以給html文件傳值redirect 重定向 總結&#xff1a;視圖函數必須返回一個HttpResponse對象&#xff0c; 查看源代碼能發現。 JsonResponse對象 json用途&#x…