基于.Net Core 建造React Web 应用

[lietoumai]

我很高兴的宣布 dotNetify-React 发行Beta版了。这是个免费的，开源的项目，可以让你的React 前端应用和.Net 核心后端整合，他可以在任何系统上运行：Window,Linux和Mac.并且他会免费给你的APP实时性.

React + .NET Core
React 很流行，不光因为性能，可伸缩性，并且，至关重要的一点，新开发者源源不断的加入

React有一个非常不同的开发范式：他使用JS去构建HTML，而不是用我们已经习惯的内联JavaScript或指令来构建HTML模板。我最初对这玩意并不是特别感冒，但我越学越上瘾，特别是由于React团队的技术决策，让他自然地以组件为导向，有单向的数据流和简单的状态管理。

React本质上是一个视图库，并且并不打算成为一个包罗万象的架构，他向像我这样的.NET开发者提供了建造一个既是交互式的，快速的，也可以是实时的，也可以是后端驱动的跨平台.net Web应用的机会。

当.NET 平台显得陈旧，团队成员依然做了一些相当棒的工作.ASP.NET核心的性能是现成的，像Visual Studio Code这样的工具也是很赞的，而且与Docker和NodeJS这样的非微软技术更好的集成使得它对于.Net开发人员具有特别的前瞻性和友好度。

结合React和.Net平台可以很让人期待，因为它有可能为web应用程序开发提供一个非常模块化的、基于组件的方法，我们将在下面探索。

后端视图模型
为什么后端驱动?现代web开发总是会让您使用JavaScript开发一个臃肿的客户端应用程序，并限制您的后端只将数据服务于无状态api。虽然解决了过去的问题，但也不是没有缺点。其中一个是语言选择，你真的没有。并不是说JavaScript没有在语言功能上取得重大进展，而是在我的主观体验中，c#和.NET仍然提供了最好的开发体验。

另一个缺点是用户必须下载到他们的设备上的代码量，因为您必须在客户端编写处理状态管理和数据驱动操作的应用程序逻辑，而不是简单的UI呈现逻辑。在一个相当复杂的web应用程序中，很容易让客户端膨胀到非ui的问题，并且增加了维护难度。

但做后端驱动的web应用程序是一个苦差事，当下主流观念觉得它已经是过去的东西，不可能具有高交互性、快速或可延展性。不，所有的东西都必须在后台无状态，他们这么觉得，否则你就不能扩展!然而，像Spotify这样规模的公司如今正在这样做。(我在这篇文章中跟踪了工程师，他们证实了他们的新架构没有可延展性问题)。

我想要对dotNetify-React 做的是，给开发后端驱动的现代web应用程序一个选择，这样你就能保持前端的小而美。但不仅如此，在不断变化的web开发环境中，它必须非常简单易用，并给人一种稳定的感觉。

DotNetify-React

该项目的策略是将MVVM模式深入其中，强化前端视图和后端视图模式之间的明确分离。

MVVM中的视图模型不仅仅是一个数据传输对象，而是一个抽象的视图，它不仅服务于数据，而且还承载应用程序逻辑来完成一个用例。它使用依赖注入从较低的服务层获取数据(在dotNetify中，您可以使用您最喜欢的IoC容器，或者退回到ASP.NET Core DI)。

当视图模型处理数据驱动操作时，视图只能关注UI特定操作和可用性优化。当您可以选择在后端管理您的应用程式状态而不仅仅只是前端时，他会在前端上变得轻量和易于管理。

使这项工作的一个重要因素是在客户端的视图和服务器上的视图模型之间实现实时的双向通信。这通过使用SignalR抽象的WebSockets技术来解决。即使在较差的网络连接中，抽象也是可靠的，而未来的SignalR .NET Core版本将会更加强大。

在最基本的形式中，您可以使用dotNetify-React来填充React组件的初始状态。例如，这是一个简单的React HelloWorld组件：

import React from 'react';import dotnetify from 'dotnetify';
export default class HelloWorld extends React.Component {
constructor(props) {
super(props);

    dotnetify.react.connect("HelloWorld", this);
    this.state = { Greetings: "", ServerTime: "" };
}

render() {
    return (
        <div>
            {this.state.Greetings}<br />
            Server time is: {this.state.ServerTime}
        </div>
    );
}

}

在React的构造中，只需添加一个连接API到以C＃编写的视图模型名称中去。在后端，视图模型如下所示：

public class HelloWorld : BaseVM
{
private Timer _timer;
public string Greetings => "Hello World!";
public DateTime ServerTime => DateTime.Now;

public HelloWorld()
{
_timer = new Timer(state =>
{
Changed(nameof(ServerTime));
PushUpdates();
}, null, 0, 1000); // every 1000 ms.
}
public override void Dispose() => _timer.Dispose();
}

app开始时，不仅仅是“Hello World !”“文本被发送到React视图，但使用更改和PushUpdates API，您实际上可以实时地将数据推送到浏览器。”注意，这里没有AJAX请求，也没有可以编写的RESTful Web API。通信基础结构被dotNetify分离的，因此您可以更多地关注应用程序逻辑。

现在您已经看到了这个，您已经看到了大多数dotNetify的APIS!当你只有少量的api需要记忆时，学习曲线是微乎其微的。

开始运行吧
我在项目网站上为一个实时的“Hello World”应用程序创建了非常简单的步骤，这样人们就可以尝试它，并立即启动并运行。你有三个选择:试试.NET Core CLI(如果你想在Linux或Mac上试用它)，Visual Studio 2017 + WebPack，或者Facebook自己的create-react-app + NodeJS +.NET Core。

在新的React项目中使用reate-react-app有一个明显的优势，它将所有有用的web库打包，并为您配置它们，最明显的WebPack功能是使您的浏览器在前端文件如JSX文件更改时自动重新加载。我们也可以通过使用 .Net Core 中称为“dotnet watch”的功能来为c#文件做类似的事情。

这很好地解放了生产力，因为我们在每次有变化的时候，可以跳过停止、重新编译、重新运行和重新加载的循环。

https://github.com/dsuryd/dotnetify.

原文出处
https://www.codeproject.com/Tips/1177581/Building-React-Web-Apps-on-NET-Core