Angular Material ou Bootstrap ? Pourquoi choisir ! @ GDG Toulouse

Angular Material ET Bootstrap pour votre prochaine application Angular ? Ça n'a aucun sens, n'est-ce pas ? La première fois que j'ai proposé à mes collègues de mixer les deux, ils se sont tous moqués de moi. Mais aujourd'hui, ils sont devenus fans de cette approche, car ça marche du feu de Dieu !

Dans cette session, nous allons voir comment on peut tirer parti du meilleur des deux mondes pour créer des applications Angular qui soient jolies, maintenables, et responsives, et ce, avec très peu de CSS.

Transcript

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