BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

一份关于Angular的倡议清单

| 作者 Eamon O'Tuathail 关注 0 他的粉丝 ,译者 张健欣 关注 0 他的粉丝 发布于 2017年4月21日. 估计阅读时间: 18 分钟 | QCon北京2018全面起航:开启与Netflix、微软、ThoughtWorks等公司的技术创新之路!

亲爱的读者:我们最近添加了一些个人消息定制功能,您只需选择感兴趣的技术主题,即可获取重要资讯的邮件和网页通知

本文要点

  • 本文提出了一份对Angular未来功能提升的倡议清单。
  • 基于Angular灵活的渲染基础架构,建议开发新的渲染器,包括共享平台(Platform-
    shared,用来与远程用户共享app)、文档平台(Platform-Documents,用来渲染PDF或ODF文档)以及服务端显示平台(Platform-DisplayServer,用来使App完全在服务端运行)。
  • Angular工作区间可以提供工作区功能并允许多个App用单个浏览器session运行。
  • Angular作为一个优秀的UI框架而闻名,但是必须意识到它的基础是一个功能强大的系统编程框架。
  • Angular目前主要侧重于客户端,但应该尝试探索用Angular Host(一种基于V8引擎的服务端引擎)代替Node来提升Angular的系统编程能力。

Angular是一个用来创建大型Web应用的优秀的Web框架。许多Angular支持者都期望它能快速发展以解决更复杂的应用场景。因此,不如进行一次头脑风暴来提出一些可行性的想法。

本文的目的是提出一份清单,并稍后进行完善并划分优先级。本文是作者的最原始的想法清单,但广大读者肯定也会有些其他的想法和建议。广大读者可以在原文评论处留言自己的想法。作者也欢迎能听到读者对于已经提出的清单的看法以及哪些想法值得作为Angular未来更新的一部分。

在决定广泛应用的框架该如何演化时,都会有是否该增加某项新特性的矛盾。尽管目标是提供更综合的解决方案来更好地应对各种各样的问题,但总会担忧框架可能会因此而变得臃肿。毫无疑问,开发者们更关心的是,提出的某项新特性是否为他们自己App的开发带来切实的好处。

就算同意添加某项特性,但在哪里添加这个特性也是一个难题。新特性可以被添加在Angular主项目中,也可以作为Angular的一个子项目,甚至可以作为一个完全独立于Angular的项目。总的来说,作者更希望Angular主项目能够保持精简,因此剩下的两个选择似乎更为可取,尤其是作为Angular子项目的方案,类似于Angular CLI或者Angular Material项目。

渲染

我们将尝试探索Angular如何在渲染层面进行扩展。Angular提出可配置渲染器的概念被更高层次的Angular功能和程序组件用来以更灵活的方式将内容渲染到显示器。渲染器需要实现Angular rendering API。Angular提供了各种平台化包(Platform- packages)实现了不同种类的渲染器。Platform-Browser包是我们非常熟悉的,它提供的渲染器能够写入到浏览器的DOM。Platform-Server提供的渲染器能够输出到服务端的HTML文件,这些生成的HTML文件之后可以被下载。

最吸引人的渲染器来自Platform-WebWorker。这种渲染器允许在一个web worker的上下文环境进行渲染。在作者的《guide to the Angular source tree》一书中,作者用一个章节详细介绍了Platform-WebWorker,包括消息总线和消息代理,它们能够将来自web worker(web worker不能访问浏览器的DOM)的渲染信息传递到到UI主线程(UI线程可以访问浏览器DOM)。由于Angular提供了极好的灵活度,因此应用程序可以不用直接访问DOM就能调用渲染器。类似的情况还有其它一些使用场景,例如共享型应用、X-Window类型应用以及向文档中渲染内容的应用。

许多商业Web网站都有一个聊天按钮,通过这个按钮用户可以通过网站以文本形式和公司的代表交谈。在线培训网站也会让老师和远程学生共享同一视图。许多销售网站也会提供类似的远程产品展示。如果这个Web网站是基于一个Angular App,那么它就可以拥有和远程用户共享应用的方案(假如安全顾虑被正确处理的话)。

有许多实现浏览器窗口共享的方法,但这里鼓励使用一种新的Angular Platform方案(姑且称之为Platform-Shared)。Platform-Shared拥有一个混合的渲染器,这个渲染器既拥有类似Platform-Browser(本地渲染)的渲染功能,又拥有类似Platform-Webworker(但这时渲染信息传递的目的地不再是跨线程,而是跨网络)的渲染功能。Platform-Shared可以通过配置使得远程用户可以选择只观看渲染结果或者选择发送事件(例如鼠标点击事件、键盘事件)到服务端。

X-Window系统有一个渲染服务器的概念,它运行在人类用户面前的机器上,并提供一种显示服务以供远程应用程序在屏幕上渲染内容。目前Angular整个程序都运行在用户本地的Web浏览器上。想象一种新的Angular Platform-DisplayServer可以使Web程序在远程机器上运行(例如在云端或者更安全的企业数据中心)并且渲染内容到用户的Web浏览器上。这样,没有具体的应用程序代码需要在用户的Web浏览器上运行,只需要一个通用的Platform-DisplayServer实例。

基于渲染内容到文档想法的Platform-Server,可以将内容渲染到一份HTML文档中,那么如果想要显示到其他文档格式的文档中,例如PDF或者ODF(Open Document Format),那该怎么办呢?对于许多类型的应用,大家都希望显示器中显示的内容都能同样出现在文档中,那样更方便共享给其他人,更容易在普通的文本编辑器中编辑,也更容易打印。

Angular Workspaces

尽管并未被广泛使用,Angular支持同一平台多个应用程序同时运行于一个浏览器上下文的理念(每个应用程序都可以操作同一份DOM的不同子树)。假设我们有一个名为Angular Workspaces的新包,它构建在多个Angular应用同时运行的想法之上。

对于大多数用户而言,当使用小型移动设备时只会同时使用单个应用程序;当使用更大些的移动设备时,可能就会在多个拆分窗口中使用两到三个应用程序;当使用平板电脑或者桌面电脑时,通常会同时使用许多应用程序,这些应用程序在重叠的窗口内运行。通常由这些设备的操作系统来提供某种桌面或工作区间管理器来管理各种不同的应用。

Web浏览器是一种不同类型的工作区间管理器,也支持多个应用程序各自在一个浏览器tab页中运行。Angular Workspaces将会是另外一种类型的工作区间管理器,其中的多个应用程序将会运行在一个浏览器tab页中(即同一个执行上下文中)。

Angular Workspaces将会提供其他工作区间管理器提供的相同的服务,例如身份验证、区间隔离(每个Angular App运行在各自独立的web worker中来防止不同App之间的相互干扰)、App启动器(如何选择和启用一个App的设置)、与基于云端App Store集成的应用发现功能(可以从中了解有哪些可用的App)、App在屏幕上的布局(多层窗口以及位置和尺寸设置)、session管理(持久化保存某个工作区间连同其内运行的App,在之后的某个时间在同个浏览器或另外一个浏览器上恢复这个工作区间)。

与Web Assembly的集成

许多科研、工程、金融、视听项目都有一个重要的CPU密集型的计算引擎(非UI),他会与一个用户界面和一个用于远程API调用的消息通信库组合在一起。其中,计算引擎一般为了实现高性能而用C或者C++语言来编写。迄今为止,它们都运行在服务器上。随着Web Assembly的出现,这些代码也可能会在浏览器上运行,从而打开新的架构格局。Angular应该与Web Assembly紧密合作。

TypeScript语言功能

Angular应该加强对TypeScript语言功能的使用。既然async/await已经纳入TypeScript语法,async/await也应该在Angular的源码中广泛使用,包括Angular API和Angular应用程序代码中。新版的TypeScript v2.2添加了对mixins的扩展支持,那么Angular也应该尽可能使用mixins。Angular应该在它的大型包(例如Angular/Core)中使用TypeScript命名空间。尽管我们并不一定需要在所有包的顶部都加入命名空间(包本身实际上就是类似于其他语言中的根命名空间的存在),但是,如果你是一名Angular新手,Angular/Core中罗列的各种类将会带来困扰,搜索答案的速度会很慢。许多经验尚浅的开发者都会这样自问“这么多可用的类中,我到底该用哪个类来实现某个特定的任务呢?”。

Angular图表

Angular对通用的HTML元素提供了很好的支持,但是在图表领域更大有可为。与图表相关的三大重要技术是HTML CanvasWebGL 2SVG 2。一个崭新的Angular Graphics包将会让那些开发图表App的开发者们交口称赞。

Angular协议

Angular目前提供了一个HTTP包来帮助客户端HTTP编程。这个包是对XMLHttpRequest调用的包装。尽管一个应用可以直接调用XMLHttpRequest,但使用Angular的HTTP客户端包可以帮助实现依赖注入,同时可以支持后端替换(比如测试用的in-memory-web-api),请求的响应会被转换成RxJs事件流,并且对跨域请求伪造(XSRF Strategy)有更安全的加固措施。未来,Angular应该同样支持其他协议,特别是HTTP(server)、HTTP/2、WebRTC和Web Sockets。

Angular作为一个系统编程框架

尽管Angular非常适合Web UI编程,但是如果深入了解它所有丰富的功能,就会清楚Angular也会是一个非常好的系统编程框架。那么,暂时就让我们忽略Angular强大的UI功能,仅仅专注于Angular剩下的非常有助于系统编程(特别是能够用于没有用户界面的应用程序或组件)的功能。

Angular不局限于用户界面编程的强大功能包括层级式的依赖注入、事件发射器以及支持使用RxJS实现流式处理、zones的使用、与WTF(Web Tracing Framework)的集成、强化的反射功能、可测试性、元数据与装饰器、国际化、Angular模块的动态加载、web worker的消息总线和消息代理。

TypeScript(以及ECMAScript)没有庞大的内置框架(不像其他语言生态,例如Java或C#都有非常庞大的相关框架)。因此,类似Angular这样功能强大的框架可以不局限于仅仅用于UI编程。

要想让Angular成为TypeScript生态中出类拔萃的系统编程框架,需要在文档完善方面付出努力,需要Angular Core团队放一部分精力在一些无关UI的功能上,还需要一些在程序宿主方面的想象力。

Angular Host

目前,一位全栈的应用程序开发人员需要关注不同的程序宿主,比如开发Web客户端代码时(在浏览器上使用Angular),Web服务器编程时(使用Node/Express),开发原生移动或桌面App时(使用Ionic/NativeScript/Electron),以及开发非UI/非服务器系统代码时(使用Node)。尽管开发人员强烈希望能够尽可能地在所有的程序宿主间复用他们的技能树和代码库,但是因为各种目标宿主间的差异性而没能实现这种愿望。

正如我们已经讨论过的,Angular提供了强大的系统编程能力,因此我们可以畅想,Angular团队是否可以开发一款新型的程序宿主,可以使用Angular作为系统编程工具并对所有类型的应用都提供统一的API。我们可以有Angular Server Host(完全替代Node/Express)、Angular Mobile Host(替代Ionic/NativeScript/Electron)以及Angular System Host(替代Node)。所有这些宿主都可以使用谷歌的V8 JavaScript VM,根据需要还可以使用一些开源的HTTP & HTTP/2框架以及少量的C++代码,以此保证基于Angular框架的应用程序在这些宿主上展现统一的功能。

例如,目前基于RxJS的Angular事件发射器被用来传递服务端HTTP响应到客户端应用程序代码中。在将来的Angular Server Host中,相似地,可以用Angular事件发射器传递客户端的HTTP请求到服务端的应用程序代码。这就意味着,开发者在Web客户端的处理可观测事件流的技能可以直接用于Web服务端应用的开发。

另外一个例子,依赖注入用来根据一些动态配置的组件来组装一个应用程序的框架。大多数Angular开发者都希望在客户端和服务端使用同一种Angular依赖注入引擎。还有一个例子是web worker通信,这方面被Angular Platform-WebWorker非常好地实现用于客户端多线程,并且也非常有望用于服务端。

除了系统开发,Angular还有一些其他功能可以用于服务端开发或者其它开发领域。许多Web应用都会涉及到服务端模板技术,从服务端数据库或其他中间件直接获取数据,使用一个类HTML模板来在服务端生成HTML代码,并将生成的HTML发送给Web浏览器。试想,如果这些服务端模板是基于已有的客户端Angular模板语法,那就意味着全栈开发者可以在客户端和服务端都使用Angular模板语法这门技术,而不用学习两种不同的模板引擎。

我们甚至可以敦促Angular的子项目的发展,例如Angular MaterialAngular CLI。Angular CLI不仅可以用于生成Web客户端项目的初始项目结构,还可以生成Web服务端程序和移动端程序的项目结构,甚至可以生成一些共用代码。组件设计是一种非常好的创意,而Angular Material就是组件设计中针对Angular项目的一种非常优秀的实现。非常期待Angular Material能够作为Angular服务端模板技术方案的一部分。

作者简介

Eamon O'Tuathail就职于Clipcode,负责为开发Angular项目的最前沿的客户端开发团队提供指导、培训和咨询服务。他曾在欧盟工作,在一些软件开发项目中先后担任软件工程师、技术架构师、项目经理和技术顾问,涉及云存储、工程管理系统、电商门户、协议设计、大规模多线程高并发的金融通信系统、安全服务器平台、X.509证书颁发、航天可视化、地震成像技术等领域。

查看英文原文:An Angular Wish List


感谢张卫滨对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ@丁晓昀),微信(微信号:InfoQChina)关注我们。

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT