通过Blazor使用C#开发SPA单页面应用程序(1)

2019年9月23——25日 .NET Core 3.0即将在.NET Conf上发布! .NET Core的发布及成熟重燃了.net程序员的热情和希望,一些.net大咖也在积极的为推动.NET Core而不懈的努力。在这次.NET Core 3.0中一项新的技术也首次出现在人们的视野,这就是Blazor。说起Blazor也许许多人并不知晓,但这几年一片热火朝天的Angular,React,Vue等前端技术估计无人不知无人不晓。对Blazor就是Microsoft提供的使用C#构建SPA的技术,虽然他姗姗来迟,但带给了大家一个与Angular,React,Vue等框架完全不一样的体验、完全不一样的架构。

    由于这是一个全新的技术,目前学习资料非常有限,我将自己学习到的内容记录汇总在这里以便查阅,也给感兴趣的童鞋提供参考。

1.    简介

    Blazor是一个新的Web UI框架,使用C#,Razor和HTML以及WebAssembly (W3C标准)。它允许您使用C#而不是JavaScript构建交互式Web UI。Blazor应用程序由使用C#,HTML和CSS实现的可重用Web UI组件组成。客户端和服务器代码都是用C#编写的,允许您共享代码和库。

2.    在WebAssembly或服务器上运行

    Blazor可以使用WebAssembly直接在浏览器中运行客户端C#代码。因为它是在WebAssembly上运行的真实.NET,所以您可以从应用程序的服务器端部分重用代码和库(客户端渲染)。

或者,Blazor可以在服务器上运行您的客户端逻辑。客户端UI事件使用SignalR(实时消息传递框架)发送回服务器。执行完成后,所需的UI更改将发送到客户端并合并到DOM中(服务器端渲染)。

3.    Web Assembly (Wasm)

    基于W3C开放标准,用于在浏览器中运行低级字节代码。使用此标准,我们可以直接在浏览器中运行服务器端语言(Rust,C ++,C#...)而不是Javascript。

    还记得Java applet和Microsoft Silverlight吗,我们必须在浏览器中安装插件来运行Java和C#代码,但是WebAssembly提供了基本标准,现在我们不需要任何插件,他的二进制格式以.wasm文件表示,能够提供接近本机的性能。

4.    建立在开放的Web标准之上

    Blazor使用开放的Web标准,没有插件或代码转换。Blazor适用于所有现代Web浏览器,包括移动浏览器。

    在浏览器中运行的代码在与JavaScript框架相同的安全沙箱中执行。

Blazor 客户端渲染支持的浏览器

浏览者

版本

Microsoft Edge

当前

Mozilla Firefox

当前

Google Chrome, 包括 Android

当前

Safari, 包括 iOS

当前

Microsoft Internet Explorer

不支持 *

* Microsoft Internet Explorer 不支持WebAssembly。

Razor 服务器端渲染支持的浏览器

浏览者

版本

Microsoft Edge

当前

Mozilla Firefox

当前

Google Chrome, 包括 Android

当前

Safari, 包括 iOS

当前

Microsoft Internet Explorer

11x17 *

*需要额外的填充代码 (例如, 可通过Polyfill.io捆绑添加承诺)。

5.    单页面应用程序(SPA)

    单页面应用程序(SPA)是一种构建在浏览器中单个页面上的Web应用程序,页面块可以动态呈现而无需呈现完整的页面。

Angular,React,Vue和许多其他语言为构建SPA提供了支持,但所有这些语言都构建在相同的Javascript语言之上。现在,Microsoft提供了使用C#和Razor页面构建SPA的基础,类似ASP.Net Core中的语法,所以它被称为Blazor。

    Blazor是ASP.Net Core提供的新的Web框架,用于在浏览器中使用C#和WebAssembly标准构建SPA。

    ASP.Net Core是一个在Linux,Mac或Windows操作系统上运行的开源Web框架。

6.    JavaScript互操作

    C#代码可以轻松调用JavaScript API和库。在C#中编写逻辑时,您可以继续使用存在于客户端UI中的大型JavaScript库生态系统。当然如果愿意您还可以从 JavaScript 调用 .NET 实例方法和静态方法。

7.    优点

  • 受益于 .NET 的性能、可靠性和安全性,提供近乎原生的性能,高效且便携

  • 使用 C# 代替 JavaScript 来编写代码。

  • 利用现有的 .NET 库生态系统,我们可以在网页中使用现有的丰富.net生态系统功能。

  • 在服务器和客户端之间共享应用逻辑。

  • 始终高效支持 Windows、Linux 和 macOS 上的 Visual Studio。

  • 以一组稳定、功能丰富且易用的通用语言、框架和工具为基础来进行生成。

  • 代码维护和调试更可靠。

8.    缺点

  • Javascript已经非常成熟,许多组件库已经存在于市场中。

  • 具有Web Assembly标准的Blazor是市场上的新手,需要时间才能成熟,而且.net是WebAssembly众多实现中的早期版本。

原文链接:https://www.cnblogs.com/liuxtj/p/11344539.html


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

640?wx_fmt=jpeg

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/314386.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于 WPF 模块化架构下的本地化设计实践

背景描述最近接到一个需求,就是要求我们的 WPF 客户端具备本地化功能,实现中英文多语言界面。刚开始接到这个需求,其实我内心是拒绝的的,但是没办法,需求是永无止境的。所以只能想办法解决这个问题。首先有必要说一下我…

你会轻易打破规则吗?

这里是Z哥的个人公众号每周五11:45 按时送达当然了,也会时不时加个餐~我的第「86」篇原创敬上俗话说的好,不以规矩,不成方圆。但是有些时候,可能破坏规则反而是一个更有效的方式,这个时候到底该…

架构杂谈《十》

常用开发模式一、瀑布式开发瀑布式开发是在1970年提出的软件开发模型,是一种较老的计算机软件开发模式,也是典型的预见性的开发模式,在瀑布式开发中,开发严格遵循预先计划的需求分析、设计、编码、集成、测试、维护的步骤进行&…

如何删除GIT仓库中的敏感信息

1. 前言正常Git仓库中应该尽量不包含数据库连接/AWS帐号/巨大二进制文件,否则一旦泄漏到Github,这些非常敏感信息会影响客户的信息安全已经公司的信誉。公司可能其它还有相关规定,如禁止私人邮件加入GIT仓库。如果违反这些规定,可…

ASP.NET Core on K8S深入学习(4)你必须知道的Service

本篇已加入《.NET Core on K8S学习实践系列文章索引》,可以点击查看更多容器化技术相关系列文章。前面几篇文章我们都是使用的ClusterIP供集群内部访问,每个Pod都有一个自己的IP地址,那么问题来了:当控制器使用新的Pod替代发生故障…

博客园翻车启示录

开发者的日常作为一名996的开发者,我几乎每天只有两件事,制造bug和解决bug,这两件事,既替我解决了温饱问题、也替产品经理、测试工程师等一票人解决了吃穿问题。嗯,有人为我这种程序员评了一个等级,我大概是…

asp.net core 从单机到集群

asp.net core 从单机到集群Intro这篇文章主要以我的活动室预约的项目作为示例,看一下一个 asp.net core 应用从单机应用到集群部署需要做什么。示例项目活动室预约提供了两个版本,集群版和 单机版单机版方便部署,不依赖其他环境,数…

通过Blazor使用C#开发SPA单页面应用程序(3)

通过Blazor使用C#开发SPA单页面应用程序(1)通过Blazor使用C#开发SPA单页面应用程序(2)今天我们来看看Blazor开发的一些基本知识。Blazor中组件的基本结构可以分为3个部分,如下所示://Counter.razor//Directives section 指令部分page "/counter&qu…

ASP.NET CORE 2.* 利用集成测试框架覆盖HttpClient相关代码

ASP.NET CORE 集成测试官方介绍我的asp.net core 项目里面大部分功能都是去调用别人的API ,大量使用HttpClient,公司单元测试覆盖率要求95%以上,很难做到不mock HttpClient 达到这个指数。以下方法是我自己总结的在单元测试里 mock httpClien…

Let's Encrypt网站推出中文版

如今很多网站都强制使用 HTTPS 加密协议访问,安全性有了很大的提高,最起码在数据传输的初始阶段数据包不会被劫持,保证了客户端与服务器端的通讯安全性。说到 HTTPS 加密协议,就不得不提 Let’s Encrypt。Let’s Encrypt 是一家不…

使用WebDeploy部署远程IIS网站

目录 使用WebDeploy部署远程IIS网站后台服务部署服务器配置本地WebDeploy发布文件配置前端页面部署WebDeploy服务端配置WebDeploy发布文件配置使用WebDeploy部署远程网站后台服务部署服务器配置打开IIS管理器(开始->控制面板->管理工具->IIS管理器)添加网站(右键网站…

CF436F Banners(分块/凸包/单调队列)

CF436F Banners 首先有n个物品分别有ai和bi,然后定义价值为 c∗wp∗(ai大于p且bi小于c的用户个数)c*wp*(ai大于p且bi小于c的用户个数)c∗wp∗(ai大于p且bi小于c的用户个数) 然后我们需要求解对于每一个c的最大价值和对应的p 首先我们先枚举c,然后每次加…

译 | 改进 Visual Studio 及 Windows 上 .NET Core 的安装体验

点击上方蓝字关注“汪宇杰博客”原文:Lee Coward翻译:Edi Wang导语Visual Studio 2019 16.3 和 .NET Core 3.0 Preview 7 改进了 Windows 上 .NET Core 的安装体验。目标是减少计算机上可能存在的 .NET Core 版本的数量。这些改进基于客户反馈和我们自己…

SonarQube系列三、Jenkins集成SonarQube(dotnetcore篇)

来源:https://www.cnblogs.com/7tiny/p/11348785.html【前言】本系列主要讲述sonarqube的安装部署以及如何集成jenkins自动化分析.netcore项目。目录如下:SonarQube系列一、Linux安装与部署SonarQube系列二、分析dotnet core/C#代码SonarQube系列三、Jen…

CF198D Cube Snake(三维空间/增量构造)

CF198D Cube Snake n<50 显然是一个构造题&#xff0c;然后很容易想到增量构造&#xff0c;可以考虑每次保证一层值域连续&#xff0c;然后再增加一个值域连续的层&#xff0c;就会产生两个值域连续的正方体&#xff0c;但是只移动头是不够的&#xff0c;所以我们还需要移…

发布ABP v0.19包含Angular UI选项

ABP v0.19已发布,包含解决的~90个问题和600次提交.新功能Angular UI终于,ABP有了一个SPA UI选项,使用最新的Angular框架.Angular的集成不是简单地创建了一个启动模板.创建了一个基础架构来处理ABP的模块化,主题和其他一些功能.此基础结构已部署为NPM包.为帐户,身份和租户管理等…

P4151 [WC2011]最大XOR和路径(线性基应用)

P4151 [WC2011]最大XOR和路径 思路 如果单纯的只是树形图&#xff0c;那么答案显然易见只有一种&#xff0c;也就是从头到尾的路径从头到尾的异或值&#xff0c;但是这里不同的就是有可能在道路上有许多的环。 题目有一个重点提示的一句话 理解这句话之后那么我们可以显然…

Docker(一)-CentOS7中安装Docker视频教程

一、前言Docker的使用越来越多&#xff0c;安装也相对简单。本文使用视频的方式展示在CentOS7系统中安装Docker&#xff0c;本文更适合于准备入门学习Docker的童靴&#xff0c;同时也欢迎各路大神给我们指点提建议。二、环境CentOS7三、安装Docker确认Linux内核版本# uname -a卸…

CF773E Blog Post Rating(推导min的通项/线段树)

CF773E Blog Post Rating 现在有一个值F&#xff0c;每次如果序列加入一个数后重新排列&#xff0c;每次如果F小于期望值&#xff0c;就会1&#xff0c;如果等于就不变&#xff0c;如果大于就-1&#xff0c;求解每一次加入后F的最大值。 这道题的确是非常的巧妙&#xff0c;尤…

用Keras.NET 做一个图像识别的训练

.NET Core 的应用场景越来越广&#xff0c;开源社区也不断壮大&#xff0c; .NET Core在机器学习领域不断发展ML.NET外&#xff0c;也通过结合Tensorflow.NET去完善ML.NET在深度学习领域的功能&#xff0c;在ML.NET 1.3开始迈出了非常重要的一步。这不仅是微软拥抱开源的策略&a…