服务器与客户端渲染(AngularJS与服务器端MVC)

关于服务器与客户端应用程序渲染的讨论很多。 虽然没有“一刀切”的解决方案,但我将尝试从不同的角度主张客户端(特别是AngularJS)。 首先是建筑。

建筑

做得好的架构已经明确定义了关注点分离(SoS) 。 在大多数情况下,最少的高级配置为:

  • 数据存储
  • 服务
  • API
  • 介绍

这些层中的每一层都应仅具有上述知识的最少知识。 服务需要知道在哪里存储数据,API需要知道要调用什么服务,并且表示层只能通过API与其余的服务进行通信。 这里要注意的重要一点是,应该不存在有关下面各层的知识。 例如,API不应该知道谁或什么消费它。 它不应该具有表示层的知识。

对于这些层中的每一层都应该说更多,“现实世界”中的情况要比这复杂得多。 但是,对于本文的其余部分,重要的要点是,表示层通过API与服务器进行通信,而API对“外界”一无所知。 随着越来越多的机器和设备类型(笔记本电脑,移动设备,平板电脑,台式机),这种分离变得越来越重要。 后端应仅提供业务逻辑和数据。

技能专长

考虑开发人员的技能是该体系结构的重要方面。 例如,如果开发人员习惯于使用Java工作,则除非设计有明显的优势,否则不应该设计基于C#的系统。 这并不意味着不应使用新语言(谁说Scala和Clojure?)来提高技能。 只是必须考虑团队的生产力,并且编程语言的知识是重要的要素。

无论现有知识如何,应用程序的类型都需要一些技能。 例如,如果应用程序将网站作为表示层,则必须具有HTML,CSS和JavaScript知识。 有一些框架可以用来避免对该知识的需求(即Vaadin )。 但是,这些框架的使用只会推迟不可避免的事情:接受HTML,CSS和JS是一种浏览器可以理解的语言。 问题仅在于您是直接采用它们还是使用其他方式(即Java或C#)为您编写它们。 后一种情况可能会给人以更快的速度做事的印象,但是在许多情况下,当需要做那些“翻译”所不支持的事情时,需要付出一些代价。

服务器端更容易应对。 对于每种技能,都有更多选择,并且有好的(如果不是很好的话)解决方案。 我们可能会争论Scala是否比Java更好,但是两者都能提供足够好的结果,并且学习新语言的决定要困难得多(尽管我认为开发人员应该通过尝试新的语言和框架来不断扩展自己的知识)。 可以使用Java,Scala,C#,Clojure,JavaScript / NodeJS等对后端进行编码。我们在浏览器中没有那么奢侈的地方。 Adobe Flash已死, Silverlight从未升空。 Vaadin之类的工具最初旨在缓解JavaScript带来的痛苦,这是由于我们看到HTML和JavaScript的不断改进而逐渐失去了作用。 “浏览器”世界瞬息万变,情况与不久前大不相同。 欢迎来到HTML5的世界。

可以说对于移动设备的开发也是如此。 没有一种语言能适合所有人。 我们无法使用Java开发iPhone应用程序。 尽管在某些情况下HTML是解决方案,但在另一些情况下则需要进行“本机”开发。

唯一的常数是,无论是Web,移动设备,台式机还是Google Glass ,它们都应使用API​​与系统的其余部分进行通信。

我要提出的观点是,在完成工作所需的语言采用与每个新项目中切换到新语言之间必须保持平衡。 有些语言是必须的,有些是很好的(但不是强制性的)。 使用Web时,HTML,CSS和JavaScript是必须的。

服务器与客户端渲染

由于我们已经确定,在网站(谁说应用程序?)的情况下,带有CSS和JavaScriptHTML是必须的,而试图为我们创建HTML的工具是“邪恶的”,因此问题仍然是谁呈现HTML。 对于浏览器的大多数历史记录,我们习惯于在服务器中呈现HTML并将其发送给浏览器。 有很强的理由。 前端技术和框架还很年轻且不成熟,浏览器存在严重的兼容性问题,并且通常来说,使用JavaScript会很痛苦。 那张照片不再有效。 Google向我们展示了在许多情况下浏览器与台式机一样好。 JQuery通过让我们以相对简单的方式来操作DOM,彻底改变了我们使用JavaScript的方式。 发布了许多其他的JS框架和库。 但是,直到最近,还没有什么可以替代旧的模型视图控制器(MVC)模式。

对于所有小型站点,服务器呈现都是必须的。 还是? AngularJS改变了我们感知MVC的方式(实际上,它是模型视图的,但是我们不要被束之高阁)。 可以在客户端中完成,而不会牺牲生产力。 我认为,在许多情况下,随着AngularJS生产率的提高。 还有其他客户端MVC,例如BackboneJS和EmberJS 。 但是,就我的经验来看,AngularJS没有什么比这更好的了。

AngularJS并非没有问题。 让我们看一下客户端与服务器端页面渲染的优缺点。 在客户端,我假设使用AngularJS。 为了进行比较,服务器端可以是任何东西(Java,C#等)。

AngularJS缺点

页面呈现速度较慢,因为浏览器需要执行DOM操作的额外工作,监视绑定数据的变化,向服务器执行其他REST请求等。第一次打开应用程序时,它需要下载所有JavaScript文件。 根据应用程序的复杂性,这可能是问题,也可能不是问题。 现代计算机完全有能力接管额外的工作。 移动设备比旧计算机功能更强大。 在大多数情况下,客户不会注意到浏览器需要做的工作量增加。

与旧版浏览器的兼容性很难实现。 需要在服务器上呈现其他页面。 该参数的权重取决于您是否关心(非常)旧的浏览器。 罪魁祸首是Internet Explorer。 如果应用了其他指令,则版本8可以工作(以某种方式)。 不支持早期版本。 将来的AngularJS版本将放弃对Internet Explorer 8的支持。您可以决定是否对IE8及更早版本的支持很重要。 如果是这样,则需要提供替代页面,这将导致额外的开发时间。 根据应用程序的复杂性,非AngularJS开发中可能会存在相同的问题。

搜索引擎优化(SEO)可能是最大的问题。 目前,缓解此问题的最常用技术是在服务器上预渲染页面。 这是一个相对简单的过程,需要少量代码即可在任何屏幕上使用。 有关更多信息,请参见如何创建HTML快照? 和Prerender.io 。 2014年5月,出现了一篇关于“了解网页”的更好的文章,这给我们带来了一个好消息,那就是Google能够执行JavaScript,从而解决(或正在解决)严重依赖JS的网站的SEO问题。

AngularJS专业人士

如果性能良好(更好地使用JSON,客户端缓存等), 服务器性能将提高。 客户端和服务器之间的通信量减少了。 服务器本身不需要在将页面发送给客户端之前创建页面。 它只需要提供静态文件并使用JSON响应API调用。 减少了流量和服务器工作量。

AngularJS的设计考虑了测试需求。 连同依赖注入,模拟对象,服务和功能,编写测试非常容易(比我所使用的大多数其他情况更容易)。 单元测试和端到端测试都可以编写并快速运行。

正如架构部分所建议的,前端(几乎)完全与后端分离 。 AngularJS需要了解REST API。 服务器仍然需要传递静态文件(HTML,CSS和JavaScript),并在爬网程序访问时预渲染屏幕。 但是,这两项工作不需要系统其余部分的任何内部知识,并且可以在同一或完全不同的服务器上完成。 简单的NodeJS HTTP服务器可以达到目的。 这种解耦使我们可以独立地开发后端和前端。 通过客户端渲染,浏览器就像是Android,iPhone或桌面应用程序一样,是API使用者。

不需要服务器端编程语言的知识。 无论采用哪种方法(服务器或客户端渲染),都需要HTML / CSS / JavaScript。 不将服务器端混入此图中,将使前端开发人员的生活变得更加轻松。

Google对Angular的支持是一个加号。 像Google这样的支持者更有可能继续全力以赴地提供支持和未来的改进。

一旦习惯了AngularJS的工作方式, 开发速度就会提高。 可以大大减少代码量。 由于无需重新编译后端代码,因此我们几乎可以立即看到前端的更改。

摘要

客户端与服务器端渲染的这种视图应谨慎对待。 没有“一刀切”的解决方案。 根据使用的需求和解决方案,上面列出的许多优点和缺点都是无效的,或者也可以应用于服务器端渲染。

在许多情况下,选择服务器端渲染是为了避免陷入HTML,CSS和JavaScript。 它使习惯于使用服务器端编程语言(Java,C#等)的开发人员更加轻松地认为无需学习“浏览器”语言。 而且,在许多情况下,它会与后端代码产生(通常是无意的)耦合。 两种情况都应避免。 我并不是说服务器端渲染不可避免地会导致这些情况,而是使它们更有可能发生。

这是一个勇敢的新世界。 客户端编程与以前完全不同。 至少有很多原因可以尝试一下。 无论做出何种决定,都应使用足够的信息,只有通过实际经验才能获得这些信息。 尝试一下,不要放弃第一个障碍(会有很多障碍)。 如果您选择不采用此路线,请做出明智的决定。

像AngularJS这样的客户端MVC远非完美。 他们还比较年轻,还有很长的路要走。 许多改进即将到来,我坚信Web的未来将朝着这个方向发展。

翻译自: https://www.javacodegeeks.com/2014/07/server-vs-client-side-rendering-angularjs-vs-server-side-mvc.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362709.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL 数据类型简介 创建数据表及其字段约束

数据类型介绍 MySQL 数据类型分类 整型浮点型字符类型(char与varchar)日期类型枚举与集合具体数据类型见这篇博客 MySQL表操作中的约束 primary key 主键约束 非空唯一unique key 唯一约束not null 非空约束foreign key 外键约束创建表的的语法 CREATE TABLE[IF NOT EXISTS] tb…

elementUI的container布局设置全屏宽度

进用element UI的 container 布局,发现不能全屏铺满 添加了一行代码: .el-container{height:100%;padding:0;margin:0;width:100%;}发现高度占满全屏,但是宽度还没有 继续给 html,body加了 width:100%;还是没有任何…

【转】首次敏捷项目开发实践

首次采用敏捷方式进行开发,我想把我们的做法与大家分享下,同时希望大家指出我们的不足和需要改进的地方,让我们的项目进行的更顺利,目前项目已过三分之一,客户比较满意,还算顺利。项目简介:一个…

CSS border-radius边框圆角

在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置。 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 1. 介绍 1.1 圆角属性 CSS3提供了5种圆角属性 border-radius :同时设置4个边框的…

element实现动态路由+面包屑

要掌握:localStorage,组件封装 ​​​​ emm,第一次上传视频转gif的图片,效果不咋好。。。 视频转gif 的软件连接 http://www.zxt2007.com/downloads.html 找到一个可以截取部分视频制作gif图的软件https://soft.onlinedo.cn/gif…

Matlab——矩阵运算 矩阵基本变换操作

矩阵运算 加 - 减 .* 乘 ./ 左除 .\ 右除 .^ 次方 . 转置 除了加减符号,其余的运算符必须加“.” >> a 1:5a 1 2 3 4 5>> a-2 %减法ans -1 0 1 2 3 >> 2.*a-1 %乘法 减法ans 1 3 5 7 9 >&g…

Oracle最新的Java 8更新破坏了您的工具-它是如何发生的?

如果您最近一直在关注Java世界的消息,那么您可能听说过Oracle发布的最新Java 8构建,Java 8u11(和Java 7u65)引入了错误并破坏了一些流行的第三方工具,例如ZeroTurnaround的JRebel,Javassist,Goo…

为什么选择Dojo - 记Dojo中文博客正式开张

公告栏里写到:Dojo的高门槛一旦跨过,必将别无所求。含义有二:第一,Dojo难学;第二,Dojo很强大。 这也揭示了本博客的目标:帮助大家用好Dojo这个优秀的Ajax框架。 在回答为什么选择Dojo之前&#…

ExtJS 4.2 第一个程序

本篇介绍如何创建一个ExtJS应用程序。并通过创建目录、导入文件、编写代码及分析代码等步骤来解释第一个ExtJS程序。 目录 1. 创建程序 1.1 创建目录建议 1.2 实际目录 1.3 index.html 1.4 运行图 2. 代码分析 2.1 Ext.onReady() 2.2 Ext.create() 1. 创建程序 1.1 创建目录…

ZooKeeper,策展人以及微服务负载平衡的工作方式

Zookeeper如何确保每位工人都能愉快地从工作委托经理那里得到一些工作。 Apache ZooKeeper是注册,管理和发现在不同计算机上运行的服务的工具。 当我们必须处理具有许多节点的分布式系统时,它是技术堆栈中必不可少的成员,这些节点需要知道其…

elementUI清空弹框中的表单数据

点击此处直达应用场景示例 官网&#xff1a;https://element.eleme.cn/#/zh-CN/component/form 补充&#xff1a;改变表头颜色&#xff1a; <el-table :data"tableData" border style"width: 100%" :header-cell-style"{background:#d3dce6,col…

(一)PHP基础知识考察点

1&#xff0c;PHP引用变量的考察点&#xff1a; 概念&#xff1a;引用就是用不同的名字访问同一个变量内容。 定义方式&#xff1a; 使用&符号。 PHP引用变量的工作原理 这里有个COW copy on write 用zval&#xff08;&#xff09;去查看空间占用情况以及引用情况。 unse…

.Net4.0 Parallel编程(三)Data Parallelism下

在上篇文章中介绍了如何Break、Stop循环&#xff0c;以及如何定义线程局部变量。在本文中介绍如何在外部去取消循环、以及异常的处理。 Cancel 在并行的循环中支持通过传递ParallelOptions参数中的CancellationToken进行取消循环的控制&#xff0c;我们可以CancellationTokenSo…

节点的运用和方法

JQUERY的父&#xff0c;子&#xff0c;兄弟节点查找方法 jQuery.parent(expr) 找父亲节点&#xff0c;可以传入expr进行过滤&#xff0c;比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(ex…

Java:使用终止信号确定数据导入的状态

几周前&#xff0c;我正在尝试将约6000万位数据最初导入Neo4j&#xff0c;但我们一直遇到一个问题&#xff0c;即导入过程似乎停滞了&#xff0c;什么也没导入。 很难分辨该过程中发生了什么—采取线程转储只是告诉我们它正在尝试处理CSV行中的一行&#xff0c;并且以某种方式…

根据可视窗口判断面板向上还是向下展开

本demo以element-ui框架为视图模板~ HTML代码 JS代码 CSS代码 转载于:https://www.cnblogs.com/dreamsqin/p/10885502.html

关于几本模拟IC设计书

1.P.R.Gray的书  这本书被业界誉为模拟IC的Bible&#xff0c;盛名之下&#xff0c;必无虚士。现在已经出到第四版&#xff0c;作者无一例外是业界大牛&#xff0c;该书论述严谨&#xff0c;思路清晰&#xff0c;对电路分析透彻&#xff0c;定义严格明确&#xff0c;无愧Bible…

编写JUnit测试的另一种方法(Jasmine方法)

最近&#xff0c;我为一个小型个人项目编写了很多Jasmine测试。 我花了一些时间才终于感到正确地完成了测试。 此后&#xff0c;当我切换回JUnit测试时&#xff0c;我总是很难过。 出于某种原因&#xff0c;JUnit测试不再那么好&#xff0c;我想知道是否有可能以类似于Jasmine的…

H5 input输入限制最大位数,和调用小键盘需求发生冲突的解决办法

首先&#xff0c;限制输入最大位数时&#xff0c;input有自带的属性maxlength。 <input type"text" name"email" maxlength"55" /> 使用方法&#xff1a;maxlength"位数" 但是&#xff0c;对于这个属性他是有自己的限制条件的 …