渐进式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模式,这样它最终会运行在客户端,就成了分离模式,又多了段时间,用户量更多了,你就继续改一部分组件,如此这般,用户越来越多,作为分离模式运行的组件越来越多,最终项目可能就变成纯纯的分离模式了。

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

相关推荐
Crazy Struggle6 天前
WinForm 通用权限框架,简单实用支持二次开发
winform·前后端分离·权限管理系统
梦兮林夕14 天前
Next.js 技术选型攻略:最佳实践与工具推荐
前端·全栈·next.js
梦兮林夕14 天前
提升用户体验:Next.js 中的 Loading UI 和流式渲染
前端·全栈·next.js
Xiaobaiforgod15 天前
后端技术进阶知识总结
前端·后端·ai·大模型·llm·全栈
moonless022224 天前
【GISer精英计划_06】WebGIS全栈技术核心以防汛系统为例
websocket·gis·全栈
竺梓君1 个月前
JavaScript内存管理机制解析
javascript·全栈
进击的松鼠1 个月前
【Nuxt 实战】02-集成 Pinia、新增导航栏、暗黑模式
前端·全栈·nuxt.js
控心つcrazy1 个月前
图片渐进式加载优化实践指南
优化·加载·图片优化·渐进式
余生H1 个月前
编程语言的前后端分离:可用JavaScript运行时作为后端的语言及与传统编程语言的对比 -Typescript、Nim、Moonbit
开发语言·javascript·typescript·前后端分离
用户3157476081351 个月前
成为程序员的必经之路” Git “,你学会了吗?
面试·github·全栈