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!
   

   View Slide

2. AHASALL / JDJEBARI
   Hi, I am Jérôme Djebari
   2
   github.com/djebari
   twitter.com/JDjebari
   

   View Slide

3. AHASALL / JDJEBARI
   Hi, I am Amadou Sall
   3
   github.com/ahasall
   amadousall.com
   twitter.com/ahasall
   

   View Slide

4. AHASALL / JDJEBARI
   4
   vs
   

   View Slide

5. AHASALL / JDJEBARI
   The Story Behind This Talk
   

   View Slide

6. AHASALL / JDJEBARI
   We set out to build beautiful, responsive, and
   maintainable web applications
   6
   

   View Slide

7. AHASALL / JDJEBARI
   December 2017:
   We were frustrated by Angular
   Material
   7
   

   View Slide

8. AHASALL / JDJEBARI
   January 2018:
   The stable release of Bootstrap 4 was out
   8
   

   View Slide

9. AHASALL / JDJEBARI
   9
   

   View Slide

10. AHASALL / JDJEBARI
    10
    

    View Slide

11. AHASALL / JDJEBARI
    Hello Bootstrap
    Angular Material
    Angular Material & Bootstrap
    Theming, the Easy Way
    Agenda
    

    View Slide

12. AHASALL / JDJEBARI
    Hello Bootstrap
    

    View Slide

13. AHASALL / JDJEBARI
    What is Bootstrap?
    13
    

    View Slide

14. AHASALL / JDJEBARI
    Bootstrap is built around 3 core principles of
    Responsive Design
    14
    

    View Slide

15. AHASALL / JDJEBARI
    3 Core Principles of Responsive Design
    15
    Media Queries
    Fluid Layouts
    Mobile First
    

    View Slide

16. AHASALL / JDJEBARI
    The Different Parts of Bootstrap
    16
    Reboot Grid Components Utilities
    

    View Slide

17. AHASALL / JDJEBARI
    Every web application needs a CSS Reset
    17
    

    View Slide

18. AHASALL / JDJEBARI
    What is a CSS Reset?
    All browsers have presentation
    defaults, but no browser has
    the same defaults.
    —Eric Meyer
    18
    

    View Slide

19. AHASALL / JDJEBARI
    CSS resets remove browser inconsistencies
    19
    

    View Slide

20. AHASALL / JDJEBARI
    Bootstrap Reboot, a Brand New CSS Reset
    20
    

    View Slide

21. AHASALL / JDJEBARI
    box-sizing: border-box
    21
    Margin
    Border
    Padding
    Content
    

    View Slide

22. AHASALL / JDJEBARI
    box-sizing: border-box
    22
    Margin
    Border
    Padding
    Content
    

    View Slide

23. AHASALL / JDJEBARI
    Bootstrap Grid, a Flexbox Grid System
    23
    

    View Slide

24. AHASALL / JDJEBARI
    Containers
    
    !
    24
    

    View Slide

25. AHASALL / JDJEBARI
    Rows
    
    
    !
    
    !
    !
    25
    

    View Slide

26. AHASALL / JDJEBARI
    Columns
    
    
    Row 1/Col 1!
    Row 1/Col 2!
    !
    !
    26
    

    View Slide

27. AHASALL / JDJEBARI
    Columns
    
    
    Row 1/Col 1!
    Row 1/Col 2!
    !
    !
    27
    

    View Slide

28. AHASALL / JDJEBARI
    Columns
    
    
    Row 1/Col 1!
    Row 1/Col 2!
    !!...
    !
    !
    28
    

    View Slide

29. AHASALL / JDJEBARI
    29
    

    View Slide

30. AHASALL / JDJEBARI
    Bootstrap Utilities, a Productivity Booster
    30
    

    View Slide

31. AHASALL / JDJEBARI
    Utility Class
    .class {
    property: value !important;
    }
    a single, immutable property-value pairing
    31
    

    View Slide

32. AHASALL / JDJEBARI
    Utility Class
    .d-!#{$value} {
    display: $value !important;
    }
    a single, immutable property-value pairing
    32
    

    View Slide

33. AHASALL / JDJEBARI
    Utility Class
    .d-block {
    display: block !important;
    }
    a single, immutable property-value pairing
    33
    

    View Slide

34. AHASALL / JDJEBARI
    Utility Class
    .d-!flex {
    display: !flex !important;
    }
    a single, immutable property-value pairing
    34
    

    View Slide

35. AHASALL / JDJEBARI
    Bootstrap utilities are responsive
    35
    

    View Slide

36. AHASALL / JDJEBARI
    
    Hidden on small devices
    Visible on bigger devices
    !
    Bootstrap utilities are responsive
    36
    

    View Slide

37. AHASALL / JDJEBARI
    Utilities
    Display
    Padding
    Margin
    Flexbox
    Vertical Alignment
    Position
    Sizing
    Text
    Visibility
    ...
    37
    

    View Slide

38. AHASALL / JDJEBARI
    Utilities
    .pt-3, .pb-3, .py-5
    38
    

    View Slide

39. AHASALL / JDJEBARI
    Utilities
    .ml-3, .ml-md-5, .mx-5
    39
    

    View Slide

40. AHASALL / JDJEBARI
    Bootstrap Components, the Reason Why You
    Hate Bootstrap
    40
    

    View Slide

41. AHASALL / JDJEBARI
    The Problem with Bootstrap 4
    41
    

    View Slide

42. AHASALL / JDJEBARI
    ✅ CSS Reset
    ✅ CSS Layout
    ✅ CSS Utilities
    ❌ Components
    Recap
    

    View Slide

43. AHASALL / JDJEBARI
    Angular Material
    

    View Slide

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
    

    View Slide

45. AHASALL / JDJEBARI
    The Different Parts of Angular Material
    45
    Component
    Development Kit
    Material Design
    Components
    

    View Slide

46. AHASALL / JDJEBARI
    The Different Parts of Angular Material
    46
    @angular/cdk @angular/material
    

    View Slide

47. AHASALL / JDJEBARI
    Table
    Stepper
    Tree
    47
    CDK
    

    View Slide

48. AHASALL / JDJEBARI
    Platform
    Overlay
    Layout
    Bidirectionality
    Drag & Drop
    ...
    48
    CDK
    

    View Slide

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
    

    View Slide

50. AHASALL / JDJEBARI
    The CDK can be used to build your own
    component library
    50
    

    View Slide

51. AHASALL / JDJEBARI
    Form controls
    Navigation
    "Layout" components
    Buttons & indicators
    Popups & Modals
    Data table
    51
    Components
    

    View Slide

52. AHASALL / JDJEBARI
    Theming Angular Material Applications
    52
    

    View Slide

53. AHASALL / JDJEBARI
    53
    

    View Slide

54. AHASALL / JDJEBARI
    My Button
    
    My Button
    !
    54
    

    View Slide

55. AHASALL / JDJEBARI
    My Button
    
    My Button
    !
    55
    

    View Slide

56. AHASALL / JDJEBARI
    This is so easy...
    56
    

    View Slide

57. AHASALL / JDJEBARI
    ...let’s do the same for our own components
    57
    

    View Slide

58. AHASALL / JDJEBARI
    

    View Slide

59. AHASALL / JDJEBARI
    

    View Slide

60. AHASALL / JDJEBARI
    (1) my-alert.component.html
    
    Lorem ipsum dolor sit amet,
    consectetur adipisicing elit.
    !
    60
    

    View Slide

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
    

    View Slide

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
    

    View Slide

63. AHASALL / JDJEBARI
    (4) styles.scss
    @include alert-theme($my-theme);
    63
    

    View Slide

64. AHASALL / JDJEBARI
    Angular Material is great but...
    64
    

    View Slide

65. AHASALL / JDJEBARI
    Theming our own components can be easier
    65
    

    View Slide

66. AHASALL / JDJEBARI
    Not many utilities
    (only typography and elevation utilities)
    66
    

    View Slide

67. AHASALL / JDJEBARI
    No CSS layout system
    (write your own)
    67
    

    View Slide

68. AHASALL / JDJEBARI
    No CSS reset by default
    (provide your own)
    68
    

    View Slide

69. AHASALL / JDJEBARI
    ❌ CSS Reset
    ❌ CSS Layout
    ❌ CSS Utilities
    ✅ Components
    Recap
    

    View Slide

70. AHASALL / JDJEBARI
    Angular Material & Bootstrap
    

    View Slide

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
    

    View Slide

72. AHASALL / JDJEBARI
    Let’s Be Pragmatic!
    72
    

    View Slide

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
    

    View Slide

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
    

    View Slide

75. AHASALL / JDJEBARI
    

    View Slide

76. AHASALL / JDJEBARI
    Theming Angular Material, the Easy Way
    

    View Slide

77. AHASALL / JDJEBARI
    77
    

    View Slide

78. AHASALL / JDJEBARI
    .border
    78
    

    View Slide

79. AHASALL / JDJEBARI
    .m-5
    79
    

    View Slide

80. AHASALL / JDJEBARI
    .p-5
    80
    

    View Slide

81. AHASALL / JDJEBARI
    .font-weight-bold
    81
    

    View Slide

82. AHASALL / JDJEBARI
    .my-border-primary-100
    82
    

    View Slide

83. AHASALL / JDJEBARI
    .my-text-secondary-900
    83
    

    View Slide

84. AHASALL / JDJEBARI
    .my-bg-secondary-50
    84
    

    View Slide

85. AHASALL / JDJEBARI
    my-alert.component.html
    

    View Slide

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
    

    View Slide

87. AHASALL / JDJEBARI
    The Utility-First Philosophy
    87
    

    View Slide

88. AHASALL / JDJEBARI
    Let’s stop writing CSS...
    88
    

    View Slide

89. AHASALL / JDJEBARI
    Let’s stop writing custom CSS...
    89
    

    View Slide

90. AHASALL / JDJEBARI
    ...and use utilities where possible
    90
    

    View Slide

91. AHASALL / JDJEBARI
    ✅ Bootstrap Reboot
    ✅ Bootstrap Grid
    ✅ Bootstrap Utilities
    ✅ Component Dev Kit
    ✅ Material Components
    ✅ New Theming approach
    Recap
    

    View Slide

92. AHASALL / JDJEBARI
    Angular Material is great...
    ...but it’s not perfect.
    Bootstrap can help!
    Summary
    

    View Slide

93. AHASALL / JDJEBARI
    @JDjebari
    Frontend Software Engineer
    Jérôme Djebari
    GDG Toulouse
    Thank You!
    @ahasall
    Frontend Software Engineer
    Amadou Sall
    www.amadousall.com
    

    View Slide