摘要：客户端框架的个痛点我们早知道会面临很多的困难，但是不知道会有这么难。这是对的，但是总体上来说，客户端框架降低了迟缓的开销。但是，这些问题加在一起就是另一回事了，可以说，客户端框架成为了我们开发工作的一大负担。
更新： 本文原本的标题是“为何我们弃用AngularJS：……”，现在把它去掉了。因为这些痛点主要是针对单页JS应用框架的。有些人认为本文是专门批判AngularJS的，这可不是我的本意。-- Quinn
几个月前我们的Sourcegraph网站向公众开放，它是一个富AngularJS应用。服务器传输原始的HTML页面和JSON端点，剩下的就交给Angular来处理。这是一个创建Sourcegraph的简易方式，当时我们不知道Sourcegraph会变成什么样。
但是单页JavaScript框架并不适用于每一个站点。Sourcegraph是一个内容为主的站点，我们渐渐发现富js应用弊大于利。富js应用的好处众所周知，下面是我们体会到的一些意料之外的困难。希望对面临类似选择的开发人员能有一些帮助。
客户端JS框架的5个痛点我们早知道会面临很多的困难，但是不知道会有这么难。
1. 糟糕的搜索排名和Twitter/Facebook预览搜索引擎爬虫和社交网站的预览抓取器不能加载纯Javascript站点，提供替代版本又慢又复杂。
有两种方式可以允许爬虫阅读你的站点。你可以在服务器端运行一个浏览器实例来执行你的应用里的Javascript，然后从DOM中卸下HTML（使用PlantomJS或者WebLoop）。或者你可以创建一个服务端生成的专供爬虫的替代性HTML版本。
第一个方法需要你为每一个页面加载建立一个headless浏览器（或者tab），比起直接产出HTML，这样会花费很多的时间和系统资源。取决于你使用的框架，需要不少精力来决定什么时候页面已经准备好了。 你可以缓存页面，但是如果页面经常改变，那么缓存只能起到非常有限的优化作用，而且会增大复杂度。这个方法会将你的页面加载速度拖慢好几秒，对搜索引擎排名也不利。
第二个方法（创建一个替代性的服务器端站点）对简单站点而言足够了，但是如果页面很多，这将是一个噩梦。况且如果Google认为你的服务器版本站点跟你的主站版本有很大的不同，那他就会狠狠的惩罚你。糟糕的是，直到你的访问量直线下降的时候你才会意识到你已经过界了。
2. 不可靠的统计和监控很多分析工具需要使用易于出错、手工集成的HTML5 history API（pushState）来导航。这是因为它们无法自动检测到你的应用使用pushState导航到了新的页面。即使可以做到，它们仍然需要等待你应用的信号来收集新页面的其他信息（例如页面标题和其他页面特定的指标）。
你如何解决这个问题？同时取决于你的客户端路由库和你集成的分析工具。用Google分析和Backbone.js？尝试一下backbone.analytics。用Heap（顺便说一下，Heap很棒）和UI-Router？设置你自己的$stateChangeSuccess钩子然后调用heap.track
还没完！你想追踪起始页面加载？也许你重复跟踪了？你会跟踪失败的页面加载吗？如果你使用replaceState代替pushState呢？即使要获知你是否错误地配置了分析钩子——或者是否依赖升级搞乱了系统——也是相当困难的，除非交叉检查分析。当你发现问题后，很难去恢复你错过的分析数据（或者消除重复数据）。
3. 缓慢、复杂的构建工具前端JavaScript构建工具，例如Grunt，需要复杂的配置而且会很慢。还好我们有像ng-boilerplate这样出色的项目来帮忙，但是它们很慢。并且如果你想添加一个自定义的步骤的话你还是无法避免复杂性。（我为什么说Grunt复杂，看看这个配置文件就知道了。）
一旦你配置好了你的应用，包括Gruntfiles等等。你仍然要忍受漫长的JavaScript构建时间。你可以把dev和production构建通道分开来提高开发速度，但是你终将深受其苦。用AngularJS尤其如此，他需要在压缩代码前使用ngmin（如果你用了特定功能）。事实上，我们有几次就是因为这些压缩的JavaScript和开发时的代码表现不同而把SourceGraph搞砸了。
事情正在改善，Gulp是一个巨大的提升。
4. 慢，不可靠的测试测试JavaScript-only的站点需要使用基于浏览器的测试框架，比如Selenium，PhantomJS，或者WebLoop。安装这些（除了PhantomJS）通常意味着安装WebKit和Java依赖，配置Xvfb（虽然新版的PhantomJS移除了这些依赖），也许运行一个本地的VNC客户端和服务器来测试。最后，你还需要在持续集成服务器上配置这些东西。
相反，测试服务器端生成的页面通常只需要类库来获取URL和解析HTML，安装和配置要简单许多。
一旦你开始编写浏览器测试，你必须处理异步加载。你不能在页面还没有加载的时候就测试页面上的元素，但是如果在一个特定时间段里没有加载，你的测试就会失败。浏览器测试类库提供了一些帮助函数来处理这种情况，但是对于复杂页面它们只能帮上一点小忙。
你想组合很重的浏览器测试工具（Selenium，加上Firefox或者Webkit）和很大的测试复杂度（由于浏览器测试的异步本性）？你的测试需要很多配置，很长的时间来运行，而且很不可靠。
5. 被掩盖的未根除的缓慢在富JavaScript应用中，页面转换几乎是瞬间发生，然后所有的特定元素异步加载。服务器端应用恰恰相反：页面在服务器端加载完成前不会发送到客户端。
听起来似乎是客户端应用胜利了，但是也许这不过是一个伪装的诅咒。
考虑客户端JS应用，当用户点击一个链接，页面会立刻加载并呈现。如果用户导航到一个侧边栏需要5秒钟才可以加载的页面，第一眼感觉很快，但是如果用户需要的信息在侧边栏里，对用户来说就太慢了。即使你需要的特定内容能立即加载，你仍需要忍受转动的加载指示器和页面填充时的抖动。
现在考虑一下这样的情况：如果开发人员想在那个页面添加新功能。很难确定这个功能是否必须快速加载——因为一切都是异步的，所以谁会在意页面底部过了几秒才加载呢？如此反复几次，整个站点就会让人觉察到迟缓和抖动。
在服务器端应用中，如果一个API调用很慢，整个页面就会阻塞直到页面完成。服务器端的缓慢不可能被忽视，因为这很容易被测量，并且会公平地影响每一个人。但是在客户端应用中这很容易被忽略。
你可以争论说，一个好的开发团队应该避免这些错误，并且客户端 JS 框架不是罪魁祸首。这是对的，但是总体上来说，客户端JS框架降低了迟缓的开销。这一点触动了开发团队的激励机制。
接下来怎么办？上面说的问题，本身都不算大问题。我们可以做很多工作来减轻上述情况（事实上我们确实做了很多）。但是，这些问题加在一起就是另一回事了，可以说，客户端JS框架成为了我们开发工作的一大负担。
同时要牢记，每一个站点都是不同的。例如，Sourcegraph是一个内容站点，这意味着页面在加载后不会有太多的变化（和富应用相比）。我们依然喜爱这些技术，但是它们不是构建我们的主站的合适工具。
原文 5 surprisingly painful things about client-side JS
翻译 SegmentFault
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/87491.html
摘要：前端单元测试，推荐淘宝开源的工具，简单易用，支持众多测试框架，也支持调试。这些也是设计前端框架时需要权衡的重要方面。最后，其实大型网站不一定要设计自己的前端框架，完全可以选用现有的框架。 有人在知乎上提问如何设计大型网站的前端 JavaScript 框架，有不少回答，其中得赞较多的两个回答如下： 相对大型的项目在前端 JS 方面有几个需要达成的目标： 1. 代码逻辑分层 ...
摘要：纵观年的发展，年企业云及现代数据中心将面临机遇与挑战共存的格局。总体来看，五大技术发展趋势，值得重点关注。总之，到年，必将成为云和本地应用的最佳系统。云成本可控性，成为重要关注点提到云计算，许多企业并没有意识到转型的代价有多大。 纵观2018年的发展，2019年企业云及现代数据中心将面临机遇与挑战共存的格局。总体来看，五大技术发展趋势，值得重点关注。showImg(https://se...
摘要：我们队年的预测基本正确，当中有些预测趋势也可以用于新的一年，下面继续看到对年数据科学机器学习和人工智能领域的预测。 showImg(https://segmentfault.com/img/bVbnqYV?w=1024&h=512); 作者：William VorhiesCDA数据分析研究院原创作品, 转载需授权 2018年刚刚结束，在2019年到来之际，让我们一起展望在今年数据科学...
摘要：远程医疗这一概念被提出后，已经被广泛应用。但是，如何提高视频传输性能，如何确保家庭基层医疗机构和户外应急的远程医疗快速接入，是当前的远程医疗业务系统面临的主要挑战。 编者按：近日，Gartner最新发布了一份《Five Key Essentials for the New Generation of Intelligent Video Cloud》白皮书报告，报告中针对各行业在视频应用...
阅读 3065·2023-04-25 18:54
阅读 2590·2021-11-02 14:40
阅读 3174·2021-09-23 11:58
阅读 2424·2019-08-30 13:50
阅读 1230·2019-08-29 12:46
阅读 3116·2019-08-28 17:51
阅读 678·2019-08-26 11:47
阅读 897·2019-08-23 16:17
