V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
dtysky
V2EX  ›  程序员

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

  •  1
     
  •   dtysky ·
    dtysky · 2016-10-14 12:59:27 +08:00 · 4038 次点击
    这是一个创建于 2963 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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. 打开控制台。
    10 条回复    2016-10-14 21:06:23 +08:00
    wyntergreg
        1
    wyntergreg  
       2016-10-14 13:02:43 +08:00
    竟然是少女风,差评!
    okampfer
        2
    okampfer  
       2016-10-14 13:24:06 +08:00
    Nice! 很清新的简洁风!

    “ I wish I can become a poet, a novelist, a game designer and a cute lolita.”, UP 主是妹纸?
    okampfer
        3
    okampfer  
       2016-10-14 13:27:05 +08:00
    刚看了 linkedin ,收回前言。
    huiyadanli
        4
    huiyadanli  
       2016-10-14 13:50:05 +08:00
    光从外观看,没有很大的改变呐。。
    dtysky
        5
    dtysky  
    OP
       2016-10-14 14:26:50 +08:00
    @okampfer

    HAHAHA


    @huiyadanli

    主要是工程上的改进
    其实样式也有很大变化吧,只是结构没变
    fy
        6
    fy  
       2016-10-14 15:48:41 +08:00
    卧槽我技术路线与 LZ 很相似,也是 Web 和游戏开发

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

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

    有机会和 LZ 认识一下,交♂易几发
    bugmenein
        7
    bugmenein  
       2016-10-14 15:56:03 +08:00
    强制背景音乐不开心
    Vamwere
        8
    Vamwere  
       2016-10-14 16:01:25 +08:00
    龙凰马上来肛你了
    dtysky
        9
    dtysky  
    OP
       2016-10-14 16:07:00 +08:00
    @fy
    会了一套框架学另一个很容易吧
    有机会交♂易


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


    @Vamwere
    反过来还差不多吧 www
    chux0519
        10
    chux0519  
       2016-10-14 21:06:23 +08:00
    可以,很丝滑。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2667 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 05:43 · PVG 13:43 · LAX 21:43 · JFK 00:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.