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


101

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


我的要求如下:

  • RESTful数据层(如ember-data)
  • MV *-结构
  • 动态路线
  • 测试支持
  • 按照惯例编码
  • SEO支持
  • 浏览器历史记录支持
  • 好的(API-)文档
  • 准备生产
  • 生活社区

骨干

当前应用程序正在使用backbone.js。总体而言,这backbone.js是一个不错的项目,但是我缺少定义明确的结构来确定必须在何处发生以及必须如何实施。与不断变化的开发人员组成一个更大的团队,这会导致某种非结构化的代码,难以维护且难以理解。这就是为什么我现在要搜索一个已经定义了所有这些东西的框架的原因。

余烬

我看着ember.js最后的日子。这种方法对我来说似乎很有希望。但是,不幸的是,代码几乎每天都会更改。因此,我不会称其为生产就绪。而且,不幸的是,我们迫不及待要等待它成为1.0版。但是我真的很喜欢这个框架背后的想法。

角度的

Angular.js也是一个广泛传播的框架,由Google维护。但是我不熟悉角度。对我来说,结构似乎还不清楚,缺少框架各部分的总体职责的解释,并且实现方式circuit回曲折。只是为了直截了当:这只是我个人的印象,可能基于缺少的知识。

蝙蝠侠流星

据我了解,两个框架也都需要服务器部分。而且由于我们只想要一个RESTful后端-不管是什么语言,技术或软件,这都不是我们想要的。此外,后端API确实已经存在(RoR)。

敲除CanJS脊柱

我没有更深入地介绍这三个候选人。也许这将是我的下一步。


所以我现在的问题是:

  • 我是否缺少任何出色的SPA框架?
  • 您会建议/推荐什么框架?
  • 您会避免提及任何框架吗?
  • 您在较大的SP应用程序中有什么经验?

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

PS:是的,我知道已经有一些问题了。但是,由于SPA的发展是如此迅速和迅速,因此大多数SPA已经过时了。


检出我刚刚开源的基于剔除的SPA框架:knockout-spa github.com/onlyurei/knockout-spa
onlyurei 2015年

Answers:


81

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

  • 余烬

    早期看过Ember并与您有类似的想法-我真的很喜欢它,但是感觉使用它还为时过早...大约一半的阅读教程不适用于当前版本,因为最近有一些内容改变了模板的工作方式。

  • 骨干

    骨干是我们认真研究的第一个框架。我不确定我是否理解您为什么认为它没有“定义明确的结构”?骨干网非常清楚如何划分模型和视图代码。也许您的意思是没有某种应用程序模板?无论如何,Backbone似乎确实专注于模型/ REST绑定部分,但是并没有为视图绑定开任何规定。如果模型绑定对您很重要,并且您正在使用Rails,则应该轻而易举地做到这一点。不幸的是,我的应用程序的Web服务并没有真正匹配,我不得不写我自己.sync.parse一切方法。将模型代码和视图代码分开是很好的,但是由于我们必须从头开始编写所有绑定,所以这是不值得的。

  • 昏死

    淘汰赛就像阴骨到主干的杨。Backbone专注于Model,而Knockout是MVVM框架,专注于View。它具有observableJavaScript对象属性的包装器,并使用data-bind属性将属性绑定到HTML。最后,我们使用了Knockout,因为视图绑定主要是我们应用程序所需的。(...以及其他,如稍后讨论的...)如果您喜欢Knockout的视图绑定和Backbone的模型绑定,那么还有KnockBack,它将两个框架结合在一起。

  • 角度的

    在淘汰赛之后看了看这个-不幸的是,我们所有人都对淘汰赛如何实现视图绑定感到非常满意。似乎比淘汰赛要复杂和困难得多。而且它使用了一堆自定义HTML属性进行绑定,我不确定我是否喜欢...稍后我可能再看看Angular,因为自从我遇到了很多非常喜欢框架的人-也许我们刚刚为这个项目看得太晚了。

  • 蝙蝠侠流星CanJS脊柱

    并没有仔细观察其中任何一个。虽然我知道Spine是与Backbone相似的框架,但带有显式Controller对象,并且是用CoffeeScript编写的。

  • 后记

    正如我提到的,我们最终使用了Knockout,因为对于我们的项目而言,关注视图绑定更为重要。我们最终还使用了RequireJS进行模块化,使用十字路口Hasher来处理路由和历史记录,使用了Jasmine进行测试,以及使用了JQueryTwitter BootstrapUnderscore.js(也许我现在忘记了更多的库)。

    Javascript应用程序开发更像Java生态系统,而不是Rails生态系统。Rails提供了将要用于每个应用程序的东西(Rails框架)的坚实核心,并且社区在此之上(宝石)提供了许多自定义项。Java提供了一种语言。然后,您可以选择Java EE或Spring或Play或Struts或Tapestry。然后选择JDBC或Hibernate或TopLink或Ibatis与数据库对话。然后,您可以使用Ant或Maven或Gradle进行构建。并选择Tomcat或码头或JBoss的或WebLogin在运行它。所以这是更偏重于选择你需要什么,什么一起工作不是选择使用的框架。


非常感谢您的详细回答。关于基因敲除.js的一些问题:1)它是否提供某种数据层以保持前端/后端中的模型同步?2)如何将一个模板包含到另一个模板中(可能与requireJS一起使用)?3)是否容易将所有文件(模型,视图,控制器,助手等)分别放在不同的文件夹中?除了这些问题之外,由于您提供了很多信息,因此我将您的答案设置为“接受”。
Christopher Will

@ChristopherWill谢谢!1.)就像Backbone留给您进行视图绑定一样,Knockout留给您进行REST-> Model绑定。有文档中的一些例子- knockoutjs.com/documentation/json-data.html也可以使用击退到骨干REST->模型人口结合起来。
Nate

2)这取决于您的意思-淘汰赛具有内置的数据绑定,可让您从模型中获取集合,绑定到列表标签或表格标签,并为每个标签渲染指定的模板。对于大规模的东西,例如您如何构建整体视图并交换它们-这仍然有些手动(至少我是这样做的,仍在学习中)-带有文本插件的RequireJS使执行此操作变得容易一些,但您仍然必须指定逻辑并换出div-我只是在响应我的路线的方法中做到这一点。不过,您也许可以关联淘汰赛事件。
Nate

3.)RequireJS是使您可以执行此操作的方法。
Nate

谢谢内特。我想我会尝试一下KnockBack的。而且,当然还有您提到的库(requireJS,十字路口等)
Christopher Will

8

自从我们开始开发具有众多SPA的Cloud Services项目以来已经一年了,因此,决定使用哪种javascript框架来满足我们的RESTful架构需求是一个重大决定。经过大量研究,我们最终使用了Dojo框架

您会喜欢的主要功能:

  1. 受过良好教育的社区和团队,他们提出了完美的设计模式。伟大的约定和模块化/面向对象的体系结构。以CrossBrowser编程态度:)
  2. MV *结构。使用外部.htm模板构建UI小部件,并进行生产,将所有javascript和模板构建为单个,小型和小型.js
  3. 用继承构建类。属性设置器,很多功能工具。
  4. pub / sub机制(在dojo中命名为主题)
  5. 从验证表单控件,对话框/工具提示到功能强大,高度可定制(但轻量级)的图表和数据网格解决方案的大量UI控件。
  6. 一个名为DOH的好的单元测试系统。它也有一个机器人来重现鼠标/键盘动作。
  7. 一个名为NodeList的查询工具(如JQuery),具有所有jquery功能,甚至包括很多插件。
  8. 和好的但不是很完整的部分。它具有可与REST服务一起使用的JsonRest模块。它是一种方便的工具,但缺少许多功能。

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

查看网络上出色的SPA,您会发现所有SPA都是经过定制的并使用了多个框架。但是我们仅在Dojo上的经历就很棒。因此,我建议您不要考虑任何其他框架,因为它们对于SPA而言都是不完整的。但最终您还有另一个选择(我不建议使用,也没有详细信息)。通过自动生成UI和javascript,使用能够构建SPA的JAVA框架。


你好!您现在使用Dojo吗?您是否有关于Dojo的博客?
Dunaevsky Maxim 2016年

嗨!是的,我们仍将其用于同一产品,并对其进行维护。内部框架是在dojo之上编写的,我们每天都在增加它。.不,我没有相应的博客。如果要开始使用它,那么今天它被认为是一种旧工具。他们仍在使用Dojo 2.0,但现在最好使用其他选项。我们在列表的顶部有React / Angular。
Unicornist 2013年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.