Angular Material or Bootstrap? Stop Asking the Question! @ NG-MY 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.

Link to video here: https://youtu.be/xLj1qw82oAo

Transcript

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