Angular Material or Bootstrap? Stop asking the question! - Amadou Sall | NG-DE 2019

guten tag Deutschland so this is one of my first international conferences and as and as you can see I am a little bit nervous but I am NOT nervous because of the audience I am nervous because right here in the first row is my wife so if you see me trying to adjust my accent during the talk don't worry it is just me trying to please her so my name is Emerson and you may not know this but I have the exact same name as the son of the president of Senegal so don't just Google me because I have bad SEO so if you want to know more about me you can just visit my website I'm Otis allcom or you can connect to me on Twitter and I am a front-end software engineer and I work for air france-klm and today we are going to talk about angular material or bootstrap which one is the best because we all like fights react versus angular so this is not the question today the question is which one is the best so who thinks that angular material is the best okay and who thinks that bootstrap is the best okay half half so it's cool we will find out but before that I want to share the story behind this talk so I set out to build beautiful maintainable and responsive web application and I think that as a front-end developer this is our goal we want our applications to be good-looking to be responsive we don't want our code to be like spaghetti so in December 2007 no 2007 not 2017 I was frustrated by angular material mainly because angular flex it out because I think that it was a little bit slow the syntax was hard to understand and I wanted something simpler and by the way it doesn't compile with IV so another point and in January 2018 bootstrap forwards out and I was curious about was stuff for so I tried him and I found in bootstrap everything I was missing in angular material so I wrote an article called the best part of bootstrap or you are missing in angular material so and this is today my most popular blog post and most of my traffic goes to this website so if you see my Google search performant results people are coming to my website using the search terms angular material versus bootstrap bootstrap and angular material that's why I wanted to talk to you about this topic so we are going to start by talking a little bit about bootstrap then we will dive into angular material and spoiler will mix the two so I will talk about the benefits we get if we mix the two and then I will show you an easy way to seam your angular material applications so bootstrap what is bootstrap I think everybody maybe everybody knows but some who doesn't know bushropp yeah ok my wife thank you okay that's cool ok no problem so bootstrap is one of the most popular UI toolkit in the world and it is built around true core principles what are these the first one is mobile first this means that you start building your application on small smaller devices because on small devices you have you have less space so you will be able to adjust easily your design on larger size devices the other one is fluid layouts this allows containers to scale to different sizes based on the viewport of your of your screen and the last one major quarries this means that you alter your design Bay on the size of the screen you are working on so you write some custom CSS specific to us to a screen size so in bootstrap you have four different parts the first one is reboot then we have grid components and utilities most developers know about bootstrap grid and the bootstrap components but the reboot and utilities are lesser known features of bushropp so we are going to talk about them let's talk about reboot every web applications need a CSS reset even if you don't know it may be the framework you are using has one CSS little reset incorporated what is the CSS wizard according to Eric Mayer one of the first people to build a CSS reset all browsers have presentation defaults but no browser has the same defaults so the goal of a CSS reset is to remove those inconsistencies between the different browsers and in bootstrap Forks there is a new CSS reset called bootstrap reboot and it is more than a CSS reset because it adds what I call better defaults to your angular application to your applications for example by default the size of the elements doesn't take into account the padding and the border so it is just the size of the content and most of the time it's all of the time what we want is this we want the size of our elements to be comprised of the content plus the padding plus the border so if you use bootstrap reboot this is the kind of things and many other things that you will get for free ok let's not let's now talk about bootstrap with bootstrap grid is based on the CSS standard called flexbox who knows flexbox oh that's cool so you already know how to use the bootstrap leap and how does it work we have a container and a container is the home for columns and rows so inside my container here I have the first row and a second row and inside rows i have columns and columns defines the actual scoreline columns define where you will put your content so here I have one column two columns and by default we have two 12 units for the bootstrap grid and you can specify how much units you want your computer column to take so here I have called - five to take five units out of 12 and call - eight to take eight units and the bootstrap grid is responsive so it uses magic reason as a hood so here I have called - md6 so on medium sized devices it will take six unit out of twelve so have the space and on larger sized sized devices it will take four unit out of twelve so we will end up with something like this so on larger size devices we have three three columns on a medium size we have two columns and on mobile by default we have everything in struct because bootstrap is mobile first so I didn't need to put any class - to make it work then we have my favorite bootstrap utilities a utility is a single immutable property value pairing what does it mean so we have a class and inside the class we have a single property with a value so here I have the important keyword which may be bad but I want that whenever I apply this class I want it to win so that's why there is important here for example for display we have many utilities for display you have displayed - and the value for example we have this D - block if I want to make an element a block element I just have to add this class and it will be an block element we have other properties like D - flights to make an element of Flex container and the nice thing about bootstrap utilities is that they are responsive so it works like the grid we have the same breakpoints so here I want to my element to be hidden on smaller devices and I want it to be a Flex container on bigger devices so if you don't use the bootstrap utilities you will write a lot of CSS to achieve this kind of thing which is very simple but me what I do is I add a class D - none so by default no prefix this mean on smaller sized devices will be hidden and on medium sized devices and up I will use D - MD - flex to make it a flexbox container okay and we have tons of utilities for display padding marching etc and so on and they are very easy to understand for example PT 5 means padding top so question what does mean what does BB 3 means no less my wife answer this question is no padding bottom but nice try ok and py 5 means horizontal body practical padding and we have also things like ml 3/4 margin left ml - md5 for margin left on medium sized devices and so on and the last part of bootstrap is the bootstrap components and this is maybe the reason why you hate bootstrap but to me the main problem with bootstrap for is you carry so some components in bootstrap are built with chicory which doesn't fit nicely within the angular ecosystem so to summarize this section we have a very good CSS reset a nice layered system with a grid tons of CSS utilities that is our life as developers but the components are not so great let's now talk about angular material what is angular material unlike bootstrap angular material our actual angular components they are built with angular for angular so it fits really well within the angular platform and it implements material design which is Google's design system so if you possess an Android device you already know what is material design because all Google Nations implements this design system and it is build built by the angular team so we can expect the same quality as in the rest of the angular framework and very important it is released at the same time as angular so if you like if you are like me you install always the latest version this will be a very good argument to use angular material an angular material is comprised of two parts the silica is a component dev kit and the material design components so when you use it you install two different packages at angular slash cdk and add angular slash material and the cdk provides first a set of unstyled components like a data table a stepper and a tree that you can use outside angular material if you want and it also provides some services that implements common behavior for example platform the platform service will give you information about the device you are currently working on and so things like am I on an Android device which features my browser supports so you can use this information in your application we have things like overlay to work with pop-ups models we have maybe one of my favorite layout and things like be directionality if you want to work with right-to-left languages like Arabic this will help we have things like drag and drop so an example of the cdk layout here I have a class and inside it I inject the breakpoint observer so this will give me an observable that will emit information about which of these breakpoints up which of these breakpoints are true so on smaller sized devices only this one will be true but on larger sized devices every one each of them will be true so I can use this information to add just to hide elements programmatically in my type script file and the cdk is just awesome for example for drag and drop so you have a deep element you want to make it druggable you just have to add one attribute so you have to import the module first but it is very simple this will make this element draggable and it can be used to build your own design system your own component ripe library for example if you hate material design you don't you don't think it's beautiful you can leverage the cdk to avoid reinventing the wheel in your when you are building your design system so next we have the material components and the material components are built upon the CD k so we have things like form controls navigation elements layout elements I don't like the term layout so layouts we are talking about cards and things like that we have buttons pop-ups and data table and like I said the material design data table under the hood uses the cdk data table ok let's talk about steaming angular material applications because in material design seaming is a very important aspect and when we talk about seaming remains things like typography shapes colors but today we are going to talk only about colors so I have my theme which is comprised of many part of money palettes so here I have two palettes a primary palette and a secondary palette and in each palette I have different variations of the same color so here I have my primary palette is indigo and I have I think 10 colors in inside my palettes so how to use this if you use angular material you want your LM your button to be a primary button you add the attribute color equals primary you want it to make you want it to be a secondary button you add the attribute color accent this is very easy you don't have anything to do but if you want to do the same thing for your own components it's not that easy in my own opinion so let's say I want to build this pallet component here what we have is we have some margin here some padding inside a border we have a background color which uses my secondary palette so the lightest variation of my secondary palette and the text uses the darkest variation of my second of my secondary palette and I want to be able to reuse this component inside another application so if I build this component for Air Farce and I wanted to be able to be used in kind of applications like this for example how do I achieve that in angular material so the official way to do things so first step you define your HTML so here I have a div with a class my alert and I have in my sass file I defined the CSS for the component so here I defines the padding marching the border style the borders widths and the font weight so any nothing related to seaming then we have another step we have to define a theme color theme file so it's a mixing the Texans are seam my current seam and I can use some stars functions to get my palette so here I retrieve the primary palette the accent palette and then I can use some material angular material function to get a specific variation inside my palette so here I use the 50 shade of my primary palette here of my accent palette here the 901 and here I use the 101 of my primary palette then we have to import it in our global CSS file and we invoke it by passing it the Tamil word so inside an Air France application I will inject the Air France theme and in caelum application I will inject the KLM scene so four steps but I think we can do better so to me angular material is great but turning our own components can be a lot easier so we will I will show you how we achieve that and inside angular material you don't have many utilities you only have utilities for things like topography and elevation which is not enough in my opinion you don't have a CSS layered system of course we have angular flex layout but to me it's not the best solution so you have to write your own and there is no CSS reset by default you have to write your own CSS reset and actually if you use the English Alaska Mattox to add angular material inside your application it will generate a small CSS reset for you but there is no standard CSS reset inside angular material so let's recap the session this section CSS reset 9 CSS layout 9 CSS utilities 9 and but the cdk is great and angular material components are awesome so angular material and bootstrap so now the question again which one is the best somebody baby choose one ok so you may think that bootstrap is better because now CSS reset no CSS layout now CSS utilities but the things that are great inside bootstrap are not great inside angular material but the one that are great in angular material are not so great in strap so if you are like me if you are a lazy developer what you do is you steal from bootstrap and you add it in your angular material application so I am not lazy I am pragmatic sorry so how to achieve that the setup is simple for bootstrap I have I have a files that define some variables it will help me customize for example the grid breakpoints then I import some bootstrap functions variables and mixing and this will want to generate any CSS but it will be used inside the following sets of files so I import the boots up reboot the bootstrap grid and the bootstrap utilities and then I have a little CSS reset to remove some for example the outline that is added by bootstrap reboot that's it and for angular material yes the standard way of doing things you import material then you invoke some functions and I define here my my team and I add it here so back to our design challenge we wanted to build this component very easily how can we achieve that so let's now talk about theming our application our angular material applications the easy way so how do I build these components right now today with my setup angular material in bootstrap so I start with bare HTML then so it looks like this then I add a class border this will add the little border here then I add em - 5 so this will add some margin here then I add another class P - 5 so this will add some padding another one font-weight:bold this will make my font-weight:bold so these classes comes from bootstrap utilities and what I did is I use the same philosophy - to extend the bootstrap so I have created my own classes my border - primary - 100 to be able to use the problem the 100 variation of my primary color so I add another class my text - secondary 900 it will makes it the text like this another 1bg secondary 50 and that's it so I will end up with a national file like this with a lot of classes so here are the same classes that we had earlier so both things that are not related to theming but rather to layout and then I have my other classes and this one are related to seaming how do I do that I use the same approach as angular material so I have a mixin that takes in a team a seam but what I do is I generate utility classes so for every color in my seam I generate a class so I have a lot of classic likes like this so here I have my text - secondary 900 so like angular material but this I have to do to do it only once only once in my global CSS not every time I add a new component so everyone that has this setup will be able to have all this kind of things very easily they just have to write HTML and that upsell component will be similar and this is the utility first approach and in the utility first approach you think about your CSS with classes so I want you to stop writing CSS today because I think that in the future maybe we don't we won't need to write CSS like we used to do now I think I see a trend where we add a lot of classes to our HTML and it works so ok sometimes we need to write custom CSS because the utilities won't be enough and there is no problem with that but otherwise use utilities where we are possible so to recap this check this section if you use angular material and bootstrap we have the bootstrap reboot for the reset the bootstrap grid for layer things the bootstrap utilities the component dev kit angular material components and with this new teaming approach you will be able to build beautiful responsive and maintainable web applications and whenever I talk to developers about this approach they have some concerns because it's new they are not you to write CSS and HTML exists so some of the questions I get is what about separation of concerns because I have everything in my HTML for me it's not a problem to have everything in my HTML because today we are living in a world of components so we have we build only small components and anyway we have never separated HTML and CSS we are just putting things in different files so ya know separation of concern I think isn't this just inline science it may look like inline size but it's not inline size it's more powerful for example with inline Styles you cannot use CSS for things like hover stuff like that but with these with utilities its standard CSS under the hood so you can't do anything anything with these utilities and the last one is maintainability because you have a lot of classes in your HTML and it can get messy but to me this is more maintainable than writing a lot of CSS just to add theming to your application and what one of the benefit we get with this is that we don't need to worry about removing our CSS when we delete the HTML code because because before what we would do is we did it some HTML and we forget to delete the Associated CSS we don't forget but we are afraid of deleting the CSS because we don't know the impact of this action so this will make your code more maintainable for me so to summarize angular material is great but it's not perfect and bootstrap can help if you pick the best part of bootstrap and add it to our angular material application we'll be able to build beautiful maintainable and responsive web application so I have one more minute so I want to take this time to thank the conference organizers because I believe this is the most awesome conference I have been so thank you very much [Applause]

Channel: NG-DE Conference

Views: 24,077

Rating: 4.9068098 out of 5

Keywords: angular, material, angular material, bootstrap, ngde

Id: 6MgOHuxz2Ow

Length: 26min 58sec (1618 seconds)

Published: Tue Sep 17 2019