• 面试官:你刚说你喜欢研究新技术,那么请说说你对 Blazor 的了解


    阅读本文大概需要 1.5 分钟。

    最近在几个微信 .NET 交流群里大家讨论比较频繁的话题就是这几天自己的面试经历。

    面试官:“你刚说你喜欢研究新技术,那么你对 Blazor 了解多少?”。

    作为一位专注于 .NET 开发的软件工程师,你好意思说你对 Blazor 一点也不解吗?.NET 新技术也就是那么几个,连微软最近在逛推的 Blazor 你都不了解,你好意思说你喜欢研究新技术?

    讲真,确实有很多童鞋对 Blazor 还不了解,平时埋头写代码改 Bug,哪有时间去研究 Blazor,再说这种玩意儿公司会不会采用还是个很大疑问呢。是这个理,但如果等你的公司(国内使用了.NET 技术的公司)都开始使用 Blazor 了,Blazor 还能算是新技术吗?出于真正对技术的兴趣和热爱,对于新技术,有人会主动地去了解(不一定要研究得很深),而不是等到需要用的时候再去了解。至少他们会知道新技术有哪些优点,在公司技术选型上就可以给到自己的意见甚至推广新技术的使用,这可能就是他们和普通程序员拉开差距的原因之一。

    不管你是真对 Blazor 感兴趣,还是只是为了应付面试,作为 .NET 开发者,你没用过 Blazor,至少应该了解一下吧,哪怕是花个一两分钟看看这篇文章的介绍。

    使用 C# 实现 Web 交互式 UI

    Blazor 允许你使用 C# 来实现 Web 交互式 UI,而不需要使用 JavaScript。尽管 JavaScript 的生态很强大,但这种弱类型语言在业务逻辑比较复杂的大型 Web 开发上还是存在较大的缺陷。当然,经过几年的发展 JavaScript 的弱类型问题可以通过工程手段来解决,甚至使用 TypeScript 来替代,但在实现可重用组件上还是有诸多的不理想。

    Blazor 应用可以使用 C#、HTML 和 CSS 实现可重用 Web UI 组件,客户端和服务器代码都用 C# 编写的,允许你共享代码和库。Blazor 是 ASP.NET Core 的一个新特性,所以可以很好的集成到 ASP.NET Core MVC/Razor Pages 应用中。

    下面是一段来自于模板的 Blazor 代码:

    @page "/counter"
    
    <h1>Counter</h1>
    
    <p>Current count: @currentCount</p>
    
    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
    
    @code {
        private int currentCount = 0;
    
        private void IncrementCount()
        {
            currentCount++;
        }
    }
    

    在 WebAssembly 或服务器端运行

    Blazor 支持两种运行方式,一是在客户端使用 WebAssembly 运行,二是在服务器端运行直接渲染到浏览器。

    Blazor 可以使用 WebAssembly 直接在浏览器中运行客户端 C# 代码,正因为它是运行在 WebAssembly 上的 .NET 程序,所以客户端也可以重用服务器端的代码和库。

    即使不使用 WebAssembly,Blazor 也可以在服务器端运行客户端的业务逻辑。客户端 UI 事件使用实时消息框架 SignalR 发送回服务器,一旦执行完成,所需的 UI 更改将发送到客户端渲染到 DOM 中。

    目前主流开发单页应用(SPA)使用 Vue 或 React 的很多,但要实现服务器端渲染(SSR),还是挺麻烦的,尽管有现成的像 Next.js 或 Nuxt.js 这样的框架可以使用,但由于它们更新迭代比较快,依赖的 npm 包多而杂,后期维护和升级成本也很高。所以从 SSR 支持这一点来讲,Blazor 应用还是有明显优势的。

    基于开放的 Web 标准

    通常是为了使用统一的编程语言或使用统一的标准,常见的做法是将一种编程语言编写的代码转换为另一种编程语言,比如将 TypeScript 编写代码转换成 JavaScript 以便在浏览器中运行。而 Blazor 使用的是开放的 Web 标准,不需要额外的插件或代码语言转换。Blazor 可以在所有主流的 Web 浏览器中工作,包括移动端浏览器。

    在客户端运行 Blazor 代码和 JavaScript 框架一样是在安全的沙箱中执行的,在基于开放的 Web 标准基础上,Blazor 具有服务器端代码的灵活性,比如直接连接数据库。

    和 JavaScript 交互

    在 Blazor 应用中,你可以在 C# 代码中调用 JavaScript 代码,也可以在 JavaScript 代码中调用 C# 代码,两者可以很容易实现交互操作。好处是,在使用 C# 编写业务代码时,你依然可以继续使用现有庞大的 JavaScript 库生态系统。当使用服务器端运行代码时,Blazor 会负责在客户端使用 JavaScript 无缝调用 C# 代码。

    下面是一个 JavaScrit 调用 C# 的示例[2]

    先使用 JSInvokable 特性标注一个 C# 方法为允许 JavaScript 调用:

    <button type="button" class="btn btn-primary"
            onclick="exampleJsFunctions.returnArrayAsyncJs()">
        Trigger .NET static method ReturnArrayAsync
    </button>
    
    @code {
        [JSInvokable]
        public static Task<int[]> ReturnArrayAsync()
        {
            return Task.FromResult(new int[] { 1, 2, 3 });
        }
    }
    

    然后在 JavaScript 代码中调用 C# 代码:

    window.exampleJsFunctions = {
      ...
      returnArrayAsyncJs: function () {
        DotNet.invokeMethodAsync('BlazorSample', 'ReturnArrayAsync')
          .then(data => {
            data.push(4);
              console.log(data);
          });
      },
      ...
    };
    

    其它

    对我来说 Blazor 最吸引的优点是前后端代码的共用以及组件的重用。通过 nuget 管理包不仅比 npm 方便,而且体积也小很多。

    Blazor 的生态也正逐步发展起来了,虽然还没有听说哪个大公司在用,但 Blazor 的理念是未来趋势,值得你花点时间了解和研究一下。

    参考:

    [1]. http://dwz.win/EU4
    [2]. http://dwz.win/EU3

  • 相关阅读:
    String类
    数学类
    同一场景下多个图层之间的调用
    茶壶在触摸机制下旋转的三种方式
    犀牛3D模型下载
    纹理--高清设计素材下载
    cocos2d-x-2.x与3.x帧动画实现方式的改变
    toast提示框的实现
    MenuItem创建注意事项
    Cocos2d-x 面试题解 整理01
  • 原文地址:https://www.cnblogs.com/willick/p/13193234.html
Copyright © 2020-2023  润新知