Angular Material or Bootstrap? Stop Asking the Question! @ NG-DE 2019

Angular Material AND Bootstrap for your next Angular application? It doesn't make sense, does it? The first time I talked to my colleagues about combining the two, they laughed at me. But now, they love the approach because it works like a charm.

In this session, we will see how we can leverage the best parts of both libraries to build beautiful, maintainable, and responsive Angular applications with very little CSS.

Transcript

1. AHASALL Frontend Software Engineer Amadou Sall NG-DE 2019 www.amadousall.com ! Angular Material or Bootstrap? Stop Asking the Question! @ahasall
2. AHASALL Hi, I am Amadou Sall * 2 github.com/ahasall amadousall.com twitter.com/ahasall
3. AHASALL 3 vs
4. AHASALL The Story Behind This Talk
5. AHASALL I set out to build beautiful, responsive, and maintainable web applications 5
6. AHASALL December 2017:
 I was frustrated by Angular Material 6
7. AHASALL January 2018:
 The stable release of Bootstrap 4 was out 7
8. AHASALL 8
9. AHASALL 9
10. AHASALL Hello Bootstrap Angular Material Angular Material & Bootstrap Theming, the Easy Way Agenda
11. AHASALL Hello Bootstrap
12. AHASALL What is Bootstrap? 12
13. AHASALL Bootstrap is built around 3 core principles of Responsive Design 13
14. AHASALL 3 Core Principles of Responsive Design 14 Media Queries Fluid Layouts Mobile First
15. AHASALL The Different Parts of Bootstrap 15 Reboot Grid Components Utilities
16. AHASALL Every web application needs a CSS Reset 16
17. AHASALL What is a CSS Reset? All browsers have presentation defaults, but no browser has the same defaults. 
 —Eric Meyer 17
18. AHASALL CSS resets remove browser inconsistencies 18
19. AHASALL Bootstrap Reboot, a Brand New CSS Reset 19
20. AHASALL box-sizing: border-box 20 Margin Border Padding Content
21. AHASALL box-sizing: border-box 21 Margin Border Padding Content
22. AHASALL Bootstrap Grid, a Flexbox Grid System 22
23. AHASALL Containers <div class="container"> !</div> 23
24. AHASALL Rows <div class="container"> <div class="row">
 
 !</div> <div class="row">
 
 !</div> !</div> 24
25. AHASALL Columns <div class="container">
 <div class="row"> <div class="col">Row 1/Col 1!</div> <div class="col">Row 1/Col 2!</div> !</div>
 !</div> 25
26. AHASALL Columns <div class="container">
 <div class="row"> <div class="col-4">Row 1/Col 1!</div> <div class="col-8">Row 1/Col 2!</div> !</div>
 !</div> 26
27. AHASALL Columns <div class="container">
 <div class="row"> <div class="col-md-6 col-lg-4">Row 1/Col 1!</div> <div class="col-md-6 col-lg-4">Row 1/Col 2!</div> !!... !</div>
 !</div> 27
28. AHASALL 28
29. AHASALL Bootstrap Utilities, a Productivity Booster 29
30. AHASALL Utility Class .class {
 property: value !important;
 } a single, immutable property-value pairing 30
31. AHASALL Utility Class .d-!#{$value} { display: $value !important; } a single, immutable property-value pairing 31
32. AHASALL Utility Class .d-block {
 display: block !important;
 } a single, immutable property-value pairing 32
33. AHASALL Utility Class .d-flex {
 display: flex !important;
 } a single, immutable property-value pairing 33
34. AHASALL Bootstrap utilities are responsive 34
35. AHASALL <div class="d-none d-md-flex">
 Hidden on small devices
 Visible on bigger devices
 !</div> Bootstrap utilities are responsive 35
36. AHASALL Utilities Display Padding Margin Flexbox Vertical Alignment Position Sizing Text Visibility ... 36
37. AHASALL Utilities .pt-3, .pb-3, .py-5 37
38. AHASALL Utilities .ml-3, .ml-md-5, .mx-5 38
39. AHASALL Bootstrap Components, the Reason Why You Hate Bootstrap 39
40. AHASALL The Problem with Bootstrap 4 40
41. AHASALL ✅ CSS Reset ✅ CSS Layout ✅ CSS Utilities ❌ Components Recap
42. AHASALL Angular Material
43. AHASALL What is Angular Material? Angular components Implements Material Design Built by the Angular Team Released at the same time as Angular 43
44. AHASALL The Different Parts of Angular Material 44 Component Development Kit Material Design Components
45. AHASALL The Different Parts of Angular Material 45 @angular/cdk @angular/material
46. AHASALL Table Stepper Tree 46 CDK
47. AHASALL Platform Overlay Layout Bidirectionality Drag & Drop ... 47 CDK
48. AHASALL CDK Layout constructor(private observer: BreakpointObserver) {
 this.breakpoint$ = this.observer.observe([
 '(min-width: 0px)',
 '(min-width: 576px)',
 '(min-width: 768px)',
 '(min-width: 992px)',
 '(min-width: 1200px)',
 ]);
 } 48
49. AHASALL CDK Drag & Drop <div>
 I want to be draggable
 !</div> 49
50. AHASALL CDK Drag & Drop <div cdkDrag>
 this element is now draggable
 !</div> 50
51. AHASALL The CDK can be used to build your own component library 51
52. AHASALL Form controls Navigation "Layout" components Buttons & indicators Popups & Modals Data table 52 Components
53. AHASALL Theming Angular Material Applications 53
54. AHASALL 54
55. AHASALL My Button <button mat-raised-button color="primary"> My Button !</button>
 55
56. AHASALL My Button <button mat-raised-button color="accent"> My Button !</button>
 56
57. AHASALL This is so easy... 57
58. AHASALL ...let’s do the same for our own components 58
59. AHASALL
60. AHASALL
61. AHASALL (1) my-alert.component.html <div class="my-alert">
 Lorem ipsum dolor sit amet,
 consectetur adipisicing elit.
 !</div> 61
62. AHASALL (2) my-alert.component.scss .my-alert {
 padding: 1.5rem;
 margin: 1.5rem;
 border-width: 1px;
 border-style: solid;
 font-weight: bold;
 } 62
63. AHASALL (3) my-alert.component.theme.scss @mixin alert-theme($theme) {
 $primary: map-get($theme, primary);
 $accent: map-get($theme, accent);
 
 .my-alert {
 background-color: mat-color($accent, 50);
 color: mat-color($accent, 900);
 border-color: mat-color($primary, 100);
 }
 } 63
64. AHASALL (4) styles.scss @include alert-theme($my-theme); 64
65. AHASALL Angular Material is great but... 65
66. AHASALL Theming our own components can be easier 66
67. AHASALL Not many utilities
 (only typography and elevation utilities) 67
68. AHASALL No CSS layout system
 (write your own) 68
69. AHASALL No CSS reset by default
 (provide your own) 69
70. AHASALL ❌ CSS Reset ❌ CSS Layout ❌ CSS Utilities ✅ Components Recap
71. AHASALL Angular Material & Bootstrap
72. AHASALL Which one to choose? Angular Material ❌ CSS Reset ❌ CSS Layout ❌ CSS Utilities ✅ Components Bootstrap ✅ CSS Reset ✅ CSS Layout ✅ CSS Utilities ❌ Components 72
73. AHASALL Let’s Be Pragmatic! 73
74. AHASALL The Setup - Bootstrap @import "my-variables"; @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins"; 
 @import "~bootstrap/scss/reboot";
 @import "~bootstrap/scss/grid";
 @import "~bootstrap/scss/utilities"; @import "my-reset"; 74
75. AHASALL The Setup - Angular Material @import "!~@angular/material/theming";
 @include mat-core($my-typography); $my-theme: mat-light-theme($primary, $accent, $warn)
 @include angular-material-theme($my-theme);
 75
76. AHASALL
77. AHASALL Theming Angular Material, the Easy Way
78. AHASALL 78
79. AHASALL .border 79
80. AHASALL .m-5 80
81. AHASALL .p-5 81
82. AHASALL .font-weight-bold 82
83. AHASALL .my-border-primary-100 83
84. AHASALL .my-text-secondary-900 84
85. AHASALL .my-bg-secondary-50 85
86. AHASALL my-alert.component.html <div class="border m-3 p-3 font-weight-bold my-border-primary-100 my-text-secondary-900 my-bg-secondary-50 >
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi dolore ea, earum esse
 !</div> 86
87. AHASALL Generating Custom Utilities @mixin generate-utilities($theme) { $primary: map-get($theme, primary);
 $accent: map-get($theme, accent);
 
 .my-text-secondary-900 {
 color: mat-color($secondary, 900);
 } .my-bg-primary-100 {
 background-color: mat-color($primary, 100);
 } !!...
 } 87
88. AHASALL The Utility-First Philosophy 88
89. AHASALL Let’s stop writing CSS... 89
90. AHASALL Let’s stop writing custom CSS... 90
91. AHASALL ...and use utilities where possible 91
92. AHASALL ✅ Bootstrap Reboot ✅ Bootstrap Grid ✅ Bootstrap Utilities ✅ Component Dev Kit ✅ Material Components ✅ New Theming approach Recap
93. AHASALL Perceived Barriers
94. AHASALL What about separation of concerns? 94
95. AHASALL Isn't this just inline styles? 95
96. AHASALL What about maintainability? 96
97. AHASALL Angular Material is great... ...but it’s not perfect. Bootstrap can help! Summary
98. AHASALL NG-DE 2019 Thank You! @ahasall Frontend Software Engineer Amadou Sall www.amadousall.com !