微信小程序刚出没多久时，曾经上手写过demo，但开发体验比较差，所以一直没怎么关注。不过自从诸多适配方案出炉，以及云端的开通，觉得还是有必要上手体验一番的，于是为我的技术博客也写了个小程序版。

原生开发我是不想再试了，那就选一种适配方案，目前比较知名的有基于vue的 mpvue，umi-app，基于react 的 taro，以及TX团队出的全新框架 wepy。个人对 react 的好感 以及 taro 框架的走向成熟，促使我选择了 taro。

React 与 Vue 之间的对比，是前端的一大热门话题。

• vue 简易上手的脚手架，以及官方提供必备的基础组件，比如 vuex，vue-router，对新手真的比较友好；react 则把这些都交给社区去做，虽然这壮大了 react 的生态链，但新手要弄出一套趁手的方案挺麻烦的，不过好在现在有很多类似 dva 的方案了。

• vue 比较讨喜的一点，就是它的数据双向流动在表单开发时特别方便，而 react 在这方面可就麻烦多了。

• 但是 vue 复杂的 api ，简直让人头大，光是文档说明都几十页了。太多的语法，太多的魔法符号，对进化速度越来越快的前端届来说，就是入手这个框架的最大阻碍。

• 而相反 react 的 api 数量简直可以忽略不计了，顶多花几小时就能看完官方文档。你只要理解 JavaScript，就能理解 react 的很多行为。react 的很多用法，它的 api 都是符合直觉的，你对它用法的猜测基本都是八九不离十的，这真是大大降低了心智负担。

• 除此之外，react 的 jsx 语法表达能力更强，还有 hoc 和 hooks 使代码也更容易组织和复用。

虽然我更喜欢 React ，但工作上的需求，还不是要你用什么你就得用什么 😂，所以这个 demo 就当是探索 Vue 的前奏。

后端搭起大体的框架后，接着涉及到的就是如何将数据持久化的问题，也就是对数据库进行 CURD 操作。

关于数据库方案, mongodb 和 mysql 都使用过，但我选用的是 mysql，原因：

1. 目前为止 mysql 与 mongodb 性能相差不大，尤其是 mysql 8.0 版本，速度非常快，查询数据是 mysql 更快，写数据方面 mongodb 则更胜一筹；
2. mysql 建立 关联数据要更方便些，比如： 一对多，多对多的关系；
3. mysql 作为关系型数据库，数据一致性方面更好，尤其是事务用起来更顺手；
4. 本人对 sql 操作比较得心应手，毕竟大部分项目用得都是 mysql，而 mongodb 在正式些的项目上用的就少了，而且目前关系型数据库也在进化, postgrep 和 mysql 都已经支持 json了。

目标是建立一个 web QQ 的项目，使用的技术栈如下：

1. 后端是基于 koa2 的 web api 服务层，提供 curd 操作的 http 接口，登录验证使用的是 json web token，跨域方案使用的是 cors；

2. 数据库使用的是 mysql；

3. 为了实时通信，使用的是基于 websocket 协议的 socket.io 框架；

4. 前端则使用的是 vue + vuex。

这段时间学习了socket.io，用它写了小项目，在此总结下它的基本使用方式和一些要点。
socket.io是基于Node.js和WebSocket协议的实时通信开源框架，它包括客户端的JavaScript和服务器端的Node.js。

服务端

这里后端使用的框架是koa2，socket.io将自身绑定到koa的进程中去，其中最重要的事件就是 connection 和 disconnect。它们是框架本身定义的系统事件，也就意味着它是自然就存在的不需要我们自定义，当然还有其它系统事件，但很少会用得到。

面对日新月异的前端，我表示快学不动了😂。 Webpack 老早就已经更新到了 V4.x，前段时间 React 又推出了 hooks API。刚好春节在家里休假，时间比较空闲，还是赶紧把 React技术栈这块补上。

网上有很多介绍 hooks 知识点的文章，但都比较零碎，基本只能写一些小 Demo。还没有比较系统的，全新的基于 hooks 进行搭建实际项目的讲解。所以这里就从开发实际项目的角度，搭建起单页面 Web App项目的基本脚手架，并基于 hooks API 实现一个 react 项目模版。

Hooks 最吸引人的地方就是用 函数式组件 代替面向对象的 类组件。此前的 react 如果涉及到状态，解决方案通常只能使用 类组件，业务逻辑一复杂就容易导致组件臃肿，模块的解藕也是个问题。而使用基于 hooks 的 函数组件 后，代码不仅更加简洁，写起来更爽，而且模块复用也方便得多，非常看好它的未来。

制作动画效果离不开动画运动函数，而我们用得最多的无疑就是 Tween.js。根据不同的数学公式原理，Tween.js 划分出了不同的动画类型，每种动画类型里面都包含以下的缓动类型：

1. ease in 先慢后快
2. ease out 先块后慢
3. ease in out 先慢后快再慢

关于缓动函数，我们在 css3 动画里已经用得太多了，不再细讲。Tween.js 源代码请看：Tween.js

好久没使用canvas了，于是通过写小游戏“俄罗斯方块”再次熟悉下canvas，如果有一定的canvas基础，要实现还是不难的。实际完成的Demo请看：
*canvas俄罗斯方块*。

原理详解

看游戏最终界面，可知需要实现以下关键功能：

1. 游戏面板，也就是12 * 20的方格，以及是否填充了方块信息；
2. 运动方块，方块需要实现移动，变形的功能。
   

什么是Monad

Haskell是一门纯函数式的语言，纯函数的优点是安全可靠。函数输出完全取决于输入，不存在任何隐式依赖，它的存在如同数学公式般完美无缺。可是纯函数因为隔绝了外部环境，连最基本的输入输出都无法完成。而 Monad 就是 Haskell 给出的解决方案。但Monad 并不仅仅是 IO 操作的抽象，它更是多种类似操作之间共性的抽象。所以 Monad 解决的问题并不局限在 IO 上，像 Haskell 中的 Maybe 和 [] 都是 Monad。Haskell 中漂亮的错误处理方式， do 表示法和灵活的列表推导式 (list comprehension) 都算是 Monad 的贡献。

什么是Functor

functor 就是可以执行map操作的对象，functor就像是附加了语义的表达式，可以用盒子进行比喻。functor 的定义可以这样理解：给出a映射到b的函数和装了a的盒子，结果会返回装了b的盒子。fmap 可以看作是一个接受一个function 和一个 functor 的函数，它把function 应用到 functor 的每一个元素（映射）。

-- Functor的定义
class Functor f where
    fmap :: (a -> b) -> f a -> f b