web标准化交流会讨论2010年10月期讨论中的一个案例讨论

1. 今天你 HTML5 了吗
——EtherCodes 中的 HTML5

2. EtherCodes 简介
多人在线实时代码分享协同工具
典型案例
1.分享代码片段并获取反馈
2.实时代码评审
3.编程型面试
4.远程教学
特点
1.完全基于浏览器
– 高度实时同步
– 编辑体验流畅
– 使用模式迅捷

3. 在线源码编辑
三个流派
• 完全基于 DOM （ HTML4 ）
o JSVI
o YMacs
• 使用 contenteditble （ HTML4->HTML5)
o CodePress (WordPress code editor plugin)
o CodeMirror (Google API Playground)
• 基于 Canvas （ HTML5 ）
o Bespin (EtherCodes)
两个特点
• 实现复杂，缺陷诸多
• 易用性，扩展性，兼容性，可访问性难以兼顾

4. 在线源码编辑技术
基本编辑器构建
1.选区与光标系统（文字测距、键盘映射 )
2.文字渲染与布局系统 （字符显示、换行处理
3.行编号与语法着色系统 （词法分析、局部刷新）
高级编辑器构建
1.代码提示
– 格式化
– ...
HTML4 时代的问题
• 基于 DOM ，可获得完备的文字布局
• 需要进行元素距离和文字位置的换算，选区光标实现复杂
• 依赖 DOM 操纵和 CSS 完成语法高亮，性能低下

5. EtherCodes 技术事记
• 2008/11 Dion Almaer & Ben Galbraith (Mozilla) 创建第一个
基于 <canvas> 实现的编辑器
• 2009/2 Mozilla 发布云端编辑器 Bespin, 针对 D&B 第一版编
辑器进行改进
• 2009/8 Joe Walker (DWT) 为 Bespin 添加简单协同功能
• 2010/2 Calvin Dangoor 等人 (Mozilla) 将 Bespin 移植到
CommonJS 规范
• 2010/8 EtherCodes 发布，实时协同与 Bespin 完整结合

6. Canvas 与在线编辑
1. Canvas
• 底层脚本化 2D 图形绘制，接口类似 OpenGL
• 最早由 Apple 引入 Webkit, 随后成为 WHATWG 规范 , 尚未
成为 w3c 标准，但已被绝大多数浏览器广泛支持
• 部分浏览器实现尚未完备，如 Opera 不支持 Cavnas Text
Rendering ( fillText & strokeText )
基于 Canvas 编辑器的技术特点
• 实时绘制生成的选区和光标
• 基于 strokeText 渲染文本
• 完全由 JS 控制的键盘响应
• 剪切板仍需依赖 DOM

7. WebWorker 与在线编辑
性能是编辑体验的性命攸关所在，大尺寸文本是验金石
WebWorker 规范定义了在浏览器中运行基于消息的多线程脚本
，为需长时间运行的脚本提供了不阻塞 UI 的能力
无需及时响应的诸多功能可获益于 WebWorker
1.语法高亮
2.文本查找
3.语法分析
WebWorker 特点
1.无锁进程间通信
– 多派发

8. WebSockets 与在线编辑
实时操作变换 (OT) 需要实时的数据传输技术 - Comet
• HTTP 轮询
1. HTTP 长连接
1. Forever iframes
2. XHR Streaming
3. Flash-based
2. WebSocket (TCP) 基于事件的双向通信
WebSocket 优势
1.服务器负担小（无需 HTTP 连接）
– 服务器与客户端代码易于统一

9. 今天你 HTML5 了吗
• 持续关注 HTML5 更新
• 留意身边的 HTML5 用例

10. 今天你 HTML5 了吗
• 持续关注 HTML5 更新
• 留意身边的 HTML5 用例