使用Backbone.js制作的10个Web应用程序[案例研究]

Backbone是一个JavaScript库，它大致基于Model-View-Controller设计模式，但是由于缺少Controller元素，因此最好将其称为MV *框架。

如果是这样，请看一下Backbone.js可以完成的工作。

您想让您的应用更健康吗？

您是否曾经被意大利面条代码所困扰？

由于Backbone默认情况下与任何RESTful API同步，因此您可以通过RESTful JSON接口轻松将客户端应用程序连接到现有的服务器端API。

它可帮助您构建快速，时尚且数据丰富的单页Web应用程序，使数据逻辑与用户界面分离 ，避免将数据与DOM绑定，并随着应用程序的增长而扩展 。

在本文中，我们将研究10个利用Backbone库功能的Web应用程序，以帮助您掌握Backbone.js对于未来Web应用程序项目的潜在潜力。

1.

Trello Tech Stack的所有元素的设计方式都使得可维护的客户端可以轻松处理更新 ，并在触发DOM事件时与服务器动态重新同步 。

Backbone与HTML5 History API和前端上的Mustache -less逻辑模板语言一起使用。

Trello是使用Backbone.js从头开始构建的。

开发人员还构建了自己的客户端模型缓存，以实现更快的更新和更有效的代码重用。

Trello将Backbone Model和Views用于其对象（例如Cards或Member），并将Backbone Collections用于相关模型（例如，列表中的Cards）。

2.

您很可能已经听说过Foursquare ，这是一种流行的基于位置的社交网络应用程序，它使您可以与世界各地的朋友共享场所。

Foursquare的核心JavaScript API是围绕Backbone Models构建的，其中Foursquare API的Model类 （例如Users，Venues和Check-ins）是Backbone Model类的子类，并继承了它们的方法和属性 。

是的，没错，Backbone使开发人员能够编写漂亮的面向对象JavaScript 。

代码的实现可以像这样草绘： fourSq.api.models.Venue = fourSq.api.models.Model.extend({ ... });

除了Backbone之外，FoursquareJavaScript API还使用jQuery，Underscore.js （这是Backbone唯一的硬依赖性）和Closure Compiler 。

骨干视图在Foursquare应用程序中也发挥了作用，因为它们通过首页地图和列表之类的功能增强了用户体验。

3.

在Basecamp Calendar中，每当更新模型（客户端数据）时，Backbone都会将视图呈现到ECO （嵌入式CoffeeScript）模板中。

Basecamp Calendar的主要设计目标是创建一个交互式界面，使直观的团队日程安排成为可能，并在毫秒内进行自我更新 。

最好仔细考虑可以在哪里应用它。

只是表明您不一定需要使用Backbone构建完整的单页应用程序；

有趣的是，开发人员团队并未将整个Basecamp做成一个单页应用程序，这是Backbone.js的主要用例，而只是利用了Calendar功能中的库，他们可以真正利用它的优势。

阅读有关Backbone反模式的更多信息，以决定是否需要为整个应用程序使用Backbone。

4.

因此，开发人员决定通过Socket.io实时引擎而不是REST API 保存消息 。

默认情况下，Backbone.js通过RESTful接口连接到服务器端，这无法实现实时数据流。

开发团队的主要挑战是启用实时消息和工作流。

Flowdock是完全在Backbone.js之上构建的。

Flowdock主要是服务器端的Rails应用程序，但它们具有一个单独的Node.js后端，用于处理Socket.io连接。

由于Socket.io也是一个JavaScript库，因此它使JavaScript驱动的前端和后端（Node.js）之间的通信变得无缝。

为此，他们编写了一个称为Backbone.sync 的自定义方法 。

Bacon.js的EventStreams功能可帮助Flowdock保持其骨干示范和集合最新的。

Flowdock借助Bacon.js进一步增强了实时用户体验 ， Bacon.js是一个方便JavaScript库，支持功能性反应式编程 。

5.

后端由Python驱动，但是对我们来说有趣的是应用程序的script.js文件 。

Cocktail Search是一个开源应用程序，它使您有机会查看Backbone.js的非常简单实现的代码。

如果您检查代码，则可以看到Model-View- *框架的非常基本的结构：它包含一个在Cocktail类中定义的模型 ，该模型不更改Backbone.Model父类的默认设置，而其中一个Backbone Collection用于搜索结果和3个Backbone视图，每个视图都向Backbone.View父类添加新方法。

Underscore.js是Backbone的唯一硬依赖性，而如果您想借助Backbone Views来操作DOM，则需要jQuery（Cocktail Search应用程序就是这种情况）。

如果看一下index.html文件，您会发现开发人员如何在顶部添加Backbone.js及其依赖项， Underscore.js和jQuery 。

6.

Atlassian，其背后的公司也在JIRA商业问题跟踪软件中使用了Backbone，这也是他们的另一个主要产品。

Bitbucket是类似于Github的源代码托管和代码管理应用。

如果那还不够，那么模型甚至都不会总是定义它们公开的属性 。

这基本上意味着模型，集合和视图不必定义它们公开的自定义事件 。

他们遇到了许多由于Backbone.js宽松的定义约定而导致的无提示失败。

在他们的应用程序中充分利用Backbone.js的过程中，开发团队发现了Backbone错过的几件事。

这种宽容的特性是许多开发人员喜欢的功能，但Atlassian团队却不喜欢，因此他们开发了自己的Backbone扩展名Backbone.Brace ，该扩展为库添加了mixins以及自记录的属性和事件 。

与Trello一样，BitBucket使用Moustache模板语言在前端渲染Backbone View。

如果您对同一件事感到恼火 ，则可以将Backbone.Brace添加到自己的应用程序中，因为它是Bitbucket本身托管的开源项目。

7.

在Backstage博客中，他们利用Backbone 提供坚实的结构基础同时仍保持灵活性的能力来解释他们对框架的选择。

SoundCloud的开发人员首先将Backbone.js用作他们的移动应用程序的前端框架，但是他们非常喜欢它，因此也将其用于桌面网站的客户端。

扩展是音频流应用程序的主要关注点，SoundCloud承认，“与组织更多的是关系而不是实施”，这使组织良好但轻巧的Backbone成为他们的理想选择。

SoundCloud利用Handlebars语义模板系统在前端渲染Backbone View。

8.

AirBnB非常喜欢Backbone，他们不仅决定在前端使用它，而且还希望能够在后端运行该库。

AirBnB首先像SoundCloud一样在其移动应用程序中使用Backbone.js，但后来越来越多地在其Web应用程序功能中使用了Backbone.js，例如愿望清单，匹配，搜索，社区和付款。

Rendr用Node.js编写，遵循“强加最小的结构，允许开发人员以最适合其应用程序的方式使用该库”的理念，就像Backbone本身一样

随后，他们将服务器端Backbone库Rendr开源，并在其Github页面上可用。

如果您对AirBnB的技术堆栈更感兴趣，请阅读他们的博客文章，了解他们从Rails后端到同时在客户端和服务器端同时使用Backbone的 圣杯的旅程。

9.

骨干为用户节省了带宽，因为脚本和嵌入式视频不会一直重新加载 。

介面可让您在浏览时轻柔过渡，快速浏览应用程式。

Hulu利用Backbone.js为电影爱好者构建了无缝，快速的用户体验。

Hulu在后端运行一个Rails引擎，如果您喜欢有趣但内容丰富的演讲，则可以在最终决定更改为组织更完善的Backbone框架之前，先了解一下开发人员团队如何与jQuery 纠缠在一起 。

Backbone.js允许Hulu 将其呈现方式从服务器端逐步转换为客户端端，而不用冒险地重写其现有的Rails后端。

10.

看看在显着的名单是用来开发平台，其中包括近年来的超级巨星的开源软件：Nginx的，MongoDB的，Node.js的服务器端和前端Backbone.js的过程中。

Countly是一款对开发人员友好的应用程序：它不仅易于扩展，而且其文档还为开发人员提供了有关如何在核心Backbone客户端上构建自定义插件的 此类教程。

Countly利用Handlebars语义模板库渲染显示通过Backbone模型准备和加载的数据的Backbone视图。

Anna是一位网络开发人员和代码编写者，对科学，人工智能和颠覆性技术很感兴趣。

编者注： 这是Anna Monus为Hongkiat.com撰写的。

翻译自: https://www.hongkiat.com/blog/backbonejs-web-apps/