What's New in Angular v15, by Minko Gechev

running products and developer relations for angular and today I'm going to share what we're actually going to release next week most likely on Wednesday we are going to release angular version 15 which is going to include quite a few features and I would like to share with you most of them today so usually when we talk about angular we discuss three main sub-products we have the framework that is used for development of components directives pipe Services we have dependency injection three opinionated set of Primitives there we often count the router and forms modules in the same category we have also tooling the tooling is the angular CLI and your language service and Dev tools and components with our material design implementation for angular and also the angular cdk component development kit even though we are focused on about three sub products and we're about 25 people on the team we're part of a way larger organization of Google and as we know Google is funnel deriving forces in the web Space by building Chrome we're announcing quickly in machine learning and we're trying to find collaborations across different teams so that we can support developers in developing web applications with confidence so first I'd like to start with a couple of Partnerships that led to development of exciting features and the first one I'll like to talk about is actually related to JavaScript fatigue and how we are working towards having less of it in the younger community foreign so if you look on GitHub you're going to see that we have quite a few checks as part of our CI but 26 to 28 checks we're checking from everything from cold size regressions to like units tests end-to-end tests and way more there is a really good quote by dixtra seeing that program testing can be very effective way to show the presence of bugs but it is hopelessly inadequate for showing their absence and that's very true even if we have a hundred percent test coverage we might not be able to test all different edge cases of different variations let's say of states and like cult execution like program execution to find some bugs lucky to know the way we develop angular supports us to test way more use cases than what is covered in our tests we developed the framework on GitHub and it is used inside of Google Google uses something called a mono report where we host like literally billions of lines with code and there are a couple of thousands of clients there are a couple of thousands of applications actually that are developed that are dependent on angular some of them are a couple thousands of lines of code some of them are like 14 15 million lines of code for instance the Google Cloud Council every time when we push codes to GitHub we synchronize it with the internal version of angular within the model Ripple and we run the test for all the affected applications so you can see this check right here this helps us to test with way more different use cases than we have even thought about and guarantees high level of stability however in order to ship sometimes changes we have to implement automated cold migrations so that we can move from a deprecated API to a newer version this is what we integrated as part of our NG update experience so just next week make sure you take advantage of NG update to migrate to angular version 15. so this is on infrastructural level how Google is generally supporting the development of angular now I would like to focus on a couple of Partnerships where we developed features that enable us to make the angular developer experience better or improve the applications the performance of the applications that you're developing with the framework the first one that I would like to talk about is the partnership with chrome you know what Chrome has the goal to make the web platform successful and they are doing that by enabling developers to build high quality applications to provide good user experience for the end users as part of this initiative they developed a set of user-centric metrics called core red virals with current vitals we put a number on the user experience that users face by interacting with an application one of the core initiatives in Chrome is called Aurora Aurora is supporting web Frameworks angular including next.js next and others in order to deliver better core web viral metrics we have been cooperating with Aurora for a bit and some of the improvements that we did in the framework so far together is around critical resource inlining for instance in lining of critical CSS and also fonts we'll be ramping up our partnership in 2023 on another level though we'll be investing further in performance in our server-side rendering pipeline but something that is going to be primarily part of the version 15 release is our image directive that is optimized for core web vitals I'm sure you have a lot of images in your applications and in order to apply the image directive to all of them because of the angular's templating system you don't need to do too many changes you don't have to import any components or directives from other packages you just need to import your directive once and apply it to your app module from there you can opt in into using it for your images all you need to do is just update the SRC attribute attributes to NG SRC and the image directive is already going to start proposing improvements for instance if you haven't specified Dimensions it's going to suggest that you may want to specify them to reduce cumulative layout shift regressions it is going to propose you to add pre-connects and many other optimizations one of the partners of angular using the image directive observes already about 75 Improvement in their largest contentful paint by using the image directive and in version 15 we're going to make it stable we're also adding two more features in the stable release we're going to automatically generate SRC set so that you can require appropriately sized images to reduce the download size and well specifying width and height is not always what we love to do and sometimes we can't even do it the size of an image depends on the parent container for example that is why we're experimenting with a Fillmore teacher that allows your image to stretch based on the size of your parent container and from there still we guarantee that you're not regressing in terms of cumulative Cloud shift and other core values metrics I mentioned server-side rendering well the the improvements that we're going to do in server-side rendering in 2023 are primarily related to updating our destructive hydration algorithm to a proper hydration where we'll be reusing the Dom structure that is built by the server rather than re-rendering from scratch however we also see that the hydration or the client to server transitions in front-end Frameworks they're evolving really fast in Google we have been using the concept of resume Mobility for example for close to 10 years now and would like to experiment this in angular as well because we see that with Frameworks such as quick it is getting traction externally as well we see partial hydration getting traction too and would like to see what will be the evolution of all these Solutions in the JavaScript community and pick the best one that fits the angular uh angular goals and Design so in 2023 we're probably going to come up with a more advanced hydration strategy that we're going to share with the community but you should be definitely expecting non-destructive hydration first Paul also mentions use build well we're doing some experiments with use build now when you run NG built in anywhere we're going to use webpack we're going to bundle everything together pass it in fact we just built and finally to tercer to produce the optimal output in conversations with Avenue from deeds and View and just broader look at the JavaScript Community though we decided to replace this whole complicated build Pipeline with only es built so that we can produce your final output it has its own trade-offs but we observed currently that the speeds of the cold builds is about 57 faster which is I mean a significant Improvement especially if you don't have the opportunities to apply this caching in your CI pipeline in this case esbuilt is going to produce optimal results for you Mento in version 14 projects so in order to give it a try just update your Android or Json and replace the current browser Builder with the browser yes build Builder what is in version 15 is the watch mode so now you'll be able to specify NG build dash dash watch which will allow you to make changes in your application and get incremental incremental builds all right we discuss how angular is kind of like a batteries included or you start with best practices from the beginning and this is still the case however we noticed that in the past we happen to start developing all the tools that you may need as part of your development flow we clearly have the CLI and we have a framework and in here is a good ways to build web applications however we also started building tools for end-to-end testing for unit testing such as protractor and Karma we built linters princess I built the linter before I enjoying Google it and it ended up being part of the anger CLI colonizer now we would really not want to be in the business of testing or static analysis when we don't have to be we're good in delivering tools for building web applications so that's what we want to focus on that's why we're going through a new strategy where we would like to meet developers where they are well we still encourage you to follow best practices with NG test and NG e2e for end-to-end tests would like to enable you to pick the tools that you want for instance you're now able to use Cyprus night watch or Webdriver i o and running end-to-end tests next year we will be investing to do the same for NG test so we were working with testing vendors to select the best tools for the job and part of the reason why we decided to go this way is because of our developer satisfaction survey which we're really grateful to all Developers for engaging with it we have about 20 to 25 000 responses and to my knowledge this is the the biggest front-end survey out there which allows us to gather a lot of very useful insights looking at the developer survey over the past few years we noticed that debugging is a pretty challenging topic for most developers so we decided to implement some improvements there looking at the open-ended answers further we saw that people struggle with error messages and we did some improvements in error messages Revisited all error messages developed guides and also video tutorials so that you know how to fix the most common errors we also work on change detection improvements and now we will be exploring more dependency injection debugging tooling with change detection we can already use angular Dev tools so you just install the extension go to Chrome Dev tools open the angular tab start profiling and you'll be able to preview the individual change detection Cycles with dependency injection though we would like to allow you to preview the components dependencies in your application we'd like to enable you to preview what are the dependencies of your components dependencies and where all these dependencies are coming from so in a developer preview you will be able to take advantage of this functionality we expanded the functionality of angular Dev Tools in a way where we can preview the dependencies of our components and where they are coming from and also provide you a more holistic view of your entire dependency injection hierarchy where you can preview individual injectors their relationship between another one another and the provider is declared inside of them as I mentioned this in a developer preview but you can already give it a try by heading to the link at the bottom right of the slide all right so this is available as an experimental feature let me share something with you that we shipped that we're going to ship actually next week as part of angular version 15. there is a lot of confusion around error messages right and even though we made some some improvements on the error messages that was just part of the story they're part of a bigger story called stack traces and stack traces when it comes down to web Frameworks they have not been too great over the past I mean forever so we got in touch with chrome Dev tools and we wanted to come up with solutions that would allow us to improve stack traces for angular but that will be also applicable for other Technologies out there for other front-end Frameworks so we pretty much wanted to improve stack traces for everyone let me show you what we did and the before and after this is a very simple in your component where we just have a submit button with like a submit method here async submit method we set loading flag to True Center request and sets the loading flag to false currently if you get an error in this component your stack Trace is going to look like something like this how do you even understand what happened in your application you just see a single core frame coming from the app component and everything else is coming from either zone.js the angular runtime or rxjs so we did a few iterations first of all we change the angular CLI to update Source maps of scripts coming from node modules and instrument Chrome Dev tools to ignore core frames coming from node modules to make the stack Trace relevant after that Chrome devtools developed a new API in partnership with us called the async stack tagging API that allows us to stitch different asynchronous stack traces for example from micro or macro tasks together into a more complete overview of what is going on in your application for instance you can see that the user pressed a button here associated with The Listener after that we call submit we call the request called Fetch and finally something happened in our app component and finally we will be collaborating in the future with the typescript team to improve stack traces further by changing Source maps for generated calls that is coming from templates so that stack traces are also friendly this is already a significant Improvement having a readable stack Trace but what I love the best about this feature is that it works out of the box with chrome Dev tools so when you're stepping into a function you're not going to go into Zone JS or rxjs or in yours runtime at all this is going to be available next week in version 58 so make sure you run NG updates another partnership that allowed us to ship improvements in the components part of angular is with the material design team material they are developing the specification for material design and also maintaining a set of Primitives that implements the specification so for a while we have been building our own components and material have been having there own Primitives and we had to try to keep up with those changes in their styles with our MDC web effort we would like to reuse the Styles coming from Material design so we have to adjust the structure the Dom structure of our components to match the selectors of MDC this took us some time as you can imagine but in version 15 this is now stable so you'll be able to use the material design components based on MDC Primitives in order to update and take advantage of this feature you just need to go to your application updates to version 15 and run the following migration just NG generates angular material MDC migration if you're depending on mg deep to specify Styles and override styles of material keep in mind that this may break your overrides and also if you're using tests if you're writing tests make sure you use the angular test harnesses since the Dom structure of our component has changed another feature in version 15 is the range input of and your material this has been the fourth more request most requested feature in the angular components repositorians well it's going to be part of the release next week now I would like to spend some more time talking about more fundamental changes that we're planning and working on in angular and some of them are they are going to land next week in version 50. we are aware that anywhere sometimes could be overwhelming for beginners so we have been revisiting the individual Concepts one by one and trying to figure out whether they're essential for the framework or not I'll recommend you to check this talk by Alex and Jeremy from ngcomp which should be on YouTube anytime now but in general we agree that core for angular are best practices we would like to enable people to scale their applications you can start with the hobby project and you should be able to incrementally adopt best practices so that you can scale your application to like hundreds of thousands of lines of code also we would like to provide the tools you need to build high quality apps that's why we're partnering with Cyprus and with folks from the community on tools for static analysis and end-to-end testing stability and security are also critical and also the community so we were thinking our engine modules really angular are they critical are they critical part of anywhere I have a personal story with NG models so I in fact wrote a book about angular before I joined Google and the Publishing House said let's publish the book right now it's angular version 2 rc4 so let's just publish your book so it is we released it before and you're stable and anger is already on RC so nothing should break really so I said sure yeah let's do that and well and you're broke the next RC we introduced NG modules and my book got out dated about like a couple of days after we released it so one of the first things I did when I joined the team was to make engine modules optional and back then we were rewriting angular with Ivy as you can imagine well we couldn't merge the score requires that easily but finally in version 15 we made them optional through the new Standalone component apis for Standalone directives and pipes as well pretty much that's of 30 seconds overview of how stem1 components work rather than having to have an NG module to declare what directors pipes and components should be available in the context of your template you specify them in an Imports array that is part of the component metadata this feature enabled a lot of other features for example the currently the most popular feature requests in the angular framework repository is the ability to add directives to host elements in components we were only able to ship this feature because of the new Standalone directives API which makes directives self-contained let me show you what this feature is and how we actually made it in my opinion way more powerful compared to the original request we kind of introduced a new paradigm for code reuse in component models so here is the angular matte menu which has a selector matte menu so we're using it in the template as well with its element selector elements that is matching the selector of map menu what we would like to do is enhance matte menu by adding directives to the post element to the already rendered component there is no easy way to do that some people were resolving this by using inheritance sometimes inheritance is not a bad idea in this case map menu really extends cdk menu and this makes sense it is a proper is a relationship so it's really math menu is a more specific implementation of the cdk menu however if you would like to add cast color directive you'd have to use multiple inheritance and while typescript doesn't support us probably for the better what we did was to come up with a new kind of Paradigm for cold reviews that is kind of a mixture between inheritance and traits or uh make sense where you can specify the directives that you're using within your component metadata and compile time will be able to select the proper inputs from each one of your directives so that you can use in your map menu here only the inputs that actually makes sense in the context of your component this is already available in our RCS and it will be stable in version 15 next week Standalone components also allowed us to make improvements in the router as well probably you know if you have to declare a route right now you often need the routing module and it's just a lot of boiler play that were so unnecessary most Standalone components enabled us to do now or optional NG modules is just declare your routes as this simple array where you have your path lot children which is for lazy loaded module and you just return the route from this lazy loaded module you can make this even simpler if you have a default export the laser audit module is just an array of components of for our declarations excuse me where you're rendering the lazy component and the way you Stitch everything together is in the bootstrap application call where you provide the providers would provide router where you provide the routes we provide router specifying as first argument the route and that's it this is going to be also available in version 15 next week but on other improvements in the router that I'm even more excited about is around guards and resolvers this is a traditional way to define a guard which defines whether the user of your application will be able to open in this case the user user ID page this is by adding this injectable locked in guard where we're injecting the login service and in can activate we're checking whether user is logged on or not with version 15 we're introducing functional guards that use the new inject function for dependence injection which allows us to make the raw declaration the Declaration way simpler here you just need to inject the login service and check whether your user is logged in and that's all as I mentioned at the beginning of the presentation now we're looking into is zone.js angular luin is we have zone.js in order to enable people to develop to be productive with angular of course we don't want to break existing applications so Zone JS is going to continue existing but what we can do and what we can add on top of that so that we can speed up angular since angular change station is really fast just as long as you're sometimes involves it more frequently than required and also to make it more local so revisiting change detection we're looking into what actually triggers change detection currently all your synchronous tasks pretty much anything that any at any moment when we assume that something might have changed in your app we're running change detection over the entire component tree this is a little bit redundant we're also revisiting how do we detect or changes are we going to run in the entire change station in the entire component subtree component tree or or only in a couple of components as I mentioned the actual change detection is fast we are compiling templates to effective to very fast JavaScript instructions but the scope of the change detection has been sub-optimal for sure Pago and Alex from my team they have been doing experiments and one of the experiments that puggle did for instance is using signals from preact in an angular application so this just this doesn't mean that we're gonna go with preact signals they're great they might just be not fitting the angular's uh might not be the ideal fit for angular itself but this is something that we're just exploring the space of uh productivity with signals and uh variety of different ways to trigger change detection and perform the tech for changes in components uh components that are part of your component tree rather than the entire componentry globally other questions that we have been looking into are template singular can we do something to simplify the angular component declaration our classes angular should we always use classes for Declaration of angular components these are questions that we haven't answered to ourselves just yet and who will really value the opinion of all the angular developers out there or pretty much all the participants in JavaScript community so that we can decide where we should head in 2024 if you're interested in following further what is going on in the angular world I would recommend you to check our roadmap ads and your IO slash guide roadmap we're updating it about twice a year or so and it is up to date since as of November 5th also we are publishing a lot of resources on YouTube and Twitter so if you want to stay up to date with the latest advancements and individual features make sure you check our social channels that's mostly what I had for you today as a recap I just want to reiterate on the main focus that anger has we really want to enable developers to be on the performance path by default this is the reason for us looking into improving the server-side rendering experience and the reactivity model this also has an impact on the developer experience which is core part of our priorities as well and also at the same time we would like to meet developers where they are and Leverage The tooling ecosystem that's all I had for you today as part of this presentation and would love to answer the questions you have for me [Music]

Channel: JetBrains

Views: 27,046

Keywords: JetBrains, software development, developer tools, programming, developer

Id: -n0WhqabSmc

Length: 28min 59sec (1739 seconds)

Published: Tue Nov 15 2022