渐进式web全栈:blazor web app

前言

本文要说的这种开发模式,这种模式并不是只有blazor支持,js中有一样的方案next.js nuxt.js;blazor还有很多其它内容,本文近关注渐进式开发模式。

是的,前后端是主流,不过以下情况也许前后端分离并不是最好的选择:

  • 小公司,人员不多,利润不高,创业阶段能省则省
  • 个人开发者,接接私活,要么一个人全栈,累点;要么弄个小团队,各自分钱少点;
  • 不确定项目能做到啥程度,希望快速上线看效果,效果好继续,效果不好拉倒
  • 厌烦写js,又不得不做bs界面

诸如此类,不分离开发更简单,更省成本。

渐进式

vue是渐进式web前端框架,所谓的渐进式就是你不用一开始就整个项目全部使用vue,因为开始你可能并不熟悉vue,而是开始只使用vue的些简单功能,慢慢用它更复杂更好的功能,最终项目可能完全使用vue。

渐进式blazor不是官方名词,我随便喊的,它的意思是你不必一开始就使用前后端分离模式,而是用不分离模式简单的、快速开发、快速交付,后期如果用户量大了,你可以把一个或几个页面或组件变成分离模式,逐渐的变,最终可能把整个项目变成分离模式。俗话说:你可能还在画原型,而我的产品就是原型。

blazor是使用c#代替js写前端的web框架,它有如下几种渲染模式:

  1. 静态渲染:也称ssr,类似jsp、php、asp,由后端渲染静态html,所以你可以拿blazor来做普通网站,
  2. 服务端渲染:也称server模式,它还是在服务端执行代码,服务端和浏览器会建立一个websocket长连接,前端做了啥操作,消息发到服务器,服务器处理后计算需要改变的ui部分,推送给前端。
  3. 客户端渲染:也称assembly模式,首次访问时,下载dll到浏览器,可以aot发布为原生的webassembly运行,也可以在浏览器的webassembly中跑个小型.net运行时,在它之上跑我们的应用,所以可以理解它是纯前端
  4. auto模式:也称为同构渲染,首次访问以server模式运行,快速响应,且用户可以做任何操作;后台默默下载dll和运行时,之后自动切换为客户端模式,js中有类似的next.js nuxt.js。

.net8以前我们要么选择server模式,要么选择webassembly模式,只能二选难一,前者由于所有代码都在服务端,所以比较耗费服务器资源,但开发简单;后者是标准的前后端分离,不浪费服务器资源,但相对开发麻烦些。

.net8发布后,以前的mvc razorpage blazor server blazo webassembly都可以不用了,只需要创建blazor web app,至于使用哪种模式可以根据需要设置。

blazor的组件开发模式类似:vue组件、winform/webform的用户控件或自定义控件,更详细的请参考官方文档。

来了个单,按照惯例使用前后端分离方式

当然你可以使用其它方案,比如典型的:java提供api + vue前端 ,下图是blazor前后端分离方式,webapi提供接口 + blazor做前端,本质都一样

又来个单,为了简单,用不分离

你可以用php jsp asp等类似的方式,下图是blazor server方式,这个不太一样,blazor server是基于websocket实现交互的组件化开发方式。但总的来说是不分离方式。

用户量多了,不分离模式扛不住,渐进式分离

blazor的auto模式就是类似的模式。用户量大了原来的服务端渲染内存 cpu 都有巨大压力,那我们需要大重构成分离模式吗?no no no,你可以先把某个复杂的、访问频繁的、计算量大的、占用内存高的组件设置为auto模式,这样它最终会运行在客户端,就成了分离模式,又多了段时间,用户量更多了,你就继续改一部分组件,如此这般,用户越来越多,作为分离模式运行的组件越来越多,最终项目可能就变成纯纯的分离模式了。

反过来说,项目用了一段时间,没啥用户,项目死了,起码你前期投入并不多,不必太桑心。

相关推荐
敲开3 天前
centOs配置Docker + Nginx + mongodb实现前后端项目部署
全栈
不想说话的麋鹿8 天前
「项目实战」从0搭建NestJS后端服务(六):日志系统的集成
前端·node.js·全栈
进击的松鼠9 天前
AI 应用多的我眼花缭乱,不妨做个导航试试看
前端·全栈·next.js
上车函予9 天前
🏹从射箭开始的全栈开发之路🏹
全栈
小树ZW11 天前
在centos下部署docker+nginx+qinglong
nginx·docker·全栈
不想说话的麋鹿17 天前
「项目实战」从0搭建NestJS后端服务(一):初始化项目+手把手整合Swagger接口文档
node.js·全栈
全栈派森22 天前
第一个 Web 应用:Hello World
python·全栈
莫循瑾木1 个月前
前端架构师必懂的HTTP缓存优化策略:提速网站的终极武器
前端·面试·全栈
寒山李白1 个月前
什么是全栈?
运维·服务器·前端·后端·ui·部署·全栈
祺曦1 个月前
使用云效实现流水线部署前后端分离的项目
部署·前后端分离·流水线部署