Angular Seattle World Tour

hey everyone and welcome to angular seattle and angular world tour uh i know it's been a while normally we got a monthly meetup going um and we're gonna try to improve that in the future so we get back to a monthly schedule but if you want to have it do talk please contact us we always need more speaker uh tonight we got three very established speaker first we got emma from the angler team and second we got tracy from the rxts core team and the last talk will be from gia and he's also an anglo-core contributor i know we have a lot to talk about tonight so let's kick it off with emma yeah let me share my screen can i just get a confirmation from somebody in the heat but it's sure cool let's do this yeah so thank you for the induction or introduction my name is emma turski and i'm a developer relations engineer on the angular team at google uh i use the pronouns she her and you can find me on the internet uh twirsky pretty much everywhere my last name not i don't know um yeah so uh let's see just to maybe get this party started uh i am very interested since it's entering spooky season i know it's really hot in san francisco where i am i've heard from my family that is all in the seattle area that it's like a little bit cooler there maybe i know trader joe's is selling they're like cinnamon burns so that's the official start of halloween season for me and i'm very into halloween uh and i just dyed these overalls green accidentally a little more green than i thought but if you have any ideas for what these green overalls can be used for for halloween i'm taking costume suggestions in the chat and i will review them once i'm finished with that uh let's talk about angular uh a little bit less spooky maybe um so we are so thankful for all of the different communities that we're reaching out to with the angular world tour and i think it's really cool that because of covid we've had a chance to sort of reevaluate what our core values are as we go out and reach out to communities and we're so encouraged by the angular community and everything that is happening and all of these events that have persevered through really a crazy year i joined angular and the core team uh over a year ago now and it has been incredible to see the growth in the community um but we know that a product only goes as far as the community surrounding it and our core values on the team are to create a platform that developers love to use and empower developers to build apps that users love to use and create a community where everyone feels welcome um so we're always happy to talk more about that but with that said let's talk a little bit more about what exactly this community is obviously you've joined a meetup it's like 7pm hopefully you're eating dinner or something but you've chosen to be here you're clearly a part of the community and there's a lot of other people with you um so adoption and community especially in the last couple years has really grown uh we've seen npm downloads go from 1.4 million to about 2.6 million uh npm downloads and remember that this doesn't include anything that's not on a public registry so a lot of enterprise solutions clone for example google maintains its own private registry for angular so this isn't going to include those weekly downloads um and many other things like bitbucket private repos other things uh and on github we can now see that over 1.8 million github projects and that's again just the public repos are using angular so there is a strong community of people using and supporting this product and we're so thankful for that um but i mentioned google i mentioned google's not included in that so let's talk about angular and the angular growth at google after all i think of these organizers specifically at angular seattle this is very google googly um and so angular developers uh within google are continuing to grow and we really think about it as google runs on angular right so there's thousands of people inc and engineers offering angular code monthly um and about 1 000 new engineers are going through introductory angular coursework uh and onboarding onto angular every year at google and just within google alone um and you can also think about the fact that there's products like firebase uh google domains ads google cloud anything on google cloud uh is all angular but that's just external stuff so you can also think about the fact that internally uh the entire workflow basically for writing code at google is written in angular so from the code editor that's in a browser is angular you then would open a pr in an angular application uh you can get feedback you can open tickets and all of those are again angular products that are internal so even if it's not written in angular externally to the world it was written using angular at some point so we're touching a lot of developers at different points in the developer life cycle internally um but that's just uh you know google is developing angular but google is developing angular with the use of the community or with the help of the community and there's so many amazing community contributors that are doing so much thing to a community that maybe aren't officially employed by google and working on angular so just in the last release of v12 and b12.2 and 0.1 we had some really major pr's that made it into those releases that were completely community contributions and supported by the community things like http client supporting specific metadata or min and max form validators um i was just taking a look at the next release for v13 and there's already some really cool contributions by the community things like um the router is going to have a new sort of browser history on the back button uh and that was a complete community contribution so there's a lot of cool stuff happening there and if you're interested in saying okay like that's a cool thing that you can contribute and you're interested in how you can contribute uh the good news is that you already are you are at a angular meetup that is very much contributing to the community um but there's other ways that we're super excited so the most traditional is submitting pull requests that's what that last slide was and that's what those like weird numbers were um but you know that's just the most traditional way my favorite thing is when community members open issues and feature requests so like i said there's 2.6 million people downloading weekly on npm angular in some capacity um and a lot more beyond that and you're using angular in ways that maybe our team can't think about um and everyone's using it differently and so you're reaching issues and edge cases that like maybe we haven't seen before or maybe you have a new experience with an already existing issue so looking at the github issues or opening feature requests there's all kinds of great stuff there we just redid all of our templating um so it should be pretty easy there's also a blog post on the angular blog for how to write a quote-unquote good issue um so that is a great way to contribute uh there's also rfcs so if you go to the angular github which maybe somebody can link in the chat uh there are a lot of open rfcs that's something we've really increased the frequency of as a team i would say like around one a month at this point and an rfc is a request for comment or a way to go out to the community and say like hey we think we might do this thing what do you think about it and i can tell you that almost everyone on the team if not everyone is reading every single comment there so those those comments are really being heard and thought about as well as internal considerations um and they mean a lot even if it's not that you develop it's you teach angular and you say like hey this is going to make my life teaching angular a million times better or hopefully not worse um we love to hear that uh and then finally we send out surveys so on twitter you can follow us uh we always are looking for feedback again we love feedback contributing isn't just opening up pr it's just showing up to me that's super cool uh we're giving a talk um here's some examples of some recent rfcs uh let's see we also were asking for uh quizzes basically just showing like there's other ways to contribute thank you for being part of the community um if you're interested more in sort of what happens when you open an issue we do have a new blog post or a semi-recent blog post about a new issue triaging process we have uh we recently went from about over 2000 issues to under a thousand open on the github repository and that's because we've implemented a way to triage triage issues there are only about 20 people on the team trying to you know look at a million different really great ideas and things that the community is interested in and so we have a formal process where we are making sure that we're labeling we're responding to and we're using a voting system to make sure that if something is wanted by the community we're taking it into consideration um and you can read all about that on our blog if you're interested a little bit more um or if there's a q a we can talk more about it um and that is the link to the blog post if you're interested uh it is goo dot goal backslash ng dash vj dash request dash process um let's see oops uh so i've talked a lot about the community um i want to talk about what's new in angular v12 just to quickly highlight that like there's a reason to run ng update first off it's super easy second off they're super cool things and i'm super excited that i almost get to update these slides to b13 because that's what i was working on an hour ago um some knowledge coalescing besides being a super cool word that you can learn and flex on your friends of knowing how to spell coalescing it is a super great way to clean up ternary operators um so that this turns into this so a really great way to clean up your syntax again you're like sort of checking for things that are null and undefined and like a verbose way here and you're like simplifying that here um we just published a youtube video if you want to learn more about this on the angular youtube that went out today uh inline sass so uh single file components are controversial but if that's something you're into let's say you have a single uh line of sas you want uh you can now use sas inline uh which i think is really cool so if you want to apply a css variable which again is like a super cool thing if you're not using them um and then apply it like you can do that now i love sas i think sas is the coolest thing ever i love css i'm very excited about this um also i love neon colors i think that's super cool uh ng build is now prod by default so you maybe used to be running uh ng build and having to make sure that you included that prod flag that was by far the most common use of an ng build and we found that a lot of people were accidentally especially new developers publishing uh developer builds to production settings and so it made sense to make ng build prod by default it makes it easier for new developers we're all about making the learning experience easier more intuitive by default and this also means that there is better compatibility with things like firebase and different sort of deployment platforms uh if you're interested in migrating there's a migration script just because uh this is not automatically included in the mg update script because it can break sort of enterprise solutions but if you're interested in migrating there is a easy way to do it this is it uh screenshot it if you're interested and then finally we have strict mode so there's a great blog post on why we did this it's food.goal angular enabling best practices and the idea with strict mode is that uh we want to make sure that developers are developing great code from the beginning which means that down the line you're not running into production issues because strict mode can catch a lot of errors from the start the id language service can do a lot of that as well in your uh code editor and so doing it earlier while maybe a little bit frustrating when you're initially writing the code it means less errors down the line which is what we're looking for we want it to be easy for developers to build great apps more updates webpack five which means uh i don't know cool uh typescript 4.2 and that'll actually be bumped to 4.4 and v13 um the ivy based language service is enabled by default that means and there's some really great literature on this and a great ng comp talk that i think is public now but uh the language service in your code editor is now ivy based which means a ton of new great things with template navigation smart navigation template syntaxing dot nolish coalescing all kinds of cool stuff like that um so huge wins there um and again another blog post this is basically a talk where i just link to things but this is goo dot gold backslash iv dash language service if you were just listening along um finally we are now ivy everywhere which means that uh ivy really is a project that came to fruition ivy was the idea that under the hood angular was still using the rendering and compilation pipeline called view engine um and as we continued to grow and evolve we wanted to make sure that what we wanted to do with angular was enabled by the rendering pipeline and so to do that the team undertook a massive project called ivy which has enabled a lot of projects that you're going to start seeing rfcs for and landing things like a single fire stand-alone components and other things like that and so starting v12 we have made that switch and ib is now the full default including in libraries and package distribution which is very cool um and that means vue engine is also deprecated uh again another link uh goo dot gold backslash improving dash library dash distribution and so now just to talk a little bit about the future of angular in 2021 we've already had some really great wins um there is the release of angular dev tools which is the new debugging tool that we have released that is a browser extension that allows you to specifically debug angular applications i would highly recommend you go take a look at it there's a great introductory video on the angular youtube um streamlined releases so we're now releasing in single uh packages you'll also see a lot more about those releases the trusted types api um we've done a lot of optimization optimization on build speed and bundle size um things like inline fonts um really partnering with the core uh web vitals team to make sure that we're optimizing angular for those web vitals and that applications are getting better and faster and smaller uh sounds like a kanye west song and again uh angular-devtools is the way to check that out in v12 just to go a little faster um we did a lot to make sure that um the builds were faster with es build that there was support as an optional opt-in for vx or rx js7 uh all you have to do is npm install rxjs at seven uh and there's a great talk from ngcom and i think they've toured that as well of what that means but rxj7 pretty much automatically is like significantly faster there was some really great uh optimization done on the jump from six to seven and a ton of cool new tooling that was like a pretty major new release for them uh so super cool that as the team sort of enables these new versions that there's these like built-in wins that our team doesn't necessarily have to like work super hard on we're just like taking advantage of again like really great community contributions um better error messaging is something we're always focused on you can check out a lot about that but hopefully as you're updating to version 12 and beyond you're seeing that we're really taking time to assess error messages that when you're reaching errors that they're more verbose explain how to fix it maybe there's even links to documentation on those errors and videos we're really trying to multimedia approach to making sure that like if you're a new developer and you're listening to me right now like please reach out but we're really trying to make sure that when you reach an error that you haven't seen before that we help you fix it we don't just say like your code didn't compile like that sucks because that sucks um and new apis and forms uh yeah more error messaging um let's see from the roadmap we are also doing a bunch of stuff if you haven't checked it out angular.io backslash roadmap is the public way that you can see what the team's working on but i can tell you that like fully truthfully that is what the team is working on um so everything that is in progress is exactly what we're working on we're deprecating ie 11 we're working on es 2017 support debugging guides optional modules is something that there will probably be an rfc for soon please don't hold me to that um but that is very much the best way to see what we are currently working on and with that said i guess the call to action here besides telling me a good halloween costume is to ng update because there's so much that's going on and i just want to say thank you so much for being a part of this community thank you so much for being a seattle part of this community as someone who grew up in seattle i'm so excited about the idea that there's an angular seattle i hope to one day visit um but thank you so much thank you so much emma i got a question here about the review engine when you say it's deprecated so does that mean it's still around four or four more yeah yes yeah so it's not removed it's deprecated we have worked to make sure that from a library distribution standpoint starting v13 angular will be distribu distributed with ib first um but view engine is there i believe the deprecation plan will be an rfc it'll be there uh for compatibility reasons but we're we're fully iv everywhere and ivy first cool yeah so how far away from angular 13 at this point angular 14. so uh streamlined releases me with timed based releases so we released pretty much in the like early winter late fall and then late spring uh last time we released on i think it was a time so it must have been like 11 11 was a version 11 so around then this year uh close to 11 11. i would say yeah absolutely uh that is crazy 15 head count yeah yeah right but the google the google switch over happened more recently um but it's a good testament to be the reason that the effort was worth it i think the team is now just getting to celebrate which is great i don't know if we have any questions from the chat i know youtube is a little bit behind we actually do have a question um uh so from j mccormick uh he asks what is the trusted types api and how does it differ from typescript so that trusted types api is still typescript to my knowledge does someone have a more specific answer here if not so it trusted types is just the idea of again sort of on that strict mode because we're using the iv language service to debug we need a way to sort of get into some of those things so the same way that debugging apis made it into v12 as part of the angular debugging effort so that angular dev tools can run not in a production setting but just in your debugging or in your development mode it's like a somewhat similar thing so maybe not something that you would use as a developer but if you're interested in checking it out and like going into the source code like could be interesting sounds like that was the last question thank you so much emma and i hope you thank everyone back on the team when you see them i know they put in a lot of work so next up we have tracy yes i'm excited uh let me go ahead and share my screen really quickly and i think your whole audience know tracy you've been wrong i did go to angular seattle at one gosh i feel like it was forever ago it was um when microsoft build was happening i think yes it was like me and rob warren right at blackrock meetup yeah it's been a while huh and i know you skipped a dinner that night to be with us too yes people were not as interesting as we were i remember yes i think we like we're at a dinner and then we're like sorry we gotta go bye or something like that but no i'm really excited to be here um you know love seattle uh so today i'm going to talk about something that i feel like a lot of people get really excited about you know especially being in the angular community we always want to or at least i feel like a lot of angular developers want to contribute back so i'm going to talk as a little bit about uh contributing to open source and this is just a quick start guide right i mean one of the great things about uh contributing to open source is that it's actually quite easy and there's a lot of really easy ways to do so so just going to walk you through a few things today for those of you who don't know me my name is tracy you can find me on twitter ladyleet i love chatting i'm a ceo of a company called the set labs i'm also on the rxgs core team google developer expert for angular microsoft mvp and i do a lot of other really fun community stuff like modern world podcasts uh i organize google developer groups and everything like that but i really do love my day job at this dot it's really fun we get to work with some amazing clients um twilio google roblox wikimedia etc etc etc so yeah we're hiring and you know i love my angular friends and my angular developers um we actually recently released some really cool small libraries but we're building our open source library of things um so if you want to ever come hang out this is how i make new friends via email so come hang out with me via email and chat so talking back again about open source and how to get started i'm going to talk a little bit about my journey how i got into open source uh then we'll talk a little bit about you why do you want to get into open source how do you get into open source and then finally we'll just talk about some quick do's and don'ts to consider um so let's start off with my journey really quickly so when i decided to learn javascript i started going to a bootcamp um and i was like oh man all these people are so nice let me go meet the javascript community let me get involved and then you know all of a sudden at some point in time i became like i was part of the rxjs core team and a google developer expert and a microsoft mvp and you know the first thing i did again was just join the community i found twitter i started talking to people i remember like some of the first people i saw you know were like patrick js for example uh when he was like really involved in the angus stuff more visible doing doing all his exciting things that he was doing or i remember meeting rob at like a google and giving me it up i think it was uh so that was really exciting rob wormald this was before he joined angular um yeah and you know it was fun right uh so twitter is an amazing place to again just find people see who's speaking at conferences etc etc and then what i started doing was i started like sharing my experience on oh i learned you know this was back when angular material was an alpha and i was like hey y'all i'm using angular material the team was like oh my god why don't use it don't use it and don't use it in production either but like i couldn't help myself because i was so in love with you know material design generally and i like had to make it had to figure it out um and you know cli was like just being developed um and i was like oh my gosh i need to use the cli so anyways i started sharing and blogging about those things mainly for myself because it's a blogging is a great way to like remember what you did and how you did it so it's almost like a personal reference guide but it was really helpful for other people too right and i was really excited about it i was really excited about angular and everything that was happening um and you know i think you know when you share and you give back and you like blog and talk about your content and tweet about what you're doing this is a really great way to just even give back you don't have to be an expert about anything you just talk about what you're passionate about and people get excited about that and we need that we need more of that in our communities uh then the third thing was just meeting maintainers right so like i said you know meeting like patrick j s and rob ormold and uh i remember i was having trouble with like angular's new router new at the time router and i couldn't figure something out and pascal like hopped on a google meet with me for like five minutes and helps me figure it out right so i think just generally you can meet people right meeting people online at meetups at conferences uh and if you're just like nice and friendly and helpful you're right like the rest will come right but it's just a really great community especially the angular community just hang out and chat so uh then the last thing was just getting down to contributions so while you know blog blogging and all those other things or helping organize community was contributing back to the community um i just kept a look out to be like how can i make an impact how can i help and i was already really good friends with the rxgs core team and they were really struggling with the documentation and they knew they needed to update the docs and i was like i think i can help with this this sounds like an easy project you know uh so i kind of started talking about that at conferences calling for help and trying to form a documentation team setting up weekly meetings right things again that you know were within my strength in my wheelhouse setting up the initial repo um et cetera et cetera and like yeah so i mean i started spending a lot of time there and you know shortly thereafter um you know they asked me to be officially a part of the rfc score team which was awesome but you know i mean i think definitely if you're starting to contribute to a community don't expect you're going to be part of a core team uh you know after you do x amount of work there's plenty of contributors that never do and that's really not the point right like the point is open source is this amazing place where you know you can just like be helpful and contribute and do awesome things and hang out with awesome people and hopefully that's enough um so now that i've talked a little bit about my path i hope that that didn't seem too hard right uh my path wasn't like the most magical thing ever right like i didn't like invent a new way to write angular i just was excited was excited and and you know hung out with people and wanted to do do good for the community um so let's talk about you and why you might want to contribute to any open source project so we're going to talk about uh your reasons so there's two kind of i feel like main reasons why people want to contribute to open source one of them might be functional another might be aspirational right and if we look into functional or aspirational a functional might be hey i have to work on angular let's say or rxcs at work and i need to fix something that's not working or like i better get into open source because i know i'm going to need it at some point in time because this is like mission critical to my work right so if you're going to do that and you need to do that that's definitely going to be more of a functional reason you're contributing uh you see a lot of this actually in the node community right so like ibm and some of these other larger uh organizations really spend a lot of time and money investing in you know people being on the no technical steering committee which is basically their core you know their technical core team uh to you know help make sure that like node is generally successful right uh so yeah your reasoning could be functional or it could be aspirational uh you know open source is an amazing way to get a career get new jobs increase your knowledge i mean you can really do everything when it comes to being aspirational and both paths are totally awesome but like how you actually approach these is a little bit different right so um if you need to approach something functionally and you know let's say you join a team and all of a sudden you're doing so much angular and you become the architect or whatever it is uh and you just know you're gonna need to know what's going on or you're gonna need to get fixes in the framework and it's just gonna be a thing in your in your near future uh the first thing to do is always give before you ask right like contribute to the community uh if you are already a contributor your life is gonna be so much easier you know um you know like for example if emma knows you and she sees a comment she'll probably respond more likely than like some person going in and being like what the hell is going on here blah blah blah you know so your life is just going to be a lot easier if you start giving before you ask and you start helping before you ask um when you want to change something it's definitely important to ask for feedback so submit an issue maybe find a maintainer to champion your issue right maintainers are super busy uh emma talked about this idea that like you know um you know there's a way to submit features and people can up upload them i mean up vote for the lack of a better word but uh you know that's a great way again to like you know essentially get what you want within a framework right but um you know i mean sometimes you don't have control over that so don't spend a lot of time trying to fix something or change something maybe you think like angular shouldn't be typescript so like you decide that you're gonna spend the next six months like converting everything to javascript like i get first right but even if it's something small as well right always make sure you ask for feedback first because you just never know you never know why a technical decision was either talked about before or it's not being implemented or maybe it's coming down the pipeline right um i think another thing is maintainers are super busy so you know my github notifications for example are totally turned off like i just can't even um but if you want to get a hold of me let's say for rxjs right you can sign me via twitter or email if you need a response right um slack even you know send a nice personal message it's a great way to get an answer quicker than you know waiting on github and you know people aren't necessarily trying to ignore you maybe they're just too busy uh so don't be impatient don't be feel like you're entitled to a response but you know a great example is you know there was um i don't remember what it was but it was like something small in rxjs that somebody like submitted a fix for and uh frederick this person that was working at this stock he said hey my friend submitted a fix for this um and nobody's looked at it i'm like oh i'll look at it so you know i went to the other people in the core team and then you know his fix was march like whatever right but again it's like so much easier once you're in a community and you're you've like know people or have done something or talk to other people in other forms to be able to uh you know make an impact right i think another thing is making sure you're building genuine relationships so you know nobody wants to be like uh you know like maybe i'm trying to be friends with emma and i'm like emma you're so awesome oh my god and then like emma finds out i just want her to retweet every single thing i tweet like that is my goal of me and emma's relationship right emma's not going to be excited about that you're not going to want to be friends with me um but you know if i if i generally like want to be friends with her and hang out with her and like i'm so excited about her halloween costumes and whatever just because i like her as a person right um that's going to be a very different relationship so make sure you're building those genuine relationships right i mean again same thing goes for like oh i'm just being friends with you because i need you to like approve my pr's like uh you know people can feel that like it's it's you think they don't but they do so aspirational one of the reasons why i love uh this next why right like why you want to get involved in open source is because it's so much more flexible so like you don't have to be tied to a specific framework or a library or whatever for work right um you can choose any any framework or library or whatever to be a part of so i think the first thing to ask yourself uh when you do this is you know do i like these people that's a really important question um look at the issues can i be a successful contributor are there open issues i can tackle um have i used the library and realized that i could help improve the documentation in some way right like do that first because there's so many different people there's so many different communities i'm a part of so many of them and you know whether you you like the people more in view or you like the people more and react or you like the people more in redux or njrx or you know beautify or next jazz or i mean again there's just so many out there um like you're just gonna gel with different people right i think another thing is uh when you're approaching that make sure you're actually solving the problems that maintainers want right so like again i could think that like typescript totally sucks and angular shouldn't use typescript and uh you know if that's the only reason why i want to join and help like i'm probably not going to get anywhere right so make sure you're submitting issues and asking the team like hey you know can i work on this do you want me to work on this etc before you start working on something also before you start working on an issue it's good to like comment and double check see if anybody's working on the issue um and see it's see if it's been picked up yet before you waste your time another really easy way which is totally underserved i feel like is just help with documentation like every maintainer will tell you we need help with the documentation um so if you're using it like you probably have some way to help whether it's helping with the live examples updating them better wording better explanations right links are broken are they i don't know simple things but like things that you wouldn't think are impactful but are right like for example rxjs roadmap to rxjs 8. like how many people know that that's an issue in the rxjs repo and you can follow along i mean i don't know probably not that many right i mean if you do amazing but you know you might not have that information and you know one of the easy ways i recently contributed was just adding it to the readme how hard is that not hard at all but hopefully immensely helpful for the people who are like wondering what the heck is going to go on between like rxgs7 right now and rxjs8 right and also looking at like how you know 7.1 7.2 etc have kind of like transformed rxjs um so do that you know and then the last thing you want to do is make sure you're educating and sharing right like especially when you're aspirational you don't have to specifically do anything like you don't have to contribute what i mean is you don't have to contribute actual code to be an amazing open source contributor you can blog about your experiences you can provide educational tools you can help organize the community uh all these things right and um that is amazing and that is so useful like you look at people like deborah corrada you know that i'm sure most people in the angular community know like she's so amazing but she's amazing because she's provided amazing education amazing talks within the community not like she wrote ngrx you know what i'm saying so don't think that you're limited by your technical abilities necessarily you can do so much to build a career in open source without having to contribute code um last thing i want to talk about is just do's and don'ts right so the do's and don'ts kind of overlap but just to make sure you're having compassion like make sure you're remembering that maintainers are usually working for free on nights and weekends like thank you everybody here who's like organizing this to you know take some time out of your your night to do this right um but don't don't forget that right also treat maintainers like people right like you know people can only handle so many things at one time so if you treat limbs like crap they're probably not going to care to help you right also be professional i mean you know i know that you know we might not work together but if you are not professional to me and don't have professional etiquette i'm probably gonna think you're a douchebag or something like that right so make sure to treat open source relationships with professionalism and especially like nobody likes to deal with anybody who doesn't respect each other right i think also assume the best of intentions like this is you know going into any code base you might look at them and be like what the heck were you thinking here right but you know you might not um you might not know why nothing was implemented in a certain way so like i'm sure you can go back to your own code and like previous six months and be like what the heck was i thinking right um so make sure you're always assuming the best of intentions when approaching open source maintainers it's really often a tireless and thinkless job also abide by the code of conduct like really just make sure that you're treating people the way you'd like to be treated and typically like angular for example has a code of conduct that they have on their repo so just make sure you're following that um don't wise don't feel entitled be nice and patient again it's just the way it is don't think you're a maintainer's biggest priority think about having a full-time job and then a full-time job on open source and having kids let's say and having a life and having to juggle a million things like life is hard right so don't think you're a maintainer's biggest priority um don't be annoying um sure email about an issue but like don't do it 10 times a day i don't start getting angry you know like follow up a follow-up within reason definitely follow up i think people forget to follow up sometimes and it's not like you're not bugging anybody it's because everybody's just busy right and also don't complain right like it's funny because you know you're getting something for free and maybe it's not the nicest way to approach open source when you're getting something for free complaining right um help instead right find find functional solutions um and you know sometimes maintainers will say hey if you don't like it go use a different library so um try to just you know be more understanding because our community can use more love like that so i hope this talk was useful for y'all i hope you all like learned something uh saw how easy my journey was i'm always happy to chat via twitter so just let me know um but yeah it's easy it's awesome you know there's so many again interesting ways to get involved and the community is so open out there uh contribute to the documentation if you have time and you know again i love working with all the angular projects we have within our team as well so if you ever want to hang out come chat with me too thank you thank you so much tracy yeah it was nice to hear your story i think that the first time i met you was uh you kind of dressed like r2d2 i was really into costumes i still have an entire closet full of costumes so anyway i must say the best thing with angular is definitely the community if you ever have the opportunity to go to conference and meet these people in person yeah i mean that's actually where i met both tracy craig and michael for the first time it's all been at conferences you learn so much especially what they call the hallway track just meet people yes yes definitely i didn't see any questions for tracy i think that means you've answered everyone's question no i'm glad to hear it i did want to comment that docs are hard to maintain and so i think that's definitely i i agree with all this and it's it's really hard so yes docs are always out of date once there once once you once they're merged they're already out of date so i think the first time i met tracy i was also got dressed up as a bacon oh yeah that's true yeah i think you you gave me the bacon thing where you're dressing up as a bacon let's go let's i think that was angular connect in like london oh my gosh yes emma don't be scared when we meet in person and they'll be fine oh i'm excited i have costumes again i love halloween yes we're so there i haven't made jaw drops up yet have you figured out what your green costume gonna be yet i don't know i will say that i have like four already to be yeah we're big halloween outside lanes of halloween this year so multiple days i don't know the first thing that comes to me is like luigi but i mean he wears blue overalls and a green hat but you could do that i think it's waluigi is green maybe the what is is waluigi a character see this is yeah waluigi waluigi is green and he's the best one i think he should totally be waluigi he is yes he is green yeah that's perfect i would have to get into gaming first in the next month you don't you don't have to just show up as waluigi it'll be great it's a plan great i think we are ready for our next speaker yeah you the last talk of the night okay i'll just share my screen okay uh thank you mike uh i'm very excited uh for this event so today i would like to talk about uh zoonji s so my name is jia and i currently i'm working as this dot as a software engineer i have contributed to zongjies about uh four years and now i'm the the co-owner of of zombies and also an angular collaborator and so today i would like to talk about uh zongjies i will make a brief introduction about what's on yes is and one and why you need song yes by several examples so zone js is a library and it created an ex execution context that proceeds across a synchronized tasks so this is a library created by bramford and inspired by the the dark language i think six years ago and it is used by angular angular 2. this is the main feature about zombies so zombies provides an existing contacts and also um several lifecycle hooks across a synchronized operations and also a a general unified error handler for a synchronized operations so the exchange context this is the fundamental feature of the zoom gs so and actually context this is a concept from javascript javascript world so it holds information about the environment within the the control current code is being executed so let's see a very simple example so here we have a function and we can access the context information by the javascript keyword this and of course we can call this function in a separate way and the disease that the com exchange context will change by uh how you call this function so here is an example you can call this function uh by a lot of methods so and the disease will change so this is uh context in the javascript world and when the code is executed in a function there will be a new accession context and the context will determine the scope such as the variables and the functions that the current executing function can access and it also determines the value of the jobs javascript keyword is uh and also with the uh exchange contacts we can also access the stack trees arrow zeros so here we have abc3 method and if we throw a error in function c we can see the stack trees the stack frames about the about this error but this business stack trees only works in the synchronized operations so here is exact is an example of uh when we run a timeout callback and we saw error in the callback and we can only find the stack traces about the the callback but without the the timeout coding uh the asynchronous asynchronous operation uh when the synchronized operation is scheduled so this is not idle so so basically this is a missing feature of the javascript world so there is no extrusion contact across functions especially the synchronized operations the zomjs provides a new acquisition context that can persist across operations um not not only the synchronized one but only but also the synchronized operations so here is a code example if we run a function inside the zone so here we call zone.one a function here and we can we can imagine suddenly we have a new uh con exception contact let's call this new context zombies and these zombies will be equal to the zone and and in the uh synchronized uh function call and not only in the synchronized function call if we call a set amount and in the callback and the zones is this new exchange context will still be uh that will will still be equal to the zone will still be equal to the extreme context when the set amount is scheduled and also not only set timeout but also for all other asynchronous operations such as uh as shr the xml ecp request or promise them throughout the inside this function call we have a new exchange context can be persist inside this function not only in the synchronous way but also in a synchronized callback so this is the most uh important and fundamental feature that zonji has provided so in the zoom gs provides a new accent context and we have something like a new javascript keyboard on this and for synchronized operation zone this will be the zone it is running in and for a synchronized operation this zone list will be the zone it is the asynchronous operation is scheduled and of course we didn't really introduce a new zone this new keyword so to access this zone list we need to call a global object zone dot current and we can get the current zone uh the new exchange contact provided by zoom so uh zungjas not only provide a new extrusion contacts it also provides a set of lifecycle hooks interceptor hooks and across the synchronized operation lifecycles so i will use a call sample to explain those uh several the most important lifecycle hooks so here we have a set timeout with a very simple console.log callback here and here we have uh we have a graph to explain how it works inside the javascript vm so here is the the stack and this is the web api it means the browser or the node.js vm and this is the macro task queue inside this vm so let's see how it works so at beginning we will call settimeout and it will uh call the the api of the setup mode for from the browser and after that the min stack finished and the browser will after one second the browser will send this callback offset timeout to the microsoft macro task queue and if there is no other uh task item uh before this settimeout callback and the browser will transfer the settimeout callback from the microtask queue to the main stack and the callback will be invoked and everything finished so this is how a very simple setting mark works in javascript vm and let's see uh so because the set timeout is invoked in the future so let's see uh another example so we have abcd4 functions and if we run the function in this order so the final result will not equal to the execution out with the code order here because the c and d will be run in the future so you so imagine if you want to uh measure the performance of this abcd function so if you write some code like this you write performance start before a and write performance and after b this will not get the the correct result because c and d will will not be calculated so only a and b is uh mirrored so let's see how zoom zoom gs uh handle this issue so let's run the same set amount called inside the zone and this zone we have several lifecycle hooks so again we use a graph to explain how it works so in this uh in this code uh we run the zone zone.one we run the setup mode inside the list zone and let's see the the process so again we create a new zone and we run the set timeout inside this zone and because this set amount is it is running inside the zone so it will not calling the browser native setup mod api directly instead it will invoke the lifecycle hook first so the first lifecycle course is invoked is on schedule task it's it's just telling the zone okay there is a new macro task is being scheduled in the in this zone and we will call the schedule task here and after that we will we will really uh delegate the call to the native set amount of the browser and and because at the very beginning the zone is stable there is no task inside the zone and now there is a new task coming there is a new task being scheduled so so the zone the status of zone is from unstable to unstable so another hook on hash task will also be called and this all has tasks will also update some internal task state inside zone so we have a macro task count inside zone is added by one and after this on has task is invoked and the unscheduled task is invoked okay the the main stack is finished and just like the previous example so after one second the browser will send the timeout callback to the macro task queue and it will transfer the multitask to the stack and also because the the set amount is run inside the zone so this user called the console.log will not be invoked immediately so before that another lifecycle hook on invoke task will be uh called first so this invoked task will just tell tell the zone okay there is a task will be invoked will be invoked now and it will call the invoke task logic inside the zone and it will dedicate to the user code console.log here and because this task has been consumed so this asynchronous operation has been finished so the the status of the zone will be become from uh unstable to stable again so the on has task this lexus lifecycle hooks will be uh invoked again and this macro task comp will be become from one to zero and after that the invoke task lifecycle finished so this is how uh the lifecycle hooks work uh inside the zone so we have with zoom we have a a set of lifecycle hooks they are intersectable so the user can write their own logic inside this lifecycle hooks to monitor the status of the asynchronous operations so let's get to the performance example so if we want to measure the performance of the synchronized operations we can write some code like this we can measure the synchronized operation uh performance um with the on invoke task lifecycle hooks and we write the performance start and end before and after the thing has callback here so everything will be calculated and there is another very important uh lifecycle hook which is on handle error so everything inside is zone at all error uh the synchronized one or the synchronized one zero in the callback will be cached by this on handle error so you can write some generic unified error handler with some gas so zonjas implement all those features basically by the monkey patch so it so now zum js monkey patches all the possible synchronized operations and to add the execution context and the lifecycle hooks logic so this is the basic feature and the internal mechanism of donkeys so why should we use them somebody else so uh basically if you want to do something with asynchronous uh synthetic operations especially what you want to know the status for example the test debug performance and you want to uh automatically do something when a synchronized operation finished such as framework auto rendering user action tracing and resource are automatically releasing you may want to use the library like songks so i will use several demo to explain some use cases the first one is long stack choices so here we have a main function the main function and even handler for the bottom one and inside this even handler we bound another func uh even hundred button too and the button to even handle a certain error so from the javascript structures if you see the stack trees you will only see the the final the button to even 100 stack traces but from the business logic you want to see this error is caused by this band second button and this and second button is added in this main function and then this main function is called from from here so you want to see the full uh business logic history so with song js it can track all the synchronized operations so it can build a long stack choices for the user so here we have example so this is the button one and when we click button two so you can see the long stack trees here and we can see from the very beginning so here oh sorry some source code here uh from the men here and to the and to uh to the second button and finally to the cereal area so you can see all the uh the the uh user action user history of the uh how this error was or what was produced so it is very uh useful when when you want to debug the the code and the second demo is about the the counting so here we have a button and we randomly generate a lot of setting mod and with zoom you can easily to to check that the status how many time out is scheduled how much time out is finished uh it will be uh you can track everything inside the uh inside zone so so here we can see a lot of timeout is scheduled several are invoking and finished so basically you can track the status the joining status inside the zone about the synchronized operations and of course you can do the performance profiling just like the the previous example you can calculate the synchronized operations performance correctly so here is a profiling example so it basically calculates some asynchronous operations performance with the zoom and also if you want to automatically release some results about the synchronized operations you may also use zone vs the song js not only work in browser it also works in node.js and electron so basically all the javascript environment so here we have example we open a file descriptor in node.js and we do something with this file descriptor synchronizedly and we do something else with this valid script too so we what we want to do is to close this file descriptor by all those are synchronized operations finished so without zonejs you need to write a lot of uh complex logic to check all the synchronizer operations finished but with zombies that the the user code the business logic code you don't need to worry about when all those operations finished you only need to write the the check code here inside the zone so in on hash task website hooks if all the mark macro tiles and the macro task is zero so the zone is stable you can close this file descriptor very safely and you can also do some user action uh tracking so here the example is uh for some e-commerce site uh we may want to track what user is doing in the in this web application so here we have a view order button place all the button and we want to see okay user click this button and inside this button click what exactly happened and how many times cost it so here we have a real order button so when we click this button with the zone we can uh track what user is done and we we can write some another logic to put those log uh to the server for some user analyze so here we can see with zone we can get information this button is clicked and inside this button click we have several http requests sent and what kind of response is returned from server and how many times cost it in each each of the atp requests and the total cost of this button click something like that so we can do a lot of user action tracking and analyze with song easily so another example this is uh the the most important feature used by angular which is ui order rendering so for example we have some data uh we want to render in the dom and the this the data can be uh fetched from several ways uh from http from some logic uh set timeout or promise that from some asynchronous operations or by some even handler for example the button click so the date can be updated in several ways and if we don't have zombies we have to write some update from logic after uh in the callback of http request in the callback with settimeout to update the the newest data information to the dom but with zone we don't need to worry about that so we don't need to write any code about the ui rendering logic in the user logic code so the ui will be altered automatically rendered so here we have these three buttons so let's see we click http and timeout and add so the ui will be automatically rendered and if you check the code we can see we didn't write any uh ui update logic in the the button handler so the even handler doesn't write any updated dom logic so all the all this happening uh by zone in the on remote task uh lifecycle hooks it will update the dom automatically so basically angular updated ui in the similar way and of course zoomjs can also be used in a synchronized task test it will automatically uh invoke them while all the synchronized operation is finished and also it supports fake sync to make the synchronized operation test to synchronize one to make your test faster and much stable so zoom so basically i'm going to use all the features provided by zombies it has a ng zone to tell one to trigger the transaction when the the zone energy zone is stable and it also use the sync test fixing test and sync test in the angular unit test and also i'm going to use the generic error handling to handle all errors inside angular application and in the debug in the dev environment it also provides a set of utility zones such as debug choosing task tracking and long stack trees to help you to know what happened inside your application so this is the so the angular user will not use the api from zomjia directly so most of them will just use the api of ng-zone and the most important method of ng-zone is in g-sun.1 it will run the function inside the json and will trigger transaction automatically and if sometimes you don't want this automatically transaction happen you can call your outside angular to avoid that so that is all from me thank you thank you so much uh i think yes ng zone and zone yes it's something that a lot of developers skip over when we first start with angular so it's great to hear talk about it sure thank you you you might be interested we actually use uh zone.js in cloud not as part of angular i mean also we use it like in angular but um for every route transition you know a route transition might kick off a bunch of data fetching which happens a lot in cloud you like go to the route that lists all your vms and you want to get all the vms and we use ojs to track all those requests to see like how long does all this data loading take and attract that over time so that's like another example of how you can use it for analytics god thank you good now is there a link to the slides oh i will post a link okay cool have you ever had to do any debugging of zones yeah so so currently uh by default if you run ng-serve in dev mode so the long structures is already there so uh and i think before angular 11 the task tracking zone is also available but after um i think the task tracking is still there but uh there is another uh uh web uh web choosing framework zone is deprecated but the task tracking zone is still available so so now by default you can use those stones to debug angular applications and this might be more of a question for emma but wasn't it talk to do something about indie zone optional in the future or something like that uh yeah sure do you want to answer that too yeah that that's something the team is considering i think there's an open issue um and that's one of the things that is part of the sort of like what is iv enable but it's mostly i think it's in the road map in the like future section and that's mostly just like an exploration of like what would that look like would it bring value so you would see like quite a few rfcs um which is what you're going to see in the like post iv era anyways of like okay we enabled all these things like we have ideas of what is now possible but like who wants what and like does this actually make sense or bring value to developers versus like did we just enable like this niche thing that nobody needs um like people do optional zones there's like hacks to do it now um i haven't seen like strong use cases for it maybe in the like mfi yeah i don't know cool i looked at the live chat but i don't see any questions there there's there's an important comment about costumes and the big brand barista i believe is a solid choice although i think that is an actual apron that they wear with the logo anyway oh the big brand i was like what is the big brand's coffee yeah yeah um yes that's good oh that's good need to be a mermaid then with two tails um yeah i have the i could do it we could do it um so well i don't i don't think we have any questions from the chat um just that was an excellent breakdown of zones and yeah i think we did some good talks tonight tracy didn't want us to plug something she she left it uh but she did want us to plug something in somebody's gonna talk about it not me yes i can talk about it so to all you out there if you're listening to this live or if you listen to this afterwards if you want to see angler world tour talk in your city and go to angliaworldtour.com and contact them and try to request a new city there there's about two talks every month i think going on there and it has different speakers uh so we're i think we're lucky with the ones we had but uh i would also recommend checking out other speakers you could learn more i should say so where are you all going next for your tour i think i'm doing so someone from the angular core team is at every one of these and i'm doing the next one and it's in athens uh angular athens so it's in athens i wish i was in greece you're going to athens virtually can you expense the trip yeah she can expense her webcam i could yeah yeah the dslr but i would take a flight instead yep it's almost like you need like a little badge that you can sew onto like a jacket that says like all the places you've done an angular world tour talk you should talk to them give it to you about you know making your own little badges yeah i know i i joined during the pandemic so i haven't gotten to travel but uh i do think that people go to the google office anywhere that they travel just to like have a record because like somehow it tracks it i don't know you would know this and i i don't know anything there there are a little bit of inside baseball but there's an achievement system in google and you get badges for different things and one of the badges is the number of offices you visited so people will go out of their way they'll give each other their badge to like swipe in and and don't follow somebody into the building just because they have a badge and they're badging in make sure you badge yourself in because i went to when we're in london i followed mike through that building and i never got it it says like i've never been to the london office but i've been there i'm gonna say i actually am trying to set the opposite record of working for google the longest without ever stepping foot so i'm at zero so we should someone should make a badge for that it should be the longest time without hedging into an office i'm competing anyways thank you so much for having us that means i spend more time with bengal office than you have emma a 100 everyone here has i was actually very just before the pandemic happened in february um okay anyway thanks everyone for tonight yeah i'm sure we get to see i hope we get to see you all in seattle one day you all need to visit yeah definitely as soon as it's safe and as soon as we're doing it again uh we'll have one of these in the office we'll do tacos um maybe emma will come to seattle it'll be a good night i'm there i'm already there but i'm there anyways thank you so much for having us good night great thanks everyone all right thank you thanks

Channel: AngularSeattle

Views: 66

Keywords: angular, web development, google, meetups

Id: y2M_QYdNv6I

Length: 83min 10sec (4990 seconds)

Published: Fri Sep 24 2021