Tomatoo-一款轻量云同步笔记诞生录

chuler
455 阅读11分钟

很多时候，面对新技术与既有需求的碰撞，往往能产生奇思妙想的结果，这是一件很有意思的事情，想起当初自己写的第一版页面应用还是基于Jquery+ES5的组合，如今Vue，React等一众已然确定了自己的地位。

前段时间在寻找一款记录日常事件的趁手工具时，市面上似乎没有一款完全符合自己心意的简洁，同时满足日常云同步的笔记类App，于是乎花了些时间，基于如今的React+Mobx技术流，写了款轻量级且支持云同步的笔记应用。

下面展开说说这款应用开发过程中的一些印象深刻的细节，另外也将穿插一些对开发以及产品体验的思考。

关于项目结构

按照惯例，先来瞧一瞧这款笔记的样子

笔记区归档仓库
应用的布局这块总体上遵循了侧导航+4分栏的设计，接下来先说说这款笔记开发过程中的主体目录

关于各区块的主要用处

  • components - 存放通用的页面组件，路由组件等。
  • styles - 页面通用主样式，局部样式，及部分项目中的图片，Icon，加载Gif等影像资源。
  • pages - 存放项目主要的路由页面，在这个项目里，按功能模块再细分下去。
  • store - 项目的组件数据流处理，也是mobx store的模块管理所在区域。
  • utils - 存放项目里的一些公用方法，包括快捷的工具方法，以及网络请求相关方法。

可以看到，Tomatoo项目里沿用了一些业界通用的目录设计，在涉及到页面组件的划分时，曾经考虑了两种划分方式，一种是按照贴合路由切换的模式，页面和组件偏向路由的格式切换，另一种是偏向项目实际功能的模块划分，也是这个项目里所用到的方式，页面的文件夹划分按照页面定义的主要功能进行分类，两种方式现在看来没有谁更好，在后面的迭代中目录也许有进一步改善，让整体结构能更贴合本身的需要。

数据状态管理

关于React技术栈中的数据状态管理，相信小伙伴们都知道可以通过context、redux来做状态管理，同样也可以使用 mobx 来做状态管理。这里最终选用了mobx管理，一方面从操作方面来讲，mobx 比 redux 的操作更为简洁，和Editor本身的轻量，轻快理念不谋而合，另一方面mobx相对redux是更独立的存在，与react本身耦合性更低，在项目后续的依赖升级，Typescript支持等方面也有更多的操作空间。 Store的结构方面，项目目前采用了入口类和子模块的形式进行了划分，包含了其中两个需要频繁状态管理的组件，即导航层和编辑器部分。

let scheStore = new ScheStore();
let navStore = new NavStore();
const stores = {
  scheStore,
  navStore
};

在编辑器这个主要组件里，放置了一个需被观察的数据对象，而对象中包含的三个数组分别对应了编辑器的三种形态，即计划中，进行中和已完成这三种状态，考虑到各种数据共享情况的需要，这里我给它设置4个Action操作，一个能取到总的editor对象，而另外三个则能分别get到三种形态的具体数据。总的来看来Store层这里的数据结构并没有很复杂，而Tomatoo的大部分本地状态存储/共享等功能也将围绕着这三个List来展开。

import { observable, action} from "mobx";
class ScheStore  {
  @observable initNum = 1000
  @observable todoBox = {
    todoList: [], 
    doingList: [],
    doneList: []
  }
  @action commit2Box( data ) {
    console.log('COMMIT To BOX ONCE ')
    this.todoBox = data;
    }
  @action commitTodo( data ) {
      console.log('COMMIT todoList once ')
      this.todoBox.todoList = data;
    }
  @action commitDoing( data ) {
      console.log('COMMIT doingList once ')
      this.todoBox.doingList = data;
    }
  @action commitDone( data ) {
      console.log('COMMIT doneList once ')
      this.todoBox.doneList = data;
    }
}

云同步的抉择

如果说一个本地的客户端能满足不少固定场景的需要，那么一个能将数据同步到云端的客户端，无疑大大地扩展了应用的使用场景，能在更多地方或是更多设备上用上自己熟悉的效率工具也是Tomatoo开发的初衷。 在观察了不少云盘，云存储服务后，目前将眼光落在了坚果云上，将它作为Tomatoo现阶段的云端容器，当前同类型的云盘也已有了不少好的选择，而最终选择了坚果云主要是有这些考虑:

  • 支持WebDav协议，目前国内的云网盘市场，尽管数量繁多，但提供WebDAV功能的只有坚果云。 关于什么是WebDav协议，这里摘录一段维基百科和坚果云的解释。 白话文一点的解释，如果某产品比如云网盘，是支持WebDAV的，那么该网盘的用户就能通过WebDAV与其他产品（如WPS、PDF Expert）等连接，快速实现数据传递、数据存储，而不用再复制、粘贴文件到云端。

也就是说，WebDav有着简便快速的特性，同时能很好的与其他的工具产品融合。

  • 坚果云的功能在同类型的产品中功能不算多，但好在操作简便，服务经过长期的考验也较为稳定，能很好地满足项目的需要。

当然，个人选择范围毕竟有限，如果小伙伴们有更好的发现，同类云服务产品，也可以留言分享，让云同步的体验变得更好。

说回Tomatoo的云同步功能本身，在云服务的同步与存储的相关事件处理上面。我采用的是通过API连接后台搭建的Flask Web服务，与坚果云的webdav3 client对接，服务里为了区分不同用户以及不同时间段生成的笔记数据，统一采用时间戳为备份文件命名，接着将备份数据返回到前端进行下一步的处理。 现在到这里涉及到了一个具有讨论性的关键点。就是说，从云端覆盖到本地，抑或是从本地上传到云端，这两个操作逻辑的差异。以及他们的相关的触发时机。两种同步方向这里是要值得注意的。同步的时机和方向这块面临了让用户手动触发还是说帮用户自动触发同步的一个倾向。下面我们来看看Tomatoo同步组件的样子。

云盘输入同步入口
Tomatoo提供了用户填入云盘参数的入口，包括连接到坚果云的账号和坚果云的服务器地址。当用户首次次输入后，系统将会记住表单的信息并把它存储到本地的数据库里，以及Mobx Store中作备份。当用户刷新页面或者再次进入到笔记里面的时候，上一次记录的信息将会随系统自动填入。

再说到同步操作和时机方面，Tomatoo现阶段采用了半自动的思路。即提供给用户一个双向的选择。用户可以主动选择，是否将当前笔记从本地上传到云端，或者是，从坚果云同步到本地。同时提醒用户，当从云端同步到本地的时候，将会有覆盖掉本地的数据的风险。这里也建议在大家在保存数据的时候。先上传到云端，在需要的时候再从云端同步到本地。一般建议在首进入应用时从云端同步到本地，这样就能跟云端数据保持一致。

考虑到更好的使用体验，Tomatoo在有可能的后续版本将进一步简化云同步的相关设定。比如说增加键盘快捷键，让用户不用打开菜单就能进行同步操作。还有就是希望能找到适当的时机更加自动化的帮用户去选择，怎样的同步方向，这也是Tomatoo需要改善的地方之一。

归档事件的处理

事件统计归档区 事件归档是应用里，在已完成的事件里由用户手自行筛选，再汇总处理的模块。初衷是考虑到云盘备份的同时，在界面上如果。笔记数量到达一定程度的情况下，同时需要冗余的存储空间，以便对笔记进一步的管理和优化。这一模块有两个主要功能。一个是对数据的归档存储。这里主要是对已完成的数据的存储。另一个是加入了查询的选项，以方便对可视笔记进行筛选和过滤。

另外在每项事件的时间栏中，Tomatoo加入了三种状态笔记的时间刻度。这也是一个实验性的尝试，能让用户看到自己完成一件事中各个阶段所需要的时间，从开始到结束。这些数据或者说时间段，也许能让用户对自己的所做的事情能有一个更加全面的了解，这样能在下一次的待办事项计划中，更好的掌握对时间的管理。对于日常的日程进度来说，也能有一个更加好的掌控。

动效 & 体验优化

笔记应用通常关注数据的准确性和笔记的直观性。与此同时，Tomatoo在这个基础尝试加入一些适时的动效过渡。借以在一定程度上提高笔记记录的效率，也希望能减少记录过程中的枯燥性。 Tomatoo主要从下面一些方面加入了动效的过渡，以及相关的逻辑处理。

一个是组件响应式的方面。像下面动图所展示的那样， 在Tomatoo的左分栏中，考虑到相对宽度，边栏高度是一个比较变动频繁的地方，随着浏览器窗口的变化，边栏高度就会发生变动变动。而在边栏上的元素。也会同时受到组件边栏高度的影响。通过对边栏相关页面元素的计算，能让边栏本身和边栏上边的元素在高度发生变化的时候，能回归到恰当的位置，同时提高了组件的整体视觉一致性。

再就是笔记在各个状态阶段切换的交接过渡处理。 前面说到，Tomatoo划分了笔记的三个状态阶段。分别是计划中，进行中和已完成的三种状态。而这三种状态加上应用本身的输入框。呈现一个4分栏的形态。为了让笔记数据在4个分栏中的交接过程中显得更加直观，突出笔记在状态中间迁移的感觉。设计了一个在分栏中跳跃运输的动效处理。

动效的设计总体上是在抛物线的基础上，加上贝赛尔曲线的微调打磨呈现出现在的效果。这里也用上了Ant配套的rc-queue-anim和rc-tween-one两个动画库，能更快捷的开发出事件元素的出入场和对运动轨迹的细节处理。 可以看到这块深入下去还有不少可以完善的地方，比如说更加灵动自然的动画曲线。考虑到实际浏览器版本的复杂性，同时放置了一个可以开关动效的选项，将其作为一项实验性的功能。不过如果大家手上机子/浏览器版本还新，能接受这略带简陋的动效，保持打开也是没问题的☺。

一些关注的问题

关于动效以及用户体验的优化是一段不短的路程，项目中还有不少一些其他的，对使用体验的优化，限于篇幅和时间，这会先说到这里。 最后，放上Tomatoo的体验地址

Tomatoo Editor

对于上文所说的内容，一些特点，大家可以在Tomatoo里面亲身体验，同时个人能力所限，对于一些不足的地方，也希望小伙伴们能够留言提出和包涵，以待后续改善。**如果在使用过程Tomatoo能真正帮助到大家在日常工作生活中的效率提升，那这款小笔记的存在也是有意义的。也欢迎大家的持续关注，后续如有更新我也会在这篇文章一并补充~

文章有点长，非常感谢耐心看到这里的你们，点赞等于学会，收藏等于精通，点赞加收藏是真爱！！！也期待在评论区和我讨论！！

avatar
文章
阅读
粉丝