百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

基于NEXT 的全栈开发框架Blitz(nextcode入门)

ccwgpt 2024-11-03 12:46 67 浏览 0 评论

目的

自从前端和后端分离之后,一个产品的实践好像变的不那么容易,因为你必须要找一个懂后端的人,通常是java PHP,这意味开发成本加大。

不过有人可能会说我能力强,node性能太垃圾,然而产品初期最关键的是快速验证想法的可行性(现在觉得vue在这方面做的比react更好)。但是在两个语言之间切换编程总是很别扭。

再谈ssr,刚开始一直不知道什么是ssr,因为像django,egg都会提供一个默认模版解析的模块,用来动态生成网页。

并且随着前端SPA崛起,更多的渲染逻辑都放在了客户端,就有了CSR(客户端渲染)。

让从现在开始直接写前端的人对ssr感到陌生。

SSR说白了就是在服务器端编译好静态页面,然后发送到客户端。

CSR的优点是跟视图相关的操作一股脑的放在了前端。

  • 优点页面切换不会打断用户体验,后面页面的变更也是通过数据更改视图,提高页面渲染速度。
  • 缺点没有了首页加载,也就是用户首次加载会很慢,出现长时间白屏等现象,对于seo不够友好。

纯粹的SSR的优点是对于seo友好,页面快速加载,这方面可以查看hero 生成博客。

  • 优点页面首次渲染快,对于seo友好
  • 缺点页面内容每次都需要全量变更,用户体验不好。

那么现在流行的ssr的策略则是,首次加载ssr,后面的加载通过csr请求数据,部分变更完成。


渲染过程


React SSR 框架 NEXT

NEXT 提供了上面的首次加载SSR后面CSR的解决方案,并通过约定路由,混合SSG(构建时生成)和SSR(服务端渲染)等功能增强用户体验。

但是NEXT 仅仅是一个SSR解决方案,你可以用它搭建一个对于seo友好的前端页面。针对用户并不完全是全栈开发人员,虽然通过一系列配置改动,也可以做到全栈开发。

但仍要花费大量时间去寻找流行的orm框架,团队内约束文件目录命名,api开发规范等,还需要接入性能监控,这些虽然都可以做到,但是其实是很重复的工作,而且需要花费大量成本去做好。

基于NEXT 的全栈开发框架Blitz

Blitz 基于Next 所以便拥有了Next全部的优点。

并且默认集成了

  • orm(对象关系映射)框架 prisma
  • 授权的 passport.js
  • 一个可交互的命令行界面,可以交互当前各种api
  • 一个可视化的数据库网页连接器(不用再找数据库操作软件了)

文档的开篇介绍便说吸取了 Ruby on Rails (这是一个Ruby的web开发框架,崇尚约定优于配置。)

通过约定优于配置,就可以做许多的自动化生成代码。

昨晚试水了一下。

初始化项目

首先是安装需要开代理,他会下载github的一些东西,不过生成文件后也可以直接取消,自己通过npm安装依赖,比他的要快。

bash

blitz new test  
# 生成文件后直接不用他的安装依赖,自己安装
# npm install

# 生成数据库结构
blitz db migrate

然后我们就可以启动服务了

bash

# 在localhost:3000就可以看到应用了
npm start


首页图片


Blitz 查看数据库

通常我们经常需要找一个数据库的gui产品来查看我们的数据,但是Blitz自带一个

bash

# 看数据库
npm run studio


数据库预览


生成代码

通过blitz generate 我们可以生成大量模版代码,提高开发效率

none

blitz generate all project

生成后需要改下 db/schema.prisma

因为自动生成的模版会带一个name属性,很费解,不过blitz时刻提醒你这是alphe版本,也可以理解。

none

model Project {
  id        Int      @default(autoincrement()) @id
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
+  name      String?
}

会自动帮我们生成表单组件,列表页面,详情页面等,也可以选择需要生成什么。

不过暂时没发现如何自定义生成模版,如果有这个表单就会更快。

总结

Blitz 提供了一套开箱即用的全栈开发解决方案,优雅的文件目录约束,让人眼前一亮的交互终端,和数据库操作界面。

从开发成本上来说,极大的降低了开发人员技术选型的成本,快速进入业务开发阶段。

降低代码维护成本,通过约束,再也不用担心代码千人千面,不知道代码目录代表的意思了。

当然也有其不足之处,对于自定义服务支持文档不完善,支持国外多家部署平台Render.com、Vercel
、Heroku,国内服务没有任何支持,不过国内对于前端部署这方面成型的产品好像确实比较少。

细节地方不够完善比如代码生成的模版代码有点死板,不过官方都说了这是 alpha 版本,也是可以接受的。

最后,这是一个未来可期的全栈开发框架,而且有 Ruby on Rails 已经对这种想法做了验证,相信后面的完善,也许Node 就此翻盘,小企业可直接用此降低人工成本,对产品进行快速验证,迭代。

相关推荐

NestJS入门教程系列一

介绍Nest(NestJS)是用于构建高效,可扩展的Node.js服务器端应用程序的框架。它使用渐进式JavaScript,内置并完全支持TypeScript(但开发人员仍然能够使用JavaScrip...

【推荐】一个网盘资源搜索与转存工具,支持移动端与PC端!

如果您对源码&技术感兴趣,请点赞+收藏+转发+关注,大家的支持是我分享最大的动力!!!项目介绍CloudSaver是一个基于Vue3和Express的网盘资源搜索与转存开源实用工具。它支持...

Appium原理精讲

目前使用Appium新版本和旧版本的企业数目都很多,而两个版本的安装过程和api的使用又有较大的区别。但是无论表面上的东东如何变化,内部原理都是一样的。在这里我给大家介绍一下appium的核心,增进大...

Kubernetes最小部署单元Pod

一、Kubernetes与Pod简介在当今云计算和容器化技术盛行的时代,Kubernetes已然成为容器编排领域的中流砥柱。它是一个开源的容器编排平台,由Google基于其内部使用的Bo...

最常用的四种跨域解决方案

前置知识什么是跨域?浏览器发送的请求地址(URL)与所在页面的地址不同(端口/协议/域名其一不同)。简言之,浏览器发出的请求url,与其所在页面的url不一样。此时,同源策略会让浏览器拒收服务器...

Bolt.New —— 全栈AI Web自动编程

Bolt.New是由StackBlitz公司推出的,全栈AI工具,代码编辑、运行、部署,通通一站式搞定。它使用WebContainers技术,无需任何本地安装或配置,在浏览器中,就可以运行完整的No...

Nodejs Express新手教程&高手进阶

NodejsExpress新手教程&高手进阶Express是一个NodeJS平台的框架,主要用于构于Web服务器项目。本文将通过示例介绍适合新手入门的Express基础使用,以及高手进阶知识,如:c...

Express.js 创建Node.js Web应用

Express.js是一个基于Node.js的Web应用框架,框架的设计目的是构建应用的架构和简化应用的开发。框架会解决一些通用的问题,在Express.js中,Express框架会处理如:中间件、代...

JavaScript 的 Express.js 功能及应用场景详解

Express.js是一个基于Node.js的轻量级Web应用框架,主要用于快速构建服务器端应用和API。它的核心功能包括以下关键点:1.路由管理URL路径与HTTP方法映射:通过...

nodejs的express4文件下载

在nodejs的express框架中,下载变得非常简单,就一个方法,res.download()首先express命令行生成项目基本框架:不会的看这里:http://blog.csdn.net/zz...

Express 系列:快速生成一个项目

系列预告本系列将以一个项目入手结合相关技术细节来带领大家一起学习Express这个基于Node.js的后端框架。本文首先将介绍:如何快速的生成一个具有一定结构的Express项目。Express项目结...

nodejs的express自动生成项目框架

nodejs版本为:4.X,express版本为4.X1.全局安装2个模块express、express-generator在命令行输入:npminstall-gexpressnpminsta...

express开发(一)简介与搭建

上周末去了趟上海书城,不愧是上海数得上号的书城,流行的科技书应有尽有,话不多说直接上图。最经典的C语言O(∩_∩)O最流行的java(づ ̄3 ̄)づ超酷的R语言/(ㄒoㄒ)/~~然而,身为一个坚定的前...

Vue+Echarts可视化大屏系统后端框架搭建(附代码)

各位同学,大家好。上节课,前面我们讲解了Vue+Echarts前端部分的设计方法。这节课程,我们开始讲解使用Express进行后端设计的方法。01项目相关理论介绍什么是expressExpress是...

Shopify电商API接口开发

Shopify电商API接口开发上线流程主要包括以下步骤。北京木奇移动技术有限公司,专业的软件外包开发公司,欢迎洽谈合作。前期准备-注册Shopify账号:在Shopify官网注册,用于后续开发测试...

取消回复欢迎 发表评论: