vimeo 镜像_Vimeo的首席应用程序开发人员Kevin Sheurs访谈

vimeo 镜像

Vimeo is quickly becoming one of my favorite websites. You can find videos on just about any website but Vimeo is different: the site has personality and the user experience is second to none. I recently had the opportunity to chat with Kevin Sheurs, Lead Application Developer for Vimeo, about Vimeo, MooTools, and a variety of other web development topics. Enjoy!

VimeoSwift成为我最喜欢的网站之一。 您可以在几乎任何网站上找到视频，但Vimeo有所不同：该网站具有个性，用户体验是首屈一指的。 最近，我有机会与Vimeo的首席应用程序开发人员Kevin Sheurs讨论了Vimeo，MooTools以及其他各种Web开发主题。 请享用！

Vimeo是一个视频共享网站是没有秘密的。 您如何描述您的服务？ 您如何形容Vimeo？ (There's no secret that Vimeo is a video sharing site. How would you describe your service? How would you describe Vimeo?)

Vimeo is an online video sharing website dedicated to supporting the needs of people that make video. It is a service for anyone who really cares about how their work looks on the web. There's lots of good stuff to watch on Vimeo, but we also have the best tools, highest quality video, and best community for video creators.

Vimeo是一个在线视频共享网站，致力于满足制作视频的人们的需求。 它是为真正关心自己的工作在网络上外观的任何人提供的服务。 Vimeo上有很多值得看的东西，但是我们也拥有最好的工具，最高质量的视频以及视频创作者的最佳社区。

Vimeo雇用了多少JavaScript工程师？ (How many JavaScript engineers does Vimeo employ?)

Vimeo has 4-5 application developers proficient in JavaScript; however, there are no developers solely dedicated to JavaScript development. Given the project, some developers may focus more on JavaScript/UI than others, but for the most part, application developers are doing both PHP and JavaScript code.

Vimeo有4-5个精通JavaScript的应用程序开发人员； 但是，没有开发人员专门致力于JavaScript开发。 对于该项目，一些开发人员可能比其他人更关注JavaScript / UI，但是在大多数情况下，应用程序开发人员正在同时编写PHP和JavaScript代码。

Vimeo的网站具有许多JavaScript增强功能，包括AJAX分页，小部件创建，制表，视频切换等。Vimeo何时确定该网站需要比标准网站更具活力？ (Vimeo's website features a host of JavaScript-enhanced functionalities, including AJAX paging, widget creation, tabbing, video switching, etc. When did Vimeo decide that the website needed to be more dynamic than that of a standard website?)

I think an original reason for all the JavaScript and AJAX functionality on Vimeo is the nature of our product: video and community. We've always wanted to promote community around our videos and this is best achieved by allowing users to interact while watching video; through liking, commenting, messaging, subscribing, sharing, etc. In addition to this, we always look to keep up with the new tools and techniques that are out there and try out stuff that makes sense for our product. If there is a possible performance and/or user experience gain, we will implement it, test it, and see if it works. Introducing JavaScript and AJAX into different areas of Vimeo has also inherently improved back-end performance and load for us in many cases. Simple things like returning JSON on AJAX requests and creating/ injecting new elements in JavaScript or loading in related videos via AJAX can improve both load and response times.

我认为Vimeo上所有JavaScript和AJAX功能的最初原因是我们产品的本质：视频和社区。 我们一直希望在视频周围促进社区发展，最好的方法是允许用户在观看视频时进行互动； 通过喜欢，评论，消息传递，订阅，共享等方式。除此以外，我们始终希望与现有的新工具和技术保持一致，并尝试对我们的产品有意义的东西。 如果有可能获得性能和/或用户体验，我们将实施，测试并查看其是否有效。 在许多情况下，将JavaScript和AJAX引入Vimeo的不同区域还可以固有地改善后端性能和负载。 通过在AJAX请求上返回JSON以及在JavaScript中创建/注入新元素或通过AJAX加载相关视频等简单的事情可以改善加载和响应时间。

在Vimeo的开发时间点上，Vimeo是否选择MooTools作为其主要JavaScript工具包？ (At what point in Vimeo's development timeline did Vimeo choose MooTools as its primary JavaScript toolkit?)

Vimeo chose MooTools as its primary JavaScript framework during a full website redesign back in 2007. That version of the site was even more JavaScript heavy than our current version, so we were really looking for a framework that was complete, fast, and well documented. MooTools, 1.11 released right around that time, excelled in all of these areas and features like classes/inheritance, built-in effects, super smooth animations, and the built-in Penner Easing functions were all appealing to us.

Vimeo在2007年进行了完整的网站重新设计时，选择MooTools作为其主要JavaScript框架。该网站JavaScript版本比我们当前的版本还要繁重，因此我们确实在寻找一个完整，快速且有据可查的框架。 当时发布的MooTools 1.11在所有这些领域均表现出色，类/继承性，内置效果，超流畅动画以及内置Penner Easing功能对我们都具有吸引力。

MooTools为Vimeo工程师提供了什么/有什么帮助，从而强化了将MooTools保留为其主要JavaScript工具包的决定？ (What did/does MooTools offer Vimeo engineers that reinforces the decision to keep MooTools as its primary JavaScript toolkit?)

MooTools has remained Vimeo's primary JavaScript framework because of its strong object- oriented class/inheritance model, modular design, and clean/readable code. Having developers that do both PHP and JavaScript development, it's object-oriented approach really makes this common transition seamless. In addition to elegant Element creation, DOM interaction, and Event handling, MooTools goes beyond these things and has allowed us to build powerful JavaScript classes that power Vimeo's video player, uploader, and desktop upload application. Having MooTools extend and provide an API to the full JavaScript language, we feel confident that it can handle any task we throw at it.

MooTools仍然是Vimeo的主要JavaScript框架，因为它具有强大的面向对象的类/继承模型，模块化设计以及干净/可读的代码。 有了同时进行PHP和JavaScript开发的开发人员，它的面向对象方法确实使这种常见的过渡变得无缝。 除了优雅的Element创建，DOM交互和事件处理之外，MooTools不仅具有这些优点，还使我们能够构建强大JavaScript类，从而为Vimeo的视频播放器，上传器和桌面上传应用程序提供支持。 有了MooTools扩展并为完整JavaScript语言提供API，我们相信它可以处理我们执行的所有任务。

Vimeo当前使用的MooTools 1.11，大约在3年前发布。 MooTools的数量表明1.11对于生产环境而言仍然足够。 您为什么决定不升级？ 是否有计划迁移到MooTools 1.2或1.3？ (Vimeo is currently using MooTools 1.11, which was released almost 3 years ago. It speaks volumes of MooTools that 1.11 is still more than adequate for a production environment. Why have you decided not to upgrade yet? Are there plans to move to MooTools 1.2 or 1.3?)

Upgrading MooTools 1.11 and revisiting our front-end code is something we will be focusing on soon. We've wanted to upgrade to MooTools 1.2 for quite some time now, but unfortunately some of our custom classes and extensions didn't play nice with the compatibility file that was posted to the MooTools blog. With that said though, MooTools 1.11 really has held up in our production environment. We still have JavaScript code from the 2007 redesign as well as many new classes from recent projects such as Vimeo Stats, which you can check out at: http://vimeo.com/stats/demo. There is a lot of heavy AJAX, Element creation, Event attaching, and JavaScript/Flash communication going on. This section, in particular, will benefit greatly from features like Event Delegation and Element Storage that are available in MooTools 1.2 and 1.3.

升级MooTools 1.11并重新访问我们的前端代码是我们很快要关注的事情。 我们已经想升级到MooTools 1.2已有一段时间了，但是不幸的是，我们的一些自定义类和扩展与发布在MooTools博客上的兼容性文件不能很好地兼容。 话虽如此，MooTools 1.11确实在我们的生产环境中保持了下来。 我们仍然有来自2007年重新设计JavaScript代码，以及来自诸如Vimeo Stats之类的最新项目的许多新类，您可以在以下网址查看：http：//vimeo.com/stats/demo。 有很多繁重的AJAX，元素创建，事件附加以及JavaScript / Flash通信正在进行。 特别是本节将从MooTools 1.2和1.3中提供的事件委托和元素存储等功能中受益匪浅。

Vimeo的工程团队希望在MooTools中看到什么改进？ 工程团队是否已使用网站的MooTools版本自定义了任何内容，以更好地适合Vimeo网站？ (What would Vimeo's engineering team like to see improved within MooTools? Has the engineering team customized anything with the site's MooTools build to better suit the Vimeo website?)

The case is rare when I am wishing MooTools did something that is not already available in version 1.2. Of course, we would always like to see continued improvements in performance, speed, and size; but this already seems like a strong focus of MooTools. One thing that has come up though, is the topic of namespacing. If Vimeo were to ever create a script or have the need to inject code into another website, we wouldn't be able to use MooTools because it would conflict with other JavaScript libraries. My only other addition would be community and organization around the library. It was great to see the MooTools Forge launch, but more activity there and more access to the available plug-ins out there would be a plus.

当我希望MooTools做一些1.2版还没有提供的功能时，这种情况很少见。 当然，我们总是希望看到性能，速度和尺寸方面的持续改进。 但这似乎已经成为MooTools的重点。 但是出现的一件事是命名空间的主题。 如果Vimeo曾经创建脚本或需要将代码注入另一个网站，我们将无法使用MooTools，因为它会与其他JavaScript库冲突。 我唯一的补充是图书馆周围的社区和组织。 很高兴看到MooTools Forge的启动，但是在那里有更多的活动和对可用插件的更多访问将是一个加分。

对于Vimeo团队来说，哪些MooTools类已经变得至关重要？ 您能否分享有关Vimeo团队编写的重要自定义类的任何详细信息？ (Which MooTools classes have become essential for the Vimeo team? Can you share any details about important custom classes the Vimeo team has written?)

MooTools in general allows us to make a completely customized UI for Vimeo. We try to create everything from scratch so we have complete flexibility within our Vimeo framework. One thing we love is how MooTools makes it easy to mash-up Flash and HTML in a tasteful way. Components like our video browser to the right of our videos is a special interaction which allows us to create Flash scrollbars that scroll HTML content. The MooTools framework is sometimes compared to AS3 at Vimeo. Making JavaScript feel more like a legitimate programming language rather than a series of helper functions and animation scripts makes us huge fans. The extensibility and modular design of MooTools also makes us excited to make good classes and patterns for Vimeo.

通常，MooTools允许我们为Vimeo制作完全定制的UI。 我们尝试从头开始创建所有内容，以便在Vimeo框架中拥有完全的灵活性。 我们喜欢的一件事是MooTools如何轻松地以一种有品味的方式将Flash和HTML融合在一起。 视频右侧的视频浏览器之类的组件是一种特殊的交互，它使我们能够创建用于滚动HTML内容的Flash滚动条。 Vioo有时将MooTools框架与AS3进行比较。 使JavaScript更像是一种合法的编程语言，而不是一系列帮助函数和动画脚本，这些使我们成为了忠实的拥护者。 MooTools的可扩展性和模块化设计也使我们很高兴为Vimeo编写好的类和样式。

创建如此繁琐的AJAX动态Web应用程序肯定会遇到很多困难。 Vimeo工程团队必须克服哪些主要问题才能创建可靠，灵活的网站？ (Creating such an AJAX-heavy, dynamic web application must have presented many difficulties. What major issues has the Vimeo engineering team had to overcome to create a reliable, flexible website?)

We are constantly doing back-end improvements to meet popular demand, but sometimes short-term solutions have been to concentrate on front-end UX mechanics through JavaScript and AJAX. Given the page or interface, there can be sometimes be additional costly information, and in those cases we decide to either have users manually load that content in via on-click, or have it AJAX in automatically after the page is loaded to improve user perceived latency. Another issue was we had to create a slightly altered event management system, since certain core Vimeo JavaScript classes act up in different browsers. We heavily rely on the domready event, but depending on the browser we wanted to filter out some of the automatic start-up code and manually call it when the time was right. What we did was pass all instantiation through our custom EventCenter. If the page works perfectly in all browsers, we would do EventCenter.fireAll() on domready. If the page is fickle we would then choose what type of events to call on instantiation.

我们不断地进行后端改进，以满足大众的需求，但有时短期解决方案是通过JavaScript和AJAX专注于前端UX机制。 在给定页面或界面的情况下，有时可能会有其他昂贵的信息，在这种情况下，我们决定让用户通过单击手动加载该内容，或者在页面加载后自动将其AJAX加载以改善用户的感知潜伏。 另一个问题是，由于某些核心的Vimeo JavaScript类在不同的浏览器中起作用，因此我们必须创建稍有更改的事件管理系统。 我们严重依赖domready事件，但是根据浏览器，我们希望过滤掉一些自动启动代码，并在适当的时候手动调用它。 我们所做的是通过自定义EventCenter传递所有实例化。 如果该页面在所有浏览器中都能正常运行，我们将在domready上执行EventCenter.fireAll()。 如果页面变化无常，那么我们将选择在实例化上调用哪种类型的事件。

Vimeo的动画主页背景是一个品味独特效果的完美示例。 您可以分享有关产生效果的灵感和困难的哪些方面？ (Vimeo's animated homepage background is a perfect example of a tasteful, unique effect. What can you share about the inspiration and difficulties behind creating the effect?)

Why, thank you! The homepage background effect is a perfect example of an effect driven by design. I built the page not really thinking how the sun and clouds would "work", but I knew they needed to be fixed based on their various positions in the sky. I quickly saw this wouldn't work since the elements would stay fixed and collide with the footer illustration as the page scrolled vertically. So, I added a scroll event and set the top position on the elements as the page scrolled, which worked, but was pretty choppy. I ditched the scroll event and instead created a Fx.Style for each element and animated the top position in a function that was called periodically, to allow more flexibility in timing. Executing the function periodically paired with the Penner easeOut animation, the effect really felt awesome.

为什么要谢你！ 主页背景效果是由设计驱动的效果的完美示例。 我创建该页面的时候并没有真正考虑过太阳和云如何“起作用”，但是我知道它们需要根据其在天空中的不同位置进行固定。 我很快看到这是行不通的，因为当页面垂直滚动时，元素将保持固定并与页脚插图冲突。 因此，我添加了一个scroll事件，并在页面滚动时将元素的顶部位置设置为有效，但是非常不连贯。 我放弃了滚动事件，而是为每个元素创建了一个Fx.Style并在定期调用的函数中为顶部位置设置了动画，以使计时更加灵活。 定期执行与Penner easeOut动画配对的功能，效果确实很棒。

您能否提供有关Vimeo在后端如何构造的任何详细信息？ (Can you provide any detail as to how Vimeo is constructed on the back end?)

Sure, Vimeo is developed on the LAMP stack. The application itself is written in a custom PHP 5.3+ HMVC framework. We have a bunch of MySQL databases to store stuff like videos, users, channels, and statistics. We heavily use Memcached for our caching layer. We use it for caching objects, collections of objects, rate limiting, and session management. We also use cool things like Solr for search and tags, Beanstalkd for worker queues to offline certain tasks, and Scribe for logging and statistics aggregation. At the moment, our whole infrastructure is virtualized and we use Amazon Web Services extensively so we can scale transcoding and uploading capacity during the day. However, we are always experimenting with more efficient ways of doing things.

当然，Vimeo是在LAMP堆栈上开发的。 该应用程序本身是使用自定义PHP 5.3+ HMVC框架编写的。 我们有一堆MySQL数据库来存储视频，用户，频道和统计信息。 我们将Memcached大量用于缓存层。 我们将其用于缓存对象，对象集合，速率限制和会话管理。 我们还使用一些很酷的功能，例如Solr进行搜索和标记，Beanstalkd进行工作人员队列以使某些任务脱机，Scribe进行日志记录和统计信息聚合。 目前，我们已对整个基础架构进行了虚拟化，并且我们广泛使用Amazon Web Services，因此我们可以在一天中扩展转码和上传容量。 但是，我们一直在尝试更有效的处理方式。

Vimeo提供了一个出色的API，它使任何具有编程知识的人都能提取其用户或视频信息。 Vimeo在创建API系统时遇到什么困难？ (Vimeo provides an excellent API which allows anyone with programming knowledge to pull their user or video information. What difficulties did Vimeo encounter while creating the API system?)

One of the biggest challenges was building a good upload API that is easy to use and works properly with our back-end transcoding system. A greater challenge than creating the API is maintaining it and updating it to reflect changes in the site, without breaking current applications. This is especially difficult with our video player's JavaScript API because of the high number of Vimeo embeds that are out there. Once someone embeds a video, that code is pretty much frozen in time.

最大的挑战之一是建立一个易于使用并且可以与我们的后端转码系统正常工作的良好上传API。 与创建API相比，更大的挑战是在不破坏当前应用程序的情况下维护并更新它以反映站点中的更改。 由于存在大量的Vimeo嵌入，因此使用我们的视频播放器JavaScript API尤其困难。 有人嵌入视频后，该代码就会及时冻结。

Vimeo是否计划在不久的将来开源其任何代码？ 如果是这样，我们可以期待什么？ (Does Vimeo plan on open sourcing any of its code in the near future? If so, what can we look forward to?)

Being more open about our development is something we've been discussing recently. We are constantly developing and implementing new tools and techniques to help us grow and scale and we feel both the development community and Vimeo can benefit by being more open about it. Just recently, we rewrote our PHP application framework with more of a focus on performance, scaling, and security. I think we are are doing some pretty unique things with caching, HMVC, privacy, and data filtering/sorting in PHP to reduce database load. Hopefully in the next few months you'll be hearing a lot more from us.

最近我们一直在讨论对我们的发展更加开放。 我们正在不断开发和实施新的工具和技术，以帮助我们发展壮大，我们感到开发社区和Vimeo都可以通过更加开放而受益。 就在最近，我们改写了我们PHP应用程序框架，重点更多地放在性能，扩展性和安全性上。 我认为我们正在使用PHP中的缓存，HMVC，隐私和数据过滤/排序来做一些非常独特的事情，以减少数据库负载。 希望在接下来的几个月中，您会收到更多来自我们的信息。

我们期望明年Vimeo有什么收获？ 未来五年？ (What can we expect to see from Vimeo within the next year? Next 5 years?)

You can expect to see us everywhere.

您可以期望在任何地方都能看到我们。

A special thanks to Kevin for taking the time to chat with me! Be sure to check out Kevin and the rest of his team's work at Vimeo!

特别感谢Kevin抽出宝贵的时间与我聊天！ 请务必查看Kevin和Vimeo团队的其他工作！

翻译自: https://davidwalsh.name/vimeo

vimeo 镜像