介绍在上一篇文章中,我探讨了三个最流行的Node框架:Express、Koa和Hapi的区别、优点和缺点。在这篇文章中,我们将研究其他三个非常流行的框架之间的区别:Next、Nuxt和Nest。三个框架都是服务端渲染,分别与React、Vue、Angular这三个最流行的前端框架密切相关。我们将基于以下几点进行比较:GitHubStars和npm下载并安装基本的HelloWorld应用程序优点缺点性能社区活动NextNext是一个React框架,允许您使用React构建SSR和静态Web应用程序startGitHubStars:+36,000npm每周下载量:+300,000安装nextreactreact-dom必不可少npminstall--savenext在reactreact-dompackage.json添加脚本如下:{"scripts":{"dev":"next","build":"nextbuild","start":"nextstart"}}next会读取页面目录下的js文件,解析成页面路由文件,在HelloWorld项目中创建目录./pages/index.js。jsfunctionHome(){return
Helloworld!
;}导出默认主页;//npmrundev//然后访问http://localhost:3000好处默认情况下,每个组件都是服务端渲染的自动代码拆分,加速页面加载而不加载不必要的代码简单的客户端路由(基于Page)Webpack-基于开发环境,支持模块热更新(HMR)获取数据非常简单支持任何NodeHTTP服务器实现,如Express支持Babel和Webpack定制化部署在任何可以运行node的平台内置页面搜索引擎优化(SEO))处理的缺点Next不是后台服务,应该独立于后台运行如果你只是想创建一个简单的WEB应用,那么可能有点大材小用,数据会在客户端和服务端重复加载而不实现前后台项目分离,MigratingtoNext是一个痛苦的过程,可能需要双倍的工作绩效。性能基于两点:1.使用ApacheBench测试吞吐量。2.使用lighthouse测试Preformance、Accessibility、BestPractices、SEO这是Next的基本HelloWorld程序。它每秒可以处理550.87个请求。每个请求花费的平均时间为18.153毫秒。在lighthouse测试报告中可以看到Preformance、Accessibility、BestPractices、SEO都高于70,虽然低于其他两个框架,但不得不说已经是一个比较不错的数据了,BestPractices评分nuxt高于其他两个社区活动Contributors:678PullRequests:3,029社区相当活跃Configuration,主要关注应用程序的UI渲染starGitHubstars:+19,000npmweeklydownloads:+100,000Install快速入门,Nuxt.js团队创建了脚手架工具create-nuxt-app//确保安装了npx(npx在NPM5.2.0版本中默认安装)npxcreate-nuxt-app
它会让你做出一些选择:在集成的服务端框架如:Express,Koa,Hapi,Feathers,Micro,Adonis(WIP);选择你喜欢的UI框架:Bootstrap、Vuetify、Bulma、Buefy等HelloWorldNuxt根据pages目录结构自动生成vue-router模块的路由配置//./pages/index.vue世界,您好!
AboutPage好处主要作用域为UI渲染,同时抽象出client/server分发静态渲染,前后自动分离两者代码分层服务和模板可配置清晰的项目结构组件和页面无缝切换默认支持ES6/ES7支持热更新开发路由级异步数据获取支持静态文件服务风格预准备:Sass、Less、Stylus等缺点外围设备资源较少开发复杂的组件可能很麻烦自定义配置似乎很麻烦并且有副作用使用this.items[key]=value进行数据操作高流量可能会给服务器带来压力只能在某些挂钩中查询和操作DOM性能Nuxt中的一个基本HelloWorld应用程序每秒可以处理190.05个请求。平均请求时间为52.619毫秒。在这个指标上,与其他两个框架相比,Nuxt表现最差Lighthouse测试报告在Preformance、Accessibility、SEO方面得分最高活跃的社区贡献者数量:191拉取请求:1,385NestNest是一个渐进式Node框架,深受Angular的启发。用于构建高效、可扩展的Node.js的框架。服务器端应用程序。它使用TypeScript构建,保留了与纯JS的兼容性,并集成了OOP(面向对象编程)、FP(函数式编程)和FRP(响应式编程)。服务罩默认使用Express,但也提供与各种其他库的兼容性,例如Fastify,允许轻松使用无数可用的第三方插件。安装nest提供了一个cli使用此cli命令安装Nest并创建一个新项目nestnewproject-name或者,使用Git安装TypeScript启动项目:gitclonehttps://github.com/nestjs/typescript-starter.gitprojectcdprojectnpminstallnpmrunstartHelloWorld使用npmcli命令新建项目后,src目录下会出现几个核心文件,main.ts是我们的入口//创建服务并监听3000端口import{NestFactory}from'@nestjs/核心';从'./app.module'导入{ApplicationModule};asyncfunctionbootstrap(){constapp=awaitNestFactory.create(ApplicationModule);等待app.listen(3000);引导程序();//启动npmstart好处作为一个基于TypeScript的web框架,可以进行严格类型定义Swagger文档的自动生成。Nest中的文件夹结构主要基于Angular的基于模块的框架。代码可以重用。项目结构清晰。您只需要关注业务,而不是架构。使用最新版本的TypeScript,这意味着JS的基本特性可以为开发者提供更少的上下文切换。从Angular代码到Nest的转换相对容易与Angular类似,Nest也有一个很好的命令行工具。缺点是缺乏文档。该框架与其他框架有良好的集成,但文档很少背后没有大公司的支持总的来说,与其他框架相比,Nest有一个小社区Nest中有一个基本的HelloWorld应用程序。它每秒可以处理928.18个请求。每个请求的平均时间为10.774毫秒。在这个指标上,Nest在我们比较的三个框架中表现最好在Lighthouse提供的报告中,Nest具有非常高的性能,但在可访问性、最佳实践、SEO方面得分较低Nest不是最受欢迎的框架,但值得一试!社区参与贡献者数量:81拉取请求:469Next、Nuxt、Nest在这里比较Preformance、Accessibility、BestPractices、SEO选择你最想要的文章来源ColumbiaBeautyDevelopmentLizTwitter:@lizparody23Liz是一位自学成才的软件工程师,专注于JavaScript,和NodeSource的开发者关系经理。她组织了不同的社区活动,例如JSConfColombia、PionerasDevelopers、StartupWeekend,并曾在EmpireJS、MedellinJS、PionerasDev和GDG发表过演讲。她喜欢分享知识、推广Node.js生态系统并参与重要的技术活动和会议以增强她的知识和网络