（译）Sencha ExtJS白皮书之一：现代Web堆栈——前端技术分类以助选型

 

原文链接：http://pages.sencha.com/White-Paper-Modern-Web-Stack.html

概述

今天驱动企业计算发生改变的两个最大动力是多设备计算和云。多设备和云计算正在推动应用程序体系结构朝着更强大的前端和更灵活的后端发展。移动设备正成为业务数据和应用的重要网关。云端- 通常实现为提供丰富的API服务 - 正在迅速成为这波应用新浪潮的后端补充。

在过去的五年里，Web和原生技术发生着爆炸式的创新，伴随着帮助开发者创建新世界应用的库，框架和工具的快速释放。在后端，Node.js提供了用JavaScript编写的简装的事件机制，为开发者调整其服务以适应多设备奠定了基础。在前端，如寒武纪生命大爆发般涌现了诸多实验性库，帮助Web和原生开发者实现下一代用户体验。

 

新的架构 

许多组织已经花了很多时间和精力在传统的Java应用服务，用于创建开发过程和培养技能。有时，他们很难相信，这些投资正在进入报废。在很多人的印象中，第一个问题是：“为什么我们需要改变？”简单地说，移动计算需要一个新的架构。

建立于2000年代的桌面型Web应用程序的大潮有着共同的瘦客户端架构。类似Oracle 以及WebLogic这样的重量级应用服务器向浏览器提供整个网页，所有的应用程序的交互以页面请求和响应的方式进行。整个应用的工作负荷是在服务器端执行的：包括所有的数据管理，所有的整合，所有的业务逻辑以及所有的HTML和CSS生成。虽然偶尔使用JavaScript做一些页面的交互性，但这是次要的。

这样做有三个很好的理由：浏览器运算缓慢的JavaScript引擎，只能提供比较原始的页面浏览；桌面浏览器很少离线使用；当一切都发生在服务端，考虑系统安全相对容易。

然而，运算移动化以及HTML5浏览器的崛起意味着上述理由之中两条已经失效。移动应用需要离线工作，浏览器（以及移动终端的本地操作系统）处理能力大大提升。

在此领域的现状是：过去在服务端运行的大量的业务逻辑和数据处理，现在转移到移动设备上了。并且移动应用提供的体验要比之前服务端静态页面所能提供的要丰富得多。

 

 

图1. Web1.0对比多设备架构

在今天的应用体系中，富客户端 - 无论HTML或原生应用 与对应的瘦云端进行交互。移动设备通过云端的REST风格的API，发送和接收的JSON对象。新一代的有状态、数据丰富，具有快速的用户响应的应用的幕后是这种架构转变。这些跨设备的应用运行在在我们的新的移动设备，我们现有的桌面浏览器，以及新的跨界设备上（例如：带键盘功能的平板电脑和平板手机）。

 

由于在本地的内存或存储上保存了大量数据，这些应用能够快速响应用户交互。对数据的检索、排序、筛选和分组不必再通过与服务的交互获取新数据。相比Web1.0应用这些应用也更具“状态性”。它们允许用户在多屏和子屏的数据或内容之前穿行，无须从服务请求新页面就可以进行多步骤的交易。这意味着：这些应用具备非凡的“富数据”特性，能够以不同的方式显示或者操作大数据集。——既可以通过传统的数据网格（data grid）控件，也可以是更先进的可视化方式。

 

“哥们，启动你的编辑器！”

对开发者而言，立即打开ecipse或vi开始上述应用的编码的确令人兴奋。停下来反思你的开发团队需要计划、搭建和交付的应用，与之相关的新应用模型的所有影响，将是不无裨益的。尤其当你不仅仅为自己打算时。为了让几十（如果不到几百）个开发者在数百乃至数千台屏幕前管理这些应用的生命周期，一般企业必须进行工作练习。那些屏幕体验建立在数十万行代码及数百万条数据上。这很可能是一项异常繁重任务（某些Sencha用户用了5年时间将其应用升级到新架构的形式。）因此应当驻足并简单思虑下：搭建下一代运行环境中变化的部分。

 

前端开发的挑战

 图2: 常见前端挑战

（以下为图中文本）

• 界面元素：为交互元素创建吸引人的主题和风格；

使用结构化的展示元素展示复杂数据，比如：网格控件和图表控件。

创建跨应用的标准可视化词条。

更多…

 

• 视图系统：能够针对不同屏幕尺寸和窗口尺寸的改变动态布局屏幕元素。

除了简单的点击，应当探测并响应触摸手势。

自动切换本地语言字符串，支持RTL（右向左）语言，界面上的一切具备可访问性。

动画内容及更多…

 

• 逻辑及数据：数据改变时更新显示，反之亦然。

保留应用的状态，以支持 撤销/重复 以及导航功能。

检索、排序、筛选、分组以及验证数据

更多…

 

• 服务I/O : 

处理对服务端的异步调用

分析和转换序列化数据

调用服务端代码

 

更多.,.

（图中文字结束）

大多数的多设备应用程序都面临一系列共同的挑战，我们可以（有些武断）划分为四个不同的类别。

• 1. 屏幕设计：创建和安排用户界面——您的应用内容（包括:窗口控件、图标、网格等）的表现及行为
• 2.视图管理：构建和管理视图机制，包括：布局和屏幕元素的交互，以及处理类似外国语言、阿拉伯文字那样的右到左语言。 另外，处理多设备的核心问题——建立既可以适应桌面屏幕的鼠标输入，也可以适应移动终端手势加护的应用。
• 3.数据和代码管理：数据有变化更新屏幕，用户输入时更新数据。
• 4.与后台及服务端的通信。

 

在多个层次上对代码进行封装和模块化，就能使上述挑战迎刃而解。从而多个开发者或者开发团队才可以有效协作——借助彼此工作成果而不会踩到对方脚趾。

 

前端分类 

原生开发技术早已为这些问题提供了解决方案。比如以下原生运行环境：用于Apple平台的Cocoa框架；用于Flash开发的Flex框架，或用于微软windows平台的WPF(Windows Presentation Foundation)。- 我们看到：它们在解决如何创建富客户端应用时，提供了惊人的相似方案。所有这些技术平台在相似的环节提供了相似的功能。

 

 图3: 前端堆栈分类

（以下为图中文字）

界面元素：

• 基本组件（按钮、工具条、文本框...）
• 复合组件（树、网格、仪表盘）
• 可视化组件（图表、信息图表）

 

视图系统：

• 布局管理（绝对布局、灵活布局）
• 交互处理（手势、拖拽）
• 绘图（矢量图、栅格图）
• 主题（计算风格）
• 模板（迭代和条件表达式）
• 可视效果（动画、滤镜）
• 本地化（RTL，本地化库）
• 可访问性（焦点管理、ARIA）

 

逻辑和数据

• 状态管理（历史、回退、路线..）
• 数据绑定（单向、双向）
• 模块化（组件、模块）
• 测试（IOC, 测试挂接）
• 数据对象（队列、hash表）
• 数据模型及存储（分组、排序、验证）
• 持久化数据（缓存及同步）
• 多媒体（3D, 音视频）

 

服务I/O 

• 服务调用（异步、转换）
• 服务方法调用
• 双向数据
• 服务通知

 

基础服务：渲染、DOM、字体、并行性、安全性、媒体解码、传感器、打印、网络I/O

（图中文字结束）

 

在系统库内建功能与系统框架之间，原生平台为你提供一篮子工具以帮助你构建应用，自动化常见的开发任务，制作帅气的应用。图3中，我们展示了前端堆栈的通用模型。作为模型，对真实的代码组织方式进行了明显的简化。例如，一个模块化系统不是严格意义上的独立的代码块，它只是所有代码的组织方式。但这种简化有助于我们组织前端功能并绘制出各种前端技术的能力。

 

界面元素

• 基本部件包括一个应用程序的基本显示要素，包括文本区，按钮，表单元素，进展和加载指示器，菜单等
• 复合物部件包括显示多个数据值的复杂组件、或包括多个子控件，例如：数据网格，嵌套列表或多级文件显示。
• 可视化，包括数据驱动图形元素，如图表，图形，瀑布图等图表。
• 容器用于包含其他组件或内容，包括支持滚动条的嵌套面板，如carousels那样基于card的显示，以及模态风格的容器，比如：警告或导航。
• 风格包括：字体尺寸，阴影等视觉效果，它们是内容或控件的属性修饰。
• 主题是风格与小图片的集合，给予应用一致的外观和感觉。有别于style语言，它们以主题语言或系统的形式表示。

 

视图系统

• 通过应用规则，模板负责将占位转变为最终内容。完善的模板系统允许简单或复杂的条件表达式、迭代表达式甚至更多得表达式。
• 布局管理器使用一系列布局规则，根据窗口尺寸、设备类型及分辨率，确定屏幕元素在x,y甚至z（决定覆盖顺序）的排列。
• 交互处理负责将原始的系统事件（例如 touchstart）转变为应用开发者想使用的手势-例如滚动手势。拖拽也归入此类。
• 视觉效果是对动画属性及视觉转换效果（比如模糊、重新着色、饱和度等）的统称，
• 绘图API提供对原始绘图图元的抽象。如果平台提供的原始绘图指令足够丰富，它并非必须的。某些合成操作例如：clips、mask、blend等既可以认作绘图API，也可以视作视觉效果。
• 主题系统提供了将风格和切图作为一个整体应用于系统的途径。它也可提供可运算的风格属性。
• 本地化功能允许根据应用程序的语言环境切换文本字符串和应用程序的消息。虽然在图中我们将本地化作为一个独立的砖，但它通常分散在堆栈图多处。彻底本地化还实现本地化的数据格式，包括时间，日期等，以及用于数据和文本的本地排序规则。根据 本地语言是否具有从右到左书写顺序，调整的组件的布局和组合。
• 可访问性是分散在各层的另一个功能，并提供了一些工具，如键盘导航，屏幕阅读器的兼容性和为视障人士提供高视觉对比主题。

 

数据和逻辑

• 状态管理工具帮助应用开发者管理应用的状态持续性。 赋予应用状态机模型，撤销/重做机制，导航堆栈，以及事务风格，全做或全不做 ，数据提交归于此类。
• 标准语言库通常会提供足量的数据对象，如集合，树，队列和图形。但在缺少这些情况下，前端栈需要提供它们，或者开发者从头开始写。
• 数据绑定提供了内存中数据变量和描述该数据变量的屏幕元素之间的轻松同步。使开发者不再需要为此编写代码。
• 数据模型提供存储应用的工作集在内存中的数据结构。组织良好的数据模型可以提供排序，搜索，筛选，验证和组数据库式的功能。他们还可以为数据的序列化和反序列化提供帮助。
• 模块化是对前端架构帮助个人开发者和开发团队构建的代码和管理依赖的能力的总称。它并不单指某个代码片段，但它覆盖诸如命名空间，MVC架构模式，组件模型以及 模块/包机制。
• 持久性数据是建立在底层的文件读写之上，在本地提供存储、缓存和同步应用程序的资产和数据。
• 可测试性包括自动化单元测试和系统测试的能力，例如错误日志，事件重放，确保所有的应用程序事件可以通过外部脚本触发。
• 多媒体功能包括嵌入和自定义的系统的音视频播放和控制，读取元数据和控制字幕的能力。

服务通信

• 为应用提供服务端通信，包括：请求/响应，全双工，服务端推送数据的通信机制。通常服务端通信由系统库提供，但在Web的特殊场景下，原始的socket通信被浏览器的安全沙箱模型所阻止，只允许更上层的工具例如XHR或web socket。

上述分类并未包括通常由操作系统提供的功能。比如：字体呈现，线程或传感器API，因此相应的浏览器功能（web字体、web工作线程、地理位置等）也未纳入上述分类。

 

将分类应用于Web平台

当我们采取这种分类法，并将其应用到Web平台上，结果相当有启发性。尤其当我们审视HTML5前 web平台时，我们可以看到该平台只提供了少得可怜的功能。对于pre-HTML5浏览器，当你想解决任何实际问题（如图形，视频和全双工服务器的通信能力）时，不得不从头开始建立几乎每件事，或使用使用非浏览器插件。

HTML5前浏览器分类图功能映射

HTML5前 web平台提供了有限的组件，风格和布局能力，请求/响应的http调用，仅此而已。整个第一代web应用就建立在如此有限的浏览器功能之上，真是令人惊叹。

随着近来HTML5浏览器而来的，平台提供了多得多的功能，包括：

• 画布，WebGL的和SVG给我们2D和3D图形，位图和矢量图。
• HTML5的输入控件提供了范围滑块，拾色器和扩展的日期/时间输入 。
• CSS动画及过渡提供运动图形。
• Web socket提供了全双工的服务通信。
• 还有更多功能。

 

 

图4. HTML5在我们的分类图中的功能一览

尽管HTML5已经给了我们很多新的东西，但我们可以从图4看，对比原生平台，前端Web堆栈仍然不完整。我们列举HTML5平台的空白一份详尽的清单，但这里有几个例子：

 

• 布局管理：HTML5引入了Flexbox，它提供了全面的一维布局。但是，对于老版的webkit浏览器，IE浏览器10、最新的Chrome和Safari浏览器，它的实现略有不同， GridLayout，一种二维的布局管理器仍然只能在Internet Explorer中执行。 HTML5还引入多列布局，它允许将文本自动按列布局，但仅限等宽的列。
• 交互：HTML5引入了对识别触摸事件的支持，但是Internet Explorer（pointerEvents）和其他浏览器（touch事件）的实现不同。此外，虽然HTML5增加了拖放API，它是基于Internet Explorer 5中微软实现的拖放API，它有太多的事件，再加上默认事件处理的总是需要被重写，导致相互干扰的非常杂乱的事件冒泡。
• 数据绑定：HTML5并没有增加支持任何类型的数据绑定（虽然在Internet Explorer4曾经引入最基本的数据绑定，但在后续版本废除了）。

 

尽管一些浏览器添加了功能，以填补其中的一些空白，但这些功能还没有被广泛采用。例如，Chrome的Web组件的建议包括对模板的部分支持，一个基本的（如果有点绕口）组件模型。 Chrome浏览器也别具匠心，提供对每个应用程序域的文件和目录的支持。

 

Adobe对于复杂的跨元素文本流的地区建议，在Internet Explorer和Safari浏览器部分可用，但Chrome浏览器不支持。综上所述，截至2014年中期，对于想拥有完整前端开发堆栈的开发团队而言，仍然有巨大的空隙待弥合，并且短期内内希望渺茫。

 

JavaScript速来救驾

幸运的是，自从JavaScript1995年舶来，大量脚本，框架，库和预处理器已经被开发，以增加和扩大的浏览器功能。随着象GitHub这类代码分享网站的崛起，库和框架的爆炸继续保持快速增长，不仅对JavaScript的，现在也扩大到CSS。截至2014年春季，GitHub上有超过120万公开的JavaScript库。

 

开发团队面临的新问题不是找到一个库填补空白，而是该选择哪个库。最重要的，根据他们的基础技能和部署要求，选择适合自己的应用程序的前端战略组合。

其中一个开发团队经理的主要决定是要不要自我支持：98％的GitHub库在发布一周年之后再也不更新了，这使得选择使用这些公共库的团队不得不面对自我支持的现实。

 

前景评估 

我们经常在博客或推特上看到诸如:“什么是最好的框架”，或者开发人员到底应该使用库x或y。

但经验丰富的开发团队知道，这些都是错误的问题。我们认为，对于开发团队而言，在这些案例中正确的问题应该是：

•  ·给出我们所要建立的应用的用户体验类型... 
• ·开发团队所具备的语言和技能... 
• ·应用程序的维护生命周期... 
• ·需要支持的浏览器... 
• ·开发团队的规模... 
• ·潜在的其他要求，...

 

对于该app以及对于该开发团队什么是最好的框架和库？ 

取决于特定类型的应用实践，例如，针对现代浏览器编写并且由有一位开发者维护的内容应用，答案是根本不需要任何框架。在另一方面，对于一个庞大而不断变化的团队开发的复杂和相互依存的应用程序组合，答案可能是规范化为贯穿整个组织的单一架构。 带着上述想法，接下来我们来看看最流行的框架和库如何映射到我们的前端分类。凭借对框架功能的图示，可以更轻松地回答：什么才是您的团队的最佳框架。

 

框架和库定型的快速概览 

以下是精选具有较高的知名度，在Web应用程序开发社区最显眼的框架和库。

 图5. 主流开发框架和库

Bootstrap + Plugins：用于响应式web站点的CSS框架

Backbone + Underscore：简约的架构框架+实用数据类

Angular JS：运行于现代浏览器的基于HTML的架构包

Ember + Handlebars：高度结构化的体系结构框架

jQuery + jQueryUI：易上手的，非结构化的UI库

Ext JS + Deft.js：高度结构化的，完整的堆栈框架

 

Bootstrap是一个CSS框架，它提供的界面元素和一些视图管理 功能，如主题和布局。它已经成为非常流行于主要是显示内容的网站。

•  ·Backbone.js是一种简约的MVC封装，Underscore提供了一些数据处理能力。它没有提供界面元素或视图管理功能。 
• ·AngularJS自述为一个用于创建框架的工具包。它提供了附带丰富的基于HTML模板系统的MVC结构，它允许以声明方式使用标记来创建组件。 
• ·Ember是顽固的MVC封装，提供对象和数据绑定以及完整的组件模型。
•  ·jQuery的+ jQueryUI：是一个经典的组合，提供界面元素和一些视图管理功能，但没有任何架构或数据处理能力 
• Ext JS+ Deft JS：完整的前端JavaScript开发堆栈，Deft JS库提供了控制反转，大大增强了可测试性。

除了Ext JS，每个框架或库搞定了前端开发堆栈中的一块。

例如： AngularJS假定界面元素和视图系统的大多数其他元素是由其他框架提供的。

Backbone.js则假定堆栈中的绝大部分功能来自他方。

事实上，当我们以我们的前端分类比较这些框架和库，所得所失一目了然。

下面在图6中，我们以Bootstrap为例，展示其提供的功能。

 图6. Bootstrap功能图

当我们绘制出了其他流行的框架功能（后面几页），我们可以看到所有这些框架主要关注构建应用程序逻辑，而不是管理界面。它们中的大多数假定你会编写视图管理以及界面元素。

另一种方法是用不同库组装出完整的前端堆栈。虽然这提供了自由定制的解决方案，但问题也随之而来。如果没有一个通用的架构或编码风格，测试和维护堆栈将变得困难。对于看似相同的功能每个库可以带来微妙的不同解释。而最重要的是，开发团队将面临这些库不同的发布周期，不同版本可能彼此不相容。更何况，其中某个库可能存在被废弃的风险。

 

例如：一个AngularJS应用想引入d3实现可视化，那么开发人员将面临完全不同的数据绑定方法，缺乏共享主题的功能，并且没有通用的对象模型或类系统，使得它非常难以同步grid和图表的变化。显而易见此种解决会变成“转基因框架”。

图7. AngularJS 功能图

 

 

图8.Backbone.js功能图

 

图9. JQuery+jQueryUI 功能图

 

图10. Ember功能图

Extjs 堆栈

 

相比于我们刚刚看到的库和工具集，ExtJS提供了更完整的框架。它提供了非常广泛的从基本控件到组合控件的选择（超过150个），从高层次的可视化组件到底层绘图API;丰富的容器和主题的封装，以及一个深思熟虑的视图体系。同时也提供了支持MVVM和MVC的架构包，以及对ARIA和RTL的支持等，采用统一的编码风格。在过去的五年中，经过企业和ISV市场现场验证：所有这些功能都通过工程化和测试，协同工作，在专业维护下，通过客户支持团队以同步的方式更新 。

 

图11.ExtJS功能图

事实上，在ExtJS功能缺位之处，该框架允许你的开发团队扩展它， 让你的代码和框架代码协同工作。例如，如果内置的布局不能覆盖你的设计，你可以编写新的布局，新布局的行为与内置布局表现一致。此外，还有各种各样的主题，组合部件，来自Sencha市场网站的其他合作伙伴编写的扩展。无论您使用标准组件，你自己扩展的组件，或使用来自Sencha市场的扩展，你总能得到预期结果，而这将使得应用程序的开发，测试和维护更加简单。

另外值得指出的几个难以取代的领域。 Ext JS的提供了很筛选棒的诸如key-value存储和HashMap数据类。 ExtJS的同时提供了在数据层面上良好的状态管理，允许通过会话类实现交易类的行为。 Ext JS的不仅帮助开发者管理应用程序的数据，也给他们带来强大的工具，使用户能够通过数据交互制定及时的业务决策。

例如，Ext JS的数据grid是一流的复合部件，适用于高性能大数据集以表格的形式排序、筛选展示。这样的数据管理和展示能力对于那些为用户建立以数据为中心的应用程序的机构，尤为重要，例如极富表现力的应用分析和可靠的事务处理系统。

 

增长和发展领域

值得一提的是，目前没有任何框架，提供对音频和视频播放管理、或服务器的通知的良好支持 ，而是依靠在这些领域的基本HTML5功能。另外，虽然 也有少数的WebGL库提供3D图形渲染（包括来自Sencha 实验室的PhiloGL），主流产品已经很少关注到这个功能。 我们的框架图未覆盖的一个重要领域是对浏览器的支持。很多框架 只对有最现代的浏览器提供的“常青树”支持模式。这显然使得开源项目和供应商更容易建立和测试他们的产品，但对于许多企业来说，只支持 最新的浏览器版本是完全不够的。相比之下，Ext JS的支持最广泛的 任何框架的浏览器，包括支持回溯到Internet Explorer8。

 

“正确的技术堆栈”

您选择前端技术堆栈取决于你想建立的应用程序的类型和 您的组织的性质- 无论是单人自由商店或世界500强企业的发展。

 虽然并不完美，我们希望对于前端技术的分类已经阐明了各种用以堆砌构建前端开发堆栈的砖块，并且澄清了其中的一些最流行的选择 所提供的功能，及其缺乏之处。如果您发现此信息有用，并且想与Sencha讨论你的替代品，请与我们联系。我们很乐意讨论您的选择。

 

了解更多

有关Sencha如何帮助您充分利用HTML5的更多信息，请访问www.sencha.com。 

您还可以： 

• ·与其他的Web开发人员和Sencha的专家在我们的开发者论坛讨论 www.sencha.com/forum
•  ·注册 并参加我们的框架和工具的培训，以快速启动开发 www.sencha.com/training