 is about app frames. App frames in the sense of you would like and this is true this is the thing where every product person in every startup you can blow away by doing something like this on the web like just to give you the walk through like this is a simple little website that wants to feel and look like a whatever delivery or Uber Eats and you can do all your fancy stuff that you want to do and this is how much I've worked on it I think I showed this last time too literally haven't done a single thing on it since then and you can like do all of these things and you can do them on the web and it works smoothly and nicely and looks totally like an app and can work like an app but there are a few CSS twists best practices I'm not sure they're formally prescribed or necessary but they're just really good ideas actually want to see how far this is a way that you want to apply to make something like that because for example this little checkout here on the bottom the button that is not a position fixed right so the typical CSS designer would go for a position fixed for this element right and there are many many reasons why you don't want to do that rendering issues Safari on iOS is horrible to deal with because of that these bars that just move away and all this kind of stuff so forget everything you know about position fixed and if you want to create like PWAs progressive web apps that are kind of like usable mobile apps you want to use a different setup okay question time for me to you like who currently builds what they would consider websites that's like more like flow content like a medium block page where you have like a website and it's there to put up your research paper or your content or render marketing materials or something like that and who builds web apps like something that is more like an application like that you could also do as a native app and it's not just for content exploration this is typically the two different purposes of the web these days one is to publishize content and be indexable and pretty and survey content and the other one is to administrate something your own life sometimes or your bank account or you know or there's something somewhere so these are the two major applications that are out there for websites these days web apps and websites and they use the same technology it's both just HTML CSS and JavaScript now but you couldn't possibly code them more differently which is really interesting and I'm having this argument these days a lot if you want to do a web app if you want to administer anything your engineering an application you're not building a website and hence you should apply the tools that engineers apply I'm currently helping banks and their typical approach to creating a web app let's say your online banking would be they have some designers build some screens and then you have a shit lot of screens and then some people figure out in a internal war and how to convert these screens into something that is a workable application that is the equivalent of designing a car and then taking photos from the front from the sides from the side with open doors then from the top from the bottom in the back and then going to your engineers and say like okay built me that right and then they're like but how many horsepower is like what is the engine like do these wheels need to spin like how like this is not how you engineer your engineer differently right like your engineer by giving different teams different interfaces that need to align to each other and then they built the solutions in between right the screws need to align all this stuff anyway so this is like web apps you should engineer properly you should think of them components by components so two good approaches that came about since 2012 and since two years ago are react and who that I would suggest you use if you want to do anything web app like there are different reasons you should nest not necessarily use them like too much or you use server-side rendering when you do marketing pages because they reduce your indexability with web browser with search engines and all this kind of stuff sure they get better at it but still like a server-side rendered website hosting your content is going to be listed higher in any Google search and listing than any sophisticated react single page app for obvious reasons I hope so technologies like react and who for web apps right not for websites so this is a differentiation I would like everybody to like really embrace because they're fundamentally different they have different purposes and you should use different technologies and approaches to develop them so here we're looking at web apps and since there's so many people struggle with web apps I thought I give some best practices that I applied for the last two years on how do I make this beast of the website behave like an app because all this scrolling and it doesn't touch and fiddles and shit pops up and all looks horrible and most of that can be avoided if you just embrace like what I call like a proper app frame which is actually really easy to apply if you need to support IE 11 onwards anything lower much harder but fundamentally still the same idea who he has done development for Windows forms or Mac applications or any iOS Android apps like native stuff three okay they have you typically a UI component library for where there's a component with functionality for anything and you should approach the development of these things the same way if you use react use something like this storybook and develop your components one by one right you built the engine you built the brakes you built the doors and the door handles and all separate and then you integrate them later right so this way you can focus on each component at the time self contained it's really great so react storybook something that we now use at a bank I'm really proud of let's you create components for react or if you prefer who which is really cool to and I love these days and so all my new private projects after this pickup thing is who same idea you create who components and they have their own template HTML script for all the JavaScript stuff and then scope style for CSS so use whatever style you want it's not going to affect anything else no BEM no whatever same in storybook here you can see it too you have the styles up here then you have some HTML that just went away and on the bottom you have the JavaScript really good so component by component in the end you assemble them that's how you engineer an application in this one I want to specifically showcase the app container and if we look at this HTML not considering this diff this is the actual app right so this is a full-screen app container this is where it all starts and this structure is something that you definitely need if you want to create a web app you can't just start in the body with a header and a footer or something you need an introductory diff I use to here I'm don't remember why but you would need at least one and your entire application is contained within this one diff so why do you need that because you want to apply a few styles and these are some of the styles that you want to have a I recommend a column flex container like specifically for mobile applications because your screen is typically like higher than it is white so your first division is typically in height and not in width so hence a column container but you can change it if you want and you use height 100% or VH and with 100 VW I use box sizing border box not sure why it's not necessarily super important and typically I even do overflow hidden which I think I did on another container inside here although on this one it wasn't that important because I have the other things inside but this is the important part display flex flex direction column height 100% width 100% the body by the way padding zero margin zero whatever background color overflow hidden so you don't get any weird scroll bars if you don't do overflow hidden you get weird scroll bars and stuff and the browser allows you to scroll the main document and that's something that you don't necessarily want otherwise you can't properly do site swiping up swiping touch effects and all this kind of stuff now why do we want to have the the column here's an example that I've ever an error that can show on the top if you are in Uber user or were at some point you might see that their error message typically pops up on the top like when you don't have connectivity in the elevator at least that's a daily struggle for me and then you have the actual app container as a second element this is the main container as you can see like when I hover it right it's blue so the error is currently not shown but it sits on the top and then you have this one and then I have a lot of modal sliders here which are all positioned absolute and their position absolute because that's kind of my fixed position fixed right so anything that I put into this flex with position absolute I can use like a position fixed container on top of everything else and here for example the motor slider is stuck to the left I can show you what it's for if you change the state we have a thing here main nav visible you can see this right turn this to true the menu shows up right so this is the modal slider that sits on the left and it just transitions in with the CSS animation from the left and that sits on top of the app frame the active container so this is typically the one that you would like to hold all the contents of your apps let me get rid of this thing again so this is the whole thing let me show you why you want to have this app frame in another way let's say an error you don't have connectivity so we write no network and so the error message shows up on the top and you can push your entire app down because the flex container active with flex auto occupies whatever space it can get right so with the error message with the fixed size on top you put the entire thing down and that's essentially the main reason why you want to have an app container locked into 100% width and height with overflow hidden and everything contained within the visible space of the browser so that you can assign the space inside very neatly then you say but I want to scroll something right this stuff needs to scroll for that ideally you write your own component if you use storybook or who don't make don't mix the feature of scrolling together with any other functionality make it an own component that is a scroll component and everything inside of this component will suddenly scroll a bunch of advantages to it if anybody of you uses react context you can make the functionality of scrolling in this container available to all child elements in react so that for example you have a custom select box and you want to make it show up on the bottom with a fancy layover on your top of your screen but the select box wants to remain visible the select box as a child of the scroll container can now through the context actually say I want to be visible and the scroll container can implement that functionality and scroll to that select box really funky but make sure you use one component that is just there and these components you write in a way that they have top bottom left right zero absolute position if you want them as fixed overlays or you use 100% width and height and a border box to make sure they occupy the entire space this way you can throw your components into any other container outer container and they will just fill up the entire space right obviously doesn't work for inline stuff like text and so on but that's typically not things you use a lot in apps there they're text flow text is something you avoid in apps ideally right and where you use it like here for example you give it a defined container in which it can operate it's typically the leaves the leaves are flow text everything else labels and so on are well defined in how much space they can occupy and should very well define on what happens if the text is too long too short right how does it align so that the whole thing doesn't break out of in other languages out of its scope and we get the funny CSS effect where it all hangs out of its containers so that's the the main to take a ways that I want to give in my talk because I think I could talk endlessly about this is the fact web apps websites two different beasts two different reasons one is the website is for marketing indexability presenting content educating people on something selling something the other thing is admins administering functionality you code them very differently the web app should be engineered and built by components that you can nest and rearrange and create components as much single functionality as you can and rather nest more of them than trying to fit everything in one container right one important thing whatever you want to scroll does everybody know how to make a scroll container like with overflow auto let me show you one so this container scrolls right so we're gonna get this is the shop container here and the shop has this setting overflow hidden overflow minus why auto so that only vertically I can scroll and webkit overflow scrolling touch which is a sub iOS Safari feature that makes the scrolling possible on Safari on touch and it gets this rubber band scrolling that feels very organic so this is how you can make any container any diff any section any anything scrollable right meaning it will obey by its own height and width that you gave it and any content that stretches it inside will just be cut off but you can scroll to it and that functionality you build as one container for your application so that you can throw it into any other container that you want to of which the content you want to make scrollable so this is how that works this is how for example if you maybe I make the resolution a bit smaller let's go to an iPhone 5 and then bigger so now we see a lot less content on the same page and if I want to add another coffee latte I can scroll in here too right use extensive flex box a lot of it like grit soon to if you want even it's even better but it's not not super well supported everywhere just yet but it's definitely worth you can't use them production yet well if it's a lot of effort but I can't possibly make that case to a bank these days like flex box I can like that's perfect and flex box already solves 90% of the issues and then you have some other fancy artistic ideas and then look into great already so you're ready when you can really use it it's further than you think so say one creamy where oh I'm sorry I will fix this it's not I didn't say anything bad about it I'm just setting expectations no no I'm not that far yet but you could make that too but this way with that using extensive flex box on the top you can this is a small container fixed height flex box with fixed height this in the middle the scroll container is essentially a flex auto and then inside of that I put another diff that is actually scrollable that takes 100% of its available widths and 100% of its available height right so that that suddenly becomes scrollable because the screen is too small right and the bottom one again is just flex box with fixed height so this is all not magic once you understand flex box this is all actually super easy and if you come from native development all the UI components work like that like the space occupation and auto calculate depending on available screen size and so on is something that they all do so you would feel yourself very familiar with these things and this way you can make things overlay nicely in the container they stick to the bottom you can make containers like this this thing here is the same container and I just changed the state of it that becomes the pop up afterwards so you just transition a few CSS parameters with an animation and the same container becomes the thing that sits in the middle and once you start coding a lot with flex box and within this app frame you actually realize how rather simply you can make these custom designs self-contained in the components you're not using bootstrap or something where you load 100 kilobytes of data that you use then 200 kilobytes of CSS to overwrite but you write bare CSS just by the properties and create the components individually like the way you want them and then you use them inside these things it's a few best practices and I should have maybe written them down like the outer app container is the most important and then build everything else as components that you then apply particularly where you need them use react or vu if you do complex engineering tasks and then look in scope CSS suddenly CSS becomes so easy if you just need to think you create CSS just for this one piece of component and you don't need to think of oh do I use this class name somewhere else oh should this look the same of this one you stop generalizing that's like one of the typical things that I did in my previous projects all the time if you have global scope in CSS you think like you want to generalize too much oh this class I want to apply in this case and in this case and in this case and suddenly you start oh but in this case I need to override it oh in this case I need to override it too but differently and suddenly you have this like huge dependency of like some generic thing that then is like in three layers overwritten to like specifically feed one single purpose at a time you don't do this in this approach you focus on the components and they have their own CSS now suddenly you do very little generalization right maybe some settings that you use CSS properties or whatever with to like define a global color a primary color or something else and that will save you such a you'd headache suddenly your colleague can change the CSS by himself without destroying the rest of the app right without them or any magic like that so that's definitely the best way to go about okay I've rambled enough I think particular questions or shall we start into the doctor CSS segment where you can tell us your problems and the rest of us will try to help you fix it so good question what happens if she uses on a desktop it becomes just really wide right now right is that a bad thing I would say no so what we do at the bank project right now because the requirement is hey we want a desktop experience and when a web experience typically if you would design the two without knowledge of each other and you can see this by how web as our native apps are designed compared to desktop apps of the same company of the same product people think about mobile products very differently than they do about desktop products the entire UI changes it has different amounts of screens different navigation schemes everything look at Facebook on mobile look at Facebook on your desktop I mean it's the entire thing is different you can't even recognize the navigational tree anymore hence using react or who something and creating UI components that you can reuse you actually start making two different apps and that's what we're doing there too it's actually in the same code base but we call them like in webpack they're called two entry points one is mobile one is desktop they still can reuse the same Redux actions the same components the same presentational components sometimes too they're just assembled in a different fashion to make a different experience so we have a server side flip that checks your user agent if you're on a mobile device you'll get the mobile app otherwise you get the desktop app they still share about 70 80% of the code it's just some containers are different they are optimized for an experience that's higher than white whereas desktop is typically the other way around right this way like you don't code much more you're still just working with one code base but suddenly you're creating two separate experiences optimized for the screen ratios that you're looking at so that's how I would go about that whole problem so I haven't tackled that here hence it's just a very wide app but you can see how this container essentially does its job really well because this application from a functionality standpoint works on every kind of screen ratio right like it's not broken like I can still do the same thing right just looks a bit awkward right yeah right but it's not technically unfunctional or certain things became invisible or something because the whole thing is just reacting to its space available let me that said never use any VH or VW other than in the main container like the outer container never again that's it like that's the only valid application in a web app is the outer container that directly sits in the body that's where you use a hundred VH and a hundred VW everything else is just percentages or absolute positions this way you can throw components into any other container and they'll just adjust and be flexible more questions you can have the code it's on and get on my kit up it's public well and you can look into this if you want I might not be even locked in in Chrome I typically develop in Safari sorry how did I call it fp app I think I'm not locked in here yeah let's do that should be somewhere up there but they can check out all the codes play JS per day I just called it fp that's how creative I am so here's the whole thing very well not documented bunch of webpack configs and a lot of source it's about that on use these things they're beautiful and awesome more questions good remember scope CSS will make you a better program