Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular Material ou Bootstrap ? Pourquoi choisir ! @ GDG Toulouse

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.

A2d02e00546aaa125ffcf422681e9a0d?s=128

Amadou Sall

October 17, 2019
Tweet

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