Video details

Maxim Salnikov - The status of Angular | AngularUP 2021


The status of Angular
What is the current status of the Angular framework? What new features are there in the latest version and on the roadmap? Let's have a bird-eye view of the framework to make informed technical decisions, to make sure that we use the latest best practices, and to look into the future of our Angular projects with confidence. Maxim Salnikov -
Developer Engagement Lead, Microsoft Maxim Salnikov is an Oslo-based cloud and web front-end geek. He builds web applications since the end of the last century and shares his extensive experience with many aspects of the web platform by speaking/training at developer events around the world. To introduce Angular to the developer community, Maxim is running his own technical events including ngVikings conference, Angular Oslo meetup, and ngCommunity gathering.


Yeah, my way from Norway to Israel was a bit more complex than in pre COVID times, but. But I made it some paperwork, some extra organized externals and I'm on the stage. Yes. So let's talk about status of Angular today. My talk will have two parts. First, we'll check what's going on with relationship Angular and Community. How can we help each other? And of course I'll introduce not all the but majority of noticeable updates we have in the very recent version of our favorite framework, Angular. So this will be a second part of my session. But myself, I'm a big fan of the developer communities of the developer conferences. I run meetups and conferences in Norway where I live, maybe some from you where attendees, maybe even speakers at Angie Vikings conference. I have been asked with my friends. Yeah, I see some hands ng Vikings who've been there. Yeah, good. We took break for Covet, but yeah, we have plans to run next angle. I can somewhere, somewhere. We travel from country to country within Nordic so far. So I'll be super happy to see you there. And the date how to know the date of next NGO conference? Well, the simplest is just to follow my Twitter webmax are you? I tweet mainly about web platform, Angular, progressive web apps, and a bit about Cloud. And by the way, I stream these slides directly from Network and I will share the link to this particular slide deck which contains lots of useful links right after my session and I will tweet about this. So please let's stay connected on Twitter. This is very good idea. About my Angular history, I realized that I use Angular Angular JS by those years since one, one, four maybe it happened around eight or nine years ago when I first tried Angular in action. Okay, to motivate you a bit, some numbers, some stats about handler. I'm not big fan of going through these comparisons of the frameworks, which is popular, which is not. But still, sometimes it's good to, let's say make this sanity check and to go outside of our bubble to check what's going on. Like in outer world, there is quite well known survey called State of JS which were around 23,000 developers participated in 2020. So hopefully data for 2021 is coming soon. So what do we see here? Angular is second framework by current usage. That's not bad at all, I'd say. And another criteria called interest. It's folks who do not use this particular technology but interested in learning this and what we see here. Majority of these big frameworks have some drop in the numbers. I think this is connected with the fact that we have something cool and new in web front end every single week. And you know, there is a joke like which framework I'm going to use now, of course, framework of the day. So you see then it's not a big surprise. Here we have more, let's say data driven or real data driven. Like number of questions on Stack or Flow. And if it's too small, this picture, I can say that Angular is the Orange or the dark yellow line. It's around quarter of minimum in absolute numbers. And you see that both Angular and you got to kind of Plateau of similar number of questions per month. Yeah, this is questions per month. And for some reason at the very end of react there is a serious drop, whatever that means. I don't know. And also, Angular is famous for its officially documentated most dramatic surge of the questions on Stack or Flow. You see, this is a real cliff. And of course, that happened when Angular Two was introduced. Same Stack or Flow has its own service. It's so popular to have service these days. Angular is number four in most wanted frameworks. And again, folks who do not use this technology but want to learn about this want to start using this. And it's quite popular among professional developers. But you see line number two, Jquery still has super strong position. So Jquery is here to stay. Maybe. I don't know if there are Jquery conference in the world. If not, this is business idea for you folks, Angular and Community, Angular and all of us. Let's scroll through this synergy, what do we give to each other? So first, what Angular gift to Community, obviously Framework itself, right? It's awesome. It's amazing. It's well supported and with quite open license, right. We can use it both for commercial and non commercial projects. And numbers of download of the core components on NPM are quite exciting. It went from 1.4 million to well over 2 million in around one and a half years. And this is, by the way, about weekly download. And on GitHub you'll find over 2 million projects based on Angular. By the way, when I delivered similar session for Angular Twelve release this summer, a number of projects was 1.8 million. So it's growing with quite good pace. And of course, still, these are all public numbers and it's really top of the iceberg. We know that Angler is heavily used in enterprise and they have their own repos and all these registries of the package. So of course we do not see all the numbers which are way higher than represented. And is this real? Synergy is a real Corporation, so Angler gives us a lot. What do we give to Angler and how can we make sure that this relationship is somehow sustainable? So folks who build Angular will not say one day we are enough. We don't see support from your site. Maybe we are good to somehow close the project. No worries. How can we contribute feedback in very different forms? Of course, it could be very explicit one like comments like issues on GitHub repo and implicit ones like your articles, your videos, you create about Angler and even your tweets valuable source of the feedback core development. And in a few slides forward you will see that some important parts of Angular are developed by community contributors. Not Core, Angular team, not Googlers, but just folks who want to have this or that feature. Lots of examples with that. And of course Echo system. We build libraries, we build packages for other folks to use, and I believe including the Angular team itself, including Google itself. By the way, Google have their core project based on Angular related to Cloud, related to their Advertisement network. So yeah, it's quite well integrated into this software ecosystem. So how to start contributing? Like very obvious very first steps. For those of you who maybe consider this but don't know how to start, super simplest option is contribute to the documentation and you don't even need to write particular pieces of the documentation. You can review the documentation and there is awesome content contributor guide on Angular. Io. And like every page of the accommodation website, it has this pencil icon where you can click and provide your own review. In terms of for example, you can just change the date when it was reviewed. So Angular team tries to have every single page of documentation reviewed at least every half a year or with every major release. So you just read the documentation. If that looks good for you. Nothing obsolete, nothing outdated, nothing wrong. You just changed the date and saying yeah, it looks good, I reviewed this, that's fine. Also, another simple way to contribute is the same documentation page. They have meta field with keywords for search, of course, internal search system for this docs section. Try to scan all words in the documentation, but you can help with providing explicit search keywords. Maybe some keywords are not even mentioned in the documentation itself or somehow implicitly mentioned. So yes, please provide this or new feature. We all want to have something more added to Angular, right? So submitting your feature request could be a good help for Angular team. Of course, before submission, please go through Contributors guide to understand how to create not something easy, but proper submission. Some discipline required and your submission will not be ignored. Handler few versions ago, maybe a few years ago, was somehow blamed for ignoring thousands of issues created on their reps. Not anymore. Team did nice homework, learned the lesson, and in around two years they went from thousands open issues to hundreds. Of course, you can imagine it's quite a tremendous job on going through thousands of submissions and they introduced quite formal, which is good in that sense way to go through these submissions. And actually they adopted this schema from my colleagues who build vs. Code editor. It's just a battle tested, well recommended scheme for large open source projects. How to deal with these thousands of issues you receive last month or weekly. So how does it work? You submit feature request and someone from Envelope team marks this is an issue or feature request. This is manual work. Of course. Then your comment, your issue is staying for 60 days if it's marked like a feature request and if it gathers enough thumbs up from the Dev community. So now it's 20. But maybe this number will tune somehow. It goes next steps. If not, this automatically closed. And then what happens next on this popular feature request? Angular team does next chunk of their work and try to understand does it align with the general direction of Angular development? Because of course there are many feature requests which are completely out of scope in that sense and unfortunately most likely they will not be implemented. But if yes, it's marked as prioritized and sooner or later you will see this in production and you can help with implementing these features. We are closing to the next part of our presentation about new versions. So these are just a few examples of what folks from Community contributed to the new version. We'll go through some of them in a bit more details, but this is fact. You can take part in core development of that framework. After all, what's new in the latest version of Angler that was released four or five days ago? So this light deck is absolutely fresh and new. This part of it. So who can tell me the version of Liza Stungler? Yes, you are right, 13. I know that in many cultures this number is not very good, right? So we'll see how that works for Angular. At least what I see from the new features looks very promising. Okay. Like in every release, like in every major release of Endgame, there are a bunch of sections where we have updates and version 13 is not an exception. So maybe let's start with something that can break your application because it definitely introduces breaking change. And I'm talking about removals, removals of some features, removals of some functionality in version 13. Why do we need to remove some pieces of this or that framework or library from time to time? Well, it's really inevitable we have to do this because we really want to to have better developer experience. And in that sense we are talking about some simpler approach to how we build applications to avoid this hassle with thinking about some outdated stuff. And for the framework itself, it's super important to keep up with web standards. Web standards are evolving, web is evolving, and we definitely don't want to have Angular scale somehow on this particular level of the development. So I'm talking about concrete removals. And of course false removal is not happening like Anxious expected, right? According the Schema Angular team adopted and I believe it's very general for many similar projects. First, these removals are part of Duplications and on my previous session about Angler Twelve Release, these two pieces I want to introduce now were duplicated. Now they are removed and we can start with removal of Internet Explorer Eleven support. Finally, what does it mean for Angular developers and Angular Team and Angular Framework? We can now use all the latest and greatest features of CSS variables like web animations and tons of other cool stuff. What's even more important, we are now on this evergreen road, right? So we can adopt new features without too much worrying about that. And of course for Framework, framework became lighter. That means faster. No more polyfills, no more differential Loading. For Ie Eleven, it directly improves user experience. And second, removal is View Engine. Maybe it's not super that exciting, right? But still it's a serious step. And maybe starting from this release we will start to forget Name IV because why to call render Engine. Somehow we put just a default render, right? Just default fast rendering engine for Angler. This change was also very well, let's say prepared lots of preparations. Still some parts of envelope compatibility compiler makes sense for library authors. But yeah, framework became lighter, faster and better. Lots of improvements for us, for developers, for better developer experience. And this is the list. So about APIs like better is not very strong word, right? So we'll go a bit more detailed on these API changes for Angular Service worker, for Angular Components and for Forms documentation. Very important part. Just a reminder that you can take active part in reviewing and making documentation better. Very crucial pieces of applications and how we build applications are now better documented about internationalization and localization. By the way, this tag handler dollar sign is actually in Angular for over a year. Of course this is very important part of Ivy as render, but there was no documentation about this, or at least nice documentation. Now it's part of official docs. We have bumped up of the core versions of libraries we actively use as part of our development flow TypeScript RxJS. That means that we can use all the latest and greatest features of this core leads and more automations for us developers to, let's say have better feeling while we build our application. So it's more delightful. The whole process of coding and it directly contributes to performance. Performance is very general work, right? And here I mean exactly coding time when we really build application to experience all these new automations. Please make sure that you have the latest version of Angular Language Service. If you use this as an extension for Vs code, just make sure that it's number 13 and what do you get there? I believe this is the most exciting part when you have optional chaining added automatically for you for these properties that are knowable. Isn't that cool? I think this is just amazing. And this is only one example. And also you have better autocomplete for properties and methods. By the way, this is contribution from Community. It's not delivered to Handler by its core team. Next runtime performance of course. Yes, I already mentioned that framework became lighter because of this quite significant removals of functionality. Eleven new engine and also small detail added. I really love attention to the small details in Angular. Now Adobe fonts are also in line in addition to Google Fonts. Maybe this is a bit niche, but still might be very relevant for parts of their community and build time. It's a serious performance improvement. I will illustrate this by a couple of Next slides, but before how do we update envelope? By the way folks, anybody in the room who already updated to version 13 there? I don't know. A pet project? Yeah, quite a few. So I see at least four hands. Brave people. It all should happen without any, let's say, paying points. Angular team works a lot on streamline in this update process and at update. Angular. Io you will always find the latest instructions. And I bet you've seen this page where you check some check boxes like how complex is your project? And you get set of instructions you recommended to run. If you also use Angular material, you can run this comment as well. And for my blog project, the results are following. So it was version twelve to version 13. Yeah. If that's too small, I can say that the bundle size, like overall application size went from 814 kilobytes to seven. Three. Three. I did nothing. I ran two comments. Isn't that cool? My application became lighter, faster. Great job Angular team, but this is not the end of this story. If we take the same screenshot from version 13 and run the build second time I introduced some small change, it was really small. So the bundle size even remains the same approximation. What changed speed of the bill? That's because Handler introduced so called persistent bill change by default. Now you'll find Angularcashfolder in your project. I believe it was introduced as Optim in the previous version. Now it's by default. Well, some parts of build flow, they produce some artifacts that safely can be, let's say consistently cache. It's a bit controversial, right? Cash and persistent. So it's like different things, but this combination gives nice results. I illustrate this Angular JSON edition. It's for those who do not start a fresh project with Angular 13, but upgrade their previous version. So you just have to add few lines into your Angular configuration file most often. Questions about this persistent cache because it might sound a bit confusing. Should I check this artifact in? No, it's Cash after all. Please keep it only on your local machine. And second question, is this so Longly awaited differential Loading? No, it's different. It's really like caching code of some build artifacts. Okay, forms. Of course, you hardly find any projects from modern framework life without forms in this or that view. And some improvement here. Now we can enable disabled validators on the fly dynamically. And this is also a contribution from the community and stricter types for the new type form control status was introduced. Be very careful. It might introduce small breaking change small. I mean for a very small number of the projects that use, let's say some internal things with the form. It's relatively small update, but I believe this is first step to huge potential update which might happen in one of the next versions about Typed reactive forms. And by the way, this is a link to public discussion about how to build this particular API, because this is something that might change the way we think about forms quite dramatically. And remember fault that to have all these links from the slides, just follow me on Twitter. You'll find all the I'll post a link to this slide deck shortly after I go from this stage. Accessibility improvements. Quite a few also directly related to form controls, right? Of course we have to care about accessibility as developers ourselves, but in a very large extent. Angular team does this for us just by introducing some change which will automatically add to our project right after we update to the next version. So I can name optimized view for optimized styles for high contrast mode, better target sizes for some controls to be more touch friendly, multiple additions related to how we track focus, how we set focus automatically, and lots of corrections updates, additions to area concepts and what's really cool, folks from Angular team, they do this change both in, let's say classical components which we use now and based on MDC which is coming. Maybe the next version based on MDC is material design consoles based on the latest and greatest standards. Now they're experimental in handler, but we'll see where that goes. And many more improvements to APIs and Blur service worker became more ergonomic. Now like instead of listening to observable about updates, you can just get results from the promise. Also, community contribution, simpler creation of dynamic components in Angler. Very well. Streamlined, better APIs with the router. Also there are, I believe quite a few contributions from community to that area. Faster, better isolated tests, and thanks to removal of view engine, we have handler package format, modernized and streamlined. What's next? I here listed my top three features. I personally wait from Angler from Angular team. Maybe some of you also can't wait when this show up in the framework. Stand alone components Mg modules have to go away sooner or later. Anybody agree in the room? And folks, today exactly today is the date when they close RFC request for comments related to this. So again on this version of slide deck, this is a link going straight to the issue when they introduced API for this. And it's huge long thread of the comments from the community. If you have your own strong opinions, today is the last chance. Next I heard rumors about Angler 14 will switch to MDC components. Maybe this would be not visually noticed different, but under the hood, Angular material will be more or less rewritten from scratch again to follow the latest and greatest updates from material design concepts which is evolving by the way. I remember that maybe in 2016 I had technical sessions where I introduced material design components. It was completely different from what we have now and strongly type form. I already told that first small steps are there. To sum up, Angler is here to stay. The collaboration between Angular team Google community is sustainable and it's been win for all the parties. Angler is heavily relied on community on all of us. You are super welcome to send your contributions. I explained multiple ways and version 13. Regardless, this particular number is really awesome. Try to update it today and if you wish to host it somewhere, just consider looking at the cloud offering from Azure. We introduced Azure static web apps this summer so maybe that might be something interesting for you with quite generous free tier on that. Thank you very much.