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

本文由葡萄城翻译并发布

---

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. Java基础面试知识点总结

    微信公众号[程序员江湖] 作者黄小斜,斜杠青年,某985硕士,阿里 Java 研发工程师,于 2018 年秋招拿到 BAT 头条.网易.滴滴等 8 个大厂 offer,目前致力于分享这几年的学习经验. ...

  2. 产品管理开发之Git工作流和分支规范推荐

    前言 无论是开源项目还是内部项目,使用Git都是大势所趋,尤其是在产品管理这块,使用Git大大提高了开发效率和产品的交付频率.本篇,针对Git的工作流和分支使用,进行了一些推荐. 目录 1     产 ...

  3. MySQL8.0新特性——支持原子DDL语句

    MySQL 8.0开始支持原子数据定义语言(DDL)语句.此功能称为原子DDL.原子DDL语句将与DDL操作关联的数据字典更新,存储引擎操作和二进制日志写入组合到单个原子事务中.即使服务器在操作期间暂 ...

  4. android---动画入门(一)

    android 动画分为两类,View Animation(视图动画)和property Animation(属性动画),View Animation(视图动画)包含了Tween Animation和 ...

  5. Accesss数据库的DBhelper类(带分页)

    首先配置web.config,使配置文件连接access数据库: <connectionStrings> <add name="DBConnection" con ...

  6. Windows内置安全主体

    转自:https://blog.csdn.net/xcntime/article/details/51746148 导读:对于Windows内置安全主体特别需要注意的是:你无法创建.重命名和删除它们, ...

  7. 分布式之 BASE理论

    ------------------------------珍惜眼前的学习机会,当你现在有机会学习各种经验时,一定要倍加珍惜.靠混日子是混不了一辈子的,许多过程都是不能省略的,至少学会这些经验可以让你 ...

  8. Struts自动装配和四种放入Session作用域的方式

    ---恢复内容开始--- Struts三种自动装配的方式 第一种在Action类中定义和表单name相同的成员变量. 首先你定义一个Action类 页面: 第二种把成员变量提取到一个类中,  在Act ...

  9. 第3章 简单的C程序设计——顺序程序设计

    3.1 顺序程序设计举例 例:有人用温度计测量出用华氏法表示的温度(如64F),今要求把它转换为一摄氏法表示的温度(如17.8C) 解题思路:问题的关键在于找到两者的转换公式.根据物理学知识,公式为c ...

  10. 每日分享!~ JavaScript中面试基础--1,数组检测的方式 2.传统事件绑定和W3C标准绑定事件的区别~

    javaScript 那些方式中检测数据类型 typeof typeof isNaN // 结果是function 检测数组的几种方式 instanceof arr instanceof Array( ...