通用应用程序介绍

原文出处 Introducing Universal Web Applications

介绍通用的web应用程序

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

这是一系列讨论通用Web应用程序(之前叫做 “同构”)的文章中的第一篇。本系列文章的主要介绍: 什么是通用的Web应用程序?他们为什么重要?提供通用的web应用程序有什么好处?如何创建一个模板开始一个通用的app项目。注意,因为Javascript的生态系统难以置信的庞大,我们可以通过框架和库的任意组合来创建web应用,在这个系列中我们会用到 React, Redux and Webpack.


web比以往发展的都要快,主要因为Javascript这门语言的演变和改进。除此之外,NodeJs项目已经使Javascript在服务器端应用成为可能,也证明了JS有好有坏的像Java,PHP,Python一样,也是一门一流的语言。但区别于它们,我们可以在服务器端和客户端用JS的事实使JS是一门特殊的语言,这为我们创建通用的应用程序(之前叫做“同构”)成为可能。

在客户端的JavaScript

在浏览器中的用途是这门语言最初存在的理由。它的用途从几行代码去验证输入框到真正复杂的应用逐步演进。如今每个人都用富网络应用收发邮件,社交网络,照片分享等 作为一个总结,富应用程序以下方式运行:

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

    • HTML文档的 head标签 包含所有需要被用来装饰我们应用程序的DOM元素的CSS代码

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

    • 最后, script标签里面包含所有需要的JS代码

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

富应用程序的优缺点

RIA在基于web的应用程序的上下文中,意味着一个非常重要的步骤。我记得当GMail出现,在用户体验上比竞争者多么好。GMail一次加载,任何的变化或者数据加载都异步的处理而不需要重新刷新页面。这可能是富应用与原生应用相似最重要的事实。

但事实上富应用程序有一个问题,让我们测试下富应用程序的流程:

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

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

正如你所看到的,app的流程是用户需要两倍的时间去获取初始化的内容。

之前, 随着HTML5的突然出现很多公司开始开发混合的app代替原生的app。 他们很快发现用户在获得到内容之前,不喜欢等待很长时间。 参见 How Loading Time Affects Your Bottom Line._

在服务器端的Javascript

在服务器端运行Javscript有一些替代的方案,但是JS击败了它们成就了NodeJs项目。

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

Javascript在服务器端和其他的语言一样

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

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

  • 客户端解释返回的HTML页面,加载所需要的Image,CSS,或者Javascript代码

在以前的Email客户端,在服务器上针对每个(点击,链接,或者按钮)请求URL的行为都有不同的应答,用户必须等待直到服务器处理新的HTML 代码并且返回给浏览器。

服务器端应用的优缺点

随着web的发展,每个人都能想到在服务器端开发一个web app是个不好的方式,因为在每个客户端的行为都要等待服务器的响应。

这是对的,但是服务器的应用程序从某些方面来讲是很重要的: “可以返回带有内容的页面”,也就是当你请求URL时,你获取到带有你期望内容的页面。

在服务器端构建通用应用程序事实上也是非常重要的。当用户访问一些URL时,需要提高app的加载速度,提高用户体验,返回尽可能多的内容。

通用应用程序

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

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

执行的流程

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

Universal/Isomorphic flow

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

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

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

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

记住你写的代码必须能在客户端和服务端都能运行,一些列子:

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

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

结论

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

为了提升用户体验,我们第一次访问服务器加载应用的时候,HTML应该包含所有页面需要的DOM元素。这种方式减少了用户必须等待直到第一屏的内容加载完成的时间。

Javascript代码必须在客户端和服务器端是兼容的。例如,你不能直接访问一个数据库去获取一些数据因为这些代码在客户端不能工作。

棒极了 !! 现在你知道了通用应用工作的基础. 从这里起步, 离在项目中真正运用,还有很长一段,但是非常棒的路要走。

acanimal's Picture

acanimal

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