Road to touko

大概在2016年的12月,我决定开始写博客。

一方面,新的职业需要新的积累,写博客对于一个开发者来说当然算得上是最好的一种积累,另一方面,建立一个完全独立的网站本身永远是一件令人兴奋的事情。还记得初中的时候(那时可能是我这辈子对科学,技术,网络这些名字最热衷的时候,当然,现在依然热情不减),正赶上博客热潮,身边的每一个人都在各种各样的平台上写博客,我也不例外,但是我一直希望拥有一个真正属于我的,拥有独立域名的网站,于是2016年12月的那个我决定不使用任何现成的平台和博客程序,独立编写一个博客程序,顺带恶补一下服务端编程的相关知识。

当时的我可能已经预想到了会折腾一段时间,毕竟折腾是人类的本性,但是完全没想到最后会耗费这么久,以致网站最后以一种非常简陋的状态上线了,如你所见,不仅样式十分朴素(是的,它很丑,但是还是请允许我使用朴素这个字眼),甚至连评论系统都还没有,但是我还是挺开心的,当然接下来才是真正的考验,对于一个上次写超过500字的长文已经要追溯到好几年前的人来说,也许保持高质量的定期更新才是真正的挑战吧。

About Touko

Touko是一套使用 javascript 编写的博客程序,名称来源于 type moon 系列游戏《魔法使之夜》和小说及动画作品《空之境界》中的人物苍崎橙子。截至本网站上线时(2017年6月14日), Touko由一个后端程序和一个管理客户端组成。是Touko的第三个版本

Touko V1

后端:Express

前端: 基于 Vue 的单页应用

第一个版本使用了前后端分离的架构,博客前台展示页面和后台管理页面是完全分离的两个单页应用开发时间大概为两个月,初步完成之后因为工作的原因开发停滞了一段时间。期间,Node.js 发布了7.6版本,带来了原生的 async/await 语法来更好得实现异步流程控制,同时,我开始接触到** 服务端渲染( SSR)** 的概念,引入服务端渲染对一个博客程序所带来的改进是非常明显的,它将带来更好,更方便的 SEO 以及更快的首屏加载速度,于是我决定停止第一版的开发,推倒重来.

Touko V2

后端:Koa2

前端: 基于 NUXT.js ,支持服务端渲染

将后端框架从 Express 换成了率先支持原生 async/await 的 Koa2 ,但是实际上转换的学习成本几乎可以忽略不计,但是由此带来的编码体验上的改善却是十分巨大的。另外,前不久新发布的 Node 8.0 正式引入了 util.promisify() 函数,可以将一些原本需要传入回调函数的异步方法转化为返回一个 Promise 对象的形式,比如,我们需要读取一个本地的文件,以前的写法是这样的:

const fs = require('fs')
fs.readFile('./notes.txt', (err, txt) => {
  if (err) {
    throw new Error(err.message)
  }
  console.log(txt)
})

而现在只需要:

//
(async () => {
  const fs = require('fs')
  const util = require('util')
  const readFile = util.promisify(fs.readFile)
  const txt = await readFile('./notes.txt')
  console.log(txt)
})()

虽然之前也有 bluebird 等库提供相似的功能,但是现在我们才真正地可以说使用 async/await 几乎已经没有任何障碍了。

前端方面引入了 NUXT.js 作为服务端渲染框架,就目前来说感觉服务端渲染还有挺多值得一说的地方和需要避开的坑的(当然有些是 NUXT.js 本身的坑)关于这些以后有时间再写点东西记录一下。第二版的最大特点是因为服务端渲染需要和后端精密结合,所以虽然这仍旧是一个前后端分离的项目,但是看上去就像是使用了 Vue 做模板引擎一样,由原来分得很开的三个项目变成了一个项目,同时不用处理跨域问题,开发更加简便了。

基本开发完毕后打包构建准备上线,然而却发现整个程序前端部分的 JS 文件体积高达2 MB ,再加上租用的 VPS 带宽比较小,使用体验可以说是地狱一般。分析了之后发现原因大致有两点:

  1. 引入的一些第三方库的体积非常大(比如负责转换 markdown 的 marked 和提供代码高亮支持的 highlight.js
  2. 大多数人用不到也无法访问后台管理页面,然而还是得加载这些完全用不到的代码

于是第三个版本应运而生。

Touko V3(Now)

后端:Koa2

前端: 基于 NUXT.js ,支持服务端渲染

管理客户端: 基于 electronVue 的跨平台桌面应用程序

比起第二版的推倒重来第三版的工程量减小了不少,原计划只需要把原来的管理后台部分分离出来,恢复为一个单页应用,并修改一部分 api ,把能交给后端处理的事情(比如 markdown 到 html 的转换)都交给后端处理而已。

直到我一脚踩到 electron 的坑里为止...

一方面,管理后台部分只有我自己使用,它长什么样,甚至它在不在线上,都不重要。另一方面,开发一个桌面应用的吸引力还是很大的,而且通过 electron 来发送请求的话我也不需要再考虑跨域的问题了。于是就有了目前的第三版,将管理后台从主体中分离出来,变成一个独立的桌面应用。目前还处于只是通过 electron 把一个单页应用改写成桌面应用的阶段,接下来的更新会努力添加更多桌面应用的原生特性进去。

Todo

  • 评论系统
  • 管理后台增加更多桌面应用的原生特性(通知,文件读取另存 etc.)
  • 页面样式美化(我也许需要找个专业的设计师帮帮我...)
  • 前端网站 PWA 化
  • and more...