【React/Flask】BlogReworkPro-Rework the BlogRework
世界Create
Github工程在此:BlogReworkPro
重构BlogRework,这是此Blog迎来的第四次重构了,和上一次的间隔比预期要早一些,不过这种事早点没啥坏处。这次重构主要是重写了前端、修了一些后端的BUG,跟进ES6,用Eslint和Flow约束代码规范,上了React最佳实践全家桶并且实现了完美的服务端渲染,加了Memory Cache,样式换成了less,DOM语义化也做了,构建工具也换成了gulp,也就是说,上一次遗留的Feature基本都搞定了。这次重构对个人的能力提升显著,还是很值得的。
基础架构
- 添加了一些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页面: 任意一个找不到的页面
- 打开控制台。
点击查看评论