我是搬运工

通用应用程序介绍

我是搬运工 · 2017-06-16翻译 · 425阅读 原文链接 huangxiaolu审校

介绍通用web应用

关键字: javascript, webpack, react, redux, 通用, 同构, web和应用

长话短说:本文是通用(即,同构)Web应用系列的第一篇。这一系列介绍:什么是通用Web应用?为什么它们很重要?通用Web应用有什么好处?如何创建一个模板以开始一个通用Web应用项目?注意,由于JavaScript的生态系统极其庞大,并且由于我们几乎可以用任何框架和库来创建Web应用,在这个系列中我们选择用 ReactRedux and Webpack


Web正以前所未有的速度发展着,主要归功于JavaScript语言的演变和改进。同时,NodeJs项目使得在服务器端使用JavaScript成为现实,这充分证明了JS是一流语言,就像Java,PHP,Python一样好(或坏)。与它们不同的是,我们既可以在服务器端也可以在客户端使用JS,JS可以说是相当特别,这使得我们能够创建通用应用(之前叫同构应用)。

在客户端的JavaScript

这门语言最初存在的理由便是在浏览器端的使用。它的用途已经从当初用几行代码验证输入的文本演化到构建非常复杂的应用。如今每个人都用RIA(富网络应用):邮件,社交网络,照片分享等。 总结一下,RIA以如下方式运行:

  • 浏览器加载一个HTML文件。这个文件通常像下面这样组织:

    • HTML文档的<head>标签包含了所有需要的CSS代码,用于给应用的DOM元素添加样式。

    • <body>标签几乎不包含DOM元素(里面元素都由JS动态创建),

    • 最后,< script>标签里面包含应用所需的全部JS代码。

  • 此时客户端(浏览器)包含了运行所需的所有代码。在<script>中加载的Javascript代码负责增加或者删除DOM元素(像模态框,菜单,列表项等),异步加载数据,验证,等等。

    RIA应用的优缺点

RIA是Web应用发展历程中一次重大的进步。我记得GMail出现时,在用户体验上不知超越了竞争者多少倍。GMail一旦加载,任何的变化或者数据加载都会被异步处理,而不必重新刷新页面。这可能是RIA最重要的一点,即,相似于原生应用。 但事实上RIA有一个问题,让我们测试下RIA的流程:

  • 首先你需要访问一个URL直到app加载完

  • 然后,app会异步的请求数据,用户必须等待它加载完毕然后添加到页面上。

正如你所看到的,在这个流程里用户需要等待两倍的时间去获取初始化的内容

之前, 随着HTML5的横空出世,很多公司从开发原生移动应用转向开发混合应用(hybrid app)。 他们很快就发现用户不喜欢在获得到内容之前等待很长时间。 参见 How Loading Time Affects Your Bottom Line._

服务器端的JavaScript

在服务器端运行Javscript有一些可选方案,但是NodeJS项目最终打败了所有选手。

基于Google V8 JavaScript Engine,NodeJS允许在服务器端运行JavaScript。由于JavaScript的特性,创建一个异步的事件驱动的应用非常简单,这些比开发传统的并发的应用要容易的多。

在服务器端开发JavaScript应用就跟用其他的语言和技术一样

  • 客户端向服务端发起一个请求

  • 服务端处理接收的数据,计算和查询任何需要的值,构建一个HTML页面作为响应返回给客户端。

  • 客户端解析返回的HTML页面,加载所需要的图像,CSS,或者JavaScript代码

这就像是以前的Email客户端的工作方式,每个动作(点击链接或者按钮)都对应了一个服务端请求URL,用户必须等待服务器处理并且返回新的HTML 代码给浏览器。

服务器端应用的优缺点

随着Web的发展,每个人都知道服务器端Web应用不是个好主意,因为每个客户端行为都要等待服务端的响应。

这是对的,但是服务端应用从另一方面来讲很重要: 可以返回带有内容的页面,也就是说当你请求URL时,你得到的网页包含了你所期望的内容。

在构建通用应用时,这一点体现了服务端处理的重要性。当用户访问一些URL时,需要提高app的加载速度,提高用户体验,返回尽可能多的内容。

通用应用

一个通用应用是客户端与服务端的混合。它的理念是,当我们初次访问一个网站时,服务端返回所有代码以及用户期待的内容,例如,在初次访问一个电子商务站点的时候,服务端的返回能包含初始化的20个列表项,之后让用户继续异步加载更多的内容。这种行为可以通过几乎所有语言和技术做到。例如,我们有一个Java+JSP的Tomcat的服务器,返回初始化的HTML代码,包括一些JavaScript打包文件,这些文件包含了在客户端运行应用所需的代码。这种方式也能工作,但是这不是一个通用应用。

要成为一个通用应用,应用必须在客户端和服务端用同样的代码渲染应用组件。 这意味着, 接着上一个电子商务站点的例子,当用户第一次访问时,服务器端用来向API请求并渲染列表项(转换为DOM元素)的代码和客户端中用户想加载更多列表项的代码必须是一样。 这种方式下,应用的JavaScript的代码是通用的,因为两端都能运行。

执行的流程

好了,我已经介绍了通用应用是如何工作的,但是一图胜千言。

Universal/Isomorphic flow

  1. 请求:浏览器向服务器发起一个请求。这是初始化的请求,也是主要的请求,因为针对用户的请求,服务器会返回一个Web页面,外链了Javascript和CSS代码打包文件,除此之外还有尽可能多的内容(包括页面上的DOM元素)。

  2. 处理和渲染:服务端处理请求。服务端必须获取到用户正在请求页面(主页,关于我们,列表详情)的路由,必须查询所需的数据来渲染HTML页面元素。

  3. 响应:服务器返回之前构建好的HTML页面给客户端,客户端加载文档中的图片,CSS,和JavaScript文件。

  4. 交互:客户端有一个RIA应用所需的全部代码。页面初始化的内容已经被服务端渲染了,带给了用户更好的体验,之后你的应用不用刷新整个页面就可以异步请求新的内容。

记住你写的代码必须能在客户端和服务端都能运行,举几个例子:

  • 所需的代码获取到当前的路由然后渲染正确的内容。假如这个app应用有三个标签页:主页帮助中心关于我们, 如果在浏览器中,通过绝对的URL到关于我们,我们期望应用能够启用关于我们的页面。之后,一旦应用在浏览器中加载完成,如果我们要到帮助中心,组件一定要发生改变。在这两种情况下,识别访问路由和渲染页面的代码必须是一样的。

  • 代码需要获取数据。因为数据既可以被服务器获取到,当浏览器加载完整个应用后,也可以被客户端获取,你用来获取数据的代码在两端要都能运行。因此,通用应用一般会向一个API服务器来请求数据。

结论

一个通用应用必须满足一个要求: 代码在客户端和服务器端必须一样,当前只有JavaScript能达到要求。

为了提升用户体验,我们第一次访问服务端加载应用的时候,HTML应该包含页面需要的所有DOM元素。这种方式减少了首屏内容加载完成的等待时间。 JavaScript代码必须在客户端和服务器端是兼容的。例如,你不能直接访问一个数据库来获取数据,因为这些代码在客户端不能工作。

棒极了 !! 现在你知道了通用应用工作的基础。从这里开始,离在项目中真正运用,还有一段很长,却很棒的路要走。 acanimal's Picture

acanimal

计算机科学, 狂热的码工,一个新吉他手.

译者我是搬运工尚未开通打赏功能

相关文章