在 Angular 8 中,我们可以期待些什么
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
本文由葡萄城翻译并发布
---
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 中,我们可以期待些什么的更多相关文章
- 一个Angular模块中可以声明哪些组件?
一个Angular模块中可以声明哪些组件? (1) controller 控制器 (2) directive 指令 (3) function ...
- Angular JS中的依赖注入
依赖注入DI angularjs中与DI相关有angular.module().angular.injector(). $injector.$provide. DI 容器3要素:服务的注册.依赖关系的 ...
- mybatis 中的稍微复杂些的sql语句
mybatis 中的稍微复杂些的sql语句: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYP ...
- 秒味课堂Angular js笔记------Angular js中的工具方法
Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...
- 在angular 6中使用 less
在angular 6中使用 less 新项目 ng new [appname] --style less 已有的项目 修改 *.css 文件及引用处后缀名为 less并在 angular.json 文 ...
- (网页)Angular.js 中 copy 赋值与 = 赋值 区别
转自st.gg Angular.js 中 copy 赋值与 = 赋值 区别 为什么用 $scope.user = $scope.master; $scope.master 会跟着 $scope.use ...
- angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制
Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $ap ...
- angular.js 中的作用域 数据模型 控制器
1.angular.js 作为后起之秀的前端mvc框架,他于传统的前端框架都不同,我们再也不需要在html中嵌入脚本来操作对象了.它抽象出了数据模型,控制器及视图. 成功解耦了应用逻辑,数据模型,视图 ...
- angular开发中的两大问题
一.在我们的angular开发中,会请求数据但轮播图等...在请求过数据后他的事件和方法将不再执行: 看我们的解决方案一: app.controller("text",functi ...
随机推荐
- Python中的那些“坑”
1.哪个是True,哪个是False? 这里要看三组代码: # 第一组: >>>a=256 >>>b = 256 >>>a is b # 第二组: ...
- spring源码 — 四、MVC
spring mvc是怎么实现的?为什么我们只需要在方法上写一个注解,就可以通过http访问这个接口?下面我们分3部分来解答这两个问题 注意:本文是基于spring4.3.2的 spring mvc整 ...
- 第四节 pandas 数据加载
pandas提供了一些用于将表格型数据读取为DataFrame对象的函数,其中read_csv和read_table这两个使用最多. #导包import pandas as pd from panda ...
- Python中最好用的命令行解析工具:argparse
Python 做为一个脚本语言,可以很方便地写各种工具.当你在服务端要运行一个工具或服务时,输入参数似乎是一种硬需(当然你也可以通过配置文件来实现). 如果要以命令行执行,那你需要解析一个命令行参数解 ...
- 用animation的steps属性制作帧动画
昨天火急火燎地接到一个任务,说是要做一个掷骰子的游戏,关于掷骰子期间的过渡动画,我本来是想用css 3d制作一个立体的骰子,然后叫UI给6张平面图贴上去.再用translate3d来操作.然而UI考虑 ...
- 去除inline-block元素间的间距
一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或者空格隔开的情况下会有间距,这是因为浏览器在解析时,会将换行等读取成一个空格导致. 二.移出空格的方法 ① 我们可以去掉元 ...
- MonacoEditor 主动触发代码提示功能
MonacoEditor是微软提供的代码编辑器 vscode即是使用它作为编辑器. 它的开发语言是ts,可以嵌入到浏览器中. 代码提示或者说代码补全功能是我们经常需要定制的部分. 目前它提供的快捷键是 ...
- SCSS & SASS Color 颜色函数用法
最近做一个没有设计师参与的项目,发现 scss 内置的颜色函数还挺好用.记录分享下 rgba() 能省掉手工转换 hex 到 rgb 格式的工作,如以下 SCSS 代码 $linkColor: #20 ...
- Jvm启动,关闭及对应钩子
很多时候应用服务启动或关闭会做一些预加载(比如缓存,定时任务启动等)或收尾处理工作(比如程序失败记录等) 1. 首先看下Spring框架服务启动加载操作实现,直接上代码 继承实现接口Applicati ...
- JS定义函数的2种方式以及区别简述(为什么推荐第二种方式)
无意中看到了阮一峰大神多年前的一篇博客: 12种不宜使用的Javascript语法 看到第9条的时候受到了启发,感觉之前没怎么理解清楚的一些问题好像突然就清晰了,如下图 可能光这样看,有些小伙 ...