zhennann 最近的时间轴更新
成长的过程,是脱敏的过程,也是和解的过程
2018-10-15 14:29:36 +08:00
zhennann

zhennann

CabloyJS开源全栈框架作者
V2EX 第 356142 号会员,加入于 2018-10-15 11:24:26 +08:00
zhennann 最近回复了
3 天前
回复了 gosky 创建的主题 前端开发 如何最简化化前端开发?
建议使用[Zova]( https://github.com/cabloy/zova)框架。Zova 提供的模块化机制,让业务拆分更容易,便于开发高内聚低耦合的系统。Zova 框架同时结合了 Vue/React/Angular 的优点,并规避他们的缺点,让我们的开发体验更加优雅,并且显著减轻心智负担。

1. Vue:Zova 仍然使用 Vue3 便利的响应式系统,但是定义响应式变量就像原生变量一样,不需要使用 ref/reactive ,自然也不需要 ref.value 。
2. React:Zova 在一个 Render Class 中通过 tsx 语法来书写渲染逻辑,不仅可以与 TS 类型系统完美契合,也可以支持渲染代码的拆分,即便是面对复杂业务也可以保持代码的舒展与优雅。在 Zova 中没有类似 React 的众多 hook api ,大量减轻心智负担。
3. Angular:在实际开发当中,会遇到三个场景的状态共享:组件内部状态共享、组件之间状态共享、全局状态共享。在传统的 Vue3 当中,分别采用不同的机制来实现,而在 Zova 中只需要采用统一的 IOC 容器机制即可。Zova 提供的 IOC 容器,摒弃了 Angular 繁琐的设计,概念更加清晰,功能更加强大。
@Greendays 可以试一下基于 Vue3 的 Zova 框架,提供的 IOC 容器概念更加简洁,更容易上手,再配合 Vue3 的响应式系统,开发效率非常高: https://zova.js.org/zh/guide/start/introduction.html
选择这么困难,为何不换个角度呢?可否有一个框架可以结合 Vue/React/Angular 的优点,同时规避他们的缺点,让我们的开发体验更加优雅,减轻心智负担。这就是基于 Vue3 开发的 Zova 框架: https://zova.js.org/zh/guide/start/introduction.html
1. Vue:Zova 仍然使用 Vue3 便利的响应式系统,但是定义响应式变量就像原生变量一样,不需要使用 ref/reactive ,自然也不需要 ref.value
2. React:Zova 在一个 Render Class 中通过 tsx 语法来书写渲染逻辑,不仅可以与 TS 类型系统完美契合,也可以支持渲染代码的拆分,即便是面对复杂业务也可以保持代码的舒展与优雅。在 Zova 中没有类似 React 的众多 hook api ,大量减轻心智负担
3. Angular:在实际开发当中,会遇到三个场景的状态共享:组件内部状态共享、组件之间状态共享、全局状态共享。在传统的 Vue3 当中,分别采用不同的机制来实现,而在 Zova 中只需要采用统一的 IOC 容器机制即可。Zova 提供的 IOC 容器,摒弃了 Angular 繁琐的设计,概念更加清晰,功能更加强大
@qrobot 小型项目与大型项目的诉求不同,对框架设计的要求也就不同。对于大型项目而言,通过一个精炼的 runtime 把常用的开发范式内聚成一个核心,不仅有利于规范团队开发,也可以大量减少重复性代码,让精力更加聚焦于业务领域本身。我这里可以举两个例子:
第一个例子:在实际开发当中,会遇到三个场景的状态共享:组件内部状态共享、组件之间状态共享、全局状态共享。在传统的 Vue3 当中,分别采用不同的机制来实现,而在 Zova 中只需要采用统一的 IOC 容器机制即可。参见:[简洁而强大的 IOC 容器]( https://zova.js.org/zh/guide/essentials/ioc/introduction.html)
第二个例子:在实际开发当中,会遇到四种全局状态数据:异步数据(一般来自服务端)、同步数据。同步数据又分为三种:localstorage 、cookie 、内存。在传统的 Vue3 当中,分别采用不同的机制来处理这些状态数据,那么可否采用统一的机制进行管理呢?此外,对于大型项目,用户需要长时间进行界面交互的场景,如果存在过多的全局状态数据,就会导致内存占用过多,有什么破解之道呢? Zova 提供的 Model 机制可以用更优雅、更简洁的代码解决以上问题,参见:[Model: 统一数据源]( https://zova.js.org/zh/guide/techniques/model/introduction.html)
此外,经过近半年的进化,Zova 的整体架构得到进一步精简,并且提供了 VSCode 插件,通过右键菜单提供大量工具,显著提升开发体验,包括四大类能力:Create/Init/Refactor/Tools 。若有空可以一试。
@gogozs Zova 与 Java 的代码风格有显著的不同,体现在以下两个方面:
1. 更少的装饰器函数:Zova 采用依赖注入与依赖查找相结合的策略,优先使用依赖查找,从而大量减少装饰器函数的使用
2. 更少的类型标注:Zova 优先使用依赖查找可以达到化类型于无形的开发体验,也就是不需要标注类型就可以享受到类型编程的诸多好处,从而让我们的代码始终保持简洁和优雅,进而显著提升开发效率,保证代码质量
@unco020511 请参见这篇文档:为什么需要 Vue3+IOC: https://zova.js.org/zh/guide/start/why.html
@qrobot ts 与 java 装饰器的不同:ts 装饰器不仅仅是装饰,而且可以在代码初始化时,执行一段初始化逻辑,从而主动在系统中注册资源。而 java 装饰器没有这个主动初始化的阶段,因此需要扫描

1. Zova 提供了模块化体系,以模块为单位实现独立的打包,从而也是以模块为单位实现异步加载。这确实存在 tree shaking 失效的问题,但是可以避免打包产物碎片化严重的问题,同时也能避免初始包过大的问题。对于小项目,tree shaking 可能优先于碎片化,对于中大项目,碎片化和初始包大小可能优先于 tree shaking 。这是一个 trade-off 问题
2. 多一个 runtime 开销是否值得,也和项目的规模有关
3. 调试是否复杂跟代码结构有关。Zova 提供了更多的代码规范,代码更加清晰,或许更容易调试一些。反之,原始的 Vue3 并没有对业务架构做出更多的约定,也没有提供现成的最佳实践,代码风格反而难以统一。
@ZGame 为什么 class 契合度太低了?可否再详细说说?
@qrobot 前端是异步体系,许多模块都是按需异步加载的,采用 componentScan 不能解决所有问题。在 Zova 中,装饰过的 class 在初始化时就自动注册到系统中了,不需要扫描
@wuyiccc 在 Zova 中,装饰过的 class 在初始化时就自动注册到系统中了,不需要扫描
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   6035 人在线   最高记录 6679   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 26ms · UTC 06:16 · PVG 14:16 · LAX 23:16 · JFK 02:16
Developed with CodeLauncher
♥ Do have faith in what you're doing.