转载自：http://www.infoq.com/cn/articles/soundcloud-development-sharing

PS: http://www.infoq.com 是个好网站

SoundCloud是世界领先的基于声音分享的社交平台，每个人可以录制并上传自己的声音，同时分享给社区的好友。SoundCloud前端技术团队，不断通过技术的创新来提升用户体验，打造下一代单页面应用，并分享了技术实现的心得体会。

下一代SoundCloud应用（已经在公测状态），尝试使用HTML5 widget实现声音播放器，未来会根据浏览器的兼容性，将老的flash player切换为HTML5 widget。前端技术实现不仅仅是HTML5，构建一个坚实的底层JavaScript框架式是很重要的。

构建单页面应用之JavaScript选型

下一代SoundCloud应用最重要的一个特性是在不打断用户通过导航寻找其他声音的前提下，可以回放之前播放的track（声音片段），这相当于，界面右上方总会悬浮一个迷你播放面板，每当用户想回放上一个track，一次不刷新页面的点击就可以解决问题。这势必会鼓励用户根据当前的页面导航，不断寻求新的内容，此类行为会通过点击完成，每次点击应该保证又快又平滑。在系统层面保证又快又平滑是将下一代应用定位为单页面应用的重要原因（数据通过统一的API获取，前端的展现和用户点击行为，通过前端技术处理以获取更好的体验）。

图1：悬浮按钮^[1]

在前端JavaScript技术框架的选型上，SoundCloud推崇Backbone.js，原因除了在手机站点的实践经验外，Backbone.js会对前端进行分层：Views（视图），Data Model（数据）以及Collection（集合）等。剩下的业务逻辑以及组件的具体实现，会留给应用端自己处理，这就意味着应用端有非常大的灵活性。

以生成视图Rendering Views为例，SoundCloud选择Handlebars作为页面模板库，Handlebars与其他模版库相比有以下优势：

• 模版内部没有具体的逻辑，便于解耦
• 模版可以通过预编译，获取在浏览器更快的渲染性能（运行时库只有3.3kb大小）
• 支持自定义custom helpers