从概念到实践：本地优先软件原型案例研究
引言：将理论付诸实践
本地优先软件的理念虽然引人入胜，但要将其从概念转化为实际产品，需要克服诸多技术和设计挑战。为了验证本地优先软件的可行性，并探索其用户体验潜力，Ink & Switch实验室开展了一系列实验性原型开发项目。这些原型不仅测试了CRDTs等核心技术的实际表现，还探索了本地优先范式下的用户界面设计和协作模式。
本文将详细介绍三个关键原型——Trellis、Pixelpusher和PushPin的开发过程、功能特点和用户反馈。通过这些案例研究，我们可以深入了解本地优先软件在实践中的优势、挑战以及未来发展方向。这些探索不仅验证了技术可行性，更为本地优先软件的用户体验设计提供了宝贵 insights。
Trellis：协作看板应用
设计目标：Trello的本地优先替代方案
Trellis是Ink & Switch开发的第一个本地优先原型，旨在重新实现Trello风格的看板应用。Trello作为一款流行的项目管理工具，采用典型的云服务模式，虽然提供了出色的协作体验，但也存在依赖网络、数据控制权受限等问题。
Trellis的设计目标包括：
- 提供与Trello相当的核心功能：看板视图、任务卡片、列表分类
- 实现完全本地优先的体验：离线工作能力、本地数据存储
- 支持多用户实时协作，无需中央服务器
- 探索本地优先环境下的新交互模式，如历史记录浏览
通过开发Trellis，团队希望验证CRDT技术在实际应用中的表现，并了解用户对本地优先协作工具的接受度。
技术实现：WebRTC通信、CRDT数据同步
Trellis基于Electron框架开发，结合了Web技术的跨平台优势和本地应用的性能特点。其技术架构的核心组件包括：
- 「Automerge CRDT库」：用于管理看板数据，处理并发编辑和冲突解决
- 「WebRTC」：实现点对点的实时通信，无需中央服务器即可同步数据
- 「React前端框架」：构建响应式用户界面，处理状态更新和渲染
- 「IndexedDB」：本地持久化存储，确保应用关闭后数据不丢失
在数据模型方面，Trellis使用Automerge定义了看板、列表和卡片等核心实体。每个卡片包含标题、描述、标签、截止日期等属性，所有这些都可以被多个用户同时编辑。WebRTC负责在用户之间建立直接连接，传输CRDT操作日志。当用户离线工作时，所有更改都存储在本地，重新联网后自动与其他用户同步。
这种架构使Trellis能够提供与Trello相似的协作体验，同时保持本地优先的特性：数据存储在用户设备上，无需登录账号，即使服务器不可用也能正常工作。
用户体验创新：时间旅行功能、变更历史可视化
Trellis不仅复制了现有看板工具的功能，还引入了一些创新的用户体验特性，充分利用了本地优先和CRDT技术的优势：
- 「时间旅行功能」：用户可以查看看板的历史状态，回溯到任意时间点。这一功能得益于CRDT完整记录的变更历史，使用户能够轻松恢复误删除的内容或查看项目演进过程。
- 「变更历史侧边栏」：右侧面板显示所有近期更改，包括谁在何时修改了什么内容。这种透明的变更跟踪增强了团队协作的可见性。
- 「无感知同步」：与传统云应用不同，Trellis的同步过程完全在后台进行，用户无需等待"正在保存"或"正在同步"的状态提示。
- 「离线工作无缝过渡」：当网络连接中断时，应用继续正常工作，没有任何功能限制或警告消息。重新联网后，更改自动同步，用户甚至可能不会注意到网络曾中断过。
这些特性共同营造了一种"数据即我所有"的用户体验，与传统云应用形成鲜明对比。用户反馈表明，这种体验极大地减轻了对数据安全和可用性的担忧，让用户能够更专注于工作本身。
Pixelpusher：协作绘图工具
设计目标：Figma风格的实时协作绘图
继Trellis之后，Ink & Switch开发了Pixelpusher，一款协作式像素艺术绘图工具。选择像素艺术作为目标领域有几个考虑：首先，像素编辑是一种直观的创意活动，易于理解和测试；其次，它对实时反馈和低延迟有较高要求；最后，像素数据结构相对简单，便于实现和调试。
Pixelpusher的设计目标是：
- 提供类似Figma的实时协作体验，但采用本地优先架构
- 支持多人同时编辑同一画布，所有更改实时可见
- 探索像素级别的CRDT同步性能
- 实验分支和合并等高级协作功能
通过开发Pixelpusher，团队希望测试CRDT技术在更复杂、更实时的场景下的表现，并探索本地优先软件在创意领域的应用潜力。
技术实现：Dat网络栈、像素级CRDT同步
Pixelpusher在技术架构上延续了Trellis的本地优先理念，但在网络层和数据模型上进行了创新：
- 「Hypermerge库」：基于Automerge和Dat项目的Hypercore协议，提供更高效的P2P数据同步
- 「像素数据CRDT」：专门设计的CRDT数据结构，优化像素级别的并发编辑
- 「Electron框架」：确保跨平台一致性和本地应用体验
- 「Canvas API」：高效渲染像素画布，处理实时更新
与Trellis使用的WebRTC相比，Dat网络栈提供了更可靠的P2P连接和数据持久化能力。每个Pixelpusher文档都作为一个Dat档案存在，可以通过唯一URL共享。当用户修改像素时，这些更改被编码为CRDT操作，通过Dat网络广播给其他协作者。
特别值得一提的是Pixelpusher的数据模型优化。传统的像素数据通常存储为二维数组，这种结构在并发编辑时容易产生冲突。Pixelpusher使用了一种基于CRDT的稀疏表示法，只跟踪被修改的像素及其历史，大大减少了需要同步的数据量，提高了性能。
用户体验创新：分支合并界面、冲突像素高亮
Pixelpusher在用户体验方面引入了多项创新，探索了本地优先协作的新可能：
- 「分支创建与合并」：借鉴Git的分支概念，用户可以创建画布的独立分支进行实验性编辑，完成后再合并回主分支。这为创意协作提供了更大的灵活性。
- 「冲突可视化」：当两个用户同时修改同一像素时，系统不是简单地选择一个版本，而是将冲突像素标记为红色，让用户手动选择保留哪个版本。这种透明的冲突处理方式增强了用户对数据的控制感。
- 「用户存在指示」：显示其他在线用户的光标位置和当前编辑区域，增强协作存在感。
- 「URL共享」：通过简单的URL即可共享画布，无需复杂的权限设置。接收方只需在浏览器中打开URL（或在Pixelpusher应用中粘贴）即可加入协作。
- 「用户头像标识」：每个用户的编辑操作都用其个人头像的颜色标记，让团队成员的贡献一目了然。
这些创新不仅解决了协作绘图的技术挑战，还探索了如何在本地优先环境下设计直观、高效的协作界面。用户测试表明，分支和合并功能特别受到创意专业人士的欢迎，因为它提供了一种安全的实验方式，同时保持了协作的灵活性。
PushPin：媒体画布工作空间
设计目标：Miro/Milanote的本地优先版本
PushPin是Ink & Switch开发的第三个也是最雄心勃勃的原型，旨在创建一个本地优先的混合媒体画布工作空间，类似于Miro或Milanote。与前两个原型相比，PushPin支持更丰富的内容类型和更复杂的用户交互，更接近实际生产环境的需求。
PushPin的设计目标包括：
- 支持多种内容类型：文本、图像、链接、便签、绘图等
- 实现复杂的空间布局和连接关系
- 支持嵌套文档和组件复用
- 提供更完善的身份和权限管理
- 测试CRDT在大规模、长期使用场景下的性能
PushPin不仅是技术验证，更是对本地优先软件在专业工作环境中实用性的全面测试。团队在开发过程中实际使用PushPin进行项目管理、头脑风暴和文档协作，收集了宝贵的长期使用反馈。
技术实现：Automerge+Hypermerge、嵌套文档结构
PushPin建立在Trellis和Pixelpusher的技术基础上，并进行了显著扩展：
- 「Hypermerge框架」：结合Automerge的CRDT能力和Dat的P2P网络，提供更强大的分布式数据同步
- 「嵌套文档结构」：支持文档中的文档，实现复杂的信息组织和复用
- 「组件化架构」：将不同内容类型（文本、图像、绘图等）实现为独立组件，便于扩展
- 「存在系统」：专门设计的协议，同步用户在线状态、光标位置和选择区域
- 「持久化标识系统」：为用户和文档提供持久、可移植的标识符
PushPin的数据模型是其最显著的技术创新之一。它使用Automerge的JSON-CRDT支持复杂的嵌套结构，允许用户创建包含其他文档的文档，形成层次化的信息组织。这种结构特别适合头脑风暴、项目规划和知识管理等场景。
为了支持实时协作体验，PushPin实现了一个专门的"存在系统"（presence system），独立于核心数据同步。这个系统跟踪用户的在线状态、光标位置、选择区域等临时数据，提供低延迟的协作反馈，同时不污染核心文档的CRDT历史。
用户体验创新：身份系统、临时数据共享
PushPin在用户体验方面进行了多项创新，探索了本地优先软件在复杂协作场景下的设计原则：
- 「轻量级身份系统」：用户可以创建简单的身份（包含名称和头像），无需中央账户管理。身份信息随文档一起同步，确保协作上下文的一致性。
- 「临时数据共享」：除了持久的文档内容外，PushPin还支持临时数据的共享，如选择高亮、评论线程和实时讨论。这些功能增强了协作体验，同时保持核心文档的简洁。
- 「文档导航与组织」：提供多种视图模式（画布、列表、网格）和强大的搜索功能，帮助用户在复杂的信息空间中导航。
- 「渐进式发现」：复杂功能通过渐进式界面呈现，新用户可以轻松上手基本操作，而高级用户可以深入使用更复杂的功能。
- 「导出与互操作性」：支持将文档导出为PDF、PNG或JSON等标准格式，确保数据可移植性和长期可访问性。
PushPin的开发和使用经验为本地优先软件的设计提供了重要启示。它表明，通过精心设计的数据模型和用户界面，本地优先软件不仅可以提供与传统云服务相当的功能和体验，还能通过数据主权和离线能力带来额外的价值。
原型开发的关键发现
CRDT技术的可靠性验证
三个原型的开发和测试充分验证了CRDT技术的可靠性和实用性。在团队内部使用和外部用户测试过程中，Automerge库表现出了出色的稳定性：
- 「自动合并的有效性」：在绝大多数情况下，CRDT能够无缝合并多个用户的并发更改，用户甚至意识不到冲突的存在。这大大减轻了协作中的认知负担。
- 「数据一致性保证」：无论网络条件如何，所有设备最终都能收敛到一致的文档状态。即使在长时间离线后重新连接，系统也能正确同步所有更改。
- 「性能表现」：对于中小型文档（如典型的看板、像素画或中等规模的画布），CRDT操作的处理和同步延迟都在可接受范围内，不会影响用户体验。
这些发现证实了CRDT技术已经足够成熟，可以作为本地优先软件的基础。虽然仍有性能优化空间，但核心功能已经能够满足大多数协作场景的需求。
离线工作体验的优势
原型测试最显著的发现之一是离线工作体验带来的用户满意度提升。传统云应用在网络不稳定或不可用时往往会显示错误信息或功能受限，而本地优先原型则提供了无缝的离线体验：
- 「无中断工作流」：用户可以在飞机、地铁或网络故障等场景下继续工作，不会遇到"无法连接到服务器"的错误。
- 「即时响应」：所有操作都在本地处理，提供即时反馈，没有令人沮丧的加载指示器或延迟。
- 「心理安全感」：用户知道他们的工作立即保存到本地，不会因网络问题而丢失，这种安全感显著提升了用户信心和工作效率。
一位参与测试的用户评论道："使用PushPin时，我不再担心网络连接或服务器状态。我可以专注于工作本身，而不是工具是否正常运行。"这种反馈凸显了本地优先软件在用户心理层面的优势。
网络通信与性能挑战
尽管取得了成功，原型开发也暴露了一些需要解决的技术挑战，主要集中在网络通信和性能方面：
- 「P2P连接可靠性」：WebRTC和Dat网络在某些网络环境下（如严格的企业防火墙或复杂的NAT配置）难以建立直接连接。这导致某些情况下用户无法发现彼此或同步速度缓慢。
- 「大型文档性能」：随着文档大小和历史记录增长，CRDT操作的处理时间和内存占用会增加。对于包含大量图像或复杂结构的大型PushPin文档，团队观察到明显的性能下降。
- 「初始同步时间」：新用户首次加入现有协作时，需要同步完整的文档历史，对于大型文档可能需要较长时间。
- 「移动设备支持」：虽然原型可以在移动设备上运行，但针对触摸界面的优化不足，且移动网络环境下的同步效率有待提高。
这些挑战并非根本性障碍，但需要在未来的开发中重点解决，才能使本地优先软件在各种使用场景下都能提供出色的用户体验。
经验教训与改进方向
文档历史可视化的重要性
原型测试揭示了文档历史可视化对于本地优先协作软件的重要性。与传统云应用不同，本地优先软件中没有中央服务器来"仲裁"真相，用户需要更好地理解文档的演变过程和当前状态：
- 「时间导航需求」：用户需要能够查看历史版本、恢复误操作、理解变更来源。Trellis的时间旅行功能和变更历史侧边栏被证明是非常有价值的功能。
- 「可视化复杂度」：随着文档历史增长，简单的线性时间轴变得不够用。需要更直观的方式来展示分支、合并和并发更改。
- 「上下文保留」：历史记录不仅需要显示"谁做了什么"，还需要保留当时的上下文，帮助用户理解变更的原因和意图。
未来的本地优先软件应该将文档历史视为核心功能，而不是附加功能，设计直观、强大的历史浏览和操作界面。
P2P网络的实际限制
尽管P2P网络架构在理论上非常适合本地优先软件，但实际部署中面临诸多挑战：
- 「连接可靠性」：在现实世界的网络环境中，直接P2P连接并不总是可行的。未来的本地优先软件可能需要混合架构，结合P2P和选择性的中继服务器。
- 「发现机制」：如何让用户轻松发现和连接到协作者，而不依赖中央服务器，仍然是一个开放问题。QR码、本地网络发现和分布式哈希表等技术都有其优缺点。
- 「性能优化」：P2P网络在延迟和吞吐量方面可能不如中心化服务。需要针对不同类型的操作（如小的文本编辑vs大的图像传输）优化同步策略。
- 「能源效率」：持续的P2P连接在移动设备上可能导致过高的电池消耗，需要智能的连接管理策略。
这些挑战表明，本地优先软件的网络层需要进一步创新和优化，才能提供与传统云服务相当的可靠性和性能。
性能优化需求：历史记录压缩
随着原型使用时间的增长，团队发现CRDT历史记录的大小可能成为性能瓶颈。每次编辑操作都会添加到历史记录中，对于长期使用的大型文档，这可能导致：
- 「存储占用增加」：特别是对于图像编辑等操作，历史记录可能比当前文档状态大得多。
- 「加载时间延长」：应用启动时需要加载和处理完整的历史记录，影响启动性能。
- 「同步效率降低」：新设备加入协作时需要传输完整的历史记录，消耗带宽并延长同步时间。
为解决这些问题，团队探索了历史记录压缩技术：
- 「状态快照」：定期保存文档的完整快照，允许丢弃早期历史记录，同时保持近期历史的可访问性。
- 「操作合并」：识别并合并可以安全合并的连续操作，减少历史记录体积。
- 「选择性同步」：只同步当前视图所需的历史记录部分，延迟加载不常用的历史数据。
这些技术显示出很大潜力，但也带来了额外的复杂性。未来的CRDT库可能需要将历史记录管理作为核心功能，自动平衡历史完整性和性能需求。
结语：本地优先软件的用户体验设计启示
通过Trellis、Pixelpusher和PushPin三个原型的开发和测试，Ink & Switch团队获得了关于本地优先软件用户体验设计的宝贵启示：
首先，**「数据主权感」**是本地优先软件最强大的情感价值主张。用户测试表明，知道数据存储在自己的设备上，不受服务提供商控制，这种安全感和控制感本身就具有巨大的吸引力，甚至超过了具体功能的价值。
其次，**「无缝离线体验」**不仅仅是技术优势，更是用户体验的质变。摆脱网络依赖带来的心理负担，让用户能够完全专注于内容创作，这种体验上的差异是传统云应用难以比拟的。
第三，**「协作模式创新」**是本地优先软件的重要机会。CRDT技术和P2P架构不仅复制了现有云服务的协作功能，还开启了新的协作模式，如分支编辑、本地-first审核和异步实时协作等。
最后，**「渐进式采用」**是本地优先软件走向主流的关键。原型经验表明，用户通常需要时间适应本地优先的思维模式。因此，设计应该允许渐进式采用，例如先提供本地存储和离线功能，然后再引入更高级的协作功能。
这些原型不仅验证了本地优先软件的技术可行性，更为未来的产品开发提供了清晰的方向。虽然仍有挑战需要克服，但本地优先软件代表了软件设计的一个重要演进方向，有望在保持协作便利性的同时，恢复用户对数据的控制和所有权。
在接下来的文章中，我们将探讨如何将这些原型经验转化为更广泛的行业变革，以及不同角色（研究者、开发者、创业者）如何为本地优先软件的发展做出贡献。
❝
欢迎大家关注公众号:极客悟道
每天不定时分享开源新品，经验分享❞
