未加星标

Angular 7 highlights improvements and gotchas

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

Google recently announced its new Angular 7, which has been noted as a major release spanning the entire platform, including the core framework, Angular Material, and the CLI with synchronized major versions. These benefits along with more, such as CDK virtual scrolling capabilities anddrag & drop feature, have developers excited to dive in. Carl Bergenhem, a Product Manager at Progress, digs deeper into the highlights and impacts of the update.

ADM:What are some of the highlights of the Angular 7 release?

Bergenhem:The Angular 7 release is actually spread between the Angular core framework, the Angular CLI,Angular Material, and the Angular CDK which is quite the broad range of updates! One of the biggest changes is the new CLI which now has a helpful guide to walk through creating applications. When typing in `ng new` to create a new application a developer will be guided through a series of prompts to decide the name of the project, if the project is using Sass, Less, or plain CSS, and a couple of other things to ensure that any new project is set up for success out of the gate. Speaking of the CLI, with Angular 7 there is now the concept of “Bundle Budgets” which will help with reducing the average bundle size of Angular applications. While it’s not an underlying improvement to how an application is bundled, it will throw errors when your bundle is over a certain size, and a clear warning for smaller packages to help remind everyone to be mindful of just how big their Angular applications are.Angular Material, the UI toolkit that Angular offers, has updated its homepage to help with design guidance, developing components, and overall tooling around creating better user experiences. It also has some updates to accessibility within some of its components.Extending things on the UI front, the Angular CDK now offers virtual scrolling capabilities (great for high-performance scenarios) along with a drag and drop framework.

ADM:Are there any “gotchas” that developers need to watch out for when upgrading to Angular 7?

Bergenhem:Honestly, the upgrade to Angular 7 fromAngular 6 looks to be pretty seamless. A lot of the improvements come around upgrading the Angular CLI, which also didn’t have any big breaking changes introduced. With big changes to rendering or project structure etc., there should only be benefits when upgrading. Of course, if you’re on lower versions of Angular, it is recommended to look at the changes that have happened in Angular 6 and 5 (depending on how far back you are) to prepare for any big items that may have changed.The biggest thing to keep an eye on will probably be the warning settings that come out from the new Bundle Budgets feature of the CLI, which will provide a warning or an error depending on how big your application bundle is. While not a breaking change, it might be a bit jarring to see this message the first time you go ahead and build your application.

ADM:Were there any big improvements around performance for Angular 7?

Bergenhem:While there aren’t necessarily any big performance improvements around rendering or anything in the underlying engine of Angular, there was at least one big improvement when it comes to your application’s performance: Bundle Budgets.This new feature of the Angular CLI is specifically set up to warn people about the size of their bundle, or specifically: how muchjavascript they’re forcing their users to download. Performance gains from the framework are of course important, but if we send down several megabytes of JS and other files, the end-user will not perceive our applications to be fast and performant. The Bundle Budget feature will warn you if your bundle is over 2MB and will even give you an error if it is above 5MB. This range can, of course, be modified in the `angular.json` configuration file, but from an out-of-the-box perspective, this is a good way to ensure that people are paying attention to just how big their Angular applications actually are.

ADM:What is the Angular CDK and what does version 7 bring to the table for the CDK?

Bergenhem:The Angular Component Dev Kit (CDK) is a toolkit specifically built to help developers with their user experience within Angular applications. While it can somewhat be seen as a UI component library, it’s a bit more foundational than this as it goes down to provide fundamental aspects of UI that developers can use to build their own UI components on top of. For Angular 7 the CDK now has the ability for virtual scrolling to be built-in to the Scrolling Module of the CDK. Virtualization is done by loading and unloading DOM elements based on current position within a list of items. Rendered items can be recycled to ensure that only the content is updated rather than re-painting entire elements. This is great in scenarios of long lists that you want your users to be able to scroll through without a performance impact. Additionally, the CDK now contains a drag and drop framework to help developers create interfaces that rely on grabbing an HTML element and dragging from one area of the application to the next. This also has built-in support to render the HTML element that you’re dragging, along with framework items to help move an item from one list to the next. Overall some quality of life improvements to add some more interactivity to yourAngular applications.

ADM:What specifically was improved for accessibility in Angular 7?

Bergenhem:The improvements in accessibility mainly come from updates to Angular Material, the UI component toolkit that the Angular team offers. With Angular 7 the `mat-form-field` component can now use anative HTML `select` element to help improve accessibility, performance, and usability. Previously this was handled with `mat-select,` a dropdown element to help select items that were custom made for Angular Material. Now developers can choose between the native `select` element and have it look nice and styled and have improving accessibility.

ADM:Is there any news around the new rendered, Angular Ivy?

Bergenhem:So, Angular Ivy was initially talked about at ng-conf 2018 during the first keynote. It is certainly understandable that people are excited as Ivy is a new rendering pipeline and view engine that would take over how applications are rendered in the browser . This is a pretty fundamental part of web applications built with Angular, so developers are very eager to see this be delivered. Well, Angular 7 did not end up being the version that deployed with Ivy, but it still seems to be trucking along! We don’t know when Ivy will officially be released, but we’re certainly looking forward to getting more news around this un the future.

ADM:There were some rumors about AI and a bitcoin miner in Angular. What was that all about?

Bergenhem:This came from an April Fools joke that got out of hand. These rumors appeared before Angular 6 was even released, but it was just that: a joke. There is nothing to be concerned around accidentally adding abitcoin miner to your application, or a rogue AI taking over your state and storage management in your Angular applications.

ADM:What does the update to Angular 7 mean for tools built on Angular? Bergenhem:From the look of things most tools built with Angular mostly have to go through and update their peer dependencies and ensure that they’re not throwing out errors requiring older versions of Angular. If any library is built on top of the CDK or Angular Material, there are some changes that would need to be made in order to ensure that they take advantage of the new accessibility changes and new components introduced in the CDK of course. This is a pretty general statement though as I’m sure there are tools that focus on very specific aspects of Angular that may need some tweak

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:Angular 7 highlights improvements and gotchas
本站链接:https://www.codesec.net/view/611768.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(12)