云音乐客户端开发笔记

云音乐客户端开发笔记(一)

12.12 - 12.15

flux

git地址: todo-flux
flux

project的使用

开发环境需要手动electron main.js
npm build 打包导出各系统的客户端

关于前端的架构

2015.12.12
目前我采用的是webpack+react的前端工具
整个前端,用react分为三级的component

最初一级是app
负责所有数据的存放和改变,包括api数据的请求和state的改变
这样的好处是 数据不会散乱
子组件只需负责渲染数据,数据单向流动

第二级就是具体的表层组件
和app.js放在一个目录
这些就是常用功能模块的粗略分块

toolbar 是最上面的最大最小化的小工具栏
nav 就是往下的红色导航栏,有头像、搜索等
左边是sidebar
右边是具体的内容页
最下面就是player panel

第三级别就是第二级别的子组件,就不展开说了

才发现原来今天双十二。。
接着写咯

2015.12.13
之前出了一个问题,没有更新上来
crypto这个库,webpack无法打包到bundle.js
会报错 createCipheriv 没有包括在browserify里面

后来解决方法。。就是在main.js注册了一个ipcMain
让renderer process来和他通信
相当于登录过程的加密
放到了本地而不是browser执行
突然发现这样安全性还好了不杀

架构给也给改了

现在初步确定了架构
决定使用redux架构
确实dispatcher这个模块在flux中有些很模糊的地方

所以现在的架构是
action->reducer->store->react
具体的架构实现准备另开一篇写
主要是把思路得理清楚

2015.12.15
一天没有写
写了好多代码,然后也看了redux
但是redux感觉不适合我
我只是需要一个数据管理

所以就自己写了个store
这里还有个坑

我一开始的设计是two smart components
一个是顶层app
另一个是player播放器

但是写到私人fm的时候除了个很严重的问题
就是fm页面也有播放控制
但是fm和player是同级组件
交流非常困难
数据同步bug非常多
代码又臭又长

然后一怒之下
把player也改成了dumb component
只剩一个app和action还有store交互

解决了上面的问题
最佳实践还是最佳实践啊