ngHouston - Angular Flex-Layout w/Thomas Burleson

hello ng Houston how are you doing we are super excited tonight because we have Thomas Burleson and he's talking to us about angular flexbox and animations and we're excited so we're gonna get into that in just a minute but first I want to introduce the panel tonight we got a list of nickels say hello ELISA hello and howdy hi guys we're so happy you're here you're so fun and you're talking about animations too when a couple weeks right when we're um yes wait like the conference ng crews yeah what is it is that like right around the corner yeah I think it's next month out like you know sometime I think it's memorable with dates is it may see hang on we're in May I thought I was the only one that forgot the date I didn't even do i calendar no so until I have these alerts go off so it's coming soon and I will be doing an animations talk but that's all I can give you that's awesome woo all right Reggie everybody Angie Houston you guys know Reggie Reggie's been with us for a while Reggie say hello hey guys what's going on have you been doing animations yet have you been working with any flexbox tech we're not having this is this going to be brand new for me and I actually do a lot of CSS stuff on the front end I do a lot of the animation stuff it works oh this is going to be really interesting it fun for me to see that you see it from the angular size oh my god you're gonna like it okay and we have Samantha how you doing Sam I'm doing good it's math is excited aren't that's why you're excited Sam I'm excited because I love CSS and flex locks makes my life easier and I've been using a lot of animations and I love it and so this is animations and flexbox and it's like but you've been you've been learning flexbox and and so now you get yeah that one's not for you but you already know those concepts from where shout out to who that was actually one of the first things I learned like an old angular world with the foot box ambiance awesome oh you know flexbox ambiance reggie yeah on cold school represents inside they get a system working on it it's you haven't seen oh dude we're gonna send you a link yeah I got Lex my song you're gonna love it oh yeah oh yes it's very fun very welcome yeah we're gonna we're gonna tweet out a link cuz you got to check it out it's a little it's fun you're gonna love it I swear by Wyatt Izzy it's very dear to my heart oh it's a great way to learn once you have all those concepts you can just jump right into to the angular flex box and Thomas is going to show you some cool stuff and we'll reach out sighs okay speaking of Thomas I want to introduce our awesome guest star tonight because he's Thomas Burleson and we love him he's pretty cool and he's going to talk about flexbox and animation so yeah Thomas take it away hey everybody it's great to be here Bonnie thanks for having me Alyssa and Reggie and Sam this is awesome uh got a little bubble the purse though there's no animation in this talk it's all focused on flexbox CSS and the problems and the solutions oh well I don't know why so I thought it was animation well I threw that part actually we grabbed the description and then I had no idea there would be animations and so then whenever you're time I was like I must have like misread it so right I was thinking the same thing Alyssa there's like an animation I don't remember saying I was gonna cover animation were you panicking for a minute Robin I could pull out of my hat and I don't have one handy well let's learn about animations throw me one box and we'll do animations next time I thought well if you want to learn about animations you need to go to go to the cruise and follow Alyssa cuz she's gonna know all about it also around the cruise though around the cruise yeah okay so flexbox about flexbox Thomas alright so I have some slides I prepared I thought that would give us some good visuals and walk us through when you would you mind if I present those more awesome all right I guess I can just share my screen and tell me if you can see this can you see this all right we go about dollar today look at that style sheet baby does that work out did everyone see this weekend okay so today we're going to talk about angular's flexbox layout and layout library and this is a library that Google's sponsored is an open source library and it's available via NPM if with ads the at angular slash flex layout so before we dive into what flex layout is and what angular flex layout is let me introduce myself a little bit again my name my name is Thomas Burleson I'm the team lead for angularjs material and if you guys need to get a hold of me you can reach out to me through one of these three channels Twitter Gmail and LinkedIn I've also had the opportunity to speak at a couple conferences at ng-conf two or three times at angular connect and ngnl so you might see some of those videos up on YouTube if you look so angularjs just to sort of set the context because we'll be referring to it a little bit later on it's why the slides angularjs material is an effort that was started almost three years ago and this was an effort to create an angular native set of UI components and a framework based off of the materials design specifications and I gotta give a few slides are you showing us your your code oh are you kidding you're not seeing the I was in that hilarious am i sharing the wrong one you're sure will we see your screen but we don't see your slides okay that's that's too funny let me fix that we'll have to start over briefly that's 11 start my stop sharing let's see I think it'll give you a screen option so what happens when you have lots of monitors yeah let's let's see if I can actually do not see I don't see the there we go if I looked closely how about that is that better yes okay now we see your slides what you're saying yeah sorry about that so I just I won't actually repeat everything but here is a slide for contact information if anyone needs to get ahold of me and here is where I was talking about angularjs material and this is a UI component framework for the those who aren't familiar that Google sponsored and I got to give a huge shout out and thanks to Brad green and Naomi black for letting me have the opportunity and the privilege of working with the material team it was been really really great so material actually has angularjs material as 3400 Forks and about over 15,000 stars so we have a lot of people watching and looking at it I also am a trainer at fought Ram where I teach angular masterclass and I'm also a consultant for them for a hands-on architecture reviews and mentoring and other things for clients and for those of you who aren't familiar with thought RAM you can check us out at thought Ram Daioh and we have almost over 40 technical articles on angular and angularjs we try each of us had thought RAM to blog an article at least once every 2 or 3 months and we actually have some new course we're coming out that I'll mention at the end of this let's talk and they are very good articles if I may say so well thank you yes we try to take a real pride and in making it clear and fun to read but also extremely informative and in fact when I need more details on something I've forgotten I go back to them our own blogs to read up on it so the today's talk we're talking about the flex layout library from angular and this is the effort that started last September and we're in beta 8 right now it's an open source library at github slash young comm slash angular slash flex layout and we already have over a thousand stars there is the repository itself with the online wiki Docs and then there's also some online demos and I'll provide a link to that later on and these demos are actually you can see the source to the demos in the repository and then if you go to the demo site you can actually play live with the with the samples so what is angular flex layout like that to me that's a question that everyone should ask first but before we start talking about what it is I thought it would be really good if we first step back and say let's talk about why why do we need to create something called angular flex layout and to do that properly we should really step way back and talk about just HTML layout right when we're creating web pages and web applications we need to position our Dom elements on in a page and we need to be able to adjust the element positions and their size potentially relative to the parent container relative to sibling elements and if the window resizes we might want things to adjust and the positions to change so that becomes a bit of a challenge and here's a great great example of I made a typical HTML layout right we have a header bar that actually has three elements and in the header logo a banner and then a header header sub bar and then we have a Content area that has left blocks and these Center blocks and then right blocks and then we have a footer bar so if we were trying to lay this out there are several solutions we could take but which one would be the best well we could use tables we could use floats and positioning absolute positioning and relative positioning and clears we could use grids like those that are available from bootstrap we could use flexbox CSS or we could even use a constraint based CSS I'm not going to really talk about constraint based CSS that's something that's coming it's available in some browsers right now and it's the it's the bomb it's amazing but because so many browsers don't support it yet you won't see many people using it and that's why flex layout from angular is actually based on flex box and so in constraint based CSS so let's talk about flex box well if we if we ask why do we want to use flex box CSS to do our HTML layouts we could we could step back and say well we could use grids bootstrap grids which are under the hood using flexbox we can use grids for 2d layouts but we could also use flexbox for a 1d layout flow and the reason I'm mentioning this is that it's it can be really confusing to people when they go what should I use bootstrap should I use flexbox CSS what's the difference between the two and and how should I approach doing my layouts if I'm you just using flexbox and notice I'm not talking about angular flex layout which is has a certain API I'm just talking about raw flexbox CSS at this point so I like to tell people when they're looking at using flexbox CSS the best way to think about it is flow it's a flow of elements and the flexbox CSS is actually a box model that was optimized for user interfaces and if we think we look at this sort of diagram here we have a yellow container and it has a main axis that goes left to right because we're we're doing a flow horizontal flow or a row flow so the main axis is left to right and the cross axis is top to bottom and if the flow was vertical or column based flow if the Flex direction was column then these accesses would flip and rotate but to keep it simple we'll just say that the main axis in this case and this in this usage is horizontal and the cross axis is vertical and then we can actually identify how we want the children items to layout right they may have specific sizes or we may want them to resize to fill the available space and then there they are going to be laid out left to right if the if the Flex Direction is row and it's not row reverse then it's going to be laid out left to right so that's sort of a quick little introduction to flexbox CSS but let's talk about how do we conceptualize how do we think about doing layouts with Flex box I like to say that flex box you should is just all about containers and the children in the containers and containers define the flow direction and the children define their sizes and their offsets and their order and containers can be nested so containers can have children containers can have other containers and and so on so you can have a deep nesting if you need if you'd like so if we think about flexbox as being a flow layout and we think about the children elements as being some sort of size constraints that we want to do then we all of a sudden it gets a little easier to start thinking about how we want to take a wire diagram diagram and actually implement the layout in for our Dom with flexbox CSS so the flows as I mentioned are going to be either horizontal or they're going to be vertical and the sizes are either going to be a fixed pixel size or fixed size or they're going to be some sort of ratio and if they're a ratio or percentage you can think of it that way then that means the sizes could change as the window size changes or as the viewport size changes and that's pretty important because then that allows our UI to responsibly adjust its sizes and we'll come back to that that term in a little bit when we talk about responsive so here was that diagram again where and now let's take a look at how this diagram maps to flows so we had this whole header area we have the main content area and we have a footer bar but if we want to break it down how do we approach doing this initially so I always tell people you start from the outside and work your way in so from the outside our flow is vertical we have our header area is one our content areas too our footer is three so that tells us immediately that are the container for these three items is going to have a flex direction of column so it's going to be a vertical the next thing that will happen is that our header area actually will have a row and a horizontal flow and we're going to use a row wrap we're going to use a wrap option to basically say hey just think of them as being one two three but if there's not enough space wrap them around on the next line so the element number one we'll layout element number two and then three will wrap around and three will then be on the second second row and then similarly with the content box it's going to be horizontal left to right we have one the left bar to the the middle area and then we have three the right right knit bar but it gets a little trickier here because what about the center content area right so we drill down from the outside and we're working our way in so let's keep drilling into the the center area here and the center area it also has a horizontal flow and we're going to use us we're going to be sneaky and we're going to use a wrap and we're going to say okay the first elements 2.1 and then 2.2 2.3 and 2.4 and then finally and then of course we have the bottom area but that sort of laid out with it with the initial set of elements so we can take this whole wireframe that's in the upper right and we can decompose it into a sense a series of flow directions and that's what I meant by that we should always consider flexbox as flowing of elements out and you do that from outside in any questions on this not so far okay so so far it's green pretty cool actually just very bored right so I think it's it's when you we think about Flex boxes just being a containers and flow directions it becomes really easy to break things down right because one of the hard problems is you think okay well I can do a couple element so figure out how to get them to layout but then when you have more complicated UI ages like HTML pages people can get stuck so if you just think break that into wireframe diagrams and think about nestings and then do it from outside in all of a sudden becomes not so terrifying and then the sizes you know the sizes are also pretty interesting right because now that we've figured out the flow of the containers what about the sizing and the children you remember the header bar area that I said was supposed to flow horizontally left to right and would wrap why would we get the third item to wrap around well the way we would do that is we'd set the element number one to 33% element number two to 66 percent of the available horizontal space and then the third element which would be have its own on sizing would actually have to wrap around and similarly for the content area we could say okay the left bar sidebar is going to be a 25 percent or 25 percent of the available horizontal space the right will be another 25 and then the middle area will be 50 so you can see how we can do this breakdown and by thinking and conceptualizing your sizes this way as your window resizes all of these will sort of adjust right so because they're all percentages that means the 33% in the upper left will shrink a little bit if the window shrinks so will the 66 percent and 100 percent so they'll all shrink and they should go shrink and synchronize a be a synchronized size adjustment okay and do the in do in whenever you think about it in in a idea of percentages and ratios does it take margin into the into the account well this is content box okay so I believe I'd have to look it up again yeah that's one of em I boo it takes margin in this into account I'd have to look up again whether it takes in the border or not okay right so there's there's some little nuances where you may have to tweak things where okay the border is three pixels and how does that effect and there's a padding and so orders are margin margin can definitely affect things okay so if the element that was 33% had a margin of 10 pixels then you'd have a little gap there okay okay hey Thomas wait a question in the chat how do you decide if vertical or flow with rap with elements that I think he's talking about like how to use but I think you're probably going to cover this when you get to the code how you would determine whether or not it should rap or whether or not it should yes well yes I definitely will cover that's part of the API and even setting the sizes as part of the AP so what we're talking about now is just flexbox right just CSS it's as if you I stepped away even from the actual details of what the CSS should be and we're talking high level concepts next one we can do we can then start talking about the actual flexbox CSS I won't actually cover that that much because the goal here isn't to make everyone experts on the actual how to write CSS because the angular flex layout library most of it eliminates your need to know any of those details I think that's the beauty of the flex layout cool all right Daniel we'll get we'll get into that so we might have time at the end we'll ask questions to it but you probably will cover that anyway so let's take a retrospective on some of these layout techniques I mentioned earlier we could use tables and I mentioned we could use grids which light was not listed here but I mentioned also flexbox CSS and then layout CSS so let's just take a quick look at those right so if we were using tables here is your classic table type of structure with your TRS and your TDs and for anyone who's used tables in the past they're really verbose and if you remember those oh yeah they're just in it really I think of it as bird poop all over your cut your HTML it just poops everywhere because instead actually seeing the sections that you're wanting to deal with you actually have to like interpret where is for example where's my home section oh that's all the way down on some tr where the TD with 70 pick pixels and so it's not an easy easy structure to try to decompose especially when you're in and because of that it can be a maintenance issue and if you do nestings of tables that can be really challenging so tables in their simple form are pretty nice but as soon as you'd want to do anything non-trivial I recommend to everyone stay away from them so if you're not going to use tables then of course you could use flexbox CSS so here's an example where we have some raw CSS where we're saying hey I've got a class name called of a community called container and I'm going to justify my content in that container to either be flex start or flex and or Center or space between so these are some of the options and the child in that container I might say that it has a flex so there are it shouldn't adjust its size at all it might have a flex grow option of flex rink option and an optional flex basis that we'll talk about in a bit and again Yuuka everyone can go to CSS tricks which is a really great resource from the guys from code pen and they have tons of tutorials on flexbox CSS and what these options mean and when you should use them and when you shouldn't so everyone will notice on this particular talk that I really won't be going into those details just because we don't have time and the reason I'm not going to those details is because using again using angular flex layout you don't in general you don't have to know those so if we were going to still use them the raw CSS the problem with that is you have to define it manually it rapidly becomes clear that you need some in-depth knowledge of how and which options to use and how to do these things in CSS how to do the Flex stuff and you also requires experience to get around browser bugs because not all browsers support the render your elements in the same way for the same CSS the flexbox CSS so there's some hacks and some workarounds especially when you are doing flex direction vertical or column then it gets really tricky and there's also prefixing right so some browsers want different prefixes on your CSS keys and and finally if you're just using raw CSS it's not angular native so there's no bindings here to any expressions or change detection or anything like that so this is just raw this is great for HTML developers but for angular developers it's just not sufficient and honestly what we want to do is we want to remove the barrier entry you shouldn't have to be a flexbox CSS expert to be able to do your layouts so angularjs material actually had a layout a flexbox layout engine within it and here's an example of some markup HTML where we have two dibs one is flowing in a row direction and one's flowing in a column and you can see the rendering down below there so it's very simple where we've said okay hey layout equals row and then we're just those are going to flex which we meant that means just adjust the size to fill the available size and since they're both flexing without any extra options that means they're both going to adjust to an equivalent size that's why the first item in row and second item in row are the same width and the first item in column and the second item in column are the same height it's so beautifully simple right I mean if you think about the table structure that we saw before that now you know why I meant I said that that's just a nightmare and it's like some a bird pooped all of your code yeah that was a lot of code I love it when you can do something like this and it's so elegant right so this this was a real I think success for angularjs material but it wasn't a complete success the layout engine was actually embedded within angularjs material so you couldn't use it unless you were also using angularjs material you could but let's just say it's it would be more challenging and these directives that you saw here these layout equals and flex equals those directives they simply ran and then generated or calculated appropriate class name and they attach the class name to the Dom element and then we of course had to have generated CSS classes with the flex locks raw flexbox settings associated with each of those class names meant was we had over 250 K of CSS just for the layout engine that's a pretty hefty chunk and then we had this issue of CSS specific I don't know if you guys have ever run into that where you're trying to override a specific setting on an element and the current CSS settings on them are so specific that you can't override it unless you give it the st. you've the overrides the same level of specificity in other words the exact nesting structure that might be involved and that isn't that isn't a good approach right it's it becomes because then you might start doing things like pound important and or even other hacks to get around and to add your own custom overrides so that proved to be problematic and the other thing was that the layout engine was a little bit fragile right it didn't really support the expressions in the data binding that we really wanted it to it had sort of fixed intervals that it would allow you to do things out for example you could say that flex equals a 5 or 10 or 15% but you couldn't say 12 or 11% so if it was a we had some very strict expectations on how it should be used however that was a great learning lesson for what we wanted to do in the next generation and that's where we we why we created angular flex layout and again this is a repository that's open source it's available online and there's the URL for it when you use angular flex layout it's a standalone library there aren't any CSS external CSS style sheets that you need to use or import it's a typescript implementation and it actually dynamically injects inline CSS onto each element it does it on the fly during change detection it has a static API that we'll talk about in a few minutes it has a responsive API that that will also talk about it's independent of angular material so angular material this is material - some people call it and angular material uses flexbox but it doesn't use the Flex layout API they use raw hand coded flexbox CSS and they did that deliberately because they didn't want to have an explicit dependency on angular flex layout so it makes total sense but when you if you try to use and you can use flat angle err flex layout with angular material you can use both of those within your application you just have to be aware that the angular material components and currently may be doing their own flexbox and then there's some you can actually install angular flex layout with the angular CLI and NPM there's also documentation apply online it's we're looking at identifying how we can bring the documentation and integrate it in with angular I Oh for now it's just available as a wiki set of documents and we try to keep those up-to-date as much as we can so you can go to the wiki and explore there's documentation on the static API the responsive API the custom breakpoints live online demos a plonker template all and then learning resources right so if you want a complete guide to flexbox how flexbox box works etc this is a great question that so many people ask well what versions of the browser's does angular flex layout support and the answer is we like to say is n minus 2 where n is sort of evergreen browsers these are browsers that are continually updating themselves and we will go n minus 2 so currently it's edge and ie 11 and there's some you can see the versions for Firefox and Safari up opera obviously and then of course chrome and the great thing about this one is you can even look at the known issues if you want to see a listing of all the hacks and the workarounds to flexbox CSS if you're doing it by hand we try to incorporate those workarounds within the layout API we're not always successful and we have some issues currently in the repo that talk about that but we're working to improve it so want to make sure that I think I might have lost myself lost my spot apologize let me make sure I have my correct spot okay right here so install flex layout within your own application you're just going to use NPM to install it locally and you'll say - save and add angular slash flex layout you don't need the @ late latest but you can always have at latest if you want to make sure you have the latest version and you don't want to lock into a specific beta release right now we're at beta 8 and then after you've installed it locally and you want to start compiling and building your application you'll want to import the Flex layout module into your own module and that's pretty easy you'll just import flex layout module and then you'll just add it as - a listing out to the list of imports in your own module in your own app module and that's it now there obviously there's a little bit more to it because you'll have to use the API but now that you've loaded the Flex layout module you can start using the declarative html-based api and you can start using the imperative type script based api so let's talk about that any questions before I go on to the static API we did have a question in chat I think it was kind of it was a couple slides back so I think this might be a good question to loop around back to at the end we're talking about that first slide about the horizontal flow versus the vertical flow so if you want I'll remind you when you get to the end and you can go back to that first slide and just kind of we'll talk about that a little bit absolutely not a problem in fact it's so easy to navigate here we're we're good ok so let's talk about the static API real quick and this this is an API that everyone will use out-of-the-box right it's directives that you use in your HTML it's declarative these directives they support data binding and they build under the hood they build the CSS CSS dynamically and that's injected right into the Dom element the directive support change detection and we have extra features more than just flexbox direct base directives we also have an FX hide and FX show and we'll show you why those are pretty important and we've tried to focus a lot of attention on making these this API and these directives very performant so the static API is pretty simple right if you want to say that a container lays out in a certain direction you're going to use FX layout so here we have a div container and we're saying hey layout row now you can ignore the other one other options there we'll come back to that in a minute and then we have a layout wrap so you could say a layout wrap you don't even have to tell it which direction right that you want it to wrap or not there's some options that you can add but if you don't add an equals and then some value it will default to and this will default to wrap just like FX layout will default to row there's another one which is an FX layout gap which allows you to specify a gap that all the children should use and there's a left effects layout a line and we'll show you in a bit what a line means it's incredibly powerful then and by the way that if we back up for a minute that's the API for the containers there's also a static API for the children we have FX flex where you can specify how it's supposed to grow and shrink and what basis is supposed to do that on and you notice you could use integer values you could use calc for the basis you could use a percentage a pixel value whatever you want or pixels whatever there's a flex order there's a flex offset you could use percentage for the offset you could use a pixel value and oh and all these if you don't say P X then the lot of the API it assumes it's a percentage you can say I want this element to align itself into the center and I want it to fill the available space and we'll show you what some of these mean in just a moment so [Music] actually that was a good time to show you so if we you click on this link here everyone might have this this will actually take us right to the source code for the demos so we'll come back to here for a moment let's go to the demos angular flex layout so here we were talking about using a layout a line right so here we're laying out in a row and we have layout and it's spaced around and then Center so it's having its centers vertically that's the cross axis and it's ads spaced around the elements horizontally because I'm in a row direction but if I'm on a column direction it does it that way notice this changed here if I go back to row I can say okay I want it to align at the start I wanted to line in the center at the end space between right if I want to do something with the cross axis because often I mean even I forget these all the time like what is it actually doing so I I come back to the demo and I'll look at this a lot of times okay oh that's what I want oh no I wanted at the end I want I wanted to stretch that one looks like it's a bug Thomas I think you just made Reggie very happy cool I heard someone got a sort of a gasp very cool oh man is this is yeah this is nice you like it cool yeah I like the center of Center because I've had probably I think anyone who's been doing this for a while has struggled with that center alignment especially when you don't know what like if you have a dynamically sized thing and you're trying to yeah that's that can be tricky and I believe the layout is the hardest part in the MOOC is yeah and then this actually will let you notice these values change right dynamically so you can actually see what the values here would be used to do render the same effect and it can get tricky right so okay oh or doing that one there that one there so depending on which direction you're going it has sort of a different effect now we had the layout the FX fill right so what we did on this one if we go over to the source here just for a moment I won't take everyone's time too much but here is the fill I thought that was the filled layout fill so I've said I want to I want to fill this guy here right I wanted to fill the available space so in other words I want these two elements a and B to fill the entire container which is the row and then I've even said that B should flex and fill the available space so a is a specific size but B should just adjust to fill the available space and notice if I have started reducing the window everything starts changing here's one where here's a row now it's twenty percent sixty percent and then fill the available space but if I go to column twenty percent sixty percent and fill the available space there is one where I'm aligning to a baseline this this item itself here's one where I'm using layout wrap right so I'm saying okay I want to these have specific sizes percentage sizes and notice this one is 33% it couldn't fill it fit in here so it wrapped around and started here and continue on this was 66 70 67 percent this 51 year couldn't fit on the second row so wrapped around here's a column wrap here's a row wrap here is where you can have different flex values right none so don't don't do anything to the size itself use the default size here's one where I don't want it to grow here's a flex value here here's where I'm saying grow and these are all options that if you want to know the details you can go to the CSS tricks and look up those those settings notice that the API here is meant to be very simple while you're using the API at the HTML level and you may have to know the value that you would normally put in at the C at raw CSS but here you don't put the value in the CSS you put it in the HTML so it's right next to the element that you're actually affecting which is really nice here's one where we're using an offset all right let's go n equal any questions on that before I go on to the next section I just have one question on this this page that you're clicking on is this public is this something that is this yours or is it something that we can like tweet out and send the link out cuz this is cool this is you click on it it does that little thing underneath it change well so when you click on any of these so some of these are there like this one I clicked on it it changes so some of these like when I click on that it changes this one it will change so it all depends if I hooked it up to support and these two have data binding like can we can is that something that we can we can go and we can bookmark that and use it as a reference yep so that this is meant to be an online reference source for all the demos that are available in the repository so these demos are here this is the source code currently these demos don't have a source view and that's something we're working on right now to actually add a way for you to toggle to go from the live view to actually see the HTML that's being used I think that would is the next step that's important but this link is a temporary link it's been in use now for three or six months but I need to actually convert it over to be a an angular flex layout URL instead of this one and that will be coming in the future but until that happens you guys can use this when we do change the URL here's what's going to happen whenever you want to see the demos you go to the repository you go to the wiki and choose live online and it will take you right to the demos well for now I'm just going to put it in our in our YouTube chat if that's okay so they can absolutely yes so so question how how does this play with dealing with media queries like me whenever you're styling for a mobile app okay right so you remember when I said you might ask questions I'm gonna say well we're coming to that okay so we're going to that that was actually a great question and I think that's coming up very soon okay great like because what I what I haven't talked about is media queries right and I haven't talked about why our media queries useful so we'll come to that very soon we're just so excited Thomas I love it alright so this static API is nice but it doesn't really seem so special like okay I mean if you're looking at it it's just it's some API in the HTML but I could have done this with Rossi flexbox just hand coded it so what's so special about this well that's not so special what's really special is the responsive API that is in the HTML that's an intuitive way to actually respond to device size changes and to viewport size changes in a really elegant way so before we start talking about the API let's back up again and let's talk about what responsive user experience is so containers and elements they should adjust their sizes and their positions based on changes in the window sizes that's a responsive type of thing so they're they're fluidly changing their sizes on the elements as the window changes some people though also will say but that's that's not just response and responsive means that your application responds to two different device sizes so if it will render differently and different sizes based on being in a I phone or on a tablet or on a desktop I'd like to say that when you're talking about responding to different devices and changing your UI based on devices then what you're really doing is you're adapting your user experience to the new device sizes and that means your applications are not only responsive they're not only changing their sizes they can actually be changing their layout what's visible what's not visible their order so they're adapting and they're an adaptive applications so here is a very simple example of a responsive user experience on the left is the layout that we might have on a desktop and the same markup with now using some responsive features will look different on mobile notice the header is the same but now the article is the first one listed vertically and nav which on the desktop version was listed on the left is now listed below the article on the mobile so not only did we change the orientation and resize but we changed ordering to so you know what I love about this looking at that picture right there I can't tell you how many times back in 2009 and 2010 I hand coded like exactly that policy absolutely I mean for those of us who had a lot of HTML like work and experience we've run into these scenarios and we banged our head on how do we want to solve these problems and how do we use god forbid how do we use media queries and how does that work with flexbox and oh man it can be really painful what I have to tell you that using flex layout it's not painful so if we think about you know I always love a minion right you don't you just don't make your sponsor user experience without flexbox and media queries so Reggie you asked about media queries here you go right so you you can use flexbox but you can't be responsive without and it can't be adaptive without media queries hmm so here's the old-school approach to using flexbox with media queries right you would have your media your at media and then you might say this is going to apply when it's on when it's visible on a screen in other words not being printed and the minimum width is it's 600 pixels or larger in width and then all these class types are element types and class names would apply so these would override default ones and these would apply for anything I like to think of this as anything not mobile all right so this is this is an old-school approach and you can immediately start seeing you know oh my god please tell me there's a better way I used to do that I used to write that all the time I was pretty exciting because it was it was pretty cool but now yeah and I feel like this guy right this actor here with my hair standing straight up and this thing can be a challenge so with the response of API we can easily build adaptive applications and we do that using flexbox CSS under the hood we're using responsive features for resizing and repositioning we're using the markup in the HTML layer so you're not in the CSS you're in the HTML and we do that without you having to worry about media queries so we'll talk about in a minute about how that sort of works but when we start talking about media queries the first thing we should do is start thinking about material design the material design has published some industry specifications for ranges of viewport sizes so they have ranges like from 0 to 480 pixels wide 600 pixel wide and they've sort of identified ok if you are from 0 to 600 then that is a breakpoint range known as extra small and if you're from 600 to 960 then that is a range that they define as being small a breakpoint range right so the breakpoint is a switchover and so we can talk about our breakpoint range but they're associated with these sort of names right extra small small medium large extra large and then if you wanted to get more complicated you can start looking at orientation in your median queries and then identifying okay if I'm on a handset small as a different size and if I'm in a landscape so it can get a little complicated so if we take this sort of specification and we say okay let's associate the media query for a maximum width of 600 pixels or actually just before 600 pixels anything on the screen anything up to that width we're going to call that an extra small or an use an alias called excess and anything larger up to almost 960 is SM for small likewise for medium large and extra-large and these aliases are going to be used in our API and you'll see how in just a moment but we also have more we have less than small less than medium less than large and less than extra-large and we even have greater than extra small greater than small you know greater than medium and greater than large so there's a whole suite of aliases that you could use in our API so the less-than and greater-than comments that that includes everything so it's like less than small would be everything of like greater than small would be everything above that and it would just cover all of those correct it would cover so greater than small would cover medium would cover large extra-large and it would also cover greater than medium and it would also overlap with greater than large right so you have to sort of think about what this is what this is doing but like less than medium covers extra small and small that would be really good if you don't if you don't necessarily use all of those say you only want to have like on your sidebar it will be visible or invisible you you want to have just like one bright point maybe then you would use correctly easy for that right there is there is there is nowhere in our do we say you will have to use all these in fact these are there for your specific custom needs often I tend not to use the less than ones because I tend to think in greater than but for some people they don't want to think greater than their mind is more naturally leans towards thinking about less than hmm so so this is essentially just the abstraction of like the media queries so this way you can think of this as oops right here it's taking this sort of mapping and it's saying let's associate for example can you can you guys see my mouse here yes yes okay so let's take this extra small range right well what happens if we wanted to consider everything outside of that range it's either greater than extra small or what I'm so if we wanted everything outside of small would be there less than small or greater than small right so those greater than less then is give you the options to decide how you want to use the API oh and I like how that that diagram you just had included the portrait and landscape and you can turn your phone and see how that's going to be affected now coming out of the box with Flex layout we don't support orientations there is some way ways you can add custom breakpoints and we'll talk about that in a bit but out of the box we try to keep it as simple right for the most common cases so in would question what up would I be able to combine a breakpoint aliases I using like a greater than small but a less than exit uh like extra-large together absolutely color range okay so really and I will show you exactly how to do that so with the responsive use user experiences you can easily create adaptive the UI layouts like you see on the right doing this you can simply add the alias to the API it's super easy you take the API FX layout you say dot and then whatever alias you want to use SM greater than s M less than large medium whatever you want what that means then is going to add that to your HTML tag that's exactly right so here we go notice here we have layout right column and here we have flex we're saying okay this is going to be 20 percent 60 percent and 20 percent but notice all of a sudden and we have I'm just using a default ordering in other words nav is first articles second and the aside is next but notice here on the order I've changed it if it's unmown I want this one to be first I want the article to be first and remember if we go back to this year the articles first [Music] so the it becomes extremely intuitive to look at the HTML and see exactly what's going on notice you don't see anything in here about how the CSS is generated how its applied or anything like that that you shouldn't have to worry about right if this is a declarative API so to get this desktop a layout to be adaptive we would start with some boring HTML these headers and abs and articles then we'd spice it up with the static API right there right so all we've sort of this is the static flex layout API and now and then that would render this image we saw right here okay however if we wanted to act differently when we're on mobile then we want to you have a mobile layout that's slightly different so we want to still take this this static API here but now we want to add the API for mobile can you tell us again what those three numbers are sure so I love that gif yeah that's one of my favorite gifts of all we'll come back to that by the way I want to give a shout out to Katharina old Oh Lord Oba actually spelled her name wrong here I apologize but she helped me with some of this concept on this slide here and this was a really good way to illustrate so what we have here is that we're saying hey this member if we go back up to this one here notice this is laid out in a row right mm-hmm but here we wanted to be laid out in a column when it's on mobile so this API says lay it out by default in row but when you're on mobile when it's dot XS lay it out in column mode and then we say okay this is going to be the first item normally shown this nav element this NAB container but on mobile I want it to be the second one this one normally is the second one shown this article but on mobile I want it to be the first and then this one I want it to be the third and what about those three well that's going to do 20% this sizing right so there's a there's a these options to how things so flex flex basically tells its host element which is a nav or an article or an aside how to flex or do adjusted size with respect to the available space and so the options are basis shrink excuse me it's grow shrink and basis so we're saying we don't want it to grow we wanted to shrink six times faster than it grows but we wanted to fill the available we wanted to be 20% of the available space and so I don't want to go into too many details on these specific numbers again just check out CSS tricks for flex box and they'll there have tons of descriptions but you'll find that that sort of takes you down the rabbit hole of how you might want to do column spans and other things so in fact for example let's go here I'll show this just briefly so here is an example of where you can span multiple columns and multiple rows and this is using flexbox and here's one where we're using these options here right we're saying okay I need to account for the and I want this to be twice the available number of columns so shrink and grow to two time and by a factor of two and then include the basis of this two times five e m+ the gap of 10 pixels so that's what this is doing it versus this is a this is a span three columns that's those three numbers that you had that almost reminds me of merchants entering excel well in fact this is one of the things that grid-based CSS like bootstrap tries to handle for you right way they want they you you tend to think of your layout you break it up into grids and um while you can do that here you'll notice I was always talking about flows right so I tend to think about elements flowing left to right and then and then adjusting their sizes or their spans so it's not even though it may look like a grid I don't conceptualize it as a grid all right well when you're sorry I'll be quiet for a minute this is okay so this is the real secret sauce of angular flex layout is the response of API and the fact that it does this under the hood and the fact that it actually has knowledge of default media queries it registers those with the windows API and then listens for notifications coming from the media query engine to say that specific range like us that the windows shrunk to be small enough for mobile and that's when we say that the excess the the alias excess or extra small has activated that breakpoint is activated it's currently active and when that happens then the Flex layout engine then Reif calculates everything and then reapplies the CSS on-the-fly all of that is from happens under the hood with just the simple little markup so I tend to think of it as a magic if we come to the we can look at the demo let's take a look at the responsive demo so here's one that says okay I've defined some markup and I wish I could show the code for you here but that's in the in the repository but what I've really said is I've used the HTML mark on the API to say I want this to be left on large devices and this one to be on the right but on mobile for excess or SM I want this one to be above and this one to be below so if I just resize this here you can see that it shifts on the fly similarly this one I can change the the Flex Direction area pretty easy I can change this one independent of each other but then I can do this this one's using a hide notice this says okay this one is 50% let's do this here let's shrink this a bit so now it's 50% this is 50% and this is 50% but if it's greater than small this one should be 25% so watch what happens this is 25% but I've also told one of these to hide when I'm in the medium range so watch this I'll go to medium so now I don't have two sets or four comma four blocks on Liam - so you can do some amazingly complicated things here so here's one 33% on mobile and 66 on on larger than mobile so note notice how they switch they sort of inverted sizes here's another one where I'm changing the Flex order here's one where I'm doing a hide and show so this one should show only when it's on not on mobile this one only shows for medium size it's gone see that one only shows here this one this one shows only on small here's one here's one we use it and we'll talk about this in a few minutes where I'm now using responsive styles so I the styles will actually get reapplied on fly as I change my and my breakpoints activate so this has a huge set of implications for developers when they're trying to create applications that really adapt to different device sizes I gave a sort of a sneak away when I show that the hiden show but here's one the declarative API for high didn't show and in this case I'm saying that I want the host element this div to show by default but I want it to ha I wanted to hide when it's when it's large when when the breakpoint is large and I have to go look at the actual range for what that is but I don't want it to hide when it's when it's on mobile so here we talk this is some stuff we have here for how it does use as a fallback algorithms so if you're not in large should it it will first look for another hide and it will fall back to excess or it will fall back to show all to the show so these are some rules everyone can and these slides will be available online after the this presentation so you guys can look at these rules and these these rules are also clearly documented in the my goodness I lost the wiki there it is wiki you'll see you can look up the responsive API and look down here at the bottom the fallback algorithm where it talks about this so here's an honest one if it doesn't have the one if you don't specify one for that particular one it's going to fall back to whatever it was well this is this is the default right so these you can think of it almost as being overrides so if I'm great if I'm not on mobile then I'm going to override and it's always going to be it's going to fill the hundred-percent it's going to resize itself to be 100 of the available space into the horizontal or the vertical space but if I'm on mobile then it's going to be half that right so let's say that I activate I'm resizing my window and hits the activation range for that for extra-large well it's going to fall back to this one which means it's going to the sizing will be a hundred percent if it's if it activates large it's still greater than small it's going to be a hundred percent because this one it will fall back same with medium but if it's hits activates for small this one doesn't apply anymore because this is greater than small so it falls back to this one similarly if you activate a break point for excess so the API tries to be really smart and not make you specify every single possible range you just specify the ones you want to use and then it will use fall backs and some the fallback logic to calculate the one it should use if you haven't given it a specific one override so we have some special responsive features we have effects show and ethics tied and we have ng class and ng style so notice you can actually define classes that will be applied only when it's on mobile or styles that will only be applied when it's on mobile then we have our Java Script or we call the imperative API so this API allows you to in your typescript or Ice a Java Script I probably should have said typescript but it allows you to do things for example you can inject using the dependency injection system with an angular you can inject a reference to the observable media engine and this allows you to subscribe to this observable and listen for any notifications any activations of breakpoints and what do I mean by that so if we go to the responsive section here notice there's this this active active media query right well I wanted this part of my template on my component so when the when I'm resizing this window I lost my mouse there we go when I'm resizing this window I want to see this changes show me what the current activated breakpoint is so I will try to I am my full screen mode or something there we go so notice it changed the medium change is small and it even shows you what the mini query range is what the pixel range is there's extra small so I'm programmatically subscribing to the observable engine to listen for these changes so I can just show this here but that'll let you do a whole suite of other things you'd like there's also a way that you can define providers for the dependency injection system where you can define your own custom breakpoints and we have some wiki Doc's for that and then we even have a base directive an adapter class that lets you extend existing classes so notice when we created a responsive AV API for NG class we it's our version this our class is called class directive and it extends ng class so we still use all the functionality of the core ng class component we just have added responsive behaviors on top of that so if other developers want to do their own sort of custom extensions they can modify with this base F extra adapter and they can do their own and this is all shown in the source code on the repository so here for example notice we've injected with D the DI system the observable media and reference and we're going to subscribe to it and when any change comes in so that means as I'm reciting notice the change doesn't and for every pixel as I'm resizing the window it only happens when the media query activates when there's a change in the media from one range to another and this is what the media match media API provides us way down deep under the hood so when an media query activates I can check to see what it's a leus is and then I could do some other things if I really wanted to I could load mobile content I could do whatever I want so resources for developers who want to start using angular flex layout you can go to the github repository and start looking at the source and even the demos you can go to look at the live demos and you can get that to that from this excuse me this link here or you can go to the wiki and look at the the link on the wiki page and then you can also go to visual guides and CSS tricks to learn the details about flexbox because remember I said I was wasn't really going to talk about the details of the raw flexbox options because that is another real that's an entirely nut whole nother presentation another hour and a half so to keep it this one short I really wanted to focus on angular flex layout API so I'd like to give thanks to could Katrina orlova she actually helped with some of the slides and she actually gave us a talk recently at angular summit in Chicago on flex layout and you can check her out at cherry pick that's often and then finally I meant I'm remember I mentioned that I'm an instructor at thought RAM and Bonnie's been asking forever when are we going to get down there and offer angular master class in Houston and thought Ram founders have agreed that we need to get down there and make this happen this August well August of this year we're going to come down and we're going to offer a three day public training you guys can sign up for that if you'd like if you and I think Bonnie here's the the bitly URL if you want it's bit-bit ly / thought Ram underscore Houston and that will take you to this little page where you can submit your email address what it will do is it will add you to a subscription of being notified when we have more details about where the training will actually be held will give you a 15% discount on training fees and then you also get notices on future articles our training covers observables component architecture routing and forms we may cover we have a new course a whole one day course on redux and ng RX and we now have another whole day course on advanced testing with karma and for angular so we can't do all of those in three days but maybe based on everyone's interest week and adjust and I am really sorry that the reason I've been bugging you guys about this is because I really think that especially past gano Pascal's not here tonight but he's such a good teacher and-and-and you - I mean I think that if you guys just put on such a good class and you really take away a lot and absorb so much of that material and actually remember it later so I am very excited about this well what we like to say to people is you can always read the material right if we have the slides you could read that and go through the labs or yourselves the benefit for us being there in front of you is that we try to provide insights like why are they doing it this way why do they have this standard why do the one of the impacts if you don't take this approach what are the best practices so these are the things that aren't in the slides that we have we present as instructors and we try to make it really fun and you're in your workshops are interactive right yes absolutely see in that to me that's the most important thing because I can't really learn just by watching a video I mean I can but but to me it's so much easier to remember it later if I'm actually doing it so I want to follow along and make that code with you and it just sticks in my head better because I can remember it you know and I absorb that and retain that information so much better well in fact for our labs we when we do our exercises will talk for 5 or 10 min with slides then we'll actually do a lab every was hands-on we play music and there's a lab description then at the end of the lab time we actually go over the lab review it what did we do why did we do it and we'll do some more slides and then we'll have another lab so it's all it's very interactive that's awesome you guys have questions you have time for questions Thomas absolutely Reggie Sam y'all have questions I should don't have questions so well I may all made sense oh that's so sweet who said that was that it was Reggie yeah well I actually have a couple questions but I'll let you go first Reggie if you have any now I'm gonna go I'm still formulating I'm like wrapping my head around everything that was really nice I promise can you go all the way back to the beginning and and let's talk just for a minute because we had a question in the chat from one of our Angie Houston people and then I also have another question because I was playing with this earlier and I and I had something that wasn't working for me so that HTML layout I think it's the fifth or sixth slide this one right here yes okay so his question was how do you decide if you use vertical flow or horizontal flow with the rapper and I think you touched on that a little bit but like when you're doing your your design so I obviously some of these are going to be designed and I know a lot of us as web developers we if we're lucky we'll actually get a mock-up from a graphic designer that will say hey this is exactly what I want it to look like and and my life got a little bit challenging a couple years ago because we started doing responsive layouts and so there were instead of getting one mock-up we would get like three different mock-ups with this is what it looks like on mobile this is what it looks like on a tablet so so it was very difficult because we basically had to redo with all those media queries I was like man I remember that because I had to do that and I had to write all that CSS like out each one so for this I know you talked about this a little bit but can you talk just a little bit more about how because on this one in particular you've got it you've got a row at the top and you and that would be flex layout flex Direction row right and then inside of there it goes flex direction so it goes from the horizontal to the vertical right so let's let's go to the one where we're down here let's go to the sky so normally I it's pretty easy to look for that the outside container and say okay it's going to flow vertically right this whole area is above this one and then this is at the bottom so that's a vertical flow and then I might look at this one and say oh well that's also a vertical flow of two rows the problem though is that when you have vertical flow within a vertical flow things get really weird and you're going to have to do a hack workarounds but basically you have to be able to sense this because it's pretty easy for the flexbox engine within the browser's to calculate sizes and layouts when it's going left to right but when you're flowing vertically the heights if you don't have some explicit Heights on certain things it won't render the way you expect so then you have to figure out where do you need to specify specific height is it you know is it a is it a 100% view height is it a min height it's all these were acts and workarounds and in some cases you don't have a choice you're going to have to address that and flex layout it can't solve that problem for you of nested vertical flows that's why I'm mentioning it so what we try to do is say if you can if your user experience allows you to do this minimize how many vertical flows you have and then use horizontal flows with wraps because typically you would do this is a vertical flow and even in the center one I might initially I might have said I'll do this as a vertical flow right this these two are horizontal but this whole Middle area I would have said vertical but notice I avoided that because that's a nested one that would be a nested vertical inside of a inside a row that's nested inside of another vertical so if you have nested verticals you can get into some weird situations I actually love this slide in particular because this this just the way that you have those four boxes I don't know if you did that or she did that but that slide is really good because it shows you like break it this one would go first and then this one will go second and it shows you how to how to do that in the code because if I'm looking at this those four pictures that are cascaded there would be that's the order that you would you would write your HTML and it would be nested inside the picture before it's all right yes it's not only the way you run your HTML but it's also the way you would apply your your layout API to it you'd apply it at the outside first and then you'd probably go in and see if it renders that the way you want and then you would then go into the the children ones right you so then you were going to here and do a layout row and is it and with a wrap and is it doing is it doing that properly you know what I love about this so much is that when you you know when you're writing this and as a developer who has written lots and lots and lots of CSS and HTML I've done this like all by hand right it's so beautiful because if you if it's not doing it exactly the way you want or if you just change your mind or your designer came back and said you know what we want to we want to move this around it's just so easy because you're not writing hundreds of lines of code and you have all the you know the aliases and you can just move it and it's so much easier right so if we would take that what you were just saying which I completely agree and let's find a version I'm at the conference for a second where did I have that it is that it's pretty easy to decide where you want to move your NAB or your article or your aside you could put it in other divs other containers shift them around rhiness them and then you just have to adjust your api so having this api here in the HTML and being so clean makes it very easy for you to tweak it and adjust and then make enhancements unless you're old-school and you have it all in a table and you want to change one thing and you have to rewrite all the hoses okay so that's another great question money right what happens if you have it at a table and the answer is you starts from from from a clean scratch and you identify that's because let's go back out to here where here we go so let's it would be interesting if I could like go back and find some code that I wrote like six seven years ago and and convert it all from that code to this and see like it would go from like a hundred lines of code to like six right so when you have a table the first thing I recommend is never just try to incrementally change in people getter is to identify a wireframe of what the tables doing right what sections are important in the table and what's the flow in each of those sections and then take this approach and start with divs or sections or whatever you want to call them and start applying the API yep that's awesome okay I have another question and this one might be a this one might be a curveball but I'm going to throw it out there if you have time so Samantha and I were kind of poking around with this and looking at it earlier and just kind of checking out the flexbox fun and we found a plunker that was actually really cool and I think you saw it on your screen earlier when you were showing us the wrong monitor you have that that plunker that's linked from the from the flexbox github page mm-hm yes so let's go to the let's go to that real quick if I come up here to our plunker 10 this is a template yep okay and yeah and we so we found that plunker and I really love this because it's an opportunity to kind of play with it and see it work right the I mean I you know that's how I learn right because I don't want to just watch and read it I want to actually click on something and write some code and that's how I I wrap my head around these things so we went into I think test app module ts right doing is a module I mean I got it on man yeah there we go no no no that's all right k was a fine you had to write the first time hello listen to me so what was so I was looking at that right and my question is when we had where was it the flex layout gap right I think was we were at the component we were the Myro component and and it's not in this particular example but if I were can you can you add a gap in here on that Myro component and show us because that's the part that I was I was the the gap is like the same thing as a margin but I don't think that's right okay so we're this is the footer right well this is a router outlet right and here we were on the road component right so here so here's your row component right yeah if you wanted to do this let's do let's let's bring this down one line so we can just see it I want to do a gap I could do come in here like I say FX layout that equals 10 pixels there you go ah it didn't work when I did that I don't know what I did so I think because I was putting it inside the boxes but I wanted to put it on that note so so here's the thing when you're doing a gap you're the API is if you see layout that implies it's on a container so you have to do it up above yeah because if you do now we I have someone submit an issue and they said oh we're using FX layout gap and that applies a margin right when it's when the direction is row it applies a margin right only to all about the end one okay that was good to say but it knows not to put on the ozeki however again you know cool cuz it kind of made me think about the question I was thinking about I was asking earlier about margin and then you just answer my question about life where's my margin could that not be easier that's like the coolest thing yeah that's so easily notice I did a comm this is a row reverse here is a column so notice it doesn't have it at the end and here is a column reverse but here is so this is row this is column so it actually this applies margin bottom so even though the row direction changed the flex layout gap directive refires and removes their margin right and applies a margin bottom I love that that's very nice the danger we had someone submit an issue and they said oh I've got an ng F or ng for and I'm rendering 5000 rows and our 5000 elements within this area and I want to I'm used if X layout gap and it runs really slow and while the answer is remembered that this layout gap these actually inject CSS so if I come in here let's just inspect this my inspectors off-screen let's come over here for a minute yeah let's bring this on screen so I can see this here alright so let's do this one I'm going to inspect this guy notice it puts the style in line right and actually Jenna calculates the flexed styles and it applies all of it right on that element on the fly so here is a margin bottom right the problem though is if you have and let me close this now so it does it applies the stylings on the Dom element for every single one of these and if you have 10,000 elements it's gonna regenerate those isn't a little time so that's not really that performant when you're having that many rows in that case it's better to actually have a class that actually has as the gap the margin right or margin bottom and then have the responsive ng class just apply the class name because applying the class name is super fast right because then is it in fact you can apply a class to the container and all and then just use like the relationship that the elements within that container with this class name are going to have this flex lot this margin bottom or margin right so it's much better to do it that way for large amounts of elements then using the API so you just have to be aware of what the API is doing and for let's say small I mean 100 200 300 500 elements not a big deal at all use the API that's awesome nice this is so cool so easy so so question when using this and you know with angular you know you're building everything with the pumice um so if I have a component that's the child of a parent component where I define how I want it to flow will the child be able to inherit whatever the parent decides um that's so that's sort of a tricky question so that there is no inheritance because well there is an inheritance because where the style is applied in line to the to the container and the try I mean the child element will be affected by the parent if you're using the API and these directives are smart and they know when a parent changes and then the children directives will free fire and regenerate but if you're not using any children directives then you just have to be aware that they may they may not respond to changes in the parent right okay so one of things I say to developers when they they say oh the API isn't working out correct the great fallback is if you can't get it to work the way you want with raw CSS flexbox CSS then you're not going to get the Flex layout to work right so if you if you are saying oh I've encountered a problem with the Flex line of the API then one of the basic ways to triage instead of trying to debug the API itself is to see hey can if you just did raw CSS the same way would it layout the way you want and if it would then you've identified a bug in the in the engine if it doesn't then it's something wrong with what you're trying to do that's actually a really good segue into the question that Danny had over in the chat on our YouTube stream danny is actually one of our ng Houston regulars and he's he's watching us live and he wanted to know do you gravitate to using flex layout exclusive in your components and apps now or do you still occasionally find use for display table and or absolute positioning and I actually prefer to use this because I try to avoid absolute positioning because I've wrestled with it before and lost but there are times I think occasionally that you would use absolute positioning but I think at least personally for me the more knowledgeable I get about CSS and all the different options and especially flexbox that I really don't use that as much as I would have well I wouldn't use so I love absolute positioning in certain scenarios right so if I'm in a container and I really want that element to be positioned relative to that container a specific spot or let's say I have a modal or something like that or snack bar or toast or things like that then absolute positioning can be your god-sent it can be the savior but then that's within a container that's not doing any flexbox of its children right right so but that doesn't mean that that container can't be a child of a flexbox container of a parent container so you could have nestings but you you wouldn't want to try to do absolute positioning unlike this guy here right if you do that you're going to disrupt the entire flow it's not going to lay out the way you want now you could have within this area right in hoops let me um you could have within this blue area this is just a display block right so you could have the or even if it's a display flex inside you could have in other elements using that's done with position:absolute well right want that and position absolutes it's a good point because your your general page layout I think at least for me is always going to be you know I think now the responsive design in the last five years has pretty much become a standard feature you know I suppose town Sam years ago when we we had cars and we had little dials and we had to roll down the windows like with a wheel with a handle and now it's just got a button up that we push and I think that's the way it is with huh sounds miserable we actually had to roll the window down but now you know there's a certain point where responsive design was like the next big thing and now it's just everybody assumes like you know if you're going to do a good quality site you're just going to have responsive design so it's become default I think at least for me and this flex layout just goes along so well with that because it's it just it thinks for you and it does so much of that stuff for you but I think to answer your question Denny probably like Thomas said that's a good point you're you're still going to use absolute positioning for like floating action buttons pop-ups modal's toasts things like that that basically anything that's going to z-index up over the rest of your content would be would be a good a good way to use absolute positioning and I have forgotten about that but that's a good point but a lot of accepted material design is done board right so material design they use flexbox also right but they might have flex boxes the container CSS they have flex flex CSS for the container and then they might have a wrapper where they're doing specific things that's not flexbox inside that wrapper nested wrapper so right there they're trying to be very smart about when they use flexbox they don't use it everywhere they use it for flow layout when they need absolute stuff than they may not use it yeah and you know what I really love about material design and I had looked at that and so I think there's Angela material and then there's like Google material right but that whole thing when I first started hearing about angular and I watched a YouTube video years and years ago well with years and years it seems like a long time ago that that really showed how much design thought they put into that and like the floating action button and the different you know the little effects that they had it's there's so much it's so easy and there's so much that's done for us we almost take it for granted now but it's really I I need to go find that old you to you know what I'm talking about Thomas said that uh about this one so this is angularjs material you're talking about this one or something even prior to this I'm talking about the the design part of it oh you're talking about the spec the material design spec yeah the graphic design and how much thought they put into it we shoot around and like the paper and and how they actually there was actually a YouTube video and they were showing like we actually put paper on a piece on a desk yeah that's what I'm talking about yeah so this material design spec was is really the foundation of angular material right angular material said let's take these specs and these ideas and the way things should interact and the way they should be laid out and the relationships to sizing and positioning let's take all this and actually create components that are smart and our can be aware of each other and let's make it easy for developers to compose user experiences using these individual components right and then you know you for example you come over here to on Angela J s version on the input so I'm not sure if you guys have ever seen this one but you know we have like this it floats right and this is using flexbox to do some of its layout here's another one so in some cases is not though in fact you could actually go to look at this you could look at the J S on the HTML this is what I meant by the source view we're going to have the same thing in Flex layout where you'll have the live sample view and then you'll have the source view where you can look at the HTML the JavaScript or whatever I love it whenever we find things that you guys are still working on it's like this is this is literally like the latest and greatest because we're not even finished with the website yet but yeah I think the whole you know the whole angular material and I think and I see the same thing with the animations and the flexbox and all this that there's so much thought put into it behind the scenes and I mean as developers we look at the code you know and what does it take for us to you know how do we how do we pull this into our projects and the API and how do we call this and how do we use this feature but what I like is that there's so much thought behind it which was why I brought up the the angular material stuff just because it's so clean and beautiful and it's in it you know it I love that I love that it's a there's not a whole lot of code there but if they've thought so much about how this is going to work and how it's going to flow and it's really nice thank you and isn't it in a slightly annum like when you when you're on that what page was that the angular layouts yes right here and you and you go to responsive and then you drag it is it a little bit no this doesn't have been innocent here responsive here yeah I was looking to see if it had built-in animation but it doesn't know so there is a way that you can attach some animation to media query changes it's not very easy and it's also a little bit jarring what what the animation engine and that Matias is working on is really thinking about is how do we instead of using media queries and then animating those changes why not instead think of state and a media query could change state and when the state changes then we can animate the state change right and one day and even though we love animation and animation is very cool I think the the thing to do it reminds me of sex I I've made a mistake years ago and I was working on responsive design and what I did was I actually made a different background color on each media query so that I could drag it back and forth and check my layout as I was coding it was just a little development feature that I put in there's like a red bar for this size and then it would it would flip to blue once we passed that and then I would just drag the corner of my screen in and out to just to check my own layout right well I made the mistake of telling my manager who was not a developer he was a graphic designer I showed in that little trick and I was like look at how it goes through all the different sizes well then he started you know every day he's like playing with it and dragging it in and out devices okay really yeah but normally for a for a user who's actually using this website they're not going to sit there and drag the corner of their browser up and down like that I mean you're either gonna look at it on a tablet or a desktop and that's not a normal use case but I made the mistake of showing that to him and then he's like hey Bonnie if I do this right there there's a little glitch right there and I'm like well you're not supposed to use the website like you know it's funny I created a coat pen with with mini query changes in animation and I liked it so much I found myself moving just like your Boston the moving the window in and out resizing it and it was almost like tapping a pencil on a desk I was just playing with the whole thing or just to watch the visual flicker it is a lot of fun and we did that actually quite a bit and he got a big kick out of it he liked it a lot but yeah that's what I was looking at with this with these layouts that they're responsive and animated because I was thinking well you know that's a feature that it's like when clients ask me to do something like that and I say well yeah I can do that but how much money do you want to spend is like that's just so that's just a little you know playful little little fun thing but yeah this whole thing is just it's it's really beautiful it's so simple and I and there's so many you know there's there's all these little options with the flexbox you know and I like the API documentation a lot I like how you've got you know and and we'll tweet this out but I mean it's right there on github the angular flex layout the API documentation is very detailed and the cool thing is you don't have to learn all of this because you can just look at the one thing once you bring it into your project I mean you don't have to use flex layout gap we just figured that out right and we looked at it it was cool but it but even if you just want to use one thing and then you just kind of add it and learn more as you go along it's just it's it's beautiful it's simple it's very helpful especially if you've done the HTML CSS layouts all by hand I feel like talking about media queries and Internet Explorer is like remember when our parents said I used to walk back and forth to school uphill both ways in the snow with no shoes barefoot right exactly how I feel when I say I used to do media queries by hand and internet explorer profession well that's your day where is that where's that picture isn't this one yeah oh my god tell me there's a better way right exactly well that's awesome that that was a really good demo and I really appreciate that and you guys have any more questions for Thomas now I'm tapped out well thank you for having me on the show it was really great I'm hoping to meet everyone when I come to Houston yeah absolutely so you're coming in August and well we'll come down based on enough interest right so if there's enough people interested and come into the training then we will definitely be there that's awesome so if you guys want them to come to Houston you need to go and click on that link and I don't think I tweeted it yet well we'll tweet it and then go click on the link put in your email get on the list because we want to make sure we have enough people on the list that they know they're going to be able to fill up a class down here in Houston is like we need we need 20 people to get two of us there and it's and it's going to cover angular2 italy anger and we like to call it angular now right so that's about yeah yeah no no it's angular and it's a great question right Bonnie because when we say old world angular was angular is now called angularjs angular 1x is called angularjs we teach angular 2 dot X or higher so angular and I know that I just always forget and ng rx which is which is going to be pretty cool I'm very excited about that well as we start getting enough people interested in having us come down one of the things we'll want to do is find out whether they're more interested in grx or forms and because we can't do all of it in three days but maybe we could take away a one one day of stuff and substitute it and grx that's awesome and you guys also offer a private for like in-house for companies if they actually do we go on premise training so it really makes sense for companies if they have 10 or 12 developers or more then it makes it's a real cost savings to have us come on on site and do training right within their company and that's awesome and there are so many companies in Houston looking for angular developers I know because I talk to a lot of recruiters and they're looking for experienced angular developers and and they're hard to find because there aren't that many who really are up to speed on this so my advice is companies who want to find any other developers make your own you just take your developers and you just you know given this training and then you have your own any other developers well when I say to people is the developers can teach themselves everything that we teach in the master class in three days they could teach themselves but honestly my feeling is it would take on your own about three months to do it versus coming to the class three days your head will feel like it's exploding from all knowledge dump but you will have all the basic fundamental skills that you need be productive right out of the gate and I would even say three months is a generous assumption don't ask me how I know that well a good example would be observables right that is something that's maybe hard to wrap your head around tell me about it and and then if you go from there to testing and you want then you look at ng or X and how Y is ng rx how is that useful within an angular application and how does it work with observables and you could really get in deep water if you don't have the foundational experience understandings right well this is great those are great topics I am really looking forward to seeing you guys down here in Houston in August and Thomas I can't thank you enough this was a really great explanation of flexbox yes I went through a lot of things I thought I knew it but I learned some new things tonight and and I'm really glad you came to join us so thank you thank you for having on the top when you are back soon and often and stop by anytime and and we will see you in August absolutely thank you we're going to say something there's a bonus when you sign up for a when you sign up for the Cochran subscribe where was that yeah I'm going to share your screen i'll stop sharing hang on let me turn off my sharing here i don't i do only the wrong one hold on any one second i'll stop sharing here I think I should this is your this is your reward for signing up for the mailing list yes you have these two awesome guys during I find it I totally lost Alyssa oh yeah I was sad to go sorry we we got her mixed up on her time zones when we invited her earlier that was our fault but yeah Sammy Sammy liked this picture so much she just decided to leave it up are you gonna make that like your your desktop background give me a second just just give me one second let me show you okay boy show my screen now there we go okay I'm not seeing it you filthy you well yeah I know I haven't your my screen yet okay okay go I'm clicking screen share it's what's in my laptop's out a long day you want me to help no one I want you to help a cure I can click the button by myself okay well apparently not you just gonna laugh no it's dinner time I'm gonna run and grab some dinner all right let me all right I'm gonna share this real quick and then we're gonna end the broadcast here so this is a picture that Sammy wanted to show you guys ah and it's that lovely these two lovely guys right here oh yeah they're fun all right well thanks again Thomas we appreciate it thanks Sam thanks Reggie thanks Alysa and thanks for all the people watching online and Thank You Thomas Thanks thank you hey Reggie I'll see you later all right bye

Channel: ngHouston Angular Meetup

Views: 35,384

Keywords: #hangoutsonair, Hangouts On Air, #hoa

Id: BhHJexXUx1A

Length: 105min 11sec (6311 seconds)

Published: Thu May 11 2017