BlogReworkPro - 一个 SEO 友好的 SPA，相关 React 全家桶， FLASK，服务端渲染

[dtysky]

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

---

基础架构

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. 打开控制台。

[wyntergreg]

竟然是少女风，差评！

[okampfer]

Nice! 很清新的简洁风！

“ I wish I can become a poet, a novelist, a game designer and a cute lolita.”， UP 主是妹纸？

[okampfer]

刚看了 linkedin ，收回前言。

[huiyadanli]

光从外观看，没有很大的改变呐。。

[dtysky]

@okampfer

HAHAHA


@huiyadanli

主要是工程上的改进
其实样式也有很大变化吧，只是结构没变

[fy]

卧槽我技术路线与 LZ 很相似，也是 Web 和游戏开发

Web 方面倒是混成了设计以外的全栈，不过技能树是 Tornado VueJS 全家桶 Webpack ，回调也是 async/await 来做，完美错开 LZ 这次实践用的技术。

游戏开发方面已经歪到脚本解释器了。。。。就不谈了。

有机会和 LZ 认识一下，交♂易几发

[bugmenein]

强制背景音乐不开心

[Vamwere]

龙凰马上来肛你了

[dtysky]

@fy
会了一套框架学另一个很容易吧
有机会交♂易


@bugmenein
移动端不会，包容包容 LZ 的安利心 233


@Vamwere
反过来还差不多吧 www

[chux0519]

可以，很丝滑。