NG全家桶全栈项目实践总结

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了NG全家桶全栈项目实践总结相关的知识,希望对你有一定的参考价值。

参考技术A Angular在国内使用的人并不像国外那么多,基本都是外企在用,但其框架的思想却仍可以为我们所借鉴,在某些问题没有思路的时候可以参考ng相关的处理,ng处理方式和思维确实比较超前,但也因此而曲高和寡。本文旨在通过ng全家桶项目(前端Angular10 + 后端NestJS7)的实践来总结对于ng架构中一些亮点的关注与思考,Angular和Nest在前后端框架的处理上同出一脉,对比起来更有借鉴意义。

[目录结构]

[目录描述]

整个前端项目是基于angular脚手架生成的,其基本目录结构是在src的app下进行相关组件和页面的模块开发,main.ts和index.html是整个单页应用的主入口,根目录下angular.json用于配置相关的打包编译等环境配置参数

[实践分享]

[目录结构]

[目录描述]

后端项目是基于nestjs框架的大型后台项目配置,api模块主要是对外输出的接口,auth、filters、guard、interceptors、middlewares、pipes等是对于需要的模块进行统一的收集处理,main.ts是主入口文件,用于启动及相关配置等,app.module.ts是用来收集所有模块的导入,ng基于模块的方式可以起到非常好的隔离效果

[实践分享]

首先,对于没有用过ng的同学科普一下,angular其实分为两个大版本,一个是angular1.x的,也就是ng1,也就是现在还有的angularjs,另一个版本是ng2以后的版本,ng2之后被谷歌收购后,完全重写了框架,唯一和1.x相通的估计也就剩那几个思想还在了:模块化、依赖注入、双向绑定、MVC,对于1.x感兴趣的同学可以去看Vue的1.x的版本,基本算是简化版的ng1.x,Vue2之后就和后来的ng分道扬镳了,vue2主要是以发布订阅来替代依赖注入的思路,扯远了...(ps: 想看ng1版本的可以看这个地址,居然还有更新... angularjs官方仓库 ),这里分析的主要是Ng10,ng8之后除了引入Ivy( Ivy架构官方介绍 )这个编译渲染器之外,其实改动不大,主要就是在优化以及废除和新建一些api等等。Ng的源码很庞大,goggle自研了一个bazel自动化构建工具,ng自然也是靠这个构建的,对bazel感兴趣的同学,可以看这个 Google软件构建工具Bazel原理及使用方法介绍 ,我这里就不展开所有的源码,整体的核心大框架如下:

nestjs是nodejs的web应用的一个大的集成,它最初是基于express封装的一个后端框架,后来将服务端各种理念都使用js实现了一下,虽然不能和成熟的服务端语言框架如java等进行媲美,但是服务端所需要的东西基本都具备了,对于有需求想要使用js来开发后端的同学是个不错的选择,个人认为简单的bff,比如想自己模拟的开发个后台接收请求,选择node直接写或者使用express、koa就可以,对于有一定的中间层给前端处理,可以选用阿里的egg,对于如何基于egg构建中间层,可以看看这篇文章 如何为团队定制自己的 Node.js 框架?(基于 EggJS) ,对于大型的服务端,尤其是前端是以ng为主栈的,可以优先考虑使用nestjs;其次对于io较多而计算较少的(js本身的特质),或者服务端需要与c++配合的,大型服务端应用也可以使用nest。nest默认是不采用微服务的形式的,nest将不同的平台封在了不同的platform下,这里只分析普通的以express为platform的形式,对于喜欢微服务的同学,可以对比和java的springcloud的区别,这里就不做表述了,其整体的核心结构大致如下:

这里主要在对依赖注入的实现做一个简单的理解分享,其思路是一脉相承的,对于理解后端理念的依赖注入有很好的理解,这也正是后端前端化的一个体现,也是最早的MVC框架向后来的MVVM框架过度的一个历史过程,依赖注入方式对于最早的前端框架还是有纪念意义的,但是对于ng全家桶来说,这算是其基本哲学的一个基本面

<b>Angular</b>

先来看一下ng是如何实现injector的,这里重点在于使用了抽象类来重载不同函数的使用,对于provider循环依赖的处理,利用了一个Map数据结构来区分不同的Provider

<b>Nest</b>

再来看一下,nest的实现,不同于ng的实现,nest是利用参数和继承父类参数来确定整个的循环依赖关系的,其没有使用重载来实现,但都对循环依赖做了处理,其基本思路是一致的。

总结:从nest和ng对injector的实现可以看出,虽然都是注射器的实现,但是由于呈现方式的不同,因而在实现方式上也会有所不同,对于ts而言,选用interface还是抽象类,确实可以借鉴java的模式思路,对于习惯js的我们来说,对于整个数据类型的扩展(如:抽象类、接口)等是需要向后端借鉴的。整体来说,对于依赖注入的实现最关键的就是在于处理provider的整个依赖问题,这两者都是采用token的方式来区分对待到底是属于哪一个provider,然后对于特殊的相关依赖循环的问题做对应的处理

ng整个生态体系在国内应用的并不广,但并不妨碍其作为前端理念的扩展先行者的这样一个角色,个人认为其在隔离性以及系统性方面都是要优于vue和react的,因而对于目前比较流行的微前端框架(ps: 对于ng的微前端应用,可以参考这篇文章 【第1789期】使用 Angular 打造微前端架构的 ToB 企业级应用 ),个人觉得在沙箱隔离等系统融合方面确实可以借鉴一下ng的某些思路,或许正是由于这个原因,它才是三大框架中最先上ts的,也有可能整个ng的开发者更像是传统的软件工程师,对于整个开发要做到定义数据、定义模型、系统设计等等,对于大型项目而言,这样确实会减少很多因bug而需要重复修改的时间,但是对于小型项目,个人认为还是vue更合适。虽然对于国内,ng基本已经属于明日黄花了,但是它的一些理念及设计思路确实还是值得借鉴的,在这个内卷的时代,各大应用都在向着高级化、大型化发展,说不定哪天ng又在国内重回巅峰了呢,虽然很难~~哈哈哈,各位加油!

零基础快速开发全栈后台管理系统(Vue3+ElementPlus+Koa2)—项目概述篇

零基础快速开发全栈后台管理系统(Vue3+ElementPlus+Koa2)—项目概述篇(一)

一、项目开发总体框架

二、项目开发流程

三、项目技术选型

🍖Vue3全家桶+Node+MongoDB

四、如何理解通用后台

  • 掌握后台开发的共性
  • 开发通用模块 开发通用架构
  • 掌握常用开发技能、开发技巧、语法

五、需求介绍

  • 后台管理系统
  • 技术选型(Vue3全家桶+Node+MongoDB)
  • 技术评审:权限,审批流
  • 交互评审:统一页面结构

六 、Vue3的优点

更小

🎈全局API和内置组件/功能支持tree-shaking
🎈核心代码尺寸控制在10kb gzipped上下

更快

🎈基于Proxy的变动侦测,性能整体优于getter/setter
🎈Virtual DOM重构

加强API设计一致性

🎈Vue3 在语法方面进行了优化,主要是提供了 Composition API替换原本的Options API,Options API提供了 methods、computed、data、props以及各个阶段的生命钩子选项,开发者可以在每个API中做着对应的事情,各司其职,上手和理解成本非常低,对于新手开发者非常友好。
🎈使用其开发小型项目时代码的阅读性、维护性等也是可观的,但是当遇到大型项目或者较为复杂的业务逻辑时,代码将会变得非常难以维护,常常导致修改一个功能需要在代码中跳转多个地方,一个功能的代码分散在各个地方,造成阅读和理解成本直线增加。
🎈Composition API,它有一个很好的机制去解决这样的问题,就是将某个逻辑关注点相关的代码全都放在一个函数里,这样当需要修改一个功能时,就不再需要在文件中跳来跳去

加强TypeScript支持

🎈Vue2时期选择的是flow,由于flow自身存在一些功能上的短板,且TS发展势头更好,Vue3选择使用TS编写代码,也可以更好的支持TS提升开发体验


最后:希望大家在互联网的快餐时代里,保持持续学习 加油~

以上是关于NG全家桶全栈项目实践总结的主要内容,如果未能解决你的问题,请参考以下文章

课题实践总结

小学期实践项目总结与暑假学习总结

[Anuglrjs]系列——学习与实践

第04项目:淘淘商城(SpringMVC+Spring+Mybatis) 的学习实践总结第五天

项目管理学习总结——项目管理最佳实践入门

Vue3VuexTypescript 项目实践工具类封装