用于构建单页应用程序的 JavaScript 框架

Question

提问by Christopher Will

My goal is to migrate an existing web application to a RESTful single page application(SPA). Currently, I'm evaluating several Javascript web application frameworks.

我的目标是将现有的 Web 应用程序迁移到 RESTful单页应用程序(SPA)。目前，我正在评估几个 Javascript Web 应用程序框架。

My requirements are as follow:

我的要求如下：

RESTful data layer (like ember-data)
MV*-structure
Dynamic routes
Testing-support
Coding by convention
SEO-support
Browser-History-Support
Good (API-) documentation
Production-ready
Living community

RESTful 数据层（如 ember-data）
MV*-结构
动态路线
测试支持
按约定编码
SEO支持
浏览器历史支持
好的 (API-) 文档
生产就绪
生活社区

Backbone

骨干

The current application is using backbone.js. Overall, backbone.jsis a nice project, but I'm missing well-defined structures that determine where what has to happen and how things must get implemented. Working in a bigger team with changing developers this leads to some kind of unstructured code, difficult to maintain and difficult to understand. This is why I'm searching now for a framework, that already defines all this stuff.

当前应用程序正在使用backbone.js. 总的来说，这backbone.js是一个不错的项目，但我缺少明确定义的结构，这些结构决定了必须发生的事情以及必须如何实施。在一个更大的团队中与不断变化的开发人员一起工作，这会导致某种非结构化的代码，难以维护和理解。这就是为什么我现在正在寻找一个框架，它已经定义了所有这些东西。

Ember

余烬

I looked into ember.jsthe last days. The approach seems very promising to me. But, unfortunately, the code changes almost daily. So, I won't call it production-ready. And, unfortunately, we can't wait for it to be version 1.0. But I really like the idea behind this framework.

我看了ember.js最后几天。这种方法对我来说似乎很有希望。但是，不幸的是，代码几乎每天都在变化。所以，我不会称之为生产就绪。而且，不幸的是，我们不能等待它成为 1.0 版。但我真的很喜欢这个框架背后的想法。

Angular

角

Angular.jsis a widely spread framework as well, maintained by Google. But I could not get familiar with angular. For me, the structure seems kind of unclear, explanations are missing of the overall responsibilities of each part of the framework, and the implementations feel circuitous. Just to get this straight: this is just my personal impression and might be based on missing knowledge.

Angular.js也是一个广泛传播的框架，由谷歌维护。但我无法熟悉 angular。对我来说，结构似乎有点不清楚，框架每个部分的整体职责都没有解释，实现起来感觉很迂回。直截了当地说：这只是我的个人印象，可能基于缺失的知识。

Batmanand Meteor

蝙蝠侠和流星

As I understood, both frameworks need a server part as well. And since we just want a RESTful backend - no matter what language, technic or software, this is not what we want. Further, the backend API does already exist (RoR).

据我了解，这两个框架也需要一个服务器部分。因为我们只想要一个 RESTful 后端——无论是什么语言、技术或软件，这都不是我们想要的。此外，后端 API 确实已经存在 (RoR)。

Knockout, CanJSand Spine

淘汰赛，CanJS和Spine

I did not go any deeper into these three candidates. Maybe this will be my next step.

我没有更深入地了解这三位候选人。也许这将是我的下一步。

So my questions now:

所以我现在的问题：

Am I missing any good SPA-frameworks?
What framework would you suggest/recommend?
Would you avoid any of the mentioned frameworks?
What is your experience in bigger SP applications?

我是否缺少任何好的 SPA 框架？
您会建议/推荐什么框架？
你会避免任何提到的框架吗？
您在更大的 SP 应用程序中的经验是什么？

PS: I'd would like to recommend a great blogpostfrom Steven Anderson (core developer from Knockout.js) about the "Throne of JS"-conference (from 2012) and javascript frameworks in general.

PS：我想推荐一个伟大的博文由史蒂芬·安德森（从Knockout.js核心开发人员）约（自2012年）的“JS王座” -会议和JavaScript框架一般。

PS: Yes, I know there are already some question on SO. But since the development is so rapidly and fast for SPAs, most of them are already out-of-date.

PS：是的，我知道已经有一些关于 SO 的问题。但是由于 SPA 的发展如此迅速和快速，它们中的大多数已经过时了。

Answer 1

采纳答案by Nate

I recently had to decide on a JavaScript SPA framework on a project too.

我最近也不得不决定一个项目的 JavaScript SPA 框架。

Ember
Looked at Ember early on and had similar thoughts as you about it - I really liked it but it felt like it was still too early to use... about half the tutorials I read didn't work with the current version because something had recently changed in how templating works.
Backbone
Backbone was the first frameworks we seriously looked at. I'm not sure I understand why you think it doesn't have "well defined structures"? Backbone is pretty clear about how to divide up Model and View code. Maybe you mean there's not some kind of app template? Anyway, Backbone seems really focused on the model/REST-binding part, but doesn't really prescribe anything for view binding. If model binding's important to you and you're using Rails it should be a breeze to do this. Unfortunately, the web services for my app didn't really match up, and I had to write my own .syncand .parsemethods for everything. The separation of Model and View code was nice, but since we'd have to write all our bindings from scratch it wasn't worth it.
Knockout
Knockout is like the Yin to Backbone's Yang. Where Backbone is focused on the Model, Knockout is a MVVM framework and is focused on the View. It has observablewrappers for JavaScript object properties and uses a data-bindattribute to bind properties to your HTML. In the end we went with Knockout since view binding was mainly what we needed for our app. (...plus others, as discussed later...) If you like Knockout's view binding and Backbone's model bindings there's also KnockBackwhich combines both frameworks.
Angular
Looked at this after Knockout - unfortunately we all seemed pretty happy with how Knockout did view binding. It seemed a lot more complex and harder to get into than Knockout. And it uses a bunch of custom HTML attributes to do bindings, which I'm not sure I like... I may take another look at Angular later, because since I've come across multiple people who really like the framework - maybe we just looked at it too late for this project.
Batman, Meteor, CanJS, Spine
Didn't really look too closely at any of these. Though I know Spine is a similar framework to Backbone with explicit Controller objects, and is written in CoffeeScript.
Afterword
As I mentioned, we ended up using Knockout because, for our project, focusing on view binding was more important. We also ended up using RequireJSfor modularization, crossroadsand Hasherto handle routing and history, Jasminefor testing, as well as JQuery, Twitter Bootstrap, and Underscore.js(and probably more libraries I'm forgetting at the moment).
Javascript app development is more like the Java ecosystem than the Rails ecosystem. Rails provides a solid core of stuff you're going to use for every app (Rails framework), and the community provides a lot of customizations on top of that (gems). Java provides... a language. And then you can choose Java EE or Spring or Play or Struts or Tapestry. And choose JDBC or Hibernate or TopLink or Ibatis to talk to the database. And then you can use Ant or Maven or Gradle to build it. And choose Tomcat or Jetty or JBoss or WebLogin to run it in. So there's more emphasis on choosing what you need and what works together than choosing THEframework to use.

余烬
很早就看过 Ember 并且和你有类似的想法 - 我真的很喜欢它，但感觉现在使用还为时过早......我阅读的大约一半教程不适用于当前版本，因为最近有些东西模板的工作方式发生了变化。
骨干
Backbone 是我们认真研究的第一个框架。我不确定我是否理解为什么您认为它没有“明确定义的结构”？Backbone 非常清楚如何划分模型和视图代码。也许你的意思是没有某种应用程序模板？无论如何，Backbone 似乎真的专注于模型/REST 绑定部分，但并没有真正为视图绑定规定任何内容。如果模型绑定对您很重要并且您正在使用 Rails，那么执行此操作应该是轻而易举的。不幸的是，我的应用程序的 Web 服务并没有真正匹配，我必须为所有内容编写自己的方法.sync和.parse方法。模型和视图代码的分离很好，但由于我们必须从头开始编写所有绑定，因此不值得。
昏死
淘汰赛就像阴到骨干的阳。Backbone 专注于模型，而 Knockout 是一个 MVVM 框架，专注于视图。它具有observableJavaScript 对象属性的包装器，并使用data-bind属性将属性绑定到您的 HTML。最后我们选择了 Knockout，因为我们的应用程序主要需要视图绑定。（...加上其他人，稍后讨论...）如果您喜欢 Knockout 的视图绑定和 Backbone 的模型绑定，那么还有结合了这两个框架的KnockBack。
角
在 Knockout 之后看了这个 - 不幸的是，我们似乎都对 Knockout 进行视图绑定的方式感到非常满意。它似乎比 Knockout 更复杂、更难进入。它使用了一堆自定义 HTML 属性来进行绑定，我不确定我是否喜欢……我稍后可能会再看看 Angular，因为因为我遇到了很多真正喜欢这个框架的人——也许我们只是看这个项目太晚了。
蝙蝠侠，流星，CanJS，脊柱
并没有真正仔细观察其中任何一个。虽然我知道 Spine 是一个类似于 Backbone 的框架，带有显式控制器对象，并且是用 CoffeeScript 编写的。
后记
正如我所提到的，我们最终使用了 Knockout，因为对于我们的项目来说，专注于视图绑定更为重要。我们最终还使用RequireJS进行模块化，使用crossroads和Hasher处理路由和历史记录，使用Jasmine进行测试，以及JQuery、Twitter Bootstrap和Underscore.js（可能还有更多我现在忘记的库）。
Javascript 应用程序开发更像是 Java 生态系统而不是 Rails 生态系统。Rails 提供了您将要用于每个应用程序的坚实核心（Rails 框架），并且社区在此基础上提供了大量自定义（gems）。Java 提供了……一种语言。然后你可以选择 Java EE 或 Spring 或 Play 或 Struts 或 Tapestry。并选择 JDBC 或 Hibernate 或 TopLink 或 Ibatis 与数据库对话。然后你可以使用 Ant 或 Maven 或 Gradle 来构建它。并选择Tomcat或码头或JBoss的或WebLogin在运行它。所以这是更偏重于选择你需要什么，什么一起工作不是选择的使用的框架。

Answer 2

回答by Unicornist

it's been a year since we started development on our Cloud services project with numerous SPAs, so it was a big decision, which javascript framework to use for our UI to satisfy our RESTful architecture needs. and after a lot of researches we ended up using Dojo framework.

自从我们开始开发具有众多 SPA 的云服务项目以来已经一年了，所以这是一个重大决定，我们的 UI 使用哪个 javascript 框架来满足我们的 RESTful 架构需求。经过大量研究，我们最终使用了Dojo 框架。

main features you'll love:

您会喜欢的主要功能：

educated community and a team that came up with a perfect design pattern. great conventions and modular/object-oriented architecture. with CrossBrowser programming attitudes :)
MV* structure. build UI widgets with external .htm templates and for production, build all your javascript & templates into a single, minified and small .js
build classes with inheritance. property setters, a lot of function tools.
pub/sub mechanism (named topics in dojo)
a lot of UI controls, from validation form control, dialogs/tooltips to a heavy featured, highly customizable (but lightweight) chart & data-grid solution.
a good unit test system named DOH. it also have a robot to reproduce mouse/keyboard actions.
a querying tool (like JQuery) named NodeList with all jquery features and even a lot of it's plugins.
and the good but not so complete part. it has a JsonRest module to use with your REST services. its a handy tool but it lacks a lot of features.

受过教育的社区和提出完美设计模式的团队。伟大的约定和模块化/面向对象的体系结构。与跨浏览器编程态度:)
MV* 结构。使用外部 .htm 模板构建 UI 小部件，对于生产，将所有 javascript 和模板构建到单个、缩小的小型 .js 中
使用继承构建类。属性设置器，很多功能工具。
发布/订阅机制（dojo 中的命名主题）
许多 UI 控件，从验证表单控件、对话框/工具提示到功能强大、高度可定制（但轻量级）的图表和数据网格解决方案。
一个名为 DOH 的优秀单元测试系统。它还有一个机器人来重现鼠标/键盘的动作。
一个名为 NodeList 的查询工具（如 JQuery），具有所有 jquery 功能，甚至还有很多插件。
以及好的但不那么完整的部分。它有一个 JsonRest 模块可用于您的 REST 服务。它是一个方便的工具，但它缺乏很多功能。

to overcome these issues, we developed an AJAX poller, error handling and universal, loading & notifications solution. we did it very easily using dojo framework conventions and structures. if you don't want to do that, perhaps you have to use another framework for this part.

为了克服这些问题，我们开发了 AJAX 轮询器、错误处理和通用、加载和通知解决方案。我们使用 dojo 框架约定和结构非常轻松地做到了。如果您不想这样做，也许您必须为此部分使用另一个框架。

looking at great SPAs around the web you'll find out all of them are customized and using multiple frameworks. but our experience with Dojo alone was fantastic. and therefore I suggest you to don't think of any other framework since all of them are incomplete for a SPA. but ultimately you have also another option (which I don't recommend and have no details information on). go with a JAVA framework that is capable of building SPAs, by automatically generating UI & javascript.

查看网络上的优秀 SPA，您会发现所有这些 SPA 都是定制的并使用多个框架。但我们单独使用 Dojo 的体验非常棒。因此我建议您不要考虑任何其他框架，因为它们对于 SPA 来说都是不完整的。但最终你还有另一个选择（我不推荐并且没有详细信息）。使用能够构建 SPA 的 JAVA 框架，通过自动生成 UI 和 javascript。