ngAir 137 - Leveling Up Your Angular Skills with Stephen Fluin

hey what's going on welcome another hat episode of angular air I'm your host Justin Schwarzenberg and today we are going to be talking and checking out leveling up your angular skills so let's get after it join us the panelists today we got Austin McDaniel Austin what's going on how's it going everyone I feel like I kind of started something with the hats it's just like just keeps going and getting bigger Nick you're gonna go to conferences and they're just people wearing hats all over the place could be could be a trendsetter I don't know all right body Brandon's with us Bonnie what's going on howdy yeah they told me to go get a hat I'm in Texas so this is this is what we do we're in Texas nice y'all put emojis on your hats too only me yeah very cool Mike Brock yzma that's Mike what's going on not too much was hoping you'd call me first cuz this thing gets really warm so take it off you gonna have to wear it the whole time oh no not you know it is descent or almost December all right and our guest today is Stephen flu and Stephen how's it going it's going great I don't know how I have is this like Jedi or wizard hood nice nice like Mike pointed out Stephen the gray there yeah awesome all right Stephen why don't you tell our viewers a little bit about yourself for people who don't know and then we'll kind of get into it sure my name is Stephen fluent I'm a developer advocate on the inger team here at Google so my role really has two parts the first part is to help developers and organizations be successful than you are and the second part is to understand what it's like to build applications in the real world with angular so that we can reflect those needs onto the team make sure we're making the rights for the product decisions as we go along on a day to day basis that breaks down into I don't have a lot of different things so I lead our GTE program I've build a lot of angular applications I speak at a lot of in your conferences just got back from a Q kana workshop up in San Cisco of an event in London previous to that and then I work with a lot of our ecosystem partners so this is companies that are either building large applications that like the enterprise level or whether that's someone that's building a cool new library or widget that works on top of angular and really makes the ecosystem richer and better for angular developers very cool cool or do you add when you do that kind of work with those enterprise and other companies and stuff like that or they come to you for guidance oh they come you for solving problem it's like what kind of things everything across the board everything from hey we have a thousand developers that are blocked by bug X can someone make a little bit more urgent look at it maybe impossible all the way to how do I think about using the ng upgrade we have 600 components this is our model architecture are we thinking about this in any way so you're basically saying if I have bugs I should just tweet them to you right yes and there is a very small chance that I will be able to help and get that elevated but I mean in general so one of the things that we think about a lot is scale right so how can we do the most good for the most amount of developers as fast as possible and so for example engineers can't be working all day with the community came talking all day at events and so part of my role is kind of being a multiplier where if I can ask them once this crazy interesting question about whether change detection is depth-first or breadth-first then I can be a multiplier and I can be a megaphone for those sorts of concepts and questions in the future for other developers minute hopefully I'm also there helping to make sure that that's making a new arc and a standard story in terms of whether it's a new feature that's being announced or or a document that developers are going to refute refer to ongoing so if the other half developers that are affected by an issue yes I am here though do you feel that a lot of the teams and the people that you contact and work with on this stuff that they understanding either get angular and then they're just trying to kind of take it to the next level or is there some any bit of confusion or like do you see people maybe not using it correctly or so what I'll say is that we released and you are committed at the first version of this newer generation version to 0-0 in September of 2016 and since then angular has started becoming kind of a really really safe good happy choice for a lot of developers it's kind of like we used to be the cool kid on the block and for a little while we weren't and I kind of I like to think that a lot of developers feel awesome having chosen and you're and so that's that's kind of the world we're in but what I say is that there's also the silent majority of developers out there who they're still ringing your gesture they're writing me and other technologies and they're starting to get up speed for the first time on idea but that that path is actually pretty well worn I mean in terms of our tutorials in terms of like we have some really great talks at conferences that are available on YouTube there's a bunch of companies countries and a beginner content and so I feel like the the kind of millions of developers that are still coming on board the thing you are digging up Swede they've got some really great content they've got a lot of great support and what's happening now is we've always had a really awesome early adopter community so developers that are on the bleeding edge and trying to try out taking a look at every commit that Mieszko makes into the repo but we have this this really nice kind of middle ground of developers now where they understanding your concepts and now they they want to just build better applications they want to more holistically take advantage of all the tools that are offering all the cool ideas all the things that we've already thought through and benefit their applications for that and so when we were thinking about kind of future content for conferences and for events we're trying to spend less time on the beginner journey and like what is a component in more time on how does lazy loading effect the the file size of my application or should I be considering server-side rendering or what's a PWA those sorts of questions where we're a little bit ahead of the curve for a lot of bill developers but we think that we can help bring them in the modern web and really help make them better developers you mentioned earlier you know angular seems to be the choice for like this safe and like happy can you like explain that a little bit more like what do you see like people really like angular for type thing sure so I I see people choosing angular in a lot of different contexts for a lot of different use cases it used to be that it kind of started at the big company level so I I have 100 developers and 50 developers we need a way to be productive and grateful it's maintainable and understandable so we've got typescript we've got the scaled tools that next declared a template syntax but now we've made it so much easier for kind of everyone to get on board with angular with our sea lion with our focus on that that I think over the last 12 months we've seen a real transition where before everyone was like okay this thing was just released what's what's the future for are they gonna rewrite it are they gonna break all my code every time and now we have over a year of track record where that that hasn't happened we'd release major releases updates are easy and all your knowledge is still applicable and then you can kind of keep getting better every day and in kind of in a lot of ways return the focus back to your job and anglers just there being awesome it's very nice so it's I you know good thing that we're doing this show right now thereby kinda tuning cousin talking about leveling up your skills and things like that taking that going from beyond the basics to what are some advanced things that we can do right and people are gonna get that hopefully right now all right sure yeah so I'll kind of dive in and what we'll see how this goes you guys tell me if this makes sense but I wanted to basically just build out an application here live start with some basic stuff and then kind of get more and more advanced as we go and see see how far we can get in the available time live coding yes so and so danger danger but basically I want to kind of go through a few sections in there there's a few technologies that I talk about when it comes to being an advancing or to open advanced is a really tough term because it means something very different to everybody for some people just using a year at all is advanced right because they're not as up-to-date on web technologies in general but then for other people it's like oh how do I use multi providers as part of the dependency injection or I want to I want to replace injection token with the custom implementation can I do that right I'm really targeting more towards the the in the middle of that line so people that have been building apps with angular so they know about components to know what inputs outputs they know what services all these things and then I want to give you some kind of tricks that can make those things even better and maybe explain along the way some of the why is why we do some of these things so let me let me share my screen here all right can you see this yes I assume that's good all right so this is a brand new on your application that I just scaffold it out so use the CLI I ran in G new and then I ran in G serve so in the background we should have a couple things we should have local folks 4200 here and then in our IDE we should have a standard CLI application i explicitly didn't choose any options here because i wanted to kind of really go through from scratch in terms of adding these things to an existing application so the first thing I do whenever I build an angler fishing is I add the router module you guys can just make fun of me and chat whenever I make dumb mistakes that's that's gonna be happy but I've done mistakes here where there's gonna be a few of them though and I'm gonna need your help to find them they'll be challenges okay it's a demonstration of debugging yes yes how easy and or hard and yours to debug so now I have a simple application with empty router and then one of my news I means to see how I degenerate out a few things I'm going to generate a new home component to generate a about module and then I'm gonna CD into that module and generate another component okay so we created a measely the module we've created a client route they're a synchronously loadable component and so it should have been added so we got a decorations got in our imports and so now I'm going to add a couple config c or something to say for the route path just load the home component sometimes you get to just have to trust yeah so there's there's two mistakes I'm making every live coding demo number one is I fight with the Intel it sends a lot and then the second is that I forget to save files okay so what I've done here is is people most people are familiar than you are routing but the the magic here is for the second route instead of running through a component I'm gonna route to a module and so what I'm gonna use I'm used need path to that module so dot slash about about module and then I'm going to use the symbol name about module and then because we're routing to a module instead of a component I actually need to add the routing module here or import that or I'm gonna say for child and so what for child does is instead of setting up kind of routing for the whole application this just says okay for this module what are the routes that are gonna exist in it so this module is basically being loaded into you slash about path so I can just say blank here and then walks in currency refer to our about components so the last thing is a have a dummy navigation yeah go ahead were you going to further can you go back to that route with the load children and explain what the two sides of the hash tag are just so that people understand what that's index is actually don't sure sure so the first half here is the name of the file where we're gonna find our module so relative to the current path we're going in the about folder and referring to the about module with all file paths in angular you don't use the duck TS because what happens is we we want typescript to kind of magically add those as appropriate so this is actually referring to the typescript file here right now but after compilation or after transpiration from typescript down to JavaScript this will refer to the JavaScript file so we just leave the file paths off when we're using a CLI because of that kind of switching between typescript and JavaScript which I don't have to think about and so the tooling does a really good job of that and then the pound sign here the octothorpe I think it's called we have the symbol name so if I look in the about module I see a bat module so if I change this symbol name I would need to change that string and the reason it's a string is because we need to refer to it in a way that can be loaded asynchronously if we refer to the symbol here then all of the code for about module which kind of needed to be loaded synchronously into this module and it would kind of bloat up our application so where was I think I was gonna add a little bit of navigation here so I'm gonna say a router link it pulls fruit so let's go home with that I'll say a rather link people's about and I need to add my router of it so we know where to render the routes that we've got on so I've just coded out a basic application with a few different components and hey look had already worked so level up home about apparently I did not make one any router link homeworks safe about works great and so the the real magic here I did as a developer is that I took all of the code for the about module out of the critical path so if I look at the networking tab here what I'll see is that we only load the about module when we are on the about route so when I'm here you're not gonna see the about module and then as needed we load it so as soon as I navigate to the about we don't fetch that in the background so that that's actually so most mid-level developers know about the automatic code splitting that happens from the CLI and the ability to the laser droughts but one things that they probably don't know about is that the full route method here can actually take something else and so what it can take is a pre loading strategy and there's a strategy that come out of the box called preload all modules so what this does is this still takes the about module loops this still takes the about module out of the critical path for rendering but what it does is it automatically as soon as that first route is loaded it's gonna go and try and load all the other modules and so this is actually really important because when I'm building a large application maybe I don't want a round trip event for that about tab to load so now when we look at this I load about abouts gonna load to our home is gonna load and then we're gonna load about module in the background so that as soon as I click I get an instantaneous screen flip any questions about that you'd want to use that versus not want to use that so you want to use that whenever you are willing to pay the network cost of loading your other modules but you don't want to pay the critical path cost is there a way to identify and only load some pre pre only some modules for instance like maybe a user clicks about like all the time but there's three other pages that they never click and load about automatically but I don't care about the other three pages yet there is one more way of doing that so I there called custom preload strategies and so what I can do is I can say export class a config based strategy so this is just the name of my strategy so I'm making this up and it's gonna implement that interface that we talked about the pre loading strategy and one thing note is yes code ever imports something it's very deep it's probably wrong so apologies about that I'm not sure why BS code does that so now I have created this class and then what I'm gonna do is I'm going to implement a single method called preload this is required by the interface and that's gonna take route and a function called load and then that needs to return an observable I'll just say a penny here and so a very common thing that you can do is you can use rxjs to kind of combine this information and what I'll do is I'll import me of feature of the observable so from rxjs observable flash of and then what I can do is let's just import these real quick don't see that's wrong sorry important hard I believe it's from rxjs add observable not anymore I know I'll talk a little bit about that because we've kind of leveled up our use of rxjs for a couple reasons so if we can get in remind me to come back to that well we'll give that a try so here I want to just return route data and then I want to check if the route data preload load otherwise we'll just return an observer empty observable so what I'm doing here was just innocent images go to the errors moment what I'm doing is the router is basically going to ask my pre loading strategy my config basically loading strategy which modules it should load little hand it a path and say should I preload this and so what I can do now is because I can get at the route data I can make a new option called route dot preload so I can say here is data preload true or I could say beta preload false and I could set them on every single lazy loaded route that I have let's ask the autofill matter to make this a little bit pretty ok another advanced on your tip so there is a really fantastic extension called angular extensions irregular essentials by John Papa I highly recommend you in if you're using BS code and it installs a whole bunch of really helpful snippets and things like that my only gripe with this is that it includes a tool called prettier which tries to make your code pretty but prettier actually fights with vs code a little bit and there's a road to a simple trick you can do to overcome this and so your package Jason accepts a prettier key or it allows it and I can do things like trailing comma let's make that yes 5 mode because arrays can have extra trailing commas and they make things more beautiful and easier to read let's not fight about to have width here let's just call it 2 and then one of the important ones single quote so Keith Flint really like single quotes I'll make that true I'm will sleep print width the same so now that I've configured prettier when we reformat this much better okay so now prettier and mighty is configure aren't fighting you can see I've got a new data attribute here on my route and I'm saying preload true I could set this to true false I could set this based on some user information I could really do whatever I want to define this custom preload strategy and another thing while you're talking about like rapid data you can put all kinds of metadata about your routes in there one thing I like to do is put like page title information in there yes you were just going there yeah so on there there's two things that that I in my applications I almost always do I create a title and I create something that's totally custom I just invented this called depth and the reason that I use depth obviously page title we we set that to page title and the way that I often do that is I would just listen for navigation events as part of my route module and then whenever a navigation event ends I load the page title from the route that's currently loaded and I I set that patient oh using the title service but then I set depth because I find that hierarchical animations are really important for communicating where users at within an application and so by setting instead of saying okay here's the 50 pages on my application and the custom transitions I want to make between every page of my app I say what depth is a page at and then I have it render a kind of left or right wipe based on where they are in the hierarchy so if I'm descending the hierarchy we're gonna get this nice everything comes in from the right and content goes off to the left and I'm the other way it comes in from the left and it just basically says yes you're going deeper yes you're going shallower in the kind of hierarchy of my application nice okay can you also describe really quick the difference between data and say resolving data for the rally data about the route whereas resolvers are useful for fetching data that's being used within the route from the component or the the module that you're loading so is data a convention or is data like a reserved keyword that you should put all your route data in data is a kanay reserved keyword that you should put all your route it in so you can see the type here it's basically any sort of object where you put it in so yes that you can I don't believe you can create the broad key parameter no that's that's gonna route it's not valid great is reserved I mean I'm usually invalid but the data is part of your route definition I mean built at the time that thing scaffolds up so it's not like a dynamic piece of data that's gonna go in there correct yes resolved yeah you can use to resolve it run time to figure things out on the fly data it should not be that way it's part of the config all right so I I think I'm gonna leave this to you and then I'm gonna go through one more advanced newer thing and talk a little bit about rxjs would be the best next concept actually I'll just touch on two things real quick so a lot of people do and you build or and you serve probably heard of it I'm running it right here and then a lot of people do and you build let me just I just kill them I'd remember that so what I recommend developers do because this this actually will become a default at some point in future is the hope run end you start with - - IOT as a version 5 a OT should be much much faster that's enough to be suitable for use with this energy server environment and then you can be sure that you're getting the exact same output and the exact same performance characteristics that you're gonna get in production build so like if you if you use invalid metadata resolution in your ng module for example you'll see an error with - - a of T that bonus is always seen and you serve and the other thing that I highly recommend is and you build batch Claude I basically always generate source Maps because I don't care about security for most of my patients but then would say it's named chunks that right because again naming your chunks oh so getting out an admin module instead of a zero dot chunk is much more useful for you as a developer and as I said there's nothing that's in your code that we're kind of giving away other than this is the code for the admin module so now I get the nice admin module instead of zero dot jump so I always leave that on it's by default Ian ng serve alright oh the reason I do source maps is because then I can get out that's a very nice source map Explorer so I do another build with source Maps but I can see is if I use a global install tool like source map Explorer I can see where all my file size is coming from and so if you don't have that you can see on add our global adder in PHP install source map Explorer and it should look like this where you can say dist and I'll just say mean yes it's permitting it's done you'll get out this very nice chart that says ok here's how much archness you're using here's the router I didn't use the router I would save these 70 KB and then so this is actually a pretty small pretty good application but if I accidentally import something like I don't know firebase or lodash or some giant and third-party library searchmetrics worries often the way to know that that you're actually including those in your production bundles when you may not be intending to when you enter we need to start with äôt are you able to still go into the dev tools and pull up files and navigate around breakpoint and stuff like that yes but then you're you're navigating around compiled code so if I if I take a look at this and move its sources so none of the code we minified but it will be compiled so you're gonna see a lot more document document elements and you won't have the the templates here it's a little bit of friction if you're doing dev work and using the dev tools but benefit because you get visibility in terms of alt and then I think that's part of the reason why the team has insurance on by default is they just want to the kind of remaining UX + DX issues for that guy I think some of the source map settings are being looked at in order to make that experience a little bit more seamless is it just me but I can never get source Maps to work right like I just flat out turn them off it's just so much easier oh really I mean I work all right like the breakpoints bounce around and all that type of stuff like the first thing I do is just disable and I'm like yeah I love I feel the exact opposite I love source Maps because then when I go into my component here and I let's make a something that will fail in JIT so click equals module see if the compiler catches that no it looks like well successfully because we're in JIT mode and then we go to our console oh I never actually provided that strategy so it's just the sake of completeness going do that locally all right so we're throwing an angular error and it's killing the whole page here so me serve the log and do that again so when I click on this event Oh are we in we never refresh since going into dev mode hey Steven while you're doing that there was a question in the chat it's kind of a delayed reaction but you were talking about the preload strategy and the custom preload strategy and they want to know if you can load the route after a few second delay with that custom big strategy so I believe you can I think resolvers would be a better way to do that I know I know I okay so if I was confused so if you are trying to say hey whenever this route loads make it wait two seconds before doing something that would probably be a resolver right you need to go fetch a piece of data or result something synchronously if you are saying hey don't preload my routes until after two seconds that definitely you can do with preload strategy then return observable right yes exactly so do that yep all right so what's gonna show off is not gonna work and we're running out of time here so I do want to jump into a few kind of rxjs tips and tricks so one of the things that came out with v5 is this idea of what we call edible operators and so a lot of developers are used to importing like rxjs add operator map and so this will still work so this is kept in for backward compatibility but what this is actually undesirable for a couple of reasons one we can't tree shake this if you never use this second this actually ends up having side effects so because this is a set of code that runs imperative ly modifies the prototype of observables there's no way for us to say to kind of isolate where these things come from so for example if I had this here so we map will work over in my about module some of the time right so if the home come of this whole module loads first then map will be available here if it doesn't then it won't be available there and so this is very kind of hard to predict hard to understand code and so they've now added a whole edible operator so I can now import maps which map start with all these tools that I'm going to be using from rxjs slash operators and then how I would use those is I would make mage to be called saying so we're gonna need me you should be client module here so it's just important I'm gonna make a simple HTTP request first so we need to provide this so we're gonna important client module import it from the right place and that's the dark street that's 5-5-5 I believe Oh needy version that we recommend use with newer and I agree required is five five and above I've got two and above to be super specific and so yeah these these letter bow operators come with five five so now we've got HP client so we can make an HTTP call so I could make like a list of repositories and I can say this stuff repositories it simple to HD I forget and then what we'll do is we'll just that's not packed here I'll usually keep this handy there it is so this is a path to a github API request that gives us a list of and you'll repos and then let's render this up to the screen so let's say a blue or black repo repos async for that name dot description so this would be great but our API is not shaped like we want it to be if we take a look at this API we actually see that we we don't want the full results set we want the items array from it and so we need use the math operator so normally you would just say get math but instead now that we've got the medical operators which are tree shakable and code suitable and all these kind of nice properties I'm gonna pass let me use the pipe method and then I'm gonna say math response to response items so that pipe operator is how we use multiple operator so I could do multiple maps here if I said calm like it's the map but I'm well we'll see in a second how I can use this with other operators but so let's go ahead and see if that actually worked so theoretically on screen we should now see a list of and your repositories on the home page there it is so are you should be calls coming in we're mapping the stream of data and because we're subscribing to it from the component everything's rendering fine so the two advanced strategies I want to touch on kind of quickly is I'm gonna give a dirty simple caching strategy because this is really cool but what if I want this to work without waiting for the network so what I'm gonna do here is I'm going to create a subscription so normally you would not do this normally you'd do this in a service but let's just assume I'm doing this in the service so I'm gonna subscribe so this is gonna be an item list and what I'm gonna do is I'm gonna take that item list and I'm gonna say local storage - all right I'm list cash equals items Jason dot stringify I don't list now what we're doing is every time we get a new item list so every time this HTP call completes we're gonna save the results and I want to do is I'm gonna redefine this that repos to be this top repos height amuse this starts with operator and then I'm gonna say I want you to start with local storage item list cache and actually need to Jason parse this and if you don't have that just give me an empty array so again I'm redefining this this observable of repositories into being a new observable that starts with the value from local storage oh I've got a linting rule that's telling me not to do this but I think we'll be okay so again so I'm saying here's a stream that fetches this data from the web whenever that data finishes store it locally and then whenever someone from the UI asks for this thing immediately synchronously give them a copy from local storage if we have it and then as soon as the request from the web has completed replaced fast is that that's the really nice start with operator so well you should see and I don't want to turn my network down just because it might mess up the Hangout what will happen is this will load synchronously first and then as soon as the HTTP call completes it'll replace all the results transparently and so as we start filling kinda more and more of these offline applications or kind of resilient applications that are people of not being affected by Network requests this is a really cool strategy that I personally use with basically all of my HP calls because it it's very automatic and very it's kind of easy to understand what it's doing any questions about that and one other strategy you could do for that would be like service workers right like you can cache the response from service workers and include that in your payload if I'm correct yes yes you absolutely can so service workers are are another advanced topic I don't know if I have time if you guys want me to try and dive into that but service workers are a really powerful set of new api's that basically collect us from instead of these idea of like a bunch of single pages or sites into we're building a full application that the browser and the Internet at large can understand and so the the kind of this is how you get things like the coloring of the toolbar in chrome on Android this is how you get add to homescreen prompts for your web application then we get a cool a couple really cool important api's the first is the ability to proxy all Network requests so because you can now set up a service worker to cache all of your assets so whether it's HTTP calls whether it's your your main DJ s bundle things like that you can proxy those so that the user can access your application your web application even when they are offline and so the service worker can handle all of your application code it can even handle static files you can generate if you need to do something like caching of processed data then a strategy like this can can give you all that offline capability as well the other really important API that service workers give you access to is push notifications so when you visit a website they can install serviceworker and then if you give the website permissions they can then remotely from a server initiated event wake up your web application serviceworker and show you a notification or interact with your application a little bit and one of my favorite ways to kind of show this off is if you go in chrome into the dev tools in a modern recent version and you go to application this is where you're gonna see everything related to progressive web apps or pwace so if your application is a manifest you'll see that here if you have a serviceworker installed you'll see that here and you can even look into all the cache that's being created managed by your serviceworker and as I was saying one of my favorite things to do is hit show all here because people are always kind of shocked at how many websites are already using serviceworker so all of these sites were just kind of random sites that I visited I didn't have as user ever have to make a choice to install on these things but these apps were allowed to install a serviceworker and then the browser is protecting me ensuring that the serviceworker is not using too much memory and using too much disk space and just because browsers have such good security chrome in particular these applications aren't able to kind of do anything malicious right they can only be served over HTTPS so you know they're authenticated and then the app has these very nice API is that allow you to kind of progressively enhance the experience you're delivering users whenever the browser supports it can you touch briefly on web workers and like what's the difference or any stops reinsuring here if I can find the button there we are so service workers are actually just a special class of web workers and so web workers are as a lot of us know it's it's basically the first time we were able to get access to a second thread as part of javascript put in getting access that second thread we gave up direct access to Dom for example and service workers were the exact same where we get a brand new thread of JavaScript with its own life cycle but then service workers because they're this special type of web worker they get access to these other api's and so other use cases for people building any other apps and using web worker like that we can provide that yeah yeah so I mean a service worker is probably gonna be the most common use of web workers but we we also see that a lot of angular developers are building applications for desktop and when you build an application for desktop there's a really cool technology called electron which basically ships side by side a version of the Chrome browser or chromium and anode instance and because you have both of these things and because they can communicate you can run some of your application on the node server or in a web worker and then you can do some of the communicate or run some of your application that the DOM focus stuff in the browser and this gives you a couple neat properties like access to the file system which is not something we typically get with a web app the other use case that we talked about for web workers is the the idea that by taking your JavaScript processing let's say you want to do some traveling salesman or complex problem where you need to run a lot of code or you're doing encoding or SSL or something like that if you take that off of the UI thread because JavaScript runs on the UI thread you can dramatically improve the feel of your application so that things like scrolling or re-rendering or click events don't get interrupted by all that background processing so web workers are I'll say still rather nascent not a lot of developers are using them but on your team we're looking at ways that we can make it simple and easy enough to take advantage of web workers so that developers get the benefit without having to go do a whole bunch of work and this is kind of a recurring theme from the angular team right now is we want you to write angular code whether you're writing your code today and then we want to start kind of as automatically as possible make your code go further whether that's that's projects like shipping your code as a custom element so like a self bootstrapping standards-based custom element with our angular elements project whether that's adding service workers on top of it so it works offline and caches and all the all these sorts of things - and your universal so these are all projects that exist today but I see us going even further in the future so this is not something we started we haven't even started designing any of these things but for example web assembly this is a really cool technology that lets you run more code closer to bare metal because angular has a compilation process and because we're so kind of opinionated about the whole tool chain theoretically there might be a future universe where we can say yeah well it makes sense to ship web assembly and we'll just turn that on for some parts of your application or another example this is we've had kind of es2015 or module use 2015 modules or JavaScript modules for a while now and they've been taken advantage of by tools like roll-up and web pack but it wasn't actually an API that was implemented by the browser's but just this year these ApS are starting to be implemented by the browser's now they they actually look different so how you resolve paths how you load these things when you load them is different between doing it at build time versus runtime but there might be a world where we say hey instead of doing all this up front it's now better to do this in the browser and then we could kind of opt you into those sorts of things or or even better on browsers that it is a good idea opt you in on browsers that it's not a good idea still ship the old code and then kind of get best of both worlds and so this is kind of how I really like to think about anywhere is the stability of an a shoe platform that you you know and you know the tools and they all work together plus the the best of the modern web as the the team can kind of lean in watch for these things try and understand them try and make the experience better for you great great great great and the challenging things with angular being a platform right is that it has this opportunity to cover all these things and as new things come in it's it's you know the team is working on the story of how do you do all that so we as developers get that advantage right so that's awesome but then it's a lot of stuff to keep going and keep living in stay on top of right we're taking that on for you I've a whole bag full of examples here's another one for you in version 5 that we just shipped we shipped a new service record we haven't announced the X the the tooling is not yet ready in the CLI but we we have this new serviceworker which we basically rewrote from scratch because we had a serviceworker previously and there's also awesome tools from the chrome team like for fox but what we found is that some of these tools break developer expectations and so for example if you add a serviceworker gear application you hit refresh your application isn't gonna actually reload you're not gonna get the latest source code what's gonna happen is your browser is gonna ask the serviceworker for the source code and if you haven't closed all of the tabs pointing at your app serviceworker by default is not gonna shut down and reinstall the new one and so it's not going to update its files and so this is something that if you've never with service workers is really non-intuitive the fact that refresh and empty cache doesn't actually get me the latest version of my files and so in our serviceworker we've done a ton of work to better align kind of these cool powers that we're getting with developer expectations so we we kind of reimplemented some of the the serviceworker life cycle events so that if you use the angular serviceworker when you reload a page we are gonna go update the caches and then the second reload you'll actually get all of those right files even if you have another tab open that isn't up to date so we reimplemented the life cycle per tab versus per an accession and this was a tough choice to make because we as much as possible always want to follow the standards and kind of leverage the best of the web but at the end of the day we're we're accountable to developers and users for building out some applications and this was something that made developers lives easier and made it easier for kind of developers that are not doing these things every day and they're they're really trying to get back to work so to say to start taking advantage these things yeah that's part of the key to adoption right so that's important so with those new cool things coming that aren't quite ready yet will you come back on and talk to us about those I'd be happy to yes put on the calendar I know I'll tell you one of the things already cuz they'll be ready soon we have a couple of questions in the YouTube chat if we have time Steve and I'm gonna paste these into the hangouts chat so you can see the questions okay and I apologize if I was going really fast I just there there's so many things to cover and so many awesome things that I wanted to try and get through as much as I could now that was great and everybody can watch the video apposite so no problem because it's recorded so sports like at 0.5 speed or 0.75 speed yeah I love just like one line of code like the preload and it just so easy yeah so question Ron what about any other language service for vs code it's no longer works museum v5 I have not heard about it not working in v5 that's actually a surprise to me I have it installed and I believe it's working and I'm on d5 so if there is an issue I think that might be an isolated thing because I don't have any problems and then the commenter right underneath that said he doesn't have any problems so battery that the person who wrote that you might just go check and see if maybe it's something about your environment yeah I mean we'll check your your versions and then if there is a valid bug file an issue or asking the Gator if you're having trouble things like that there's lots of really good community resources the second question is please tell flex layout is it maintained by Google what's the roadmap so flex layout is a bit of a standalone project it is supported by Google in order to build out some of the the same features that we had for in a your js4 layout so using kind of a programmatic style for making a page responsive to different screen sizes and things like that I would say I'm not actually up to speed on its roadmap but for the the most part one of the things that is kind of interesting is when I talked angular developers a lot of them are looking for an angular way to do everything they want an angular way to write CSS they want an angular way to lay out their pages they want any other way to be responsive flex layout is a really good project and there's a lot of cases where you need flex layout the the kind of component or the set of directives from that flex layout project but I would say take a look at the project holistically and say do you need to use a directive and in it make it angular style or could I just be using display flex I think a lot of developers learning things like display flex it's another tool in your toolbox that that makes you a better developer and it'll actually allow you to solve some problems that flex layout can't solve for you and so it's like I was going to continue to exist I don't know about the roadmap it's supported by our team but make sure you're using it in the right places where you need more of this programmatic inference of like hey based on the page layout based on the user size how do I want to respond the page if it's just pure presentation just show things in columns definitely just check out they kind of bare CSS display flex I shout out to flex box froggy which is one of the the best tutorials that I've used for learning flex box and we had a mood on flex layout not too long ago so I would definitely go back and check out that episode we had Thomas on talking about it yes it was like an hour and half we kept him here he kept going and going so it's great episode on a flex layout you just got angular comm you see a list of them you'll find it there and hopefully I've not misrepresented so I have not been as involved with flex layout project I think that's a good point that you make right and as part of the challenge of angular being a platform is how much do you cover right how much does the team put into all those spaces I mean like it's really funny comparing angularjs to angular so the older generation of the the newer generation and he was actually a lot simpler than I guess was what we do is we just lean on the modern web more so you have to go learn yes 2015 you have to know about imports and classes you have to know about bundling you know and all these things so one of my favorite expressions is angular apps look day one like angularjs applications looked after two months right you because you would start you throw a script tag in I think you say oh god I should refactor this and it multiple files okay now I want something like typescript now I want to concatenate snot enough known uglify my application like we would do all this work to make good and your j/s applications but angular apps look like that from day one and I think that's that's a really exciting thing that I've heard from a lot of people that like they feel like learning angular made them a better developer overall which was I think not an intentional thing but well we'll take it so before you go I have a question for you what is what is the future like what it what does that look like is there anything big coming that's like you can give us you know a little peek about or something like that sure so in general we're we're actually an open source project so we're pretty public about everything I mean we talk about things at conferences we talk about things at events so there's not really a lot of secrets so I think it's this trend of smaller faster easier to use is something that we're really continuing and something working of doubling down on us is how do we make your apps better with the existing code your your writing so I think you'll hope to see some of that and also all these others projects I hope that we continue to build better tooling for them make it even easier to stay up to date server-side render application few of you a take advantage of all these things so I want to see some day where we've made all these tools good enough that we flipped all the switches and every angular app is server set rendered and pw ade and running a web worker and all these things if I can figure back off of that there were two things that I recently heard about that I was pretty excited about it at angular connect which was one obviously the angular elements is pretty cool I don't we following that pretty closely and also if you want to hear about the latest greatest top secret new things you should check out angular labs it's not top secret but but it's a good place to find it nowhere to check it out you can't let go we don't have a list of any labs it's it's really just a label we're starting to apply to projects to indicate this has an uncertain API in an uncertain kind of results so so as soon as it comes out with it you can't like stamp it with it we can we can like get an RSS feed going to everything angular lives because what we ended up doing was we used to call api's experimental but no one knew who they were experimental and so they started relying on them and then we they effectively weren't experimental and so we're trying to do a better job of level setting expectations so that that's where the angular labs that's one of the reasons they go to labs label came around I like it nice so we better wrap this thing up let's do some pics and then we'll call it a day let's go through our house Mike do you have any fix Thanks Oh Stevie's gotta run alright thanks even the room was a meanie be occupied all right well hey thanks to Steven really appreciate him coming on and giving us all this information so we'll do our picks and then we'll we'll call it kid so Mike I have no technical picks but I do have one non-technical The Punisher so the Punisher was a character introduced in daredevil season 2 on Netflix but he got her The Punisher got its own series and season 1 was really the end of last week so check that out I'm excited to watch that here and that over Thanksgiving break nice it's more things for the queue right all right uh Austin what do you got yeah I've got a couple um so sequel studio was released by Microsoft like a week or maybe two weeks ago but I was looking at it today and I noticed that it's actually an angular app and so if you want if you have not downloaded that it's a pretty crappy it's pretty nice electron angular app you can download to like query sequel or NS sequel Postgres and a couple other ones but the really cool parts the code since it's all angular you can kind of time in there and check out the directives and whatnot another one I have is team discussions by github came out of it yesterday or day before which allows you to like have it's basically like a forum for your open source project where your team can like either privately or publicly discussed you know upcoming topics and things like that something that get hubs been meeting for a while I feel like and then another one is basil is a alternative like build engine that you can use to build angular and the awesome team at Narwhal put out a post about that on how to use angular with basil that's it cool Bonnie you have anything today or I do I didn't have one but I but I actually did because I came up with one so I don't know if you guys remember Dave Geddes you should remember Dave Geddes because he's super fun and he's one of the organizers of ng-conf and he did flexbox zombies which I found really cool not that long ago so he just released CSS critters what is it grid critters so if you if you'd like to flex box zombies you will love grin critters and go check it out because it's he's just super fun I love that guy nice alright I got to but it's not you don't know you're sorry I don't know you're learning it's like a it's like a video game like it's not actually like a tutorial it's it's like playing a game but you learn on the fly by accident yeah those are very awesome and he puts a lot of work into all the graphics and the layout and all that the concept behind it it's it's really great so you definitely should check that out I agree my dad too yeah first one is ng Vikings which is coming up in March 1st and 2nd of 2018 next year and Helsinki Finland I tickets are on sale there's a pretty awesome speaker lineup for that event so you should check that out and then my second pick is Justin Searles has a gist about how he does is to call the five minute backpack demo and it kind of breaks down how he packs and for traveling packs really really extremely light I've been doing some traveling a lot this year more than I normally do and probably some more next year and so I'm kind of starting to get addicted to this how can I pack way lighter this is pretty extreme but there's some cool elements in there so it's a it's on his it's just G ist github.com /se a RLS you can check it out there and it's the 5 minute backpack demo but I have some cool products and stuff to uses so pretty cool all right that's it we got some good shows coming up in the pipe so definitely check us out and we will catch you next week see

Channel: AngularAir

Views: 2,117

Keywords: angularjs, angular air, angularair, angular2, angular 2, #hangoutsonair, Hangouts On Air, #hoa

Id: Z7-RqIj4Feo

Length: 59min 24sec (3564 seconds)

Published: Tue Nov 21 2017