为什么我不用Javascript和Javascript HTML模板构建整个Web应用程序？

I'm getting to the point on an app where I need to start caching things, and it got me thinking...

我在应用程序中找到了我需要开始缓存的东西，它让我思考......

In some parts of the app, I render table rows (jqGrid, slickgrid, etc.) or fancy div rows (like in the New Twitter) by grabbing pure JSON and running it through something like Mustache, jquery.tmpl, etc.
在应用程序的某些部分，我通过抓取纯JSON并通过像Mustache，jquery.tmpl等运行它来呈现表行（jqGrid，slickgrid等）或花式div行（如在新推特中）。
In other parts of the app, I just render the info in pure HTML (server-side HAML templates), and if there's searching/paginating, I just go to a new URL and load a new HTML page.
在应用程序的其他部分，我只是在纯HTML（服务器端HAML模板）中呈现信息，如果有搜索/分页，我只是转到一个新的URL并加载一个新的HTML页面。

Now the problem is in caching and maintainability.

现在的问题在于缓存和可维护性。

On one hand I'm thinking, if everything was built using Javascript HTML Templates, then my app would serve just an HTML layout/shell, and a bunch of JSON. If you look at the Facebook and Twitter HTML source, that's basically what they're doing (95% json/javascript, 5% html). This would make it so my app only needed to cache JSON (pages, actions, and/or records). Which means you'd hit the cache no matter if you were some remote api developer accessing a JSON api, or the strait web app. That is, I don't need 2 caches, one for the JSON, one for the HTML. That seems like it'd cut my cache store down in half, and streamline things a little bit.

一方面我想，如果一切都是使用Javascript HTML模板构建的，那么我的应用程序只提供HTML布局/ shell和一堆JSON。如果你看看Facebook和Twitter HTML源代码，那基本上就是他们正在做的事情（95％json / javascript，5％html）。这将使我的应用程序只需要缓存JSON（页面，操作和/或记录）。这意味着无论你是一些远程api开发人员访问JSON api还是strait web应用程序，你都会点击缓存。也就是说，我不需要2个缓存，一个用于JSON，一个用于HTML。这似乎将我的缓存存储减少了一半，并简化了一些事情。

On the other hand, I'm thinking, from what I've seen/experienced, generating static HTML server-side, and caching that, seems to be much better performance wise cross-browser; you get the graphics instantly and don't have to wait that split-second for javascript to render it. StackOverflow seems to do everything in plain HTML, so does Google, and you can tell... everything appears at once. Notice how though on twitter.com, the page is blank for .5-1 seconds, and the page chunks in: the javascript has to render the json. The downside with this is that, for anything dynamic (like endless scrolling, or grids), I'd have to create javascript templates anyway... so now I have server-side HAML templates, client-side javascript templates, and a lot more to cache.

另一方面，我正在思考，从我所看到/经历过的，生成静态HTML服务器端，以及缓存，似乎是更好的性能明智的跨浏览器;你可以立即获得图形，而不必等待javascript渲染它。 StackOverflow似乎用普通的HTML做所有事情，谷歌也是如此，你可以告诉......一切都出现了。请注意，如果在twitter.com上，该页面是空白的.5-1秒，并且页面块中包含：javascript必须呈现json。这方面的缺点是，对于任何动态（如无限滚动或网格），我必须创建javascript模板...所以现在我有服务器端HAML模板，客户端javascript模板，以及很多更多缓存。

My question is, is there any consensus on how to approach this? What are the benefits and drawbacks from your experience of mixing the two versus going 100% with one over the other?

我的问题是，对于如何处理这个问题有什么共识吗？您将两者混合在100％与另一种混合的经验中有哪些好处和缺点？

Update:

更新：

Some reasons that factor into why I haven't yet made the decision to go with 100% javascript templating are:

导致我尚未决定使用100％javascript模板的原因有以下几个原因：

Performance. Haven't formally tested, but from what I've seen, raw html renders faster and more fluidly than javascript-generated html cross-browser. Plus, I'm not sure how mobile devices handle dynamic html performance-wise.
性能。尚未正式测试，但从我所看到的，原始html渲染速度更快，更流畅，而不是javascript生成的html跨浏览器。另外，我不确定移动设备如何处理动态html性能。
Testing. I have a lot of integration tests that work well with static HTML, so switching to javascript-only would require 1) more focused pure-javascript testing (jasmine), and 2) integrating javascript into capybara integration tests. This is just a matter of time and work, but it's probably significant.
测试。我有很多集成测试可以很好地与静态HTML一起使用，因此切换到仅javascript需要1）更集中的纯javascript测试（jasmine），以及2）将javascript集成到capybara集成测试中。这只是时间和工作的问题，但它可能很重要。
Maintenance. Getting rid of HAML. I love HAML, it's so easy to write, it prints pretty HTML... It makes code clean, it makes maintenance easy. Going with javascript, there's nothing as concise.
保养。摆脱HAML。我喜欢HAML，它很容易编写，它打印漂亮的HTML ...它使代码干净，它使维护变得容易。使用javascript，没有什么是简洁的。
SEO. I know google handles the ajax /#!/path, but haven't grasped how this will affect other search engines and how older browsers handle it. Seems like it'd require a significant setup.
搜索引擎优化。我知道google会处理ajax /＃！/ path，但还没有意识到这将如何影响其他搜索引擎以及旧浏览器如何处理它。好像它需要一个重要的设置。

3 个解决方案

#1

Persistant private data storage.

持久的私人数据存储。

You need a server to store data with various levels of public/private access. You also need a server for secure closed source information. You need a server to do heavy lifting that you don't want to do on the client. Complex data querying is best left upto your database engine. Indexing and searching is not yet optimised for javascript.

您需要一台服务器来存储具有各种级别的公共/私人访问权限的数据。您还需要一个服务器来获取安全的闭源信息。您需要一台服务器来完成您不想在客户端上执行的繁重工作。复杂的数据查询最好留给数据库引擎。索引和搜索尚未针对javascript进行优化。

Also you have the issues of older browsers being far slower. If your not running FF4/Chrome or IE9 then there is a big difference between data manipulation and page construction on the client and the server.

此外，您有旧浏览器的问题要慢得多。如果您没有运行FF4 / Chrome或IE9，那么客户端和服务器上的数据操作和页面构建之间存在很大差异。

I myself am going to be trying to build a web application made entirely using a MVC framework and template's but still using the server to connect to secure and optimised database.

我本人将尝试构建一个完全使用MVC框架和模板的Web应用程序，但仍然使用服务器连接到安全和优化的数据库。

But in general the application can indeed be build entirely in javascript and using templates. The various constructs and javascript engines have advanced enough to do this. There are enough popular frameworks out there to do this. The Pure javascript web applications are no longer experiments and prototypes.

但总的来说，应用程序确实可以完全用javascript和使用模板构建。各种构造和javascript引擎已经足够先进，可以做到这一点。有足够的流行框架来做到这一点。 Pure javascript Web应用程序不再是实验和原型。

Oh, and if were recommending frameworks for this, then take a look at backbone.js.

哦，如果为此推荐框架，那么看看backbone.js。

Security

安全

Let's not forget that we do not trust the client. We need serverside validation. JavaScript is interpreted, dynamic and can be manipulated at run time. We never trust client input.

我们不要忘记，我们不相信客户。我们需要服务器端验证。 JavaScript是经过解释的，动态的，可以在运行时进行操作。我们从不信任客户输入。

3 个解决方案

#1

更多相关文章

随机推荐