SitePoint播客＃145：Addy Osmani的Backbone.js基础

Episode 145 of The SitePoint Podcast is now available! This week our regular interview host Louis Simoneau (@rssaddict) interviews Addy Osmani (@addyosmani) about his free online book about the Fundamentals Of Backbone.js and how using javascript frameworks can really help when building a front-end Web app.

SitePoint Podcast的第145集现已发布！ 本周，我们的定期采访主持人Louis Simoneau( @rssaddict )采访了Addy Osmani( @addyosmani )关于他关于Backbone.js基础的免费在线书，以及在构建前端Web应用程序时如何使用javascript框架真正有所帮助。

下载此剧集 (Download this Episode)

You can download this episode as a standalone MP3 file. Here’s the link:

您可以将本集下载为独立的MP3文件。 这是链接：

• SitePoint Podcast #145: Bachbone.js Fundamentals with Addy Osmani (MP3, 34:16, 32.9MB)

  SitePoint Podcast＃145：Addy Osmani的Bachbone.js基础知识 (MP3，34:16，32.9MB)

剧集摘要 (Episode Summary)

Louis chats to Addy Osmani (@addyosmani) about backbone.js.

路易斯与Addy Osmani( @addyosmani )谈论了关于ribs.js的问题。

Browse the full list of links referenced in the show at http://delicious.com/sitepointpodcast/145.

浏览http://delicious.com/sitepointpodcast/145中显示的参考链接的完整列表。

面试成绩单 (Interview Transcript)

Louis: Hello and welcome to another episode of the SitePoint Podcast. Today on the show my guest is Addy Osmani who is a JavaScript developer at AOL; he speaks at a number of conferences about JavaScript and about developing larger applications in JavaScript and is the author of a few books. Hi, Addy.

路易斯：您好，欢迎收看SitePoint播客的另一集。 今天在节目中，我的嘉宾是AOLJavaScript开发人员Addy Osmani； 他在许多有关JavaScript和使用JavaScript开发更大的应用程序的会议上发表演讲，并且是几本书的作者。 嗨，艾迪。

Addy: Hi, it’s nice to be on your show.

艾迪：嗨，很高兴参加您的表演。

Louis: It’s great to have you. So, the reason that prompted me to reach out to you and try and get you to come on the show is you’ve recently put out sort of a free in-progress book about Backbone.js, is that right?

路易斯：拥有你真高兴。 因此，促使我与您联系并尝试吸引您参加演出的原因是您最近发布了一本关于Backbone.js的免费正在进行中的书，对吗？

Addy: Yeah, that’s right.

艾迪：是的，是的。

Louis: So, before we dive into talking about the book and what prompted you to do this sort of project, I’d like to maybe give the listeners some background on Backbone. So do you want to explain a little bit about what Backbone.js is and what problem does it try and solve, and why would people want to use it.

路易斯：所以，在我们深入讨论本书以及促使您进行此类项目的原因之前，我想为听众提供有关Backbone的背景知识。 因此，您想解释一下Backbone.js是什么，它试图解决什么问题，以及人们为什么要使用它。

Addy: Absolutely. So, the idea behind Backbone Fundamentals is it’s a book that teaches both beginners and advanced developers how to effectively use Backbone to build more structures to applications. Now, what does that all mean? Well, when you start building with App Stack or non-trivial or begin to grow, you learn that unless you have some sort of organization in place you’re going to end up with some problems. What kind of problems? Well, maintaining all of the code through applications, say a file, without using any architectural design patterns can mean that it ends up looking a little bit like spaghetti; it might look good from the outside, it might taste nice, but it’s a mess to clean up. So, when you’re searching for something a little bit more maintainable, a lot of developers find that applying patterns like MVC, which usually stands for Model View Controller, that means something slightly different on the front end and in JavaScript; that can help them keep their code a little bit more organized. Now, Backbone is one of those frameworks that lets you use the flavor of MVC to cleanly separate concern and organize the application. It’s mature, it’s incredibly lightweight given what you get out of it, and it’s great for single page applications and multi-view applications. Now, there are like a ton of other solutions out in the market at the moment which offer, a bit of a variation of what Backbone does. In my opinion it’s one of the more elegant solutions out there right now. Developers that might be looking at it and saying, well, is Backbone good enough to be used in my large enterprise model application? well it’s currently being used by the likes of LinkedIn, Foursquare, Sound Cloud, and a lot of other large companies that build their applications. Now, they’re not small companies and they’re not building small applications, so hopefully if it’s good enough for them it’s hopefully good enough for the rest of us.

艾迪：绝对。 因此，“ Backbone基础知识”的思想是一本书，该书既向初学者也向高级开发人员教授如何有效使用Backbone为应用程序构建更多结构。 现在，这意味着什么？ 好吧，当您开始使用App Stack进行构建，构建或开始发展时，您会了解到，除非拥有适当的组织机构，否则最终会遇到一些问题。 什么样的问题？ 好吧，在不使用任何架构设计模式的情况下，通过应用程序(例如文件)维护所有代码可能意味着它最终看起来有点像意大利面条。 从外面看起来可能不错，也许味道不错，但是清理起来很麻烦。 因此，当您在寻找一些更可维护的内容时，许多开发人员会发现应用MVC之类的模式通常代表Model View Controller，这意味着前端和JavaScript会有一些不同。 可以帮助他们使代码更有条理。 现在，Backbone是那些框架之一，可让您使用MVC的风格来明确分离关注点并组织应用程序。 它很成熟，从您获得的内容来看，它的重量非常轻，非常适合单页面应用程序和多视图应用程序。 现在，目前市场上还有大量其他解决方案可以提供，这与Backbone的功能有所不同。 我认为，这是目前最优雅的解决方案之一。 可能正在研究它的开发人员说，好吧，Backbone是否足以在我的大型企业模型应用程序中使用？ 嗯，LinkedIn，Foursquare，Sound Cloud和其他许多构建其应用程序的大型公司目前正在使用它。 现在，他们不是小公司，也不是在构建小型应用程序，因此希望对他们来说足够好，对我们其他人也足够好。

Louis: Yeah, absolutely. We’ve recently started using Backbone at Flippa, I haven’t personally played with it a lot, I work more on the backend, but I’ve definitely heard good things from our front end guy about the experience he’s had with it. But maybe I want to step back a little bit, you were talking about MVC as it applies to JavaScript and to front end engineering, and I understand that probably a lot of listeners, or a lot of people out there who’ve done backend web development, you know, MVC makes sense for that, and I think it’s easy for most people to grasp why you’d want to use MVC for something like an application where you’re dealing with interaction with a database, which is your model, and then routing requests, which is your controller, and templating, but for something which is entirely on a front end, or the application code on the front end which is in JavaScript, where does MVC come in and how does it relate to front end development?

路易斯：是的，绝对。 我们最近开始在Flippa上使用Backbone，我个人还没有玩过它，我在后端上做得更多，但是我绝对听过前端家伙关于他使用它的经验的好消息。 但是也许我想退后一步，您正在谈论MVC，因为它适用于JavaScript和前端工程，而且我了解可能有很多侦听器，或者很多从事过后端Web的人开发，就知道MVC是有道理的，而且我认为对于大多数人来说，很容易理解为什么要在诸如处理与数据库交互的应用程序之类的应用程序中使用MVC，这就是模型，然后路由请求(这是您的控制器和模板)，但对于完全在前端的内容或在JavaScript中的前端的应用程序代码，MVC传入何处以及它与前端有何关系发展？

Addy: Well, on the front end it translates, in some ways it translates almost identically to the server side version of MVC, and others it differs quite a lot. I think view and models are quite similar on the front end as they are on the backend, but when you get to talking about controllers that’s somewhere where a lot of sort of JavaScript MVC frameworks tend to take a slightly different view of what that should be. Some frameworks, Backbone, for example, doesn’t exactly have a controller, what it has instead of the C part in MVC is it has routers instead which are used for sort of managing navigation; other frameworks consider the view the controller on the front end. And so it’s hard to give a concrete answer to that, but each framework, and each framework author’s template tend to take a slightly different take on how that should be interpreted, but I think that the MVC pattern or MVV, I tend to call MVC on the front end MVV, which means Model View Variation. And I think that that pattern still translates well to the front end and does help keep all of your code relatively well organized, even if you’re just keeping concepts sort of models and views in there and having to graft onto something else inside that pattern; it still tends to work quite well in my opinion.

艾迪：嗯，它在前端进行翻译，在某些方面它的翻译几乎与服务器端版本的MVC相同，而在其他方面则相差很多。 我认为前端的视图和模型与后端的视图和模型非常相似，但是当您谈论控制器时，很多JavaScript MVC框架往往会对应该采用的视图稍有不同。 。 某些框架(例如Backbone)并不完全具有控制器，它具有MVC中的路由器，而不是MVC中的C部分，它具有用于管理导航的路由器。 其他框架则考虑前端控制器的视图。 因此，很难对此给出具体的答案，但是每个框架和每个框架作者的模板在如何解释方面都倾向于略有不同，但是我认为MVC模式或MVV我倾向于称其为MVC在前端MVV上，表示模型视图变化。 而且我认为该模式仍然可以很好地转换到前端，并且确实有助于使您的所有代码保持相对良好的组织，即使您只是在其中保留概念排序的模型和视图并必须移植到该模式内部的其他内容; 我认为它仍然可以很好地工作。

Louis: Right. Maybe you can make this a little bit more concrete in my mind and the listener’s mind. What’s a simple example of sort of a front end application that could benefit from this kind of framework?

路易斯：对。 也许您可以在我和听众的脑海中更具体一点。 什么样的前端应用程序可以从这种框架中受益呢？

Addy: Anything that I would consider non-trivial. So let’s say we’ve got a simple photo gallery application which would be something that perhaps isn’t using a single app paradigm, you’re going to be having people refresh their page every single time they’re interacting with something. So, if I click on a thumbnail to view a larger version of a picture I might be going to a completely different page, that might mean I’m making more http requests, I’m having to have the user wait even longer for things to load up, and in a single page application paradigm, which is what frameworks like Backbone tend to help people do, it means fewer clicks to get things working, it means how snappy the interface is, but in terms of organizing your code it means that I can cleanly break apart the various components that make up that application. So, it’s clear to me, well, what is the concept of a photo in that application? Well, I can use models to model the data around that and say okay, well, a photo might have a caption, a photo might have an image source, it might have some additional meta data, okay well that’s the concept of the model. The collection, which is something we have in Backbone, probably represents a number of different models, so that means that if I have a gallery I’m going to have multiple models, i.e. multiple photos, in that particular gallery. And my views might essentially mean okay, well, what is that I’m actually rendering to the end user, am I taking them from an index page that might just say what the application does, and taking something that might actually let them traverse and browse through different image collections, for example, routing there is perhaps going to be used for actually taking them from one page to another and giving them URLs, clean URLs if you are using HTML5 PushState for just using the hashtags to actually navigate around the application without having to make them sort of refresh the page at all.

艾迪：我认为不重要的任何事情。 假设我们有一个简单的照片库应用程序，该应用程序可能不会使用单个应用程序范式，您将使人们每次与某事物进行交互时都刷新其页面。 因此，如果我单击缩略图以查看较大版本的图片，则可能要转到一个完全不同的页面，这可能意味着我在发出更多的http请求，因此必须让用户等待更长的时间加载，并且在单页应用程序范式中，这就是Backbone之类的框架通常可以帮助人们完成的工作，这意味着使工作正常运行所需的点击次数减少，这意味着界面的敏捷性，但是就组织代码而言，这意味着我可以清楚地分解组成该应用程序的各个组件。 因此，对我来说很明显，该应用程序中的照片概念是什么？ 好吧，我可以使用模型对周围的数据进行建模，然后说，好吧，一张照片可能有标题，照片可能有图像源，它可能还有一些其他元数据，好吧，这就是模型的概念。 该集合(我们在Backbone中拥有的东西)可能代表了许多不同的模型，因此这意味着，如果我有一个画廊，那么我将在那个特定的画廊中拥有多个模型，即多张照片。 我的观点从本质上可能意味着好，好吧，我实际上要呈现给最终用户的是什么，我是从可能只是说出应用程序功能的索引页中获取它们，还是获取实际上可能使它们遍历并浏览不同的图像集合，例如，路由可能会用于将它们从一页实际移到另一页，并给它们提供URL，如果您使用HTML5 PushState仅用于使用标签来实际在应用程序中导航，则提供干净的URL无需让他们完全刷新页面。

Louis: Right.

路易斯：对。

Addy: So that’s one example.

艾迪：这就是一个例子。

Louis: Right. So in that case you’re — sort of your photo model would be substantiated based on sort of, say, if I load a new page I get some JSON back from the server and that contains an object representation of these photos in the gallery, and rather than just sort of haphazardly iterating them over them in inline jQuery I’m cleanly bundling them up into a model object which would then be easier to use in other places in the application.

路易斯：对。 因此，在这种情况下，您的照片模型将得到证实，例如，如果我加载新页面，则会从服务器返回一些JSON，其中包含画廊中这些照片的对象表示，而不是只是随意地在内联jQuery中对其进行遍历，我将它们整齐地捆绑到一个模型对象中，然后可以更轻松地在应用程序的其他地方使用它们。

Addy: Yes.

艾迪：是的。

Louis: And it behaves a bit more like a server side application, or like we’re used to developing in object oriented code.

Louis：它的行为有点像服务器端应用程序，或者就像我们习惯于开发面向对象的代码一样。

Addy: Exactly, yes. So we were just taking a look at an example of a gallery application that could be implemented using Backbone and using MVC. Now, the idea behind MVC on the front end is that it still separates applications into sort of three main concerns. You first of all have models which manage the behavior of application data, and it doesn’t differ that much from how data is handled, how models are handled on the server side, it still represents sort of knowledge and data, they still respond to changes of state, but they tend to be a little bit more isolated from using controllers than you might find on the server side. In frameworks like Backbone, models can sometimes group things and collections, so you have the idea of a single model perhaps representing a photograph, but a collection in Backbone actually is representing multiple models or multiple photos. You might have views which are responsible for sort of rendering models into a form that’s suitable for user interaction. In a lot of cases on the front end your views are going to be considered your UI, they typically are rendered to specific user interface elements, so I might have a div on the page that I actually want to render my view to, and it can be called container or something else, and I’ll simply render that whether I’m using a templating library for this or I’m using Backbone’s own internal stuff, I’m just going to be rendering that view for a specific element. And you can have multiple views which is just for single models, so you might have models that represent photos in your applications, and you might have views which perhaps display different aspects of that model. So, if I have a photograph that has meta data saying, you know, well, this photograph was taken say in Italy, for example, this photograph was taken in the year 1990, there were Tom, Dick and Harry around; you could have one view that actually shows you the people that were around when that photograph was taken, you could have another view that represents the location where that photograph was taken and perhaps show you a map, and so on and so forth. You then have sort of controllers on the front end as well. Now, some frameworks don’t necessarily implement controllers when we’re talking about JavaScript, controllers typically sort receive input, can instruct models or views and respond accordingly, so usually sit between models and views they might perform some business logic and data manipulations, but they’re low inside MVC, it quite heavily varies. You’ll find that Backbone considers controllers quite differently; they actually replace it with the idea of a router for handling navigation. Other frameworks might maintain something called a controller, so they’re JavaScript MVC frameworks they have to do something completely different. So there are a lot of similarities between sort of MVC on the server side and on the client side, but it’s usually the controller side of things that’s where things differ from most I would say.

艾迪：是的，是的。 因此，我们只是看一个可以使用Backbone和MVC实现的图库应用程序示例。 现在，前端MVC背后的想法是，它仍然将应用程序分为三个主要方面。 首先，您拥有管理应用程序数据行为的模型，并且与如何处理数据，如何在服务器端处理模型没有太大区别，它仍然表示某种知识和数据，它们仍然会响应状态更改，但与使用控制器相比，它们与使用控制器的隔离度往往更高一些。 在Backbone这样的框架中，模型有时可以将事物和集合分组，因此您想到了一个模型可能代表一张照片，但是Backbone中的集合实际上代表了多个模型或多张照片。 您可能拥有负责将渲染模型分类为适合用户交互的形式的视图。 在前端的许多情况下，您的视图将被视为您的UI，通常会将它们呈现给特定的用户界面元素，因此我可能实际上希望将视图呈现给页面上的一个div，可以称为容器或其他名称，而我将简单地渲染一下，无论是为此使用模板库还是使用Backbone自己的内部东西，我都将为特定元素渲染该视图。 而且，您可以具有仅用于单个模型的多个视图，因此您可能具有在应用程序中表示照片的模型，并且可能具有显示该模型不同方面的视图。 因此，如果我有一张带有元数据的照片，说，例如，这张照片是在意大利拍摄的，例如这张照片拍摄于1990年，当时有汤姆，迪克和哈利； 您可能有一个视图实际向您显示了拍摄该照片时周围的人，您可能有另一个视图代表了拍摄该照片的位置，并可能向您显示了地图，依此类推。 然后，您也可以在前端使用某种控制器。 现在，当我们谈论JavaScript时，某些框架不一定实现控制器，控制器通常对接收的输入进行排序，可以指示模型或视图并做出相应的响应，因此通常位于模型和视图之间，它们可能执行一些业务逻辑和数据操作，但是它们在MVC中的位置很低，差异很大。 您会发现Backbone在考虑控制器方面有很大的不同。 他们实际上将其替换为用于处理导航的路由器。 其他框架可能维护称为控制器的内容，因此它们是JavaScript MVC框架，它们必须执行完全不同的操作。 因此，服务器端和客户端端的MVC之间有很多相似之处，但通常情况是控制器端，这与我想说的大多数有所不同。

Louis: Right. And just to maybe expand a little bit on the idea of the view, if someone’s not familiar with JavaScript templating and how that works, I know there are probably still a lot of JavaScript developers who’ll either just create DOM nodes inline in their code or load entire chunks of HTML from the server, can you talk a little bit about templating and how that’s used in these frameworks?

路易斯：对。 只是为了稍微扩展一下视图的概念，如果有人不熟悉JavaScript模板及其工作原理，我知道可能仍然有很多JavaScript开发人员会在其代码中内联创建DOM节点或从服务器加载整个HTML块，您能否谈谈模板及其在这些框架中的使用方式？

Addy: Oh, absolutely. So, templating in general, even outside of JavaScript MVC frameworks it’s something very, very useful for your applications. One way that developers tend to approach this without templating is you might be constructing HTML for your page in memory using scripting catonation, and I’ve seen people do this; ten years ago people were doing this in doctrine right, now if you’re not using the best practices there are still people that are sort of concatenating ten or more lines of code and then injecting that into the page or injecting it every single time a new line is being constructed in memory, and the problem with that is that it’s not just inefficient from a performance perspective, but it’s also difficult to maintain. So, once you start to store multiple long strings that are supposed be representing sort of HTML in your page, and you start building larger applications, it can become difficult to figure out okay, well, what part of my page did I store the script in that contains those lines that need to be updated now. Something that is a little bit better and easier to manage but also more performant is using JavaScript templating. So, with JavaScript templating you take a look at what repeatable output that you have in your application, so rather than me saying okay well I have a JSON feed coming from my backend that contains a number of photographs, what I’m going to do is I’m going to move through every single one of those photographs, and I’m going to concatonate some image tags around that and some nested divs around that, and I’m going to construct myself a pseudo template that appends my page. Instead of doing that you can say okay, well, I’m basically repeating the same pattern multiple times in this loop, why don’t I simply represent the template, have something much smaller, okay, well, I might just have one single entry, the website says okay, well, my template is going to be composed of a few nested divs and an image element. Well, that’s all there is to it, I don’t have to have any performants around that, I don’t have any additional logic in there if I don’t need it, and instead we just apply templating to that feed that’s coming through. In a framework we actually represent that feed is either a model or collection, and we would then template based on that collection to render out those to the screen, which is the DOM, and it just means that I can actually maintain templates in a slightly more readable fashion, it’s a lot easier to read this stuff than going through all the different pluses and minuses that you might have inline, it’s also easier when you get to a point where you might want to sort of manage your template outside of your page. So rather than maintaining an application where you have to have sort of scripting catonation and your different templates stored inline, so in larger in applications you’ll see that there’s actually a lot of benefit to doing this outside of your model and your views. If I wanted to say have a template to represent how I actually output gallery items, I can simply just go to say, you know, item.tntl or item.txt, which might just contain the HTML markup representation for a single element on that page, a single photograph on that page, and then use that with templating to render out how every single other photograph on the page is going to look. It’s something that’s a little tricky to sort of explain without showing people examples, but, again, if you take a look at the new MVC what you’ll find is that there are actually quite a few examples of how templating can be effectively used with MVC frameworks and where it can come in useful. But, yeah, I definitely recommend checking it out.

阿迪：哦，绝对。 因此，一般来说，甚至在JavaScript MVC框架之外进行模板绘制，对于您的应用程序来说都是非常有用的。 开发人员倾向于在不使用模板的情况下进行处理的一种方法是，您可能正在使用脚本编制目录为内存中的页面构造HTML，而我已经看到人们这样做了。 十年前，人们在原则上是这样做的，现在，如果您没有使用最佳实践，那么仍然会有人们将十行或更多行的代码连接起来，然后将其注入页面或每次将其注入新行正在内存中构建，其问题在于，从性能角度来看，它不仅效率低下，而且难以维护。 因此，一旦您开始在页面中存储应该表示HTML形式的多个长字符串，并开始构建较大的应用程序，就很难弄清楚了，好吧，我在页面的哪一部分存储了脚本其中包含需要立即更新的行。 使用JavaScript模板会更好一些，更易于管理，但性能更高。 因此，使用JavaScript模板，您可以查看应用程序中具有可重复输出的内容，因此，我不是说很好，而是有一个来自我后端的JSON提要，其中包含许多照片，我将要做的是我将浏览这些照片中的每张照片，并围绕其中的一些图像标签和周围的一些嵌套div，并构造一个伪模板，将其附加到页面上。 与其说您可以说还好，不如说，我基本上是在这个循环中多次重复相同的模式，为什么我不简单地代表模板，做些小得多的事，好吧，我可能只有一个入口，网站说好的，好的，我的模板将由几个嵌套的div和一个image元素组成。 嗯，这就是全部内容，我不需要任何表演者，如果不需要的话，也没有任何其他逻辑，相反，我们只是对即将到来的提要应用模板通过。 在框架中，我们实际上表示提要是模型或集合，然后我们将基于该集合进行模板化以将其呈现到屏幕上，即DOM，这只是意味着我实际上可以将模板稍微维护一下。更具可读性的方式，比遍历可能具有内联的所有其他优点和缺点，阅读这些东西要容易得多，当您到达想要在页面外管理模板的位置时，也更容易。 因此，与其维护一个必须有某种脚本分类和内联存储不同模板的应用程序，不然在更大的应用程序中，您会发现在模型和视图之外进行此操作实际上有很多好处。 如果我想说一个模板来表示我如何实际输出画廊项目，我可以简单地说出item.tntl或item.txt，它们可能只包含该元素上单个元素HTML标记表示。页，即该页面上的单张照片，然后将其与模板一起使用，以渲染出该页面上每张其他照片的外观。 在不显示人员示例的情况下进行解释有点棘手，但是，再次看看新的MVC，您会发现实际上有很多示例可以有效地使用模板。 MVC框架及其有用之处。 但是，是的，我绝对建议您检查一下。

Louis: Yeah, absolutely. It’s something that we take for granted working on the server side, but that is I guess still not a widespread practice working on the client side possibly because a lot of these frameworks haven’t enjoyed widespread use as of yet, but it’s definitely powerful and it definitely makes the code more maintainable if when you need to change your markup you’re actually changing markup rather than digging through your code to find, oh, I’m concatenating a div in here and I want to make that a span now; suddenly I have to go through and find all the instances of code that does that. Right, that sounds super useful, so, however, I guess one of the issues with Backbone is it’s fairly new, it might seem a little odd to people who aren’t used to working with JavaScript in such an ordered fashion, people are used to just sort of slapping a script like when you click this link whatever opens or just DOM manipulation.

路易斯：是的，绝对。 在服务器端工作是我们理所当然的事情，但是我想这仍然不是在客户机端工作的广泛实践，这可能是因为许多这样的框架到目前为止还没有得到广泛的使用，但是它绝对强大并且如果您确实需要更改标记而不是深入研究代码来查找标记，那么绝对可以使代码更易于维护。哦，我要在这里连接div，现在我要跨度； 突然之间，我必须遍历并找到执行该操作的所有代码实例。 是的，听起来超级有用，但是，我想Backbone的问题之一是它相当新，对于不习惯以这种有序方式使用JavaScript的人来说，这似乎有些奇怪。就像当您单击此链接时一样，只是拍打脚本，无论打开还是DOM操作。

Addy: Hmm-mm.

阿迪：嗯。

Louis: So it can have a bit of a learning curve to it, and I guess this is where the idea of doing this book comes in, right?

路易斯：所以它可能会有一些学习曲线，我想这就是编写本书的想法了，对吧？

Addy: Yes, exactly. So I’ve been blogging for I guess four or five years in JavaScript now, and whilst blogs are really useful for beginners to sort of grasp new concepts and gain knowledge, they also come with some caveats which is why I decided to write this book; blogs only have like a limited amount of information you can convey in them, and I figured, well, why just show somebody how to build an application with a framework when there are going to be beginners that ask, well, where I can learn the fundamentals of this framework so that I can use this tutorial. And then you’ve got like advanced users that might say, well, this is a little too basic for me, I’d like to know how I can build something even more complex than what you’re showing me right now. And I think that a book solves this problem quite well because it means that if you’re coming from a completely fresh background and you have very little experience that’s sort of MVC on the front end, or architectural patterns with JavaScript, you can just come in and read the book and start off in the basics section and fairly quickly you’ll pick up all of these concepts. I start fairly slow off, we don’t throw people in the deep end; I think that by the end of the first chapter you do get most of the concept, and one of the things that the book’s going to be trying to do is sort of first of all teach you how to build a very simple application, and then iterate on that application as we go along through the rest of the book, so you’re going to learn to take that application more complex, learn how to integrate it with different backends; there are people that have sort of requested to learn how to integrate Backbone with say Node.js or with Sinatra or with WebSocket frameworks. And the book tries to sort of help the user on their journey, so it gives you sort of a complete look at — or I might need to redo that, but the book gives you a complete bird’s eye view from start to finish of what you need to learn how to properly use Backbone.

艾迪：是的，完全正确。 所以我一直在写JavaScript，大概用JavaScript已有四五年了，尽管博客对于初学者来说确实很有用，可以帮助他们掌握新概念并获得知识，但它们也带有一些警告，这就是为什么我决定写这本书的原因; 博客只能在其中传达有限的信息，而我想，为什么要向有人展示如何在框架中构建应用程序的初学者问，那么我可以在哪里学习？这个框架的基础知识，以便我可以使用本教程。 然后，您就像高级用户一样，可能会说，这对我来说有点太基础了，我想知道如何构建比您现在所展示的东西还要复杂的东西。 而且我认为，一本书可以很好地解决这个问题，因为这意味着如果您来自一个完全新鲜的背景并且您很少有前端MVC或JavaScript的架构模式方面的经验，那么您可以进入并阅读本书，然后从“基础知识”部分开始，很快您就会掌握所有这些概念。 我开始进展缓慢，我们不会把人深陷其中。 我认为到第一章结束时，您确实掌握了大部分概念，而本书要尝试做的一件事就是首先教您如何构建一个非常简单的应用程序，然后我们将在本书的其余部分进行迭代，以迭代该应用程序，因此您将学习使该应用程序更加复杂，学习如何将其与不同的后端集成。 有些人被要求学习如何将Backbone与Node.js或Sinatra或WebSocket框架集成。 本书试图在某种程度上帮助用户，从而使您对它有一个完整的了解，或者我可能需要重做，但是本书从头到尾为您提供了一个完整的鸟瞰图需要学习如何正确使用Backbone。

Louis: Right. And the other thing obviously that’s really interesting about this book, above and beyond it being a book about Backbone, is that you’ve done it sort of for free online in a sort of collaborative fashion, because it’s all on GitHub, and I assume you’re accepting contributions from different people, and it’s still very much in a development stage, it’s still incomplete, but I had a read through the Basic section, and in terms of getting you up and running it definitely has all the basics, but there’s, I assume, a lot of work to come.

路易斯：对。 显然，除了这本关于Backbone的书之外，这本书真正有趣的是，您已经以某种协作方式免费在线完成了这本书，因为它全部都在GitHub上，我认为您正在接受来自不同人的贡献，并且它仍处于开发阶段，还不完善，但是我已通读了“基本”部分，并且在使您起步和运行方面肯定具有所有基础知识，但是我想还有很多工作要做。

Addy: Yeah, yeah, there’s a lot of work to come. So when I first released the book, I think about two weeks ago, I started a wish list that developers could go into and add requests for topics they’d like covered, so if a developer wants anything written about in the book, or they want me to consider writing a chapter about something, all they have to do is just submit an idea, I’ll talk to some other developers about it and see what they think, and if we think it’s a good idea I’ll write a chapter about it. Just going on some of the items on the wish list right now there are people that want me to sort of address using different test stacks Backbone, you know, people want to know how to unit test Backbone using solutions like Queue Unit, they want to learn how to build mobile applications with it, so there’s a lot of work still left to go, but I’m excited about it, I think we have an excellent opportunity to sort of build something that is very open, will hopefully be very authoritative and will help some people on their journey through Backbone.

艾迪：是的，有很多工作要做。 因此，当我第一次发行这本书时，我想到了大约两周前，我创建了一个愿望清单，开发人员可以进入该清单并添加对他们希望涵盖的主题的请求，这样，如果开发人员想要本书中写的任何内容，或者希望我考虑写一篇有关某事的章节，他们所要做的只是提交一个想法，我将与其他开发人员讨论一下，看看他们的想法，如果我们认为这是一个好主意，我会写一个关于它的章节。 现在就进入愿望清单中的某些项目，有些人希望我使用不同的测试堆栈对地址进行排序。主干，您知道，人们想知道如何使用“队列单元”之类的解决方案对主干单元进行单元测试，他们想学习如何使用它构建移动应用程序，因此还有很多工作要做，但是我对此感到很兴奋，我认为我们有一个极好的机会来构建非常开放的东西，希望它将很有权威并会帮助某些人穿越骨干网。

Louis: Yeah, absolutely. And this kind of free online book has been maybe not a super common pattern in the industry, but it’s definitely something that’s happened before, and there have been some really great examples; I mean both of Mark Pilgrim’s books on Python and HTML5 are these huge resources that are extremely useful for those topics, and I think help those topics get a lot more interest from the community than they might otherwise have gotten.

路易斯：是的，绝对。 这种免费的在线图书可能不是行业中的一种超常模式，但这绝对是以前发生的事情，并且确实有一些很好的例子。 我的意思是Mark Pilgrim的有关Python和HTML5的书籍都是对这些主题非常有用的大量资源，并且我认为帮助这些主题引起了社区的极大兴趣，而不是他们原本可以得到的。

Addy: Oh, absolutely. I think one of the reasons I wanted to release this book for free is I believe that educational material should be free and accessible where possible. I think that authors who write are totally within their rights published contents and ask for something back, people need to make a living, but when you open source your content it just means that more people are going to be able to read it, share it, spread the word about it, and, I don’t know, I think it’s a nice way to go about putting educational material out there.

阿迪：哦，绝对。 我认为我想免费发行这本书的原因之一是，我认为教育材料应该是免费的，并在可能的情况下可以使用。 我认为，撰写内容的作者完全在其出版的权利之内，并且索要某些东西，人们需要谋生，但是当您开源内容时，这意味着更多的人将能够阅读，共享，广为宣传，而且，我不知道，我认为这是将教育材料投入其中的好方法。

Louis: Yeah, especially for something like Backbone where it’s not very mainstream at the moment, so if you were to publish a book, a conventional book, you wouldn’t expect to sell a lot of them, but having it for free can build a lot of momentum behind this because it makes it easier for people to learn it.

路易斯：是的，尤其是对于像Backbone这样的东西来说，它现在还不是很主流，因此，如果您要出版一本传统的书，就不会指望出售很多，但是免费拥有它可以建立背后的动力很大，因为它使人们更容易学习它。

Addy: Certainly. And I guess one of the reasons I decided to go for this open source model is this is actually the second time I’ve released an eBook for free. The first time I got something else out there last year, this book called Essential JavaScript Design Pattern; I think I had something like 250,000 downloads in the first year, and it’s difficult to get people to read things, and I’m just happy that if I can duplicate sort of the same level of success with Backbone Fundamentals that I did with that I’ll be happy, it’ll just mean that I guess I’ve had a way to hopefully influence other developers in a positive way and help them I guess code better.

艾迪：当然。 我想我决定选择这种开源模型的原因之一是，这实际上是我第二次免费发行电子书。 去年，我第一次有了其他东西，这本书叫做Essential JavaScript Design Pattern； 我认为第一年的下载量就达到了250,000，而且很难让人阅读。我很高兴，如果我能在Backbone Fundamentals上取得与我相同的成功水平， “会很高兴，这仅意味着我想我已经有了一种希望以积极的方式影响其他开发人员并帮助他们更好地编码的方法。

Louis: Yeah, definitely. And I think there’s probably a lot of room for JavaScript developers to take some hints from server side developers and look at this kind of structure, it’s definitely become a major topic in the last year or two, I guess, that you’ve seen all of these sort of front end frameworks bring up, and really a focus on trying to make JavaScript behave a little bit more like a structured programming language that we’re used to working with.

路易斯：是的，当然可以。 而且我认为JavaScript开发人员可能有很多空间可以从服务器端开发人员那里得到一些提示，并研究这种结构，我想这肯定已经成为过去一两年的主要话题了，这些前端框架中出现了一个，并且实际上着重于使JavaScript表现得更像我们曾经使用过的结构化编程语言。

Addy: Hmm-mm.

阿迪：嗯。

Louis: Now, you say you’ve had a look at a number of different JavaScript frameworks that have come up in recent years and that you decided to go with Backbone because it was a natural fit for you. Do you want to maybe talk about some of the differences and where you feel like you like Backbone better and where some of the other ones have interesting features?

Louis：现在，您说您已经看过近年来出现的许多不同JavaScript框架，并且您决定选择Backbone，因为它很适合您。 您是否想谈论一些差异，以及您觉得自己更喜欢Backbone的地方以及其他一些具有有趣功能的地方吗？

Addy: In a lot of cases I think it comes down to style. So, a while back when I was first learning about Backbone, I realized that there were a number of other frameworks that are out there at the moment that tried offering something similar. So we had — I guess a year ago we had SproutCore, we had JavaScript MVC, Spine was coming into the picture as well, and most of those frameworks are still around, SproutCore has become Ember.js, and most of the others are still around, but for developers that are still sort of on the fence and trying to decide on what frameworks to opt for, I created a project called To-Do MVC to try helping with this. What To-Do MVC is, is basically a collection of to-do applications, so everybody sort of knows what a to-do application is, it’s just a list application where you can add little reminders about things you have to do, you can cross items off the list, you can edit them in place. And so the idea with to-do MVC is that you get the same two applications in a number of different frameworks, we’ve got a Backbone.js version, we’ve got Spine.js, JavaScript MVC, Ember.js; and for developers that are still on the fence about which framework they want to commit to it just means that all you have to do is go in, take a look through the source code for any of these applications and see which one best fits the style that you might prefer using. Now, most of these implement some form of MVC, or a variation of MVC, and it’s not to say that simply reviewing the source code is going to be the defacto thing that’s going to make you decide on a framework, you should, of course, go and research a little bit more what the framework offers outside of the implementation to-do MVC offers you. But I think it’s just a way to I guess figure out what you might prefer using without having to spend six or eight months implementing something and then going, well, you know, this probably wasn’t the best decision.

艾迪：在很多情况下，我认为这取决于风格。 因此，前一段时间，当我第一次学习Backbone时，我意识到目前还有许多其他框架试图提供类似的东西。 因此，我们有了-我想一年前我们有SproutCore，我们有JavaScript MVC，Spine也在其中，并且大多数框架仍然存在，SproutCore变成了Ember.js，其他大多数仍然周围，​​但对于仍然犹豫不决并试图决定选择哪种框架的开发人员，我创建了一个名为To-Do MVC的项目来尝试提供帮助。 待办事项MVC基本上是待办事项应用程序的集合，因此每个人都知道待办事项应用程序是什么，它只是一个列表应用程序，您可以在其中添加一些关于必须要做的事情的提醒，您可以列表中的交叉项目，则可以对其进行就地编辑。 因此，待办事项MVC的想法是，您可以在许多不同的框架中获得相同的两个应用程序，我们有Backbone.js版本，我们有Spine.js，JavaScript MVC，Ember.js； 对于仍然想提交给哪个框架的开发人员而言，这意味着您要做的只是走进去，浏览所有这些应用程序的源代码，并查看最适合该样式的应用程序您可能更喜欢使用。 现在，其中大多数实现了某种形式的MVC或MVC的一种变体，并不是说简单地查看源代码将是事实，这会让您决定框架，当然，您应该，去研究一下框架在实现之外提供的功能。 但是我认为这只是一种方法，我可以弄清楚您可能更喜欢使用什么，而不必花费六到八个月的时间来实施某些事情，然后走，嗯，这可能不是最佳决定。

Louis: Yeah, absolutely. And so did you find yourself at any point struggling to implement the same feature set across all of these different frameworks?

路易斯：是的，绝对。 因此，您是否发现自己在所有这些不同框架中都难以实现相同的功能集？

Addy: Oh, absolutely. I think it’s very difficult to I guess be a master of all frameworks, it’s extremely difficult because of varying feature sets and the syntax that’s involved, and so the community’s been extremely helpful here. Anytime there was an application which I didn’t feel that I could implement personally I tried reaching out on Twitter and on GitHub, and the community has been great, people have come forth and said, you know, I’m going to spend a weekend building this application and if you can help me with the style just to make sure that it’s implemented properly, I’m fine with pushing this to To-Do MVC, and that’s really helped the project sort of grow. At the moment I’m currently working some contributors to get sort of Dojo MVC’s quote in there and other applications, but it just means that whatever experience other developers have with frameworks that I don’t, we can still lend those to the project and hopefully help somebody else out there pick something that will work well for them.

阿迪：哦，绝对。 我认为很难成为所有框架的专家，这非常困难，因为功能集和所涉及的语法各不相同，因此社区对此非常有帮助。 每当有一个我不觉得自己可以实现的应用程序时，我都尝试在Twitter和GitHub上进行接触，而社区非常棒，人们纷纷表示，我将花一分钱周末构建此应用程序，如果您可以确保样式正确地实现该风格，则可以将其推向To-Do MVC，这很好，这确实有助于该项目的发展。 目前，我目前正在与一些贡献者合作，以获取Dojo MVC在其中和其他应用程序中的报价，但这仅意味着，无论其他开发人员对我没有的框架有什么经验，我们仍然可以将其借给项目和希望能帮助其他人选择对他们有用的东西。

Louis: Yeah, absolutely. If a JavaScript developer is sort of on the fence, they’re sitting at the point where they’ve been pretty happy doing everything they’ve done so far just using inline DOM stuff and jQuery, they do feel like sometimes they’ll look back at their code and be like, ooh, that’s a little difficult to read or understand or play with, or they’ve come to someone else’s code and had that feeling, but it feels like a big step to start moving maybe existing code over to something like Backbone. What’s a good way to sort of get your feet wet and start playing with it?

路易斯：是的，绝对。 如果一个JavaScript开发人员处于困境之中，那么他们正坐在很高兴地完成到目前为止所完成的所有工作，仅使用内联DOM和jQuery，他们确实感觉有时候回到他们的代码，就像，哦，这有点难以阅读，理解或使用，或者他们来到了别人的代码并且有这种感觉，但是这似乎是迈出了一大步，开始可能将现有代码移到像骨干之类的东西。 什么是弄湿脚并开始使用的好方法？

Addy: To be completely honest I’m going to give a very silly answer, it’s just looking at the basic view application that comes with Backbone. As I was saying with to-do applications, it’s just something that I’ve actually built into a complete project, it just gives you a nice simple flavor of how you can break down an application into sort of models used, controllers if the framework supports it, or routers and collections, etc. What To-Do MVC actually also had is a version of the to-do application implemented in just jQuery and just plain JavaScript, so you can actually take a look at how you can take something that’s currently in I guess what some people might call spaghetti code, which is like everything in a single file, and then see how that can actually be broken down into the different concerns using different frameworks. So I think To-Do MVC can actually help you with that too, hopefully.

Addy：说实话，我将给出一个非常愚蠢的答案，它只是在看Backbone附带的基本视图应用程序。 就像我说的待办事项应用程序一样，这实际上是我已经构建到一个完整项目中的东西，它为您提供了一种非常简单的方法，可以将应用程序分解为使用的各种模型，控制器(如果是框架)支持它，或者路由器和集合等。待办事项MVC实际上也有一个仅在jQuery和纯JavaScript中实现的待办事项应用程序的版本，因此您实际上可以看看如何实现目前，我猜想有人可能将其称为意大利面条代码，就像单个文件中的所有内容一样，然后看看如何使用不同的框架将其实际分解为不同的关注点。 因此，我认为To-Do MVC实际上也可以为您提供帮助。

Louis: Right. So that’s pretty interesting. Is it a big difference in terms of the amount of code that’s written compared to either plain JavaScript or jQuery when you’re using these various frameworks?

路易斯：对。 所以这很有趣。 当您使用这些各种框架时，与纯JavaScript或jQuery相比，在编写的代码量上有很大的不同吗？

Addy: I think in terms of the amount of code the developer has to write themselves it’s minimal; it’s minimal, the addition is very minimal. You do of course have to include the framework that you’re opting for, so if I’m using Backbone it’s just going to be a few additional kilobytes to my project, if I’m using Spine it’s going to be the same case. But, yeah, it’s minimal in terms of the developer effort requires to turn that code into something a little more structured.

艾迪：就开发人员自己编写的代码量而言，我认为这是最少的。 它很小，添加量很小。 当然，您确实必须包括您所选择的框架，因此，如果我使用Backbone，这将为我的项目增加几千字节，如果我使用Spine，则情况将相同。 但是，是的，从开发人员的角度来看，将代码转换为更结构化的代码的工作量很小。

Louis: Right.

路易斯：对。

Addy: But for developers who are very new to this and who are still wondering okay, well, how do I take my standard JavaScript application and convert it or break it down into something models use in controllers, well there’s some very simple things that you can do. The first thing I would do is take a look at the data in your other applications, so what unique data is represented in your app. For photo gallery application, again, you’re going to have things like the id of pictures, you’re going to have id’s of galleries which contain multiple pictures, so that’s going to be a group or a collection. You’re then going to need to think about what the user needs to be able to see and do. Now, that comes down to your view, so we just talked about models, models are all about the unique data in your application and how you want to represent them. You even have views which basically are what the user needs to be able to see and do, it gets a little bit more complicated than that, but let’s talk about — let’s take a look at templating, right, so another thing to consider is what repeatable output do you have in your application that you want to shift to JavaScript templating to make things a little bit more performant. And then you have controllers, and the role of controllers vary, actually we’ve already sort of reviewed, and in your application if you’re talking about using perhaps Backbone, let’s say that your controllers are actually routers, and what routers are going to do are they’re going to take care of the navigation of the application. So if I have a single page application and I want to start navigating around the different galleries that might be available, when I click on a specific gallery I want the user to still be able to bookmark the path to that gallery. So even though this isn’t an application which has sort of real paths, and there are no real folders on the server which might represent the file or the view that we’re going to be rendering, we still want to give them a nice clean way to simulate this behavior. And using Backbone you can either use HTML5’s PushState or you can simply use hashbang URLs to simulate these URLs so people can still go in and say okay, well, I’ve navigated to a particular photograph in this application, I know that this isn’t an application which has real folders or which has the proper server side structure, but by copying and pasting this URL using Backbone’s routers I can still navigate the user back to the specific image very, very easily, this is one of the powerful things about these MVC frameworks; if they support routing by default it means that you don’t have to sort of natively go yourself and figure out how do I monitor hash change events, and how do I take care of all this mucky stuff to do with URLs myself.

阿迪：但是对于那些对此还不熟悉的开发人员，他们仍然想知道，好吧，我该如何使用我的标准JavaScript应用程序并将其转换或分解为控制器中使用的模型，那么您会遇到一些非常简单的事情可以做。 我要做的第一件事是查看其他应用程序中的数据，以便在您的应用程序中表示什么唯一数据。 同样，对于照相馆应用程序，您将拥有诸如图片ID之类的东西，您将具有包含多张图片的画廊ID，因此将是一个组或一个集合。 然后，您将需要考虑用户需要能够看到和执行的操作。 现在，这取决于您的观点，因此我们只讨论了模型，模型都是关于应用程序中唯一数据以及如何表示它们的。 您甚至有一些视图，这些视图基本上就是用户需要能够看到和执行的视图，它比这要复杂一些，但让我们来谈一谈-让我们来看看模板，对，所以要考虑的另一件事是您想在应用程序中使用可重复的输出，以转换为JavaScript模板以使性能提高一点。 然后您有了控制器，控制器的角色也有所不同，实际上我们已经进行了某种程度的审查，如果您正在谈论使用骨干网，那么在您的应用程序中，假设您的控制器实际上是路由器，并且路由器将运行什么他们要做的是照顾应用程序的导航。 因此，如果我只有一个页面应用程序，并且想开始浏览可能可用的不同画廊，那么当我单击特定的画廊时，我希望用户仍然能够将该画廊的路径添加为书签。 因此，即使这不是具有真实路径的应用程序，并且服务器上没有真实的文件夹可能表示我们将要渲染的文件或视图，我们仍然希望为它们提供一个不错的选择干净的方法来模拟这种行为。 使用Backbone，您既可以使用HTML5的PushState，也可以简单地使用hashbang URL来模拟这些URL，这样人们仍然可以进来说说，好吧，我已经导航到此应用程序中的特定照片，我知道这是“一个具有真实文件夹或具有正确服务器端结构的应用程序，但是通过使用Backbone路由器复制并粘贴此URL，我仍然可以非常非常轻松地将用户导航回特定图像，这是有关以下方面的强大功能之一这些MVC框架； if they support routing by default it means that you don't have to sort of natively go yourself and figure out how do I monitor hash change events, and how do I take care of all this mucky stuff to do with URLs myself.

Louis: Yeah, and does that extend to things like the browser’s history and the back button?

Louis: Yeah, and does that extend to things like the browser's history and the back button?

Addy: It does; depending on the framework it can actually have a built-in support for managing back button, but yes it does. It also means that if I navigate multiple depths down inside an application it might have multiple views, I can easily use the back button; if the application has been coded correctly I can use the back button to go back exactly to where I was.

Addy: It does; depending on the framework it can actually have a built-in support for managing back button, but yes it does. It also means that if I navigate multiple depths down inside an application it might have multiple views, I can easily use the back button; if the application has been coded correctly I can use the back button to go back exactly to where I was.

Louis: Yep, right. And do you know under the hood if that’s using HTML’s browser history?

Louis: Yep, right. And do you know under the hood if that's using HTML's browser history?

Addy: Again, it really does vary depending on the framework that you’re using.

Addy: Again, it really does vary depending on the framework that you're using.

Louis: Yeah, but just talking about Backbone specifically because you’d probably know a bit more about it.

Louis: Yeah, but just talking about Backbone specifically because you'd probably know a bit more about it.

Addy: So in terms of the specific question you’d probably be talking more about Backbone or HTML5 PushState, and in terms of that, yeah, Backbone does support HTML5 PushState, if you want to turn it on you can use it. And the benefit of using PushState is rather people seeing a — sort of a hash or hash fragment in the URL at all, all they’ll see is very clean, very plain URL; the end user, they won’t know that, without sort of inspecting your code, they won’t know that you’re using a single page application, it’ll look like it’s a completely server based application and that like all these paths are actually naturally existing on the server side, but they’re not, so it’s actually quite a beautiful thing because it means that they don’t need to worry about is this weird looking URL actually going to work in other browsers or anything like that. And the beauty of frameworks that do support HTML pushState, in a lot of cases they gracefully degrade back to using hash bang if pushState isn’t supported. So if I try navigating using a pushState URL which doesn’t contain any hash bang, and my application doesn’t necessarily support that, I can use hash bangs instead and still provide users with the ability to bookmark URLs.

Addy: So in terms of the specific question you'd probably be talking more about Backbone or HTML5 PushState, and in terms of that, yeah, Backbone does support HTML5 PushState, if you want to turn it on you can use it. And the benefit of using PushState is rather people seeing a — sort of a hash or hash fragment in the URL at all, all they'll see is very clean, very plain URL; the end user, they won't know that, without sort of inspecting your code, they won't know that you're using a single page application, it'll look like it's a completely server based application and that like all these paths are actually naturally existing on the server side, but they're not, so it's actually quite a beautiful thing because it means that they don't need to worry about is this weird looking URL actually going to work in other browsers or anything like that. And the beauty of frameworks that do support HTML pushState, in a lot of cases they gracefully degrade back to using hash bang if pushState isn't supported. So if I try navigating using a pushState URL which doesn't contain any hash bang, and my application doesn't necessarily support that, I can use hash bangs instead and still provide users with the ability to bookmark URLs.

Louis: Right. So that was a bit of a diversion of what you were talking about, which is to say that when you’re looking at breaking your application down and taking an application that you’ve written in an unstructured way and trying to make it structured using this, and you were just getting to the point of saying how do you break down the interactions into routes and that sort of thing.

路易斯：对。 So that was a bit of a diversion of what you were talking about, which is to say that when you're looking at breaking your application down and taking an application that you've written in an unstructured way and trying to make it structured using this, and you were just getting to the point of saying how do you break down the interactions into routes and that sort of thing.

Addy: Absolutely. There are a lot of applications that people use on a daily basis that are single page applications, and they may not be necessarily using Backbone, they might be using sort of homegrown solutions that were something else, but there are actually single page applications that are either using hash bangs to give people the ability to navigate around them, or they’re using HTML5 pushState. Gmail is a perfect application of this; Gmail is probably my favorite JavaScript based application, and if you take a look at the URL scheme that Gmail uses you’ll see that in some browsers it’s actually using hashbangs to help you navigate around different email. And if you copy those hashbang URLs and you paste them back, you’ll actually be able to get to exactly where you were regardless of whether we’re talking about a specific email or a specific setting that you were looking at, and I think that’s quite beautiful. Being able to cleanly manage state and help people get to exactly where they were in the application and share those locations with people just means that the validity of using JavaScript for these applications is a little bit more strong and a little bit more powerful I think.

Addy: Absolutely. There are a lot of applications that people use on a daily basis that are single page applications, and they may not be necessarily using Backbone, they might be using sort of homegrown solutions that were something else, but there are actually single page applications that are either using hash bangs to give people the ability to navigate around them, or they're using HTML5 pushState. Gmail is a perfect application of this; Gmail is probably my favorite JavaScript based application, and if you take a look at the URL scheme that Gmail uses you'll see that in some browsers it's actually using hashbangs to help you navigate around different email. And if you copy those hashbang URLs and you paste them back, you'll actually be able to get to exactly where you were regardless of whether we're talking about a specific email or a specific setting that you were looking at, and I think that's quite beautiful. Being able to cleanly manage state and help people get to exactly where they were in the application and share those locations with people just means that the validity of using JavaScript for these applications is a little bit more strong and a little bit more powerful I think.

Louis: Definitely. Alright, well, I just want to thank you so much for taking the time to come on the show and hash out all these topics, I think it’s really interesting to get your view on all this. Before we go I’d just like to provide everyone with links to the relevant material, so the book is at github.com/addyosmani/backbone-fundamentals, and do you want to give some links to your Twitter and your website for people to look you up online.

Louis: Definitely. Alright, well, I just want to thank you so much for taking the time to come on the show and hash out all these topics, I think it's really interesting to get your view on all this. Before we go I'd just like to provide everyone with links to the relevant material, so the book is at github.com/addyosmani/backbone-fundamentals , and do you want to give some links to your Twitter and your website for people to look you up online.

Addy: Absolutely. I’m on Twitter @addyosmani, so that’s a-d-d-y-o-s-m-a-n-i; and that’s the exact same for GitHub, so github.com/addyosmani, and if you’d like to read a little bit more about some of the screencast books and articles that I write, they’re all on addyosmani.com.

Addy: Absolutely. I'm on Twitter @addyosmani , so that's addyosmani; and that's the exact same for GitHub, so github.com/addyosmani , and if you'd like to read a little bit more about some of the screencast books and articles that I write, they're all on addyosmani.com .

Louis: Fantastic, that’s all pretty straightforward. So, again, thanks so much for taking the time to come on the show and talk about this, and I really look forward to seeing how this book develops and how people jump in and contribute to it.

Louis: Fantastic, that's all pretty straightforward. So, again, thanks so much for taking the time to come on the show and talk about this, and I really look forward to seeing how this book develops and how people jump in and contribute to it.

Addy: Absolutely, thank you for having me.

Addy: Absolutely, thank you for having me.

Louis: It’s been a pleasure, thanks.

Louis: It's been a pleasure, thanks.

Addy: Great, thank you.

Addy: Great, thank you.

Louis: And thanks for listening to this week’s episode of the SitePoint Podcast. I’d love to hear what you thought about today’s show, so if you have any thoughts or suggestions just go to Sitepoint.com/podcast and you can leave a comment on today’s episode, you can also get any of our previous episodes to download or subscribe to get the show automatically. You can follow SitePoint on Twitter @sitepointdotcom, that’s sitepoint d-o-t-c-o-m, and you can follow me on Twitter @rssaddict. The show this week was produced by Karn Broad and I’m Louis Simoneau, thanks for listening and bye for now.

路易斯：感谢您收听本周的SitePoint播客。 我很想听听您对今天节目的看法，因此，如果您有任何想法或建议，请访问Sitepoint.com/podcast ，您可以对今天的节目发表评论，也可以下载我们以前的任何节目或订阅自动显示节目。 您可以在Twitter @sitepointdotcom (即站点点dotcom)上关注SitePoint ，也可以在Twitter @rssaddict上关注我。 本周的节目是由Karn Broad和我是Louis Simoneau制作的，感谢您的收听和再见。

Theme music by Mike Mella.

Mike Mella的主题音乐。

Thanks for listening! Feel free to let us know how we’re doing, or to continue the discussion, using the comments field below.

谢谢收听！ 欢迎使用下面的评论字段让我们知道我们的状况，或者继续讨论。

翻译自: https://www.sitepoint.com/podcast-145-backbone-js-fundamentals-with-addy-osmani/