【React/Flask】BlogReworkPro-Rework the BlogRework

少女dtysky

世界Create

时刻2016.10.14

Github工程在此:BlogReworkPro

重构BlogRework,这是此Blog迎来的第四次重构了,和上一次的间隔比预期要早一些,不过这种事早点没啥坏处。这次重构主要是重写了前端、修了一些后端的BUG,跟进ES6,用Eslint和Flow约束代码规范,上了React最佳实践全家桶并且实现了完美的服务端渲染,加了Memory Cache,样式换成了less,DOM语义化也做了,构建工具也换成了gulp,也就是说,上一次遗留的Feature基本都搞定了。这次重构对个人的能力提升显著,还是很值得的。


基础架构

  1. 添加了一些Bash和Npm脚本,并采用了新的以环境变量为基础的配置文件,二者配合使得开发发布更加轻松和工程化。
  2. 跨域访问控制。
  3. 正确使用了Forever.js使得进程守护更加完备。

后端

  1. 在生产环境下,使用tornado的wsgi框架来替代Flask自己的server,增强性能和稳定性。
  2. 使用virtualenv构建独立的python来隔离系统原生的python,屏蔽系统差异(虽然不如docker),详见install.sh
  3. 增强了日志管理器,使其更加完善,详见Back/utils/logger
  4. watchdog.observers.Observer替换为watchdog.observers.polling.PollingObserver,消去了一些BUG。
  5. 修复了一些写入数据库时的对比BUG。
  6. 实现了Memory cache,详见此文章:【Flask/React】此博客服务端的缓存实现

前端

  1. 上了React + Redux + React-router + Immutable全家桶,详见此文章:【React/Redux/Router/Immutable】React最佳实践的正确食用姿势
  2. Less带我飞,取代了原生CSS,详见此文章:【Less】实现可选参数以及各种autoprefixer
  3. 完全使用ES6语法,并使用Eslint和Flow来进行代码规范化约束,详见Front/.eslintrc
  4. 将回调基本全部用Promise替换,回调地狱Bye~
  5. 消除了Jquery,改用superagent来做ajax请求,比如Front/src/action/source.js,消去了JS动画库的依赖,完全使用CSS3动画替代。
  6. 用Katex替换了MathJax来做Tex解析,自己写了自动渲染文章的转换器,详见Front/src/utils/renderWithKatex
  7. DOM结构语义化。
  8. 用Gulp替换了Grunt来构建Task,详见Front/gulpfile.js
  9. 重绘了一些SVG图标,使其完美化,比如playstation.svg
  10. 增强了主题,优化了很多细节,使其更加有设计感,比如pagenation,文章列表的样式。
  11. 将一些资源进行打包或者内嵌,对图片进行压缩,减少向服务端的请求次数,使得渲染更加流畅,比如字体和小图标这种就打入了两个文件并内嵌为base64,用webpack实现自动内嵌。
  12. 完美的服务端渲染,详见此文章:【React/Redux】深入理解React服务端渲染
  13. 实现了Memory cache,详见此文章:【Flask/React】此博客服务端的缓存实现

彩蛋

  1. 404页面: 任意一个找不到的页面
  2. 打开控制台。

如果不是自己的创作,少女是会标识出来的,所以要告诉别人是少女写的哦。