客户端 JavaScript 的 5 个弊端-阿里云开发者社区

开发者社区> 美人迟暮> 正文

客户端 JavaScript 的 5 个弊端

简介:
+关注继续查看

译注:原来的标题是:“我们为啥不用AngularJS:…”,后来作者觉得不妥就改掉了,因为AngularJS是通常适用于单页面程序框架(SPA) 很多人理解为对AngularJS的抨击,但这并不是他的本意。

几个月前,当我们打开Sourcegraph网站的时候,它是一个富AngularJS应用,服务器只要把原始HTML和JSON endpoints返回,剩下的就交给Angular来搞定了。我们就这样懵懵懂懂地做出了最初版本的Sourcegraph。

但是单页(single-page) JavaScript框架并不适用于每一个站点。Sourcegraph就是一个内容为主的站点,我们渐渐发现这个富js应用的开发还是弊大于利;下面是我们在探知这条路上遇到的沟沟坎坎,希望对有雷同遭遇的开发人员一些帮助。

下周,我们来讨论更多地关于我们是如何从AngularJS迁移server-side GO templates

客户端JS框架的5个弊端

我们早就知道这会有很多的困难,但是不知道到底有多难

  1. 搜索排名和Twitter/Facebook预览
    screenshot

搜索引擎爬虫和社交网站的预览抓取器不能加载纯Javascript站点,而如果提供替换版本又慢又复杂

有两种方法可以允许爬虫阅读你得站点。你可以在服务器端运行一个浏览器实例用以执行你的应用里的Javascript,然后返回HTML结果(PhantomJS或者WebLoop)。 或者你可以为你的站点专门建立一个HTML版本为爬虫服务

第一个方法需要你为每一次页面加载建立一个headless浏览器(或者tab),比起直接产出HTML,这样会花费很多的时间和系统资源。基于你 用的框架,会花费很多的工作来决定什么时候已经准备好的页面将被渲染。 你可以缓存页面,但是如果页面经常改变,不但优化甚微而且会增大复杂度。

这样做还会降低你的页面加载速度好几秒,对搜索引擎排名也不利。(PlantomJS需要Xvfb和WebKit)

第二个方法(做一个服务器端站点)对简单地站点有效,但是如果页面很多,那用这个方法就形同噩梦。
如果Google认为你的服务器版本站点跟你的主站版本有很大的不同,那他就会狠狠的惩罚你,到时候你连怎么死的都不知道

  1. 不可靠的统计和监控

很多分析工具需要易于出错,人工集成来使用HTML5 history API(pushState)用于导航。因为他们很难自动检测到你的应用使用pushState导航到了新的页面。即使可以做到,他们仍然需要等待你应用里的信号来收集新页面的信息

如何解决这个问题呢?取决于你的客户端用什么导航和你想集成什么分析工具。用Google分析+Backbone.js?尝试一下backbone.analytics。用Heap(顺便说一下,太酷了)和UI-Router?设置你自己的$stateChangeSuccess并调用heap.track

还没完事呢!你想追踪起始页面加载?也许你在双向跟踪他?你会跟踪失败的页面记载吗?如果你使用replaceState代替pushState呢?如果你错误的配置了分析挂钩或者属于检查导致依赖升级搞坏了事情。当你发现的售后,很难去恢复你错过的分析数据(或者消除重复数据)

  1. 又慢又复杂的构建工具
    screenshot

前-后端JavaScript构建工具,比如Grunt,需要复杂的配置而且很慢。还好我们有像ng-boilerplate这样的project来帮我们做配置,但是如果你想添加一个自定义的步骤还是逃不出又慢有复杂的怪圈(我为什么说Grunt复杂,看看这个配置文件就知道了)

一旦你配置好了你的应用,你仍然要忍受漫长的JavaScript构建时间。你可以把dev和production构建通道分开来提高开发速度,但是始终免不了走这么一遭,用AngularJS尤其如此,他需要在丑陋的代码前使用ngmin(如果你用了这个功能)。其实,Sourcegraph因为这些丑陋的JavaScript表现代码几度被毁

还好,Gulp已经有了极大的提高

  1. 慢,不可靠的测试
    screenshot

测试JavaScript-only的站点需要使用基于浏览器的测试框架,比如Selenium,PhantomJS,或者WebLoop。安装这些(除了PhantomJS)通常意味着安装WebKit和Java依赖,配置Xvfb(机关新的PhantomJS移除了这些先决条件),或者运行一个本地的VNC客户端和服务器来测试。最后,你还需要在持续集成的服务器上设定所有东东

相反,测试服务器端产生的页面通常只需要类库来或者URLs并解析HTML,安装和配置起来简单许多

一旦你开始写浏览器测试,你必须处理异步加载。你不能在页面还没有加载的时候就测试页面上的元素,但是如果在一个特定时间端里没有加载,你的测试就会失败。浏览器测试类库提供了很好地功能来处理这种情况,他们只能在负载的页面里使用这些功能

如果你想联合重量级浏览器来进行(Selenium,加上Firefox或者Webkit)很复杂的测试(因为浏览器的异步特质)?你的测试需要很多配置,很长的时间来执行,而且很不可靠

  1. 慢,可以缓解,但没有解决

在富JavaScript应用中,页面转化几乎是瞬间发生,然后所有的特定元素异步加载。在server-side应用中,完全相反:页面在服务器端加载完成前不会发送到客户端

听起来似乎是client-side应用胜利了,但是也许会是个坑也不一定

当用户点击一个链接,client-side应用会立刻加载页面并呈现。如果用户用sidebar导航到一个需要5秒钟才可以加载的页面。第一次感 觉很快,但是如果一个用户需要的信息在sidebar里,对用户来说就感觉很难受。即使你需要的特定内容立即呈现,你仍需要忍受加载指示器和页面填充后的 抖动

我们来考虑如果开发人员想在那个页面添加新功能。是很难让她的功能必须快速加载的-因为都是异步的,所以谁会在意页面底部过了几秒才加载呢?如此反复几次,整个站点让人感觉滞后很抖动

在server-side 应用中,如果一个API调用很慢,整个页面就会停滞直到彻底完成。这个不容忽视的server-side慢节奏很容易被测量并会公平地影响每一个人。但是在client-side应用中很容易被忽略

你可以说,一个好的开发团队应该避免这些错误,并且client-side JS 框架不是罪魁祸首。是的,client-side JS框架提高了速度。这一点改变鼓励了任何开发团队

下一步?

上面说得都不是大问题。我们已经做了很多来减轻上述情况。

总而言之,上述种种以为这client-side JS 框架加大了我们开发的负担。

而且要记住,每一个站点都是不同的。Sourcegraph是一个内容站点,他得页面在加载后不会有太多的变化(相较于富JS应用),我们依然爱着浙西技术,但是他们不一定是构建主站点的正确工具。

原文链接: Sourcegraph 翻译: 伯乐在线 - 蔡蔡

文章转载自 开源中国社区 [http://www.oschina.net]

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10092 0
学习JavaFX Script,第三部分:使用JAX-WS进行客户端-服务器通信
        原文地址: http://java.sun.com/developer/technicalArticles/scripting/javafxpart3/                文章索引(Articles Index)        本系列文章的第一部分向Java开发者介绍了JavaFX Script语言的语法和语义。
1025 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
2962 0
javascript + sql编写SQL客户端工具tabris
祝大家2018新年快乐, 前不久发现了一个创意的脚本JtSQL(java编写) 开源地址为:https://github.com/noear/JtSQL JtSQL 特点:*.结合了JS、SQL、模板理念;*.
842 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10886 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13893 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
11893 0
javascript获取客户端IP地址。
  在做B/S结构的系统时,我们常常需要获取客户端的一些信息,如IP和MAC,以结合身份验证。在ASP.NET中,要获取服务器端的MAC很容易,但是要获取客户端的MAC的地址确要花费一翻心思,通常的做法是调用Win32API或直接调用nbtstat命令,这样做有很多问题,而另一种方法就是直接用客户端脚本,我们这里用Javascript,这样做的好处是不需要服务器端进行处理,有客户端自行获取,传递到服务器端,且速度和可靠性都比在服务器端获取好。
463 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7365 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
22409 0
+关注
美人迟暮
Nothing for nothing.
1020
文章
212
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载