是的,我打脸了前两篇文章

2019-03-31

开篇闲扯

折腾了一周的数据可视化大屏开发脚手架,在上周三的时候将框架从svelte改为了react+ts,然后到了周五就彻底将代码转移了过去了。

打脸的过程

重新思考

一开始只是觉得我需要的内容很简单,但是写了一段时间的svelte后,觉得这不是我想要的一种开发模式,而且想要引入ts,因为当项目大了之后,人员多了之后还是需要一定的类型管理机制来进行约束开发,而且发现,问题其实不在框架的选择上,而是在业务的分层上。

为啥放弃svelte

其实了一段时间的svelte后会发现,相对比与react这样的组件化开发模式,整体来说还是比较麻烦,不想react那样,将所有的内容都移到了一个jsx里面,这样其实对于阅读以及开发来说更加清晰,当然不排除习惯了react的开发模式,而且svelte对于ts的支持还不算很好,想要写ts,可能需要自己编写一个preprocess来进行处理,在vs code中的支持也没有想象中那么好,编写scss的也会出现一定的错误提示。但是最后还是有发现,编译后的两种代码,在实际的内存使用中,还是svelte的较低,这也许就是svelte它之前作为编译时的特性吧。
而且引入ts的必要性还是蛮大的,一开始我也不是很喜欢ts这这样的超类,感觉失去了js语言本身的特性,但其实在大型项目或者多人协作的开发项目中还是很有必要的,接口的定义,类型的定义可以减少很多不必要的错误。

迁移的过程,我做了些什么

对之前已有的webpack-script包多加了一个ts-loader,这样就可以在之前的基础上,不丢失原有的功能特性进行使用,也减少了重新写一个webpack的麻烦。
对目录结构进行了小幅度的调整。扁平化了components里面的结构,将原先Element文件夹里面的内容移了出来。调整了一点文件命名的方式,原先是Decorate/Decorate-1/Decorate-1.html现在改为Decorate/Decorate-1/index.tsx这样子会更加清晰和简单。
在组件的编写上也做了一定的调整,增加了一个高阶组件Layout用来处理组件的width height x y,这样子可以达到一定程度的复用,而且在开发组件的时候,只要开发组件自己本身。使用效果如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import * as React from 'react'
import Layout from '../../Base/Layout'
import { LayoutProps } from '../../Base/Layout/type'

const style = require('./style.scss')

interface Props extends LayoutProps {
children: JSX.Element
}

@Layout
class Border1 extends React.Component<Props> {
render () {
return (
<div className={style['dui-border-1']}>
{ this.props.children }
</div>
)
}

}

export default Border1

其它部分基本保持一致。

最后的样子

其实确实最终的问题在于业务的分层上,有良好的业务分层,其实最后都是在组件的开发上,因此调整后的目录结构变为了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
- config  # 不同环境的配置文件
- src # 主文件夹
- components # 公共组件
- Charts # 图标相关组件
- Echarts # 使用 Echarts 编写的图表组件
- AntV # 使用 Antv 编写的图表组件
- D3 # 使用 D3 编写的图表组件
- Audio # 音频元素组件
- Border # 边框元素组件
- Box # 盒容器元素组件
- Decroate # 装饰元素组件
- Image # 图片元素组件
- Text # 文本元素组件
- Video # 视频元素组件
- SVG # 使用SVG绘制的元素组件
- view # 页面
- upgradeBrowser # 浏览器审计提示页
- style # 公用样式
- constant # 常量
- api # 用于放置api请求
- assets # 资源文件
- group # 分组
- libs # 公用脚本
- App.tsx # 主页面
- index.js # 入口文件
- index.html # 入口文件

约定好了这些的内容,就能较好的定义整个的业务开发,开发人员只要遵循同一个框架进行开发,就算后期有所变动或者迁移,那也会变得较为简单。

之后要做的

目前先将所有组件放在components中,目前还还未成一定的体系,后续需要剥离到单独的组件项目中。

  1. 增加组件的 example
  2. 增加组件的展示页面
  3. 增加常用的图表组件
  4. 剥离组件

结语

一切才刚刚开始,希望每周都能有一定的突破。

下面是我的微信

欢迎骚扰

ww1o01