什么是ExtJS哲学? 单页面应用程序?
我需要使用ExtJs编写我的下一个项目。 这是一个很好的JavaScript库,但我不完全理解它背后的想法。 以文档页面为例。
我应该用extjs写我的web应用程序吗? 一个永远不会刷新的页面,一切都由AJAX完成?
你如何debugging这样的应用程序,如果得到正确的地方可能需要大量的“点击”和使用它。 您无法修复该错误并在浏览器中进行刷新以查看结果。
有什么build议么?
我是否应该用ExtJS编写我的Web应用程序? 一个永远不会刷新的页面,一切都由AJAX完成?
您不必编写像ExtJS文档那样的应用程序。 如果您查看ExtJS的示例页面,您会看到许多HTML与单个页面上的Ext窗口小部件混合在一起。 在我的工作中,我使用了两个不同的应用程序,我使用的是ExtJS,一个是遗留的站点,我使用小部件来整理页面,另一个是完全成熟的Web应用程序,只是使用ExtJS作为前端。 我肯定比较喜欢后者,但学习曲线非常陡峭。
你如何debugging这样的应用程序,如果得到正确的地方可能需要大量的“点击”和使用它。
这里的关键是模块化您的应用程序。 单独构build每个组件并在真空中进行testing。 不要被误认为这应该是包含整个应用程序的一个巨大的JavaScript文件。 在大多数Web应用程序中,源代码都有几十个或更多的JavaScript文件,这些文件仅用于部署目的。
必须有testing和debugging是萤火虫 。 它允许您检查Ajax请求,debuggingJavaScript以及更多。
这里有一系列关于使用ExtJS编写大型应用程序的文章,这是一个相当不错的阅读,有很多很好的信息。
在ExtJS 4 Part1 Part2 Part3中构build一个示例应用程序
对于ExtJS 3.3及以下的Part1 Part2 Part3
我认为可以用任何一种方式来使用ExtJS,如果你刚刚开始,那么做一些你最喜欢的事情会更有意义,并且一路上添加一些ExtJS的“香料”。 也就是说,一旦你开始使用它来创build单页面应用程序,并且你的后端只输出JSON,那么你可能永远不会回头看你以前做过networking应用程序的方式。
你可以做现代的基于AJAX的应用程序,并使用URL散列来深层链接你的应用程序 。
Gmail就是一个很好的例子。 为了到达我的收件箱,我导航到:
要去我的联系人pipe理器,我浏览到:
这两个“页面”都在同一页面上,导航在我使用应用程序时实际上会将我redirect到不同的页面。 散列是所有的变化。
当页面加载时,你需要做的是检查window.location.hash
并使用它来更新你的应用程序的状态。
不是单页,而是less量分页的应用程序
我参与了一个复杂的项目,build立在:
- Asp.net 3.5
- WCFnetworking服务
- ExtJS 2.1
- .netTiers(与CodeSmith)为DAL + DAO
- SQL 2005 + OLAP多维数据集(有些不要提醒我这个噩梦解决方法必须在应用程序内完成,因为我们使用了一些第三方控件,部分支持UpdatePanels,这件事情本身打破了非常基本的处理我们的应用)
- 定制的外观和感觉,现有的ExtJS – 这是ExtJS成本最难的部分,所以我build议你坚持提供的主题之一
我们没有做实际的单页面应用程序,但页面数量大大减less了。 应用程序中的每个工作领域通常是一个单独的页面。 所有接口处理都在客户端使用ExtJS完成,或者在向ExtJS客户端接口提供数据的WCF服务中的服务器端完成。
它运作良好。
我今天可能会改变一件事:我会从Asp.net + WCF迁移到Asp.net MVC 。 这是更多的构build这种情况。
关于debugging,我们使用了Firebug(Firefox插件),就像任何其他开发者一样。
但是使用ExtJS库取得了巨大的成功。 这使得创build类似桌面的数据沉重的Web应用程序变得很容易。 这是任何专业Intranet Web应用程序开发的一个很好的统一库。 有了jQuery和它的插件,你总是会被社区提供的那些插件的不同怪癖所独占。 ExtJS在这方面非常统一,提供了一个非常好的外观和感觉。
我认为这个想法在某种程度上与Web环境中的应用程序的桌面感觉相匹配,这意味着几乎所有的应用程序都可以在Ajax中使用。
至于debugging,萤火虫是你的朋友。 但是debugging一个桌面应用程序应该没有什么不同,在这个应用程序中也可能会涉及很多点击来获取错误。
您可以使用onHashChange监听器,加上我所谓的“封闭”格式来加载extjs屏幕。 我写了一篇关于如何构build单个页面extjs应用程序的文章 。
在testingExtJs方面…
这是一个testingExtJs组件的工具(这个工具是用ExtJs制作的!)
Siestatesting工具来testingExtJs
我还没有亲自使用过这个,但是我看了一下演示video,看起来很漂亮!
也许社区成员可能知道任何专门testingExtJs的替代工具?
PS:我与Sencha(ExtJs)或者Bryntum(Siesta)没有任何关系。 我在客户级别使用ExtJs。
你不必这样写。 有时它看起来不错,更快(不刷新新页面)。
你可以做自动logging的JavaScript,做一些自动化testing工具或自己写这些东西你的东西。 通常debugging整个页面不是一个好主意。 当它以模块化的方式构build时,它更容易。 隔离问题,这很容易。
另外考虑使用萤火虫debugging它可能会帮助你。
build议:我要看你在做什么。 如果你正在制作高度互动的网页,那么这样做可能是一个好主意。 速度更快,Ajax请求可以降低服务器的负载。 另一方面,这样做需要更多的时间。
我正在使用ASP.Net MVC与ExtJS。 这不是一个页面的应用程序,但它是接近的,感觉就像一个页面的应用程序。
而且我们还有一个有数百页的网页表单应用程序,我们在这个应用程序上应用了一些ExtJS UI小部件,使用了大量的IFrames,它仍然工作,看起来不错。 但我不喜欢使用网页表单模型,并尽量避免它。
恕我直言;
- asp.net mvc平台会比webforms平台更好。
- 控制器非常适合动作处理。
- 部分是有用的生成html内容(脚手架在这里帮助很多)
ExtJS的
- 导航,
- 清单,
- 检索,
- 编辑内容,
- 通知,
- 几乎所有的东西…
总的来说ExtJS是一个很棒的框架。
在我们的应用程序中,我们编写了一个自定义页面类来处理“页面”之间的切换。 一个页面由一个ExtJS容器组成,它返回你的类,并且通过在URL的末尾设置#hash值来保存历史logging。
使用这种方法,您可以连同所有资产一起加载您的ExtJS库,这样您就可以获得巨大的业绩回报,同时保持应用的stream畅性。