OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

我们抛弃了AngularJS:单页面应用的5大缺陷


分享到
分类 心得体会   关键字 前端   发布 ourjs  1392817979000
注意 转载须保留原文链接,译文链接,作者译者等信息。  

我们认为下面5点让客户端的JS框架使用起来非常的痛苦。

1. 糟糕的搜索引擎优化和社交网站分享预览(Twitter/Facebook)

搜索引擎爬虫和社交预览截图无法识别使用JavaScript渲染的页面,并且现有的解决方案非常复杂,非常慢。

有两种方法让爬虫访问你的网站。你可以在你的服务器端运行一个浏览器实例,然后根据JavaScript执行后的DOM生成HTML页面。或者你另外建一套为搜索爬虫准备的HTML静态页面。

前一种方案需要你安装WebKit(也有可能是Xvfb),然后在页面加载完成以后生成页面(你也可以使用缓存,但这增加了更多的复杂性。)这样会增加你的页面加载时间,从而影响你的搜索引擎排名。

后一种方案(制作另外一个服务器端网站),可以满足简单的网站,但是如果你的页面非常多样,这将是一个恶梦。而且如果你的备用网站跟你的主站完全不一致,Google会狠狠地惩罚你的,你的流量会直线下降。

2. 困难的统计和监测

大多数统计都非常容易出错,尤其当你手动地使用HTML history API去维护浏览历史。因为他们无法自动检测你何时打开了一个新的页面。即使他们可以,你也需要给他们手动发送一个信号,告诉他们关于新页面的信息(像页面标题,页面的Meta和其他你想要统计的东西)

怎么解决呢?这得看你使用的是哪一种库。你用Googla Analytics配合Backbone.js?你需要使用backbone.analytics。你用Heap和(UI-Router)?你自己写一个方法来侦听$stateChangeSuccess事件,然后调用heap.track吧。

还没完。你在监测页面初始加载时间?也许你现在统计了两次。你在统计页面加载失败?当你用replaceState替换pushState时会发生什么?当你升级时忘了更新侦测的API?等你修好这些问题时,你丢失的监测数据也无法恢复了。

3. 缓慢和碎片化的build工具

前端JavaScript build工具,像Grunt,需要复杂的配置,而且有可能会很慢。其他很好的的项目像ng-boilerplate可以把你从配置中解放出事,但仍很慢。而且如果你添加自定义Build的时侯,你仍然无法避免复杂性。(参考Gruntfile)

即便你完美地配置了你的应用,通过Gruntfiles或者其他什么,你仍然需要忍受缓慢的Build JavaScript所需要的时间。即使你把开发和生产环境分开来加速开发。你仍然可能会面临一些问题,那些经过Build所产生的问题。实际上开发和上线时的代码终究不是完全一样的。

不过事情正在慢慢变好。Gulp就是一个巨大的进步。


4. 缓慢和碎片化的测试

测试一个通过JavaScript工作的单页面,需要使用基于浏览器的测试框架,例如Selenium, PhantomJS或者WebLoop。安装这些通常意味着需要安装WebKit和Java依赖,配置Xvfb(尽管最新的PhantomJS builds已经把它给拿掉了),或者需要跑一个本地或者服务器的VNC客户端来测试。最终你要把上面的那些玩意都配置好,然后可能还要集成到你的服务器上。

相反的是,测试服务器端生成的页面,只需要通过地址获取并分析一下HTML内容,这些都是非常容易配置的。

你一旦开始写基于浏览器的测试,你需要处理异步加载。你不能测试还没有加载的东西,但是如果你不设置一个过期时间,你的测试用例都会跑失败。浏览器测试框架提供了很多这方面的库,但是面对这么多,这么复杂的页面,他也只能帮到这儿了。

当你利用相当复杂的浏览器测试的时侯(像Firefox, WebKit),你测试的复杂得性也随之上升。你的测试用例需要更多的测试用例,更长的时间去跑一遍,导致碎片化更严重。

5. 慢只是被粉饰了,但没有得到解决

在富JavaScript应用中,页面转换通常是立即发生的,然后从服务器上加载不同的元素。在服务器端应用中,页面没有等客户端把全面数据下载完,就开始呈现数据。

听起来像是客户端的应用好一些,但实际这是个假像。

想像一下,当用户点了一个链接,客户端的JS应用马上出现了一个加载动画,但这些数据需要加载5秒钟。应用只是第一眼看上去快了,

先不讨论有多少程序员想要在这一个页面上添加功能。你很难要求人家必须通过异步的方式很快的将内容呈现出来,其实页面下面的东西晚一点加载出来人家也是不会关心的。

在服务器端的应用中,如果一个API调用很,整个页面的加载就变慢了。你无法忽视服务端的慢,因为他会影响到每一个人。但是客户端的慢很容易被忽视。

你也许会说一个很好的开始团队就可以解决这些问题,客户端JS不是罪魁祸首。确实是,而且客户端的JS框架降低了慢的成本,因而鼓励了很多的开发团队。



注* 相关链接
1) 一位国外程序员对AngularJS的复杂性的吐嘈: 你已经毁了JavaScript
2) Angular or Backbone的简单比较: 什么是最优秀的JavaScript框架?
3) Angular.JS出了什么问题?
4) 2015年的JavaScript:Angular之类的框架将被库取代

原文地址: 点此
社区评论 ( Beta版 )
  • #0 我的金色家园 1392860256000
    除了第一点,其他的都只是吐槽而已
  • #1 留井 1392860379000
    @我的金色家园

    不过貌似这一条很致命…
  • #2 风里麦笛 1392866107000
    @留井

    如果做网站,这些确实是问题,如果做企业内部应用的话,这就不是大问题。
  • #3 jiorry 1392867096000
    @我的金色家园

    采用 history push 方案(pajax)可以大大改善第一点问题。
  • #4 月光魔术师 1392870936000
    搞清楚你要开发的是web page还是web app再吐槽
  • #5 bitsMix102在搜狐 1393314178000
    与其说,抛弃了 angular, 不如说为什么不做 单页面应用
  • #6 bitsMix102在搜狐 1393314178000
    与其说,抛弃了 angular, 不如说为什么不做 单页面应用
  • #7 an 1393401848000
    我们抛弃了五十铃:用大卡车搞春运的5大缺陷
  • #8 ivolianer 1403594686000
    水平有限 没看懂
  • #9 己删除 1406036057074
  • #10 weathered_violet 1406102949663

    很晕,先理解Angular是用来干什么的,再吐槽吧

  • #11 red_grass 1407853944543

    @an #7

    哈哈哈

  • #12 程旦号 1411469154803

    @月光魔术师 #4 heeh

  • #13 死 狮子songsong 1417477652656

    原文标题都没有说是angularj,而且已经原文已经澄清了:Updated: The title of this post previously began “Why we left AngularJS: ...”, but that was removed because these points are generally applicable to single-page JS app frameworks. Some folks construed this post as a criticism of AngularJS specifically, but that wasn't my intent. — Quinn

  • #14 ourjs 1417482808347

    @死 狮子songsong #13

    此文译在标题更改之前。

  • #15 史阶贞 1417674929968

    @我的金色家园 #0

    电饭锅

  • #16 杨亏六 1419086088139

    @我的金色家园 #0

    除了第一条,其他真不是吐槽。后多条真的非常影响开发。第一条,其他不管对开发者还是应用,都是最不重要的。谷歌等商业公司例外。

  • #17 林甘勾 1421222201161

    我觉得第三条是现在开发前端web应用最让人蛋疼的

  • #18 己删除 1423792765119
  • #19 连叫任 1425902071340

    我们集团公司要做一个内部的知识库,完全不需要考虑SEO。

  • #20 巫羽打 1429691630056

    123

  • #21 曾巩马 1430126640781

    为了吐槽而吐槽

  • #22 邢主朽 1431660853487

    作者太情绪化。

  • #23 周双刘 1444296225976

    这个用来做面向管理类的比较好,面向用户的就算了吧

  • #24 文另千 1453079861089

    你可以不用我是用了,自己不会用就别怨人家缺点多有本事你弄个好的!

  • #25 萧尘伤 1454580533305

    这么的观点也可以发文章,作者洗洗睡吧。任何技术都有适用范围的。你用斧头杀猪,怪斧头不好喽?

  • #26 邬左屯 1456375783260

    asdfasdfasdfasdf**asdfasdfasdfasdf*fda强调文本*

  • #27 卫式过 1458184233965

    ddddddd

  • #28 欧习贞 1458523970830

    没有最好的,只有最合适的。你不区分应用场景吗?你找不到万能的技术的。

  • #29 邢尺关 1468299260622

    这根本不是抛弃了 angular 而是抛弃了所有 用 js 渲染页面的框架

  • #30 卞合汤 1471920658001

    垃圾 没看懂

  • #31 邢芝尼 1479463878695

    建议你看下ng2,或许能改变你的看法

  • #32 岳九阶 1482802675581

    angular + ionic 是html5 app的利器,但如果开发网站,个人实在想不出任何用angularjs的理由

  • #33 穆扫后 1490231774911

    有点局面化了 ,ng做curd型的管理系统很好使的

  • #34 路叹亡 1501730026720

    首先,从量级和api侧重来看,我觉得angularjs和angular2、angular4并不适合做网站。特别angular2、angular4的表现上,这么超级复杂的API,如果用他们去做网站,无异于大炮打鸟,他们更侧重大型web应用。因此,第一条的搜索优化等一点毛用也没有。后面四条,比较致命的是第三条,就因为无关的第三方插件(模块化、项目构建等),让学习曲线更陡了,不得不承认,node的出现,让web前端碎片化日趋严重,一款还没上手,另外一款标榜更牛的就又出现了。

OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. JavaScript专业八级测试,你能做对几道?
  2. Web服务性能测试:Node完胜Java
  3. 码农,骇客,程序员,开发者和计算机科学家的区别
  4. 为什么大神级程序员的C语言代码里到处都是goto?
  5. 你不知道的JavaScript用法,Hacker是这样写JS的
  6. QQ邮箱是如何泄密的:JSON劫持漏洞攻防原理及演练
  7. 下一阶段的NodeJS:TJ负责Node,NPM可能要收费
  8. Linux应该作为学校基础教育的一部分
  9. 告诉大家一个好消息,我被炒了!
  10. 女性是否适合创业
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 心得体会
  1. JavaScript的模块加载可能有害
  2. 为什么使用"use strict"可以节约你的时间
  3. LESS vs Sass?是时侯选择Sass了
  4. 别用CoffeeScript了,你总有一天得学JavaScript
  5. 为什么大神级程序员的C语言代码里到处都是goto?
  6. 微软,请不要使用 Try/Catch
  7. 人们为什么不使用Python3?
  8. 代码不等于计算机科学:为什么所有人都应该学习编程
  9. 一名靠谱的JavaScript程序员应备的素质
  10. 程序员最艰巨的十大任务

 关键字 - 前端
  1. CSS3实现的响应式字体:自适应视图窗口大小的新单位
  2. 用纯css改变下拉列表select框的默认样式
  3. AngularJS在大型单页面应用中的性能优化(一)
  4. 我们抛弃了AngularJS:单页面应用的5大缺陷
  5. 5个经典的前端面试问题
  6. 我被问得最多的十个JavaScript前端面试问题
  7. 超简易——Bootstrap可关闭tab标签页
  8. 什么是Viewport Meta(width详解)及在手机上的应用
  9. Animate.css让添加CSS动画像喝水一样容易
  10. 用纯CSS停止冒泡和阻止浏览器默认行为及事件响应,达到禁用(disable)的目的

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号