.Net Core应用框架Util介绍(一)

 距离上次发文,已经过去了三年半,这几年技术更新节奏异常迅猛,.Net进入了跨平台时代,前端也被革命性的颠覆。

回顾

  2015年,正当我还沉迷于JQuery + EasyUi的封装时,突然意识到技术已经过时。

  JQuery在面对更加复杂的UI需求时显得力不从心,EasyUi虽然组件比较完善,但界面风格老旧,响应速度慢,且是收费商业产品,在一个商业产品上投入精力封装并不划算,所以我果断弃坑了。

  然后开始封装JQuery + Bootstrap,在一个SPA(单页应用)项目里暴露出很多问题,让我认识到JQuery不适合做SPA,我开始寻找新的方案。

  AngularJs(ng 1.x)是谷歌出品的JS框架,几本书下肚以后,我开始琢磨着如何把AngularJs操作封装起来,为了封装成链式调用,甚至改了它的源码以支持服务定位器模式。

  正当我准备封装基于AngularJs的UI组件时,发现它也过时了。由于UI封装工作量巨大,而前端环境异常混乱,不再敢轻举妄动,直到前端三大框架浮出水面。

  2016年,.Net Core兴起,为了方便学习交流,Alexinea(刘怡)发起了.Net Core学习小组,Kiler(谢炀)、Lemon(刘浩杨)和我做为第一批成员加入了小组。

  微软当时尚未提供.Net Core中文文档,为了方便国内.Net Core的学习和推广,.Net Core学习小组组织了一批.Net爱好者进行翻译,直到官方提供了中文文档为止。

  2017年,.Net Core学习小组决定发布开源项目以推动.Net Core的发展,.Net Core学习小组也正式改名为.NET Core Community(.Net Core中国社区),简称NCC。

  最初加入的项目有Lemon的AOP框架AspectCore,Savorboard(杨晓东)的分布式事务解决方案CAP框架,以及我的应用框架Util。随后一些优秀的开源项目加入了NCC,包括爬虫解决方案DotnetSpider,分布式微服务框架Surging等。

Util产生的背景

  我长期混迹于小型软件公司,小公司资源有限,人少事多,水平也参差不齐,如何降低团队的学习成本,如何提高项目的开发进度,如何降低Bug率,是我的主要关注点。

  Util应用框架是我在多年的项目实战中积累起来以解决上述问题的利器,实践证明,它在多个小型团队和多个中小项目上起到关键作用,甚至包括一些濒临流产的项目。

中小项目的瓶颈在哪

  对于中小项目,简单CRUD(增删改查)占据大量篇幅,核心模块包含复杂业务逻辑,报表包含复杂查询,另外还需要权限控制、流程控制等,不管模块再多,大体不出这个范围。  

  前端UI体验变得越来越重要,工作量也越来越大。一个简单CRUD,服务端API开发半小时,UI可能需要折腾一天。

如何打破瓶颈

  如果能够迅速拿下CRUD,并且能有效减轻前端开发任务,那么就能将更多精力投入核心业务,从而提高项目交付能力。

  对于服务端CRUD,通过封装基类再配合代码生成就能很好解决,如何提升前端开发效率?

正确认识"前后分离"

  一些人鼓吹“前后分离“原则,前端界面交给专业的前端人员,后端人员只负责提供API就好了,这似乎是提升前端开发效率的灵丹妙药。

  问题在于小公司资金预算有限,而专业前端人员薪资要求很高,以低价招聘的前端人员,往往只会HTML + CSS,JS耍得并不溜,最后还得服务端程序员上场。

  另一方面,前端还有前台和后台之分,前台是面向终端用户的网站,比如门户网站,商城一类,前台偏重展示,规律性不强,后台是面向用户或管理员的表单系统,偏重功能,规律性比较强。大多公司的前端人员主要开发前台网站,而管理后台还是服务端程序员开发,前端人员顶多帮助界面布局,功能还是后端人员完成。

  "前后分离"不一定是人员的分离,也不能降低工作量,主要是指前后端依赖关系的分离,如果前端技术或后端技术可随意替换,而不是绑定在一起,就认为分离成功,这提升了项目的可维护性。

Js框架的选择

  为了降低前端开发难度,选择一个好的Js框架显得特别重要。

  对于一个复杂界面操作,JQuery同样可以完成任务,但与现代主流的Js框架相比,JQuery操作Dom的方式更加复杂,效率低下,且难以维护。

  现代前端三大Js框架是Angular(ng 2+),Vue和React。通过学习,发现Angular更符合我对开发效率的追求。

  要提升开发效率,最关键的特性就是代码提示。不相信??请在记事本上用C#写几句试试。

  Angular是谷歌开发的Js框架,默认采用Typescript(Ts)语言开发,Typescript语言是微软开发的强类型脚本语句,它是Js的超集,在VS或VSCode上具有代码提示。

  你可能会说,Js不也有代码提示?这完全不一样,Ts具有强类型的代码提示,你只能看见对象上明确定义的成员,提供了非常精确的提示,而Js的代码提示滚动条好几米长,和当前对象无关的信息也显示出来,这严重降低了代码提示的作用。

  除了代码提示,Ts还填平了Js固有的一些设计缺陷。

  很多开发人员不选择Angular的原因是需要多学一门脚本语言,认为成本高,这其实是一种误解。

  Ts在语法上有点像Js + C# + Java的混合体,对于C#或Java程序员,上手成本非常低,开发起来让你爽不停。

  作为微软系.Net程序员的我们更应该大力支持。

声明式编程

  现在我们在开发服务端和前端脚本时都有了代码提示,工作效率得到提升,还能更进一步吗?

  现代流行的前端框架都有组件或指令的概念,用来支持声明式编程,它通过扩展Html自定义标签或自定义属性的方式来调用Js

  这种方式将Js隐藏在内部,将Js转化成了Html,形成更好的封装性。毫无疑问,使用Html编写的页面,比使用Js具有更强的表现力。

  如果文本框需要非空验证,只需要在标签上加个属性,就像下面这样,你并不需要调用任何Js就完成了验证工作,这相当酷。 

1
< input  required=”true”>

   不过我发现很多团队并不使用声明式编程方式,更愿意使用Js,原因在于Html是弱类型标签,自定义属性并没有代码提示,这确实是个大问题。

TagHelper - 编写Html的救命稻草

  我在2012年学习Dwz这个前端框架时,接触到声明式编程的概念,也被Html无提示的问题所困扰,后面发现Asp.Net提供的HtmlHelper能够封装Html,提供强类型的代码提示,这正是我需要的特性。

  2015年用HtmlHelper封装了EasyUi,虽然只完成了一些基础工作,但使用过的人都认为它大量提升了开发效率,它现在甚至仍然是一些公司的主打技术。

  HtmlHelper也有缺陷,它看上去是C#代码,而不是标签,比如HtmlHelper封装的文本框长成这样。

640?wx_fmt=png

  如果需要前端同学来帮助你调整界面,这就不太友好了。

  另外HtmlHelper与Html混在一起也让代码看上去不直观。

  微软发现了这个问题,在Asp.Net Core推出了TagHelper,TagHelper与HtmlHelper类似,也是用来封装Html的强类型工具,不过它用起来是个标签,如果你不注意,根本看不出这是Html,还是TagHelper,这对前后端人员配合完成Html页面具有重大意义。

  现在TagHelper封装的文本框长成这样了。 

640?wx_fmt=png

 

TagHelper与Angular结合的艰难之路

  使用Angular或Vue框架,你通常不会从0开始工作,寻找现成的UI组件库是更明智的选择,比如Angular可以选择Angular Material或Ng-Zorro。

  这些库都提供了大量组件和属性,如果直接使用Html编写,没有代码提示,你必须随时打开官网,四处翻上翻下以寻找你需要的属性,哪怕你曾经用过它,如果你记得不是十分精确,从官网复制粘贴会时刻伴随着你。

  现在好了,你知道TagHelper是救命稻草,可能已经迫不急待想要动手封装了,不就是把Html拼接出来输出到页面,这能有多难?别急,小伙子,将Angular组件封装成TagHelper可不是你想的这么简单。

  如果你关注过Asp.Net Core Angular这个模板项目,你会发现这个模板使用的依然是Html,而不是TagHelper,这是为什么?自家这么好的技术,你都不推广一下?

  我凭借之前封装HtmlHelper所积累下来的经验,将Asp.Net Core 2.0 Angular这个模板项目改造成支持TagHelper,这是使用Angular提供的JIT编译特性做到的。JIT就是即时编译,会在运行时动态获取Html页面并编译成内部Js,我在Github上也发现国外有些人在使用这种方式,不过都处于Demo级别。

  我用TagHelper封装了Angular Material组件库,并将它应用在项目上。

  很快爆发了严重的性能问题,这时候项目上的页面也才上百个。

  从启动到看见登录页面,需要半分钟,F5刷新还需要这么久,这个速度是无法接受的。

  我观察到系统在启动时会请求所有页面,原来我虽然使用了Angular模块,但没有使用延迟加载,主模块直接引用了子模块,导致在启动时加载全部页面。

  使用延迟加载缓解了这个问题,启动能在三秒左右完成,进入子模块也需要几秒,虽然能勉强使用,但性能和AOT编译相去甚远。

  AOT编译是Angular提供的预编译,能在发布阶段把Html文件直接编译成Js,这样在运行时就不再访问Html页面,对性能具有极大的提升。

  使用了TagHelper以后,并没有Html文件,AOT编译无法访问服务端Url,所以没办法使用。

  鱼和熊掌都想兼得,如果能够得到TagHelper的编译时检查和代码提示功能,又能得到AOT编译的运行时性能,这该多好啊。

  我当时寄希望于Asp.Net Core团队,希望他们能提供一点支持,在Github提了Issue之后,Asp.Net Core团队表示TagHelper与Angular这种Js框架水火不容,机制上的问题。我后面仔细想想,确实如此,TagHelper主要为服务端MVC提供支持,而使用了Angular这样的Js框架后,路由都走客户端,通过AOT编译后,服务端除了提供WEB API,真没它啥事。

  由于TagHelper提高了我团队的开发效率,延迟加载能让这个机制勉强使用,我也就坚持了下来。直到有一天灵机一动,用TagHelper生成出Html文件不就好了吗,和玄冰同学折腾了一天,终于解决了这个问题。现在,TagHelper充当了代码生成器的角色,服务端MVC相关的特性被全部抛弃。

小结

  前面介绍了Util的一些背景和动机,同时也解释了为何我花大把时间在UI封装的原因。

  未完待续,下一篇介绍Util包含的主要功能,以及让你把TagHelper + Angular Material封装的Demo运行起来。

  Util应用框架的下载地址为:https://github.com/dotnetcore/Util

  写文需要动力,请大家多多支持,点下推荐,Github点下星星。

  Util应用框架交流一群: 24791014

原文链接:https://www.cnblogs.com/xiadao521/p/Util-Introduction-1.html


 

.NET社区新闻,深度好文,欢迎访问公众号文章汇总 http://www.csharpkit.com

640?wx_fmt=jpeg

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 扫一扫,分享海报

----------Database-------------- 1.DataTable帮助类(DataTableHelper.cs) 2.Access数据库文件操作辅助类(JetAccessUtil.cs) 5.查询条件组合辅助类(SearchCondition.cs) 6.查询信息实体类(SearchInfo.cs) 8.Sql命令操作函数(可用于安装程序的时候数据库脚本执行)(SqlScriptHelper.cs) ----------Device-------------- 声音播放辅助类(AudioHelper.cs) 摄像头操作辅助类,包括开启、关闭、抓图、设置等功能(Camera.cs) 提供用于操作【剪切板】的方法(ClipboardHelper.cs) 获取电脑信息(Computer.cs) 提供用户硬件唯信息的辅助类(FingerprintHelper.cs) 读取指定盘符的硬盘序列号(HardwareInfoHelper.cs) 提供访问键盘当前状态的属性(KeyboardHelper.cs) 全局键盘钩子。这可以用来在全球范围内捕捉键盘输入。(KeyboardHook.cs) 模拟鼠标点击(MouseHelper.cs) 全局鼠标钩子。这可以用来在全球范围内捕获鼠标输入。(MouseHook.cs) MP3文件播放操作辅助类(MP3Helper.cs) 关联文件(ExtensionAttachUtil.cs) 注册文件关联的辅助类(FileAssociationsHelper.cs) 打开、保存文件对话框操作辅助类(FileDialogHelper.cs) 常用的文件操作辅助类FileUtil(FileUtil.cs) INI文件操作辅助类(INIFileUtil.cs) 独立存储操作辅助类(IsolatedStorageHelper.cs) 序列号操作辅助类(Serializer.cs) 获取个对象,它提供用于访问经常引用的目录的属性。(SpecialDirectories.cs) 简单的Word操作对象(WordCombineUtil.cs) 这个类提供了些实用的方法来转换XML和对象。(XmlConvertor.cs) XML操作类(XmlHelper.cs) ----------Format-------------- 参数验证的通用验证程序。(ArgumentValidation.cs) 这个类提供了实用方法的字节数组和图像之间的转换。(ByteImageConvertor.cs) byte字节数组操作辅助类(BytesTools.cs) 处理数据类型转换,数制转换、编码转换相关的类(ConvertHelper.cs) CRC校验辅助类(CRCUtils.cs) 枚举操作公共类(EnumHelper.cs) 身份证操作辅助类(IDCardHelper.cs) 检测字符编码的类(IdentifyEncoding.cs) RGB颜色操作辅助类(MyColors.cs) 日期操作类(MyDateTime.cs) 转换人民币大小金额辅助类(RMBUtil.cs) 常用的字符串常量(StringConstants.cs) 简要说明TextHelper。(StringUtil.cs) 获取中文字首字拼写,随机发生器,按指定概率随机执行操作(Util.cs) 各种输入格式验证辅助类(ValidateUtil.cs) ----------Network-------------- Cookie操作辅助类(CookieManger.cs) FTP操作辅助类(FTPHelper.cs) HTML操作类(HttpHelper.cs) 网页抓取帮助(HttpWebRequestHelper.cs) NetNetworkUtil.cs) IE代理设置辅助类(ProxyHelper.cs) ----------Winform-------------- 跨线程的控件安全访问方式(CallCtrlWithThreadSafety.cs) CheckBoxList(CheckBoxListUtil.cs) 窗口管理类(ChildWinManagement.cs) 由马丁·米勒http://msdn.microsoft.com/en-us/library/ms996492.aspx提供个简单的方法打印工作的个RichTextBox个帮手(ExRichTextBoxPrintHelper.cs) 显示,隐藏或关闭动画形式。(FormAnimator.cs) 对窗体进行冻结、解冻操作辅助类(FreezeWindowUtil.cs) 窗体全屏操作辅助类(FullScreenHelper.cs) GDI操作辅助类(GDI.cs) 提供静态方法来读取这两个文件夹和文件的系统图标。(IconReaderHelper.cs) 图片对象比较、缩放、缩略图、水印、压缩、转换、编码等操作辅助类(ImageHelper.cs) 输入法帮助,全角 转换为半角(ImeHelper.cs) Winform提示框 的摘要说明。(MessageUtil.cs) 包含互操作方法调用的应用程序中使用。(NativeMethods.cs) 托盘图标辅助类(NotifyIconHelper.cs) 打印机类(POSPrinter.cs) 图片、光标、图标、位图等资源操作辅助类(ResourceHelper.cs) RTF字符格式辅助类(RTFUtility.cs) 串口开发辅助类(SerialPortUtil.cs) 设置文本属性提供个ToolStripStatusLabel(SafeToolStripLabel.cs) 只运行个实例及系统自动启动辅助类(StartupHelper.cs) Web页面预览效果图片抓取辅助类(WebPageCapture.cs) 供Asp.Net直接调用的包装类(WebPreview.cs) 计算机重启、关电源、注销、关闭显示器辅助类(WindowsExitHelper.cs)
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值