作者介绍



陈超超

Ant Design Blazor 项目贡献者

拥有十多年从业经验,长期基于.Net技术栈进行架构与开发产品的工作,Ant Design Blazor 项目贡献者,现就职于正泰集团

第一次写专栏,开头不知道说什么,所以……先来段广告

《进击吧!Blazor!》是本人与张善友老师合作的Blazor零基础入门系列视频,此系列能让一个从未接触过Blazor的程序员掌握开发Blazor应用的能力。

视频地址:https://space.bilibili.com/483888821/channel/detail?cid=151273

本系列文章是基于《进击吧!Blazor!》直播内容编写,升级.Net5,改进问题,讲解更全面。

系列文章目录



第一章 初出江湖 —— ToDo应用开发练手

初识 Blazor

Hello Blazor

页面制作

数据交互

组件开发

安全

第二章 仗剑江湖 —— 企业组织绩效数据管理平台开发实战

项目框架搭建

指标维护:增删改查

组织机构维护:树

数据采集:自定义表格

指标分析:Chart

账号与权限

站点部署



Blazor是什么

Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架。

第一次看到这句话的感受是不是What?.NET和Web UI啥时候在一起了?

现状

我们暂且先把Blazor放一边,一起看看目前Web开发的技术栈。

上图是目前最常用的前后端分离开发模式下所使用的技术栈和配备的人员结构。

我们大家天天按照这个模式进行着各类项目开发,不知道大家在工作中有没有碰到一下面的问题。

  • 技术栈复杂

    做一个项目前后端需要用到两套完全不同的语言,两套完全不同的框架,不管是对团队还是对个人无形中增加了技术复杂度和成本。
  • 无法重用应用逻辑和代码

    表单验证,DTO(数据传输对象)等代码需要前端和后端分别写一份,增加重复劳动,当一端做了修改后,如另一端未能及时更新,一个新鲜的BUG就出现了。
  • 资源生态独立不能共享

    当下每一个项目下面都摆着一堆的”轮子“(库),充分利用第三方资源对开发价值不可估量,但是因为语言问题,前后端的生态资源不能共享。
  • 增加协作成本

    大家回忆一下,前后端遇到问题时经常热(hu)情(xiang)交(si)流(bi)的场景历历在目,“接口返回格式错了”,“请求数据缺字段了”,“流程不是这样的”…………总是有事前没有想到的问题

    如果遇上 “一个不懂后端的前端” vs “一个不懂前端的后端”,简直就是灾难。
  • 人员利用率低

    每个项目前后端开发量是不平衡的,时常旱涝不定,即影响项目进度,又影响员工心态平衡。

Blazor是什么,由能带来什么

首先Blazor是微软最新推出的Web UI框架,目前.Net5中包含的版本已是它第二个可以商用的版本,它的出现就很好的解决上面产生的问题,下面是他部分特性:

  • 语言优秀

    Blazor 使用 C# 代替 JavaScript 来编写代码,因此我们可以使用静态类型检查、泛型、Linq、async/await、以及美味的语法糖等所有C#语言的优秀特性。

看到这里,估计不少读者会有疑问,浏览器上能运行C#行吗?答案是:行!

为了解答这个问题,这里就要介绍Blazor的两种模式:Blazor WebAssembly和Blazor Server。

  • Blazor WebAssembly

    这是个单页应用 (SPA) 框架,使用WebAssembly技术实现无插件的方式在 Web 浏览器内运行 .NET 代码,通过 JavaScript访问浏览器的完整功能。

关于WebAssembly介绍推荐阅读这篇文章:https://www.smashingmagazine.com/2017/05/abridged-cartoon-introduction-webassembly/

  • Blazor Server

    将Blazor组件托管在ASP.NET Core服务器上,通过SignalR把UI事件从浏览器发送到服务器,并由服务器处理完后将已呈现的组件发送回的客户端

看似这个模式和当年的ASP.Net Web Forms有些相似,其实他们有着本质的区别

所以虽然.Net代码托管在服务商执行,但是页面的响应体验非常好。

共享生态

可以使用现有的 .NET 库生态系统。比如EF Core,AutoMapper等优秀的库可以直接使用。

共享代码

现在我们可以在服务器和客户端使用相同的代码编写应用逻辑,所以可以直接共享应用逻辑,比如Dto、验证特性、加密等。

工具完备

在 Windows、Linux 和 macOS 上使用 Visual Studio 保持高效工作。

未来

有了Blazor加持的Web开发的技术栈变成下图的模式

在这个模式中我们一起看看有什么优势

  • 技术统一
  • 应用逻辑和代码共享
  • 共享.Net库生态资源
  • 易于团队协作
  • 灵活调配人员

次回预告

我将通过一个Hello Blazor示例来体验Blazor项目

《进击吧!Blazor!》第一章 1.初识 Blazor的更多相关文章

  1. (李南江jQuery+Ajax)第一章:初识jQuery

    第一章:初识jQuery 一.原生的JS与jQuery的区别 <!DOCTYPE html> <html lang="en"> <head> & ...

  2. 《进击吧!Blazor!》第一章 2.Hello Blazor

    第二次写专栏,开头还是不知道说什么,所以--先来段广告<进击吧!Blazor!>是本人与张善友老师合作的Blazor零基础入门系列视频,此系列能让一个从未接触过Blazor的程序员掌握开发 ...

  3. 《head first python》第一章《初识python》总结

    该章主要介绍了python的安装和列表相关 列表主要用了movies做介绍: 1.列表及嵌套列表:movies=["the hodaliy",1975,"zhangyim ...

  4. 第一章:初识JAVA

    一:计算机语言发展史 机器语言:典型的二进制文件和计算机交流. 汇编语言: 通过大量的标识符表示一些基本操作来和计算机做交流. 高级语言:通过常见的英语指令来编写程序,完成沟通 常见高级语言 Java ...

  5. 第一章: 初识Java

    计算机程序:计算机为完成某些功能产生的一系列有序指令集合. Java技术包括:JavaSE(标准版) JavaEE(企业版) ---JavaME(移动版) 开发Java程序步骤:1.编写 2.编译 3 ...

  6. WEB的进击之路-第一章 HTML基本标签(1)

    一.HTML简介 超文本标记语言,标准通用标记语言下的一个应用. "超文本"就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素. 超文本标记语言的结构包括"头&q ...

  7. 第一章:初识PHP

    Web程序工作原理介绍? 工作方式? 浏览器首先向Web服务器发出请求,Web服务器对请求做出响应,将响应数据发送给客户端浏览器,通常是一个HTML文件,然后通过浏览器把HTML文件信息显示在屏幕上. ...

  8. Linux第一章-目录初识

    一.Linux基本介绍: Linux 是一种自由和开放源码的类 UNIX 操作系统,使用 Linux 内核.目前存在着许多不同的 Linux 发行版,可安装在各种各样的电脑硬件设备,从手机.平板电脑. ...

  9. 第一章,初识C语言

    1.1 C语言起源 1.2 选择C语言的理由 1.3 C语言的应用范围 1.4 计算机能做什么 1.5 高级计算机语言和编译器 1.6 语言标准 c90,c99,c11. 1.7 使用C语言的7个步骤 ...

随机推荐

  1. Linux相关-回顾-文件和目录(98.1.1)

    @ 目录 1.linux下的文件系统 2.用户目录 3.Linux 主要目录速查表 关于作者 1.linux下的文件系统 在 Linux 下,我们是看不到这些驱动器盘符,我们看到的是文件夹(目录): ...

  2. 6 个例子教你重构 Python 代码

    1. 合并嵌套的 if 条件 太多的嵌套会使代码难以理解,这在 Python 中尤为如此,因为 Python 没有括号来帮助区隔不同的嵌套级别. 阅读深度嵌套的代码容易让人烦躁,因为你必须理清哪些条件 ...

  3. Swift3.0学习之Button

    1.根据字符串的长度确定Button的长度(button的高度给定) let hight:CGFloat = 30.0 let size1 = CGSize(width: getLabWidth(la ...

  4. LINQ to Entities 不识别方法“System.String ToString(“yyyy-MM-dd”)”

    将Queryable转化为IEnumerable或者直接Tolist()

  5. Mybatis-Plus的Service方法使用 之 泛型方法default <V> List<V> listObjs(Function<? super Object, V> mapper)

    首先 我们先看到的这个方法入参是:Function<? super Object , V> mapper ,这是jdk1.8为了统一简化书写格式引进的函数式接口 . 简单 解释一下我对Fu ...

  6. Docker下配置KeepAlive支持nginx高可用

    案例子任务一.安装配置keepalived 步骤1:使用nginx镜像生成nginx-keep镜像 1) 启动nginx容器并进入 docker run -d --privileged nginx / ...

  7. Centos7上以RPM包方式安装Oracle 18c XE

    Centos7上以RPM包方式安装Oracle 18c XE 安装阿里云 YUM 源 https://opsx.alibaba.com/mirror?lang=zh-CN 一.安装oracle数据库 ...

  8. Elastisearch在kibana下批量处理(mget和bulk)

    一.批量查询 有点:能够大大减少网络的请求次数,减少网络开销 1.自定义设置index.type以及document id,进行查询 GET /_mget { "docs":[ { ...

  9. 风炫安全web安全学习第二十八节课 CSRF攻击原理

    风炫安全web安全学习第二十八节课 CSRF攻击原理 CSRF 简介 跨站请求伪造 (Cross-Site Request Forgery, CSRF),也被称为 One Click Attack 或 ...

  10. 【原创】Linux PCI驱动框架分析(三)

    背 景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本 ...