转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。

本文由葡萄城翻译并发布

---

Angular 作为一款优秀的前端框架,自诞生之日起,就致力于面向前端开发者提供一整套全功能解决方案。与其他流行框架所追求的理念不同,Angular并非作为一款可以并入 Web 应用程序的轻量级框架而生,而是设计为:包含了一个完整的工作流,用于从项目创建开始,持续地维护并更新你的应用程序

2019对于 Angular来说意义非凡,因为其包含了Ivy 等功能的全新版Angular 8 将于本年内正式发布。尽管 Angular 技术团队仍没有对外公布 Angular 8 正式版发布日期,但其beta版在本月上线已几乎没有悬念。Angular 8的发布近在咫尺!

那么,在 Angular 8 中,我们可以期待些什么?

Angular 8 中有什么新功能

尽管大多数开发者都在关注Ivy,但其实 Angular 8 中还是有很多值得称道的亮点:

l  JavaScript中的差异化加载

作为构建过程的一部分,Angular CLI生成的新应用程序现在将包含用于旧版JavaScript(ES5)和现代JavaScript(ES2015 +)的单独软件包。该包在客户端中实现差异化加载,以提高浏览器的加载速度和传输间隔时间(TTI)。这是一个好消息,意味着支持ES2015的浏览器将能够下载更小、更高效的应用程序包,而这些应用程序包的加载速度和渲染速度都比以往更快。

l  Ivy (预览版)视图引擎抢先试用

您可在应用程序中开始使用Ivy渲染器,并向Angular团队提供使用反馈,以便其及时做出优化和修复。

l  Angular Router的向后兼容模式

Angular 添加了向后兼容模式,以降低大型项目的升级成本。Angular Router将可以使用 $ route APIs 在现有的Angular应用程序中,选择延迟加载部分 Angular 1.x应用程序。在理想的情况下,我们甚至可以立即将Angular 1.x应用程序升级到Angular 2+。

然而,现实并非如此。直到今天,还有大量传统的Angular应用程序仍在为企业提供服务。而这些企业没有选择升级的原因很简单:它们运行良好,并且在完成重写时无需太多投入。

然而,Angular 1.x的时代已经结束,之后不会有任何新的更新,直到2021年6月30日。因此,对于从事大型Angular 1.x应用程序开发的团队,现在正是选择升级的最佳时间

l  改良的Web Worker绑定方式

Web Worker是编写主线程运行代码的好方法,可用于提高应用程序的速度和并发性。为了达到这一目标,Angular团队在 CLI 中添加了改良的 Web Worker绑定支持。

l  可选的信息共享机制

为了有效收集您的反馈,更好地建设 Angular社区,Angular团队在CLI中添加了可选的信息共享机制。在您同意的情况下,将开始收集您的命令行和构建速度等匿名信息。

l  依赖关系更新

与往常一样,Angular团队正在更新对TypeScript、RxJS和Node等工具的依赖关系,以便与 Angular 生态系统的其余部分保持同步。

Angular Ivy 是什么?

作为下一代 Angular 的视图引擎,Ivy的出现旨在彻底缩减代码尺寸并增强系统灵活性。与目前的Angular View Engine相比,Ivy具有以下优势:

  • 通过 Angular 编译器生成的代码现在将更容易让开发者阅读和理解
  • 项目重建时间将明显加快
  • 有效减少了负载大小,浏览器用于下载和解析应用程序的时间将更短
  • 更好的模板类型检查,以便您在项目构建初期,就可捕获更多BUG,以防止用户在运行时遇到它们

除此之外,Angular Ivy与现有的Angular应用程序广泛兼容。因此,在理想的情况下,您将无需更改应用程序即可获得Ivy的全部支持。这也是为什么使用Angular 8和Ivy构建当前的Angular应用程序会更加便利。

Ivy(预览版)可能存在的问题

目前已知的是,Ivy 的国际版和Angular Universal版尚未完全兼容。当然,如果您在开发过程中遇到任何使用BUG,请立即向Angular技术团队反馈,以便他们能够及时解决问题并将您的建议作为 Ivy 正式版的一部分。

如果您的Angular应用程序支持多语言或使用服务器端呈现数据,请不要指望它能与Ivy完美结合。除此之外,用户可能遇到的另一个问题就是Angular Material,目前来看,使用Angular Material的应用似乎与即将发布的Angular 8预览版Ivy不太匹配。

Angular 8 对 Web Worker 的支持

对于那些对Web Worker 还不熟悉的开发者来说,Web Worker标志着前端开发中的一项重要创新,在此之前,所有 Web 应用程序仅限于使用单线程。而随着 Web Worker 的出现,可以将CPU分配到单独的硬件线程中,使浏览器环境拥有多线程,从而提升项目开发效率。

在Angular 8更新之前,使用 Web Worker需要注意的问题是:在worker中运行的代码不能与应用程序的其余部分位于同一JavaScript脚本文件中。它必须是分开的。因此,对于曾经希望借助Angular CLI等工具,自动将JavaScript文件拆分、绑定到更少文件夹下的效果往往不佳。而Angular 8的新特性之一便是改进了使用Angular CLI捆绑WebWorker的支持,这项改进意味着您将走向多并发、自动化的Web Worker之路。

Angular 8 对 TypeScript 的支持

关于 Angular 8 中的依赖更新,包括了对Angular依赖项和最新版本的更新,如RxJS和TypeScript等框架。这看起来似乎是一个微小的改进,但却同样受欢迎,特别是TypeScript部分。

Angular 8 的性能提升

虽然 Angular 8 带来了很多令人称赞的功能,但是真正促使我们升级的很大一部分原因取决于其性能的提升!为证实这一点,我们将对 Angular 7.2 和Angular 8.0.0-beta.7 进行全面对比。

该性能测试是基于ng new创建的新应用程序运行,并使用ng build --prod构建的。测试本身使用了Chrome的审核标签完成,通过 “Applied Fast 3G,4X CPU Slowdown” 的设置来模拟在移动设备上运行。

Angular 7.2

使用Angular 7.2的正式版本生成main.js的大小为240KB。具体数据如下图:

Angular 8.0.0-beta.7

Angular 8 beta版本的main.js文件大小与Angular 7.2相同:240KB。由此可见,文件大小没有任何改变,但让我们对比一下性能数据:

Angular 8 看起来更棒!相对于Angular 7.2,获得了相当不错的性能提升。

于是,在 Angular 8 中,我们可以得到些什么

正如我们所看到的,Angular 8的新增特性除 Ivy 之外并不是很亮眼,尽管这些特性非常好用,但对于大多数应用程序来说并不重要。

基于这一点,您应该将应用程序升级到Angular 8,还是坚持使用Angular 7?毫无疑问,你应该升级它们。即便功能上没有任何大的重大更新,但通过 Angular 8 新增的差异化加载,您将获得显著的性能提升。

更重要的是,升级到Angular 8将确保您的应用程序为Ivy做好准备,即便目前 Ivy只是Angular 8提供的一个可选预览。如果您的应用程序需要兼容 Ivy,那么最好从现在开始尝试。

或者,您也可以选择一条更加快捷且简便的方式,比如使用一款相当成熟的商业化开发工具——WijmoJS。这样,您就不必考虑项目中前端框架的兼容性和版本更新问题,因为它不但同时兼容了Angular、React、Vue、TypeScript和Ionic 等框架,还时刻紧随技术潮流,第一时间保持对框架最新版本的全面支持。

---

本文是由葡萄城技术开发团队发布,转载请注明出处:葡萄城官网

了解可嵌入您系统的在线 Excel,请前往SpreadJS纯前端表格控件

与开发人员分享前端技术趋势、交流心得技巧,请加入葡萄城“前端技术交流群”(QQ群:720389894)

在 Angular 8 中,我们可以期待些什么的更多相关文章

  1. 一个Angular模块中可以声明哪些组件?

    一个Angular模块中可以声明哪些组件? (1) controller        控制器 (2) directive                指令 (3) function         ...

  2. Angular JS中的依赖注入

    依赖注入DI angularjs中与DI相关有angular.module().angular.injector(). $injector.$provide. DI 容器3要素:服务的注册.依赖关系的 ...

  3. mybatis 中的稍微复杂些的sql语句

    mybatis 中的稍微复杂些的sql语句: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYP ...

  4. 秒味课堂Angular js笔记------Angular js中的工具方法

    Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...

  5. 在angular 6中使用 less

    在angular 6中使用 less 新项目 ng new [appname] --style less 已有的项目 修改 *.css 文件及引用处后缀名为 less并在 angular.json 文 ...

  6. (网页)Angular.js 中 copy 赋值与 = 赋值 区别

    转自st.gg Angular.js 中 copy 赋值与 = 赋值 区别 为什么用 $scope.user = $scope.master; $scope.master 会跟着 $scope.use ...

  7. angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制

    Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $ap ...

  8. angular.js 中的作用域 数据模型 控制器

    1.angular.js 作为后起之秀的前端mvc框架,他于传统的前端框架都不同,我们再也不需要在html中嵌入脚本来操作对象了.它抽象出了数据模型,控制器及视图. 成功解耦了应用逻辑,数据模型,视图 ...

  9. angular开发中的两大问题

    一.在我们的angular开发中,会请求数据但轮播图等...在请求过数据后他的事件和方法将不再执行: 看我们的解决方案一: app.controller("text",functi ...

随机推荐

  1. redis基本类型以及优点特性

    1.什么是redis? redis是一个基于内存的高性能key-value数据库 2.redis基本数据类型及应用场景  支持多种数据类型: string(字符串)   String数据结构是简单的k ...

  2. 『取巧』VS2015试用期过后 继续试用

    背景: 个人电脑 安装的 VS2015 Community 社区版. 一直用得挺好,都忘了要登录. 直到近来,30天试用期过 —— VS弹窗:要登录用户名.密码 才能继续使用. 但是,输入了无数次 邮 ...

  3. C#编写扫雷游戏

    翻看了下以前大学学习的一些小项目,突然发现有个项目比较有意思,觉得有必要把它分享出来.当然现在看来,里面有很多的不足之处,但因博主现在已经工作,没有时间再去优化.这个项目就是利用C#编写一个Windo ...

  4. json转js对象方法,JS对象转JSON方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. 你可能不知道的 docker 命令的奇淫怪巧

    你可能不知道的 docker 命令的奇淫怪巧 Intro 介绍并收录一些可能会用到的一些简单实用却很少有人用的 docker 命令 dangling images build 自己的 docker 镜 ...

  6. Cocos Creator—最佳构建部署实践

    这篇文章主要是我们团队在使用Cocos Creator过程中的一些关于部署方面的实践总结,标题党了一回,严格来说,应该是<快看漫画游戏研发团队使用Cocos Creator构建部署最佳实践> ...

  7. Spring的历史及哲学

    Spring的历史和哲学 1.Spring 历史 时间回到2002年,当时正是 Java EE 和 EJB 大行其道的时候,很多知名公司都是采用此技术方案进行项目开发.这时候有一个美国的小伙子认为 E ...

  8. for in 使用

    // JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写. var json = { "id": 1, "n ...

  9. @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件

    目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...

  10. 鸟哥Linux私房菜基础学习篇学习笔记3

    鸟哥Linux私房菜基础学习篇学习笔记3 第十二章 正则表达式与文件格式化处理: 正则表达式(Regular Expression) 是通过一些特殊字符的排列,用以查找.删除.替换一行或多行文字字符: ...