BlogReworkPro - Rework the BlogRework
各位别 DD= =,真扛不住。
Preview
地址:
dtysky|一个行者的轨迹
Github 工程在此:
BlogReworkPro
重构BlogRework,这是此 Blog 迎来的第四次重构了,和上一次的间隔比预期要早一些,不过这种事早点没啥坏处。这次重构主要是重写了前端、修了一些后端的 BUG ,跟进 ES6 ,用 Eslint 和 Flow 约束代码规范,上了 React 最佳实践全家桶并且实现了完美的服务端渲染,加了 Memory Cache ,样式换成了 less , DOM 语义化也做了,构建工具也换成了 gulp ,也就是说,上一次遗留的 Feature 基本都搞定了。这次重构对个人的能力提升显著,还是很值得的。
系列教程:
[ React/Flask ] BlogReworkPro-Rework the BlogRework
[ React/Redux/Router/Immutable ] React 最佳实践的正确食用姿势
[ React/Redux ] 深入理解 React 服务端渲染
[ Flask/React ] 此博客服务端的缓存实现
[ Less ] 实现可选参数以及各种 autoprefixer
基础架构
- 添加了一些 Bash 和 Npm 脚本,并采用了新的以环境变量为基础的配置文件,二者配合使得开发发布更加轻松和工程化。
- 跨域访问控制。
- 正确使用了 Forever.js 使得进程守护更加完备。
后端
- 在生产环境下,使用 tornado 的 wsgi 框架来替代 Flask 自己的 server ,增强性能和稳定性。
- 使用 virtualenv 构建独立的 python 来隔离系统原生的 python ,屏蔽系统差异(虽然不如 docker ),详见install.sh。
- 增强了日志管理器,使其更加完善,详见Back/utils/logger。
- 将
watchdog.observers.Observer替换为watchdog.observers.polling.PollingObserver,消去了一些 BUG 。 - 修复了一些写入数据库时的对比 BUG 。
- 实现了 Memory cache ,详见此文章: [ Flask/React ] 此博客服务端的缓存实现。
前端
- 上了 React + Redux + React-router + Immutable 全家桶,详见此文章: [ React/Redux/Router/Immutable ] React 最佳实践的正确食用姿势。
- Less 带我飞,取代了原生 CSS ,详见此文章: [ Less ] 实现可选参数以及各种 autoprefixer。
- 完全使用 ES6 语法,并使用 Eslint 和 Flow 来进行代码规范化约束,详见Front/.eslintrc。
- 将回调基本全部用 Promise 替换,回调地狱 Bye~
- 消除了 Jquery ,改用 superagent 来做 ajax 请求,比如Front/src/action/source.js,消去了 JS 动画库的依赖,完全使用 CSS3 动画替代。
- 用 Katex 替换了 MathJax 来做 Tex 解析,自己写了自动渲染文章的转换器,详见Front/src/utils/renderWithKatex。
- DOM 结构语义化。
- 用 Gulp 替换了 Grunt 来构建 Task ,详见Front/gulpfile.js。
- 重绘了一些 SVG 图标,使其完美化,比如playstation.svg。
- 增强了主题,优化了很多细节,使其更加有设计感,比如
pagenation,文章列表的样式。 - 将一些资源进行打包或者内嵌,对图片进行压缩,减少向服务端的请求次数,使得渲染更加流畅,比如字体和小图标这种就打入了两个文件并内嵌为 base64 ,用 webpack 实现自动内嵌。
- 完美的服务端渲染,详见此文章: [ React/Redux ] 深入理解 React 服务端渲染。
- 实现了 Memory cache ,详见此文章: [ Flask/React ] 此博客服务端的缓存实现。
彩蛋
- 404 页面: 任意一个找不到的页面
- 打开控制台。