State of Angular

Key Takeaways

[Music] hi and welcome to google i o we hope that you are enjoying the show so far i'm mark from the angler team and my colleague emma and i are here to tell you all about the state of angular angular is a framework designed to support developers as they build scalable web applications whether it's scaling your product as user demand increases or scaling your teams to meet the growing technical needs angular has been there and will continue to be there for you and your teams our team has been hard at work delivering great features to support developers all over the world building scalable performant applications recently we've completed some major projects that we're very proud of i can't wait to share more so let's get started we rewrote from the ground up angular's runtime and compiler apps are now powered by the better more efficient iv rendering engine ivy offers numerous advantages there's improved type checking and error reporting better debugging smaller bundle sizes and so much more let's dive into some of the enhancements made possible by ivy we wanted to give developers even better integrated tooling when authoring angular code so we introduced the iv powered angular language service plugin for vs code it boosts developer productivity by providing type checking syntax highlighting and error reporting while you're writing code this level of integration was only made possible by the iv compiler and with more than 3.1 million installs we think that it's safe to say that well developers are enjoying it ivy also enabled us to build the angular devtools browser extension giving developers more detailed insights into an angular app at runtime than ever before now developers can get data for individual change detection cycles this provides the type of information required to build and maintain performant production applications while angular devtools is already in a great position we think that we can do more thus the team is working on adding firefox support and debugging dependency injection along with better tooling ivy also makes angular faster and more efficient let me explain when ivy became the only angular compiler at google we saw internal applications reduce resource usage by 90 percent during build times angular apps also saw a reduction of 30 percent in bundle size one of our top goals is to provide an evergreen solution and this was true for ivy as well to accomplish this we migrated the entire ecosystem with automated migrations to ensure that we didn't leave any teams or their products behind this was a challenge that at times felt like we were changing the engine of a car while it was still running now that ivy has landed we can continue to build the future of angular speaking of which let's talk about where angular is going next here on the angular team we've heard lots of feedback from the community and we've been in deep discussions about what's next for angular we believe that in order to serve the most developers we have to create a simpler more frictionless angular for existing developers and those new to the framework we have a pretty good idea where to start and we think that you're really going to like this change meet standalone components a new simpler way to build components in angular building components is a core part of the angular developer experience right now building components requires extra configuration you have to create the component and then ensure that it's imported in the correct ng module this means that developers have to understand multiple concepts before building an application we want to improve this part of the developer experience standalone components are designed to simplify application building and streamline the steps to getting started let's take a moment to investigate the new api in the component typescript class we import the dependencies we need for our component for example other components modules and pipes next we add the standalone property to the component metadata this allows us to bootstrap our component without an ng module we then update the imports property of the component metadata to reference our dependencies now our component is ready to be used in our application working hard to polish this new api to ensure that it can integrate seamlessly with your existing code in a backwards compatible way there's more to the simpler angular story we're also creating an all modern getting started journey for developers new to the framework this new guided path in the documentation will include the most important angular concepts needed for developers to start building new exciting applications we're so thrilled about what's to come and we can't wait for everyone to try it out we're not stopping there with updates to the documentation we're making other changes to the documentation that will help ensure that the content is a resource to light a path forward for your angular journey we're revamping guides api references examples and more angular is an opinionated framework with best practices built in by default we've been proudly serving developer communities with this focus for some time now conformance is all about building in strong defaults and best practices to help developers build wonderful performant applications this next initiative fits right in line with those strong defaults we're actively building support for typed forms and angular templates this is the number one most requested feature and we're close to making it a reality developers will be able to build complex even nested forms in a safe backwards compatible method which supports the incremental migration of your applications what's more is that this feature leverages type checking as a best practice we want to make sure that the adoption of this new feature is smooth for everyone so we're testing it on google's 2500 plus projects let's check out some example code to find out more type forms allow form groups to throw compile time errors based on common problems like undefined properties in this example the cap form group doesn't have a defined property called email now developers can find this error our writing code and not during runtime where users may come across this error causing unexpected behavior we think this is a better experience for everyone involved developers and users alike there are more types of errors that we can surface with typed forms we can count on type checking for existing properties of a form group as well the lives property is a number but the code attempts to call the substring method which is invalid for form types again the best time to find a problem like this is during compile time paired with the typescript language service developers will be treated to error highlighting to help quickly identify the problem just as we've seen type forms highlight potential problems with undefined properties and with type checking we can also expect it to catch errors with missing properties this example demonstrates the issues that arise when a value of a form group is attempted to be set with an object literal that's missing properties defined in the form group's creation one of angular's core strength is its ability to scale your development your teams and your applications just imagine how your experience with angular will improve as these features and more land in the future but this is only a small preview of what's to come emma is going to share even more about angular and angular future with you right now emma you're up thanks mark you're right one of angular's strengths is its ability to scale i'm emma from the angular team let's talk about scaling angular for applications of all sizes for new developers we focus on a simpler angular as a solo developer we want to take care of the hard stuff to support you in quickly building your vision the angular command line interface or cli makes getting started as easy as typing ng new create new components quickly and make use of simplified standalone components or single component angular modules to build fast you provide the idea and will provide native solutions for all the things you don't have time to think about like routing and forms imismycafe.com relies on provided angular material components and built-in accessibility to go viral and provide a virtual cafe experience for over 1.7 million lifetime users for startups and small teams angular establishes best practices the angular language service a built-in code editor tool ensures that developers write consistent code strong typing and tooling allows developers to catch errors prior to deployment as your project starts to scale we provide out-of-the-box solutions for common functionality like internationalization and progressive web apps to reach a more global audience coffee table talks uses angular's built-in best practices and internationalization to grow with their podcast fan base angular is opinionated which means all apps follow a familiar pattern and ecosystem one of the things i love to hear is i can open a project and know exactly what i'm looking at as projects scale we understand that debugging becomes trickier angular dev tools supports debugging and profiling performance to keep your app's life cycle running smoothly and don't forget every pr we merge into angular is tested against all of google's mono repository first ensuring that we deliver backwards compatible features and migration schematics tested against many edge cases as your team grows angular makes it easy to onboard new developers click up uses angular to scale quickly and confidently for over 800 000 teams and millions of users worldwide angular helped this series c company with a four billion dollar valuation meet the global demand for their scalable productivity platform that flexes to the way people want to work as your users scale the framework scales with the increasing complexity of your application we are invested in research and development guides for mono repositories and micro front ends as we partner with large-scale businesses to support their growing teams how can build stay fast even as the team grows and what does improved team autonomy look like at this point we're still discussing but we're happy to be having these conversations and look forward to sharing what we learned from them firebase uses angular at scale with over 1.4 million lines of code all while upholding high code quality with linting and testing while keeping build times low no matter the size of your application we want to provide a path to the latest version of angular the angular cli's ng update command unlocks all that the newest angular has to offer let's take a look at how we prioritize the application updating journey and backward compatibility of angular many new features are no op as they come out of the box to all projects that update or their small developer experience driven featurettes our goal is to deliver these changes with a minimal transition cost update.angular.io maintains a record of our recommendations for how to move your app forward with clear bite size steps so what featurettes are on the horizon we release features as they're ready which means something as revolutionary like standalone components can be in a minor so long as it meets our rigorous testing and breaking change requirements angular wants to enable developers to build for everyone in addition to our set of accessibility tools we offer together with static checks and the component development kit angular's newest version will introduce streamlined management of your app's page title this built-in router feature allows developers to define unique page titles more simply tackling a common accessibility issue in web frameworks extended diagnostics allow code editors to warn developers of common mistakes before you deploy to production this provides an extendable framework for continuing improvements in developer productivity catch when knowledge coalescing is applied to non-nullable values and find when a template has a banana in a box error all within your code editor in addition to the latest rxjs typescript and es2020 angular's newest version introduces standardized arguments parsing to ensure that angular cli is consistent and provides better output this also introduces two new commands ng analytics a better way to control and print analytics settings and ng cache a way to control and print cache information directly from the command line in addition to these featurettes we're continuing to partner on innovation and exploration of the web the team has had the wonderful opportunity to partner with chrome's project aurora to help angular improve user-centric web performance metrics as a result of this partnership angular saw a 110 improvement in their core web vital score this means faster page loads and a better user experience for end users for all angular applications currently angular implements destructive hydration the second part of this year we'll spend time investigating hydration our focus is on further improving the user experience and performance of all applications and utilizing hydration to further innovate in that space we're committed to moving the framework forward while providing a backwards compatible experience we'll keep the community posted on our updates so make sure you follow us on social media and keep an eye on our open requests for comments finally better together is our latest partnership to provide a more complete development experience for angular applications with the power and resources of google cloud firebase tensorflow and bazel interested in what else we're working on our public roadmap means you have a direct vision into our prioritization requests for comment and github discussion are also a great resource for checking the status of current projects excited about everything we just covered us too there's never been a better time to be an angular developer and we're excited about moving the web forward together make sure to follow us on twitter and youtube and head to angular.io to learn more about joining the party thank you [Music] you