Web开发与JavaScript开发向来是同义词。直到WebAssembly的横空出世,WebAssembly (Wasm)是一种在浏览器中可以执行的二进制指令。 WebAssembly 的 官方工具链 能够编译 C/C++ 代码,但许多社区也提供了不同语言的编译器,如 RustPythonJavaBlazor(C#)。特别是 Rust 社区非常活跃,可以开始看到完整的前端框架,如 YewDodrio,这为基于浏览器的应用带来了更多新的可能性,只要测试一些使用 WebAssembly 构建的优秀应用,就可知道基于浏览器的近乎原生的应用现在已经成为现实,例如 SketchupMagnum
WebAssembly被设计为可以和JavaScript一起协同工作——通过使用WebAssembly的JavaScript API,你可以把WebAssembly模块加载到一个JavaScript应用中并且在两者之间共享功能。这允许你在同一个应用中利用WebAssembly的性能和威力以及JavaScript的表达力和灵活性,即使你可能并不知道如何编写WebAssembly代码。

2017年 微软开始尝试基于WebAssembly使用Mono运行时让.NET进入浏览器,Mono为.NET运行库(.dll)提供了基于WebAssembly运行的环境。运行在Mono之上的是Blazor,一个构建于.NET的单页Web应用开发框架,通过Mono的WebAssembly运行时在浏览器中运行。 经过了3年时间的开发,2020年5月19日在微软年度技术大会Build上正式发布,我们来看一看Blazor将如何改变Web开发。

Blazor是什么?

Blazor 允许您使用 C# 而不是 JavaScript 构建交互式 Web UI。

  • Blazor 应用由使用 C#、HTML 和 CSS 实现的可重用 Web UI 组件组成。
  • 客户端和服务器代码都用 C# 编写,允许您共享代码和库。

在很长一段时间内,我们构建了仅在服务器上运行的应用程序,使用ASP.NET、PHP 等技术,在服务端生成了要推送到浏览器的 HTML 文件。我们始终与 JavaScript 和 AJAX 有一些交互性,但多年来,大多数业务逻辑都处理在服务器本身上,吐出 HTML 页面进行交互,浏览器只是一个文档查看器。

浏览器里很多年也是IE 当道,直到Chrome 这个浏览器的出现,IE 11之后微软重新用Chrome的心脏置换了Microsoft Edge,慢慢的改变了我们前端开发的模式,进入了单页面应用程序时代,这个时代的典型代表就是Angular,React和Vue。我们在浏览器里运行JavaScript构建的完整应用程序,见过大量的.NET程序员转战前端战场。 我们拆分业务逻辑,做到前后端分离架构,以便某些逻辑在浏览器上运行,有些在服务器上运行。JavaScript 应用程序运行客户端并使用消息传递与"服务器"通信。您可以轻松地将"服务器"替换为云中的服务或应用程序,但模型仍然相同。

Blazor 借助于WebAssembly技术 改进这种前后端分离的模式,他有两种模式支持:Blazor WebAssembly 应用和Blazor Server ,个人认为Blazor Webassembly 模式的应用才是这种前后端分离的正途:

浏览器充当应用程序的宿主。在 Blazor WebAssembly 应用程序中构建的文件将编译并发送到浏览器。然后,浏览器在浏览器的执行沙盒中运行您的 JavaScript、HTML 和 C#。它甚至运行 .NET 运行时的版本,这个运行时处理 JavaScript 互操作,并提供基本服务(如垃圾回收)和更高级别的功能(布局、路由和用户界面小部件等)。换句话说,blazor使用了一个驻留在另一个虚拟机中的虚拟机,堪称《盗梦空间》级别的悖论,也是一种在浏览器中运行非 JavaScript 应用程序框架的巧妙方法。这意味着您可以在浏览器中执行对 .NET 的调用,并且它是浏览器中成熟的应用程序。它甚至可以脱机运行。

运行时使得blazor 和 WebAssembly 上运行的其他语言与众不同,MonoCLR 编译为WebAssembly。任何.NET Standard 2.1的代码都可以在上面运行,这样就可以把.NET生态的大量库带到前端开发,其他的语言只实现了直接编译为WebAssembly,blazor当前利用WebAssembly 的一个独特创新。

为什么这是很酷的:
  • 您可以在任何静态文件服务器上运行它(Nginx、ISS、Apache、S3、Heroku 等)

  • 它以WebAssembly 运行 JS,以接近本机的速度运行 C#。
  • 您可以使用 C# 开发丰富的前端应用程序。
  • 后端的API服务可以是任何语言,比如Java,PHP,Python,go

  • 重用 .NET 组件
  • 使用 Microsoft 工具(Visual Studio和Visual Studio Code)和调试

这非常适合低延迟应用程序,如游戏。如果您不需要与服务器通信,则无需与服务器通信。您可以下载应用程序并在浏览器中脱机运行该应用程序。

一些缺点:
  • 首次需要下载 .NET 框架和其他运行时文件(一次)

  • 您仅限于浏览器的功能
  • 在本地下载的所有机密(凭据、API 密钥等)
  • 并非兼容所有 .NET 框架组件

有这些缺点也正是Blazor Server应用程序模型可以弥补,可以拥有要.NET的全部功能和瘦客户端。

.NET切入Web开发的一个特殊优势,就是有了可以替换npm和WebPack的工具。 作为一个多年的.NET程序员,我可以向NuGet(包管理程序)和MSBuild招手了。对我而言,这些工具问题少,更熟悉,且效率也高得多。尽管没有完美的事物,但我使用NuGet和MSBuild的体验一直是很好的。这里不要误解我的意思,不是npm和Webpack不好,希望大家放弃它们,但反之也一样。npm和WebPack都是伟大的工具,还会存在相当长的时间。如果你的JavaScript工具用来创建Web应用很好使,那没问题。基于我对Web开发多年的认知,我明白为什么会出现npm和WebPack,也对它们取得的成熟和将要做出的贡献表示赞赏,微软也是花了大价钱把npm的提供商收至麾下,微软肯定不是傻子。 
Blazor让我非常震撼的是它使用起来非常简单。公平地说,我承认Blazor的生态还不够完善,大量的利用前端技术圈的成果的开源项目正在不断涌现。Blazor把简单易用的Razor(UI)与其他.NET核心概念组合起来:依赖注入、配置、路由。而且从Angular及React等流行JavaScript框架借用了最佳模式,同时利用了Razor模板,并提供了与其他.NET惯例的一致性。这些功能的组合支持前所未有的技能重用。
使用WebAssembly并不意味着可以抛弃JavaScript。 WebAssembly眼下还只能被JavaScript加载和编译。(没错,这有点乱。)虽然未来的计划让WebAssembly模块可以像ES6模块一样被浏览器加载,但JavaScript还是启动WebAssembly必需的。JavaScript的必要性还不止于此。WebAssembly自身无法访问任何平台API,而要访问这些API,JavaScript也是必要的。开发者可以通过Blazor interop在 WebAssembly自身不足时把JavaScript作为后备,此外这个交互机制也是一个抽象层,很多使用C#的程序员都会用到,他们不必担心底层运行的还是JavaScript。

是不是使用C#开发Web 让你激动, WebAssembly及ASP.NET Core的Blazor等框架就值得投入一些时间了呢?至少我学了那么多年.NET,现在终于可以用它来更快地做Web开发了,还是很值得炫耀的,这也是我有动力写这篇文章的原因。不仅如此,我其实也很熟悉JavaScript,而且还在不断学习。作为一个工程师,拥有这些技能就有了解决问题的思路。

别了,JavaScript;你好,Blazor的更多相关文章

  1. Javascript—①你好,世界!

    新手Perfect教程之Javascript教程①-你好,世界! 前言:不知道Javascript是什么东东的自行度娘或google一下 Javascript在html<head>和< ...

  2. JavaScript 你好!

    JavaScript简介 开发时间:1995年 开发目的:一开始的目的是处理以前由服务器端语言(如perl)负责的一些输入验证操作. 现状:现在的用途不再局限于简单的数据验证,而是具备了与浏览器窗口及 ...

  3. javascript之url转义escape()、encodeURI()和decodeURI()

    我们可以知道:escape()除了 ASCII 字母.数字和特定的符号外,对传进来的字符串全部进行转义编码,因此如果想对URL编码,最好不要使用此方法.而encodeURI() 用于编码整个URI,因 ...

  4. javascript之url转义escape()、encodeURI()和decodeURI(),ifram父子传参参数有中文时出现乱码

    ifram父子传参参数有中文时出现乱码,可先在父级页面用encodeURI转义,在到子页面用进行decodeURI()解码 我们可以知道:escape()除了 ASCII 字母.数字和特定的符号外,对 ...

  5. Blazor VS 传统Web应用程序

    原文作者: Christian Findlay 原文链接: https://christianfindlay.com/2020/07/09/blazor-vs-traditional-web-apps ...

  6. Blazor VS Vue

    Vue--​​两分钟概述 Vue 是一个JavaScript 框架. 在其最简单的模式中,您可以简单地将核心 Vue 脚本包含在您的应用程序中,然后开始构建您的组件. 除此之外,对于更复杂的应用程序, ...

  7. ApacheCN Asp.NET 译文集 20211126 更新

    ASP.NET Core2 基础知识 零.前言 一.搭建舞台 二.控制器 三.视图 四.模型 五.验证 六.路由 七.RestBuy 八.添加功能.测试和部署 ASP.NET Core3 和 Angu ...

  8. jQuery 之正则表达式篇

    从本文开始,我将陆续的更新关于jQuery源代码的博客.首先,jQuery源代码分析一直是我的一个计划和追求.查看jQuery源代码,探索大牛们深邃的思想,精神的碰撞.Google 搜索不难发现,探索 ...

  9. 【转】encodeURI和decodeURI方法

    为什么要两次调用encodeURI来解决乱码问题 https://blog.csdn.net/howlaa/article/details/12834595 请注意 encodeURIComponen ...

  10. [翻译]ASP.NET Core在 .NET 5 Preview 7的更新

    .NET 5 Preview 7现在可以用了,可以进行评估了.这是此版本中的新增功能: Blazor WebAssembly应用程序现在针对.NET 5 更新了Blazor WebAssembly的调 ...

随机推荐

  1. MODIS系列之NDVI(MOD13Q1)二:modis数据相关信息

    1.MODIS数据的特点 (1)全球免费:NASA对MODIS数据实行全球免费接收的政策(TERRA卫星除MODIS外的其他传感器获取的数据均采取公开有偿接收和有偿使用的政策),这样的数据接收和使用政 ...

  2. Linux c++ vim环境搭建系列(3)——Ubuntu18.04.4编译安装youcompleteme

    3. youcompleteme编译安装 参考网址: https://github.com/ycm-core/YouCompleteMe#linux-64-bit 建议不要用这个博客的方法: http ...

  3. std::string构造函数

    string(); string (const string& str); string (const string& str, size_t pos, size_t len = np ...

  4. 加锁的位置 (eq:map<key,map<>> 双集合 怎么 只加锁 在用到的对象位置,而不是把整个集合锁住)

    比如上边的map里套map 定义变量为data,例如组队副本 npc 为1 下有众多房间 即Map<1,<roomId,room>> ,处于多线程下,一个线程在 npc为1的下 ...

  5. 跳转语句break与continue的使用环境

    break:改变程序控制流 常用于do-while.while.for .switch循环中,终止某个循环,程序跳转到循环块外的下一条语句 continue:跳出本次循环,进入下一次循环

  6. 获取SVG中g标签的宽度高度及位置坐标

    1. 问题的出现 对于普通的HTML元素,有很多获得其宽度width.高度height.距左left.距顶top等属性的方法: 类似offsetWidth,clientWidth,width之类的,通 ...

  7. 资料整理:python自动化测试——操作测试对象

    文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:爱吃米饭的猪 PS:如有需要Python学习资料的小伙伴可以加点击下方链接自 ...

  8. 接口测试中实际发生的几个问题——python中token传递

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:AFKplayer PS:如有需要Python学习资料的小伙伴可以加点 ...

  9. L12 Transformer

    Transformer 在之前的章节中,我们已经介绍了主流的神经网络架构如卷积神经网络(CNNs)和循环神经网络(RNNs).让我们进行一些回顾: CNNs 易于并行化,却不适合捕捉变长序列内的依赖关 ...

  10. D. Minimax Problem Codeforces 1288D binary_search+二进制

    题目大意:n*m的矩阵中,找到两行数,可以形成两个一维数组,数组1的位置i和数组2的位置i去最大构成新数组b的元素b[i],最终目的要使数组b中最小的数尽可能的大 题解: m的范围是(1,8),比较小 ...