Rendez-vous en terre inconnue

Présenté à Paris Web le 5 octobre 2017
https://www.paris-web.fr/2017/conferences/rendez-vous-en-terre-inconnue.php

—

Il arrive que vous soyez confronté à un projet d'une telle envergure, avec une telle part d'inconnu et de nouveauté que vous ne sachiez pas dans quel sens l'aborder, au point d'en avoir peur.

Une interface bigrement riche, une cible internationale, de nombreuses fonctionnalités, dont certaines pas encore définies, un existant difficile à appréhender...

C'est ce qui m'est arrivé il y a quelques mois.

Je partagerai avec vous mon expérience sur l'approche ergonomique, la maintenabilité, les choix structurelles, le découpage et l'organisation des fichiers...

Je vous expliquerai ce qui a fonctionné, pourquoi, et peut-être plus important, mes erreurs.

—

Retrouvez la vidéo de la conférence sur https://youtu.be/bXzN0e0oM3E?t=3h34m38s

Transcript

1. Bonsoir
   je suis matthieu.
   

   View Slide

2. Web designer
   Développeur front-end
   Formateur front
   

   View Slide

3. Rendez-vous en terre inconnue
   

   View Slide

4. 1
   sortir de sa zone de confort
   

   View Slide

5. « On a besoin d’aide. »
   

   View Slide

6. View Slide

7. « Ok, j’arrive ! »
   

   View Slide

8. frustration confort danger
   savoir-faire demande
   

   View Slide

9. La stack.
   Ruby on Rails
   Angular
   CoffeeScript
   Slim
   Sass
   Bootstrap
   

   View Slide

10. HIPSTER
    ALERT!
    

    View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. Plonger dans le code…
    

    View Slide

16. …sans se noyer.
    

    View Slide

17. View Slide

18. View Slide

19. View Slide

20. Bootstrap
    

    View Slide

21. Au fond du seau.
    

    View Slide

22. 2
    pendre le taureau par les c…
    

    View Slide

23. View Slide

24. View Slide

25. S'occuper
    d’un scope précis…
    

    View Slide

26. View Slide

27. item
    menu
    item
    item
    item
    item
    item
    

    View Slide

28. …puis remonter
    progressivement
    au scope principal.
    

    View Slide

29. La structure générale.
    

    View Slide

30. View Slide

31. View Slide

32. « Angular, bro ! »
    

    View Slide

33. View Slide

34. #top-panel
    #top-nav
    …
    #top-container
    #sub-panel
    #sub-aside
    …
    #sub-container
    …
    

    View Slide

35. [id='top-panel']
    [id='top-nav']
    …
    [id='top-container']
    [id='sub-panel']
    [id='sub-aside']
    …
    [id='sub-container']
    …
    

    View Slide

36. [id='top-panel']{display: flex;}
    [id='top-nav']{flex: 0 0 auto;}
    …
    [id='top-container']{flex: 1 1 auto;}
    [id='sub-panel']{display: flex;}
    [id='sub-aside']{
    flex: 0 0 _%; min-width: _em;
    }
    …
    [id='sub-container']{flex: 1 1 auto;}
    …
    

    View Slide

37. 3
    ne pas foncer tête baissée
    

    View Slide

38. Penser à la maintenabilité.
    

    View Slide

39. Organiser ses fichiers.
    

    View Slide

40. View Slide

41. @import 'scss-config';
    @import 'scss-mixins';
    @import 'vendor-normalize';
    @import 'base-init';
    @import 'base-typo';
    @import 'layout-layout';
    @import 'layout-navigation';
    @import 'helpers';
    application.scss
    

    View Slide

42. Écrire un code propre.
    

    View Slide

43. .btn {
    position: absolute; top: 0; right: 0;
    display: flex; width: 1em; margin: 0; padding: 1em;
    justify-content: center; align-items: center;
    border: none; border-bottom: 3px solid #0da; outline: none;
    background: #0eb;
    line-height: 1em; color: #fff; text-decoration: none; text-shadow: 0 -2px #eee;
    transition: all 100ms ease-out;
    }
    // 1. positionnement
    // 2. boîte
    // 3. flex ou grid
    // 4. transformation
    // 5. bordure
    // 6. arrière-plan
    // 7. texte
    // 8. autres styles
    // 9. transition et animation
    

    View Slide

44. Tout variabiliser (ou presque).
    

    View Slide

45. // Fonts
    $font-weight-light : 300;
    $font-weight-normal : 400;
    $font-weight-bold : 700;
    $default-font-family : "Roboto", arial, sans-serif;
    $default-font-weight : $font-weight-normal;
    $default-font-style : normal;
    $title-font-family : "Roboto", arial, sans-serif;
    $title-font-weight : $font-weight-normal;
    $title-font-style : normal;
    $button-font-family : "Roboto", arial, sans-serif;
    $button-font-weight : $font-weight-normal;
    $button-font-style : normal;
    $font-sizes : ((
    'class' : 'lg',
    'size' : 1.5em
    ),(
    'class' : 'sm',
    'size' : .875em
    ),(
    'class' : 'xs',
    'size' : .75em
    ));
    // Navigation
    $nav-sm-width : 3em;
    $nav-lg-width : 15em;
    $nav-item-font-size : 1.25em;
    $nav-label-font-size : 1em;
    $nav-label-timing-function: cubic-bezier(unquote($easeOutBack));
    $nav-item-margin : .25em;
    $nav-duration : .3s;
    $nav-timing-function : cubic-bezier(unquote($easeOutQuint));
    // Aside bars
    $sub-aside-width : 20%;
    $sub-aside-min-width : 15em;
    $sub-aside-padding : 1em;
    $sub-aside-title-font-size : .75em;
    $sub-aside-title-margin : 2em 0 0;
    $sub-aside-item-font-size : 1em;
    $sub-aside-item-padding : .5em 1em;
    $sub-aside-sub-item-padding : .25em .5em;
    // Forms
    $form-x-padding : 1em;
    $form-y-padding : 1.25em;
    $form-border-width : 1px;
    $label-required-star-margin : .15em;
    $label-required-star-font-size : 1.25em;
    $label-required-star-font-weight : $font-weight-bold;
    

    View Slide

46. Désolidariser
    modules et contextes.
    

    View Slide

47. View Slide

48. View Slide

49. [id='top-panel']
    [id='top-nav']
    .nav-container
    …
    [id='top-container']
    [id='sub-panel']
    [id='sub-aside']
    .sub-aside-container
    …
    [id='sub-container']
    .content-container
    …
    

    View Slide

50. Du code intelligible.
    

    View Slide

51. 4
    assumer ses choix
    

    View Slide

52. Bootstrap
    

    View Slide

53. @import 'scss-config';
    @import 'scss-mixins';
    @import 'vendor-normalize';
    @import 'base-init';
    @import 'base-typo';
    @import 'layout-layout';
    @import 'layout-navigation';
    @import 'helpers';
    application.scss
    @import 'vendor-ceaser';
    @import 'scss-abstracts';
    @import 'base-forms';
    @import 'layout-sub-aside';
    @import 'ui-accordions';
    @import 'ui-pagination';
    @import 'base-grid';
    

    View Slide

54. @import 'vendor-ceaser';
    @import 'scss-config';
    @import 'scss-mixins';
    @import 'scss-abstracts';
    @import 'vendor-normalize';
    @import 'base-init';
    @import 'vendor-selectize';
    @import 'vendor-glyphicons';
    @import 'base-animations';
    @import 'vendor-grillade';
    @import 'base-grid';
    @import 'base-typo';
    @import 'base-form';
    @import 'base-buttons';
    application.scss
    @import 'layout-layout';
    @import 'layout-navigation';
    @import 'layout-sub-aside';
    @import 'ui-accordions';
    @import 'ui-pagination';
    @import 'ui-tabs';
    @import 'ui-tooltips';
    @import 'helpers';
    

    View Slide

55. View Slide

56. 5
    faire vivre son code
    

    View Slide

57. Ne pas hésiter à renommer
    variables/classes/ID.
    

    View Slide

58. View Slide

59. View Slide

60. View Slide

61. [id='top-panel']
    [id='top-nav']
    .nav-container
    …
    [id='top-container']
    [id='sub-panel']
    [id='sub-aside']
    .sub-aside-container
    …
    [id='sub-container']
    .content-container
    …
    

    View Slide

62. [id='sup-panel']
    [id='sup-nav']
    .nav-container
    …
    [id='sup-container']
    [id='mid-panel']
    [id='mid-aside']
    .mid-aside-container
    …
    [id='mid-container']
    [id='sub-panel']
    [id='sub-header']
    .sub-header-container
    …
    [id='sub-container']
    .table-list-container
    …
    SUP
    MID
    SUB
    

    View Slide

63. @import 'vendor-ceaser';
    @import 'scss-config';
    @import 'scss-mixins';
    @import 'scss-abstracts';
    @import 'vendor-normalize';
    @import 'base-init';
    @import 'vendor-selectize';
    @import 'vendor-glyphicons';
    @import 'vendor-glyphicons-filetypes';
    @import 'vendor-glyphicons-halflings';
    @import 'vendor-glyphicons-social';
    @import 'vendor-glyphicons-overwrite';
    @import 'base-animations';
    @import 'vendor-grillade';
    @import 'base-grid';
    @import 'base-typo';
    application.scss
    @import 'base-form';
    @import 'base-buttons';
    @import 'layout-layout';
    @import 'layout-navigation';
    @import 'layout-mid-aside';
    @import 'layout-sub-header';
    @import 'ui-accordions';
    @import 'ui-pagination';
    @import 'ui-tabs';
    @import 'ui-tooltips';
    @import 'ui-dropdown';
    @import 'ui-core-user-avatar';
    @import 'ui-modals';
    @import 'ui-notifications';
    @import 'ui-table-list';
    @import 'helpers';
    

    View Slide

64. Ne pas hésiter à changer
    d’arborescence.
    

    View Slide

65. @import 'vendor/ceaser/ceaser';
    @import 'scss/config';
    @import 'scss/mixins';
    @import 'scss/abstracts';
    @import 'vendor/normalize/normalize';
    @import 'base/init';
    @import 'vendor/selectize/selectize';
    @import 'vendor/glyphicons/glyphicons';
    @import 'vendor/glyphicons/glyphicons-filetypes';
    @import 'vendor/glyphicons/glyphicons-halflings';
    @import 'vendor/glyphicons/glyphicons-social';
    @import 'vendor/glyphicons/glyphicons-overwrite';
    @import 'base/animations';
    @import 'vendor/grillade/grillade';
    @import 'base/grid';
    @import 'base/typo';
    application.scss
    @import 'base/form';
    @import 'base/buttons';
    @import 'layout/layout';
    @import 'layout/navigation';
    @import 'layout/mid-aside';
    @import 'layout/sub-header';
    @import 'ui/accordions';
    @import 'ui/pagination';
    @import 'ui/tabs';
    @import 'ui/tooltips';
    @import 'ui/dropdown';
    @import 'ui/core-user-avatar';
    @import 'ui/modals';
    @import 'ui/notifications';
    @import 'ui/table-list';
    @import 'helpers/helpers';
    

    View Slide

66. View Slide

67. View Slide

68. View Slide

69. [id='sup-panel']
    [id='sup-nav']
    .nav-container
    [id='sup-container']
    [id='mid-panel']
    [id='mid-aside']
    .mid-aside-container
    [id='mid-container']
    [id='sub-panel']
    [id='sub-header']
    .sub-header-container
    [id='sub-container']
    .table-list-container
    [id='sup-aside']
    .sup-aside-container
    

    View Slide

70. View Slide

71. View Slide

72. View Slide

73. [id='sup-panel']
    [id='sup-nav']
    .nav-container
    [id='sup-container']
    [id='mid-panel']
    [id='mid-aside']
    .mid-aside-container
    [id='mid-container']
    [id='sub-panel']
    [id='sub-header']
    .sub-header-container
    [id='sub-container']
    .content-container
    [id='sub-aside']
    .sub-aside-container
    [id='sup-aside']
    .sup-aside-container
    

    View Slide

74. View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. $default-font-size: 1.4em;
    $ui-sizes : ((
    'class' : 'xl',
    'base' : 1.8em
    ),(
    'class' : 'lg',
    'base' : 1.6em
    ),(
    'class' : 'md',
    'base' : 1.4em
    ),(
    'class' : 'sm',
    'base' : 1.2em
    ),(
    'class' : 'xs',
    'base' : 1em
    ));
    html {
    font-size: .625em; /* fallback IE8+ */
    font-size: calc(1em * .625); /* IE9-IE11 math fixing */
    }
    body {
    font-size: $default-font-size;
    @each $size in $ui-sizes {
    $class: map-get($size, 'class');
    $base: map-get($size, 'base');
    &.ui-#{$class} {
    font-size: $base;
    }
    }
    }
    scss/_config.scss base/_typo.scss
    

    View Slide

80. View Slide

81. @import "skins/default/default";
    @import "skins/darkblue/darkblue";
    // Base
    @import "skin-componants/forms";
    @import "skin-componants/buttons";
    // Layout
    @import "skin-componants/layout";
    @import "skin-componants/navigation";
    @import "skin-componants/sup-aside";
    @import "skin-componants/mid-aside";
    @import "skin-componants/sub-header";
    @import "skin-componants/sub-aside";
    // User interface componants (alpha order)
    @import "skin-componants/accordions";
    @import "skin-componants/core-user-avatar";
    @import "skin-componants/dropdown";
    @import "skin-componants/job-status";
    @import "skin-componants/misc-item-list";
    @import "skin-componants/modals";
    @import "skin-componants/notifications";
    @import "skin-componants/pagination";
    @import "skin-componants/progress";
    @import "skin-componants/table-list";
    @import "skin-componants/tabs";
    @import "skin-componants/tooltips";
    …
    }
    application.scss
    skins/_skin.scss
    skins/darkblue/_darkblue.scss
    @import "../config-default";
    @import "config-overwrite";
    @import "../skin";
    body.#{$theme-name} {
    // Reset
    @import "skin-componants/init";
    // Vendors
    @import "skin-componants/selectize";
    @import "skin-componants/loading-bar";
    

    View Slide

82. View Slide

83. 6
    prendre du recul
    

    View Slide

84. Prendre du recul, ce n’est pas
    que pour préparer des confs.
    

    View Slide

85. 1. sortir de sa zone de confort
    2. prendre le taureau par les cornes
    3. ne pas foncer tête baissée
    4. assumer ses choix
    5. faire vivre son code
    6. prendre du recul
    

    View Slide

86. SORTEZ
    - de votre -
    zone de
    CONFORT
    SORTEZ
    - de votre -
    zone de
    CONFORT
    

    View Slide

87. Merci.
    Matthieu Bué . UX developer . @twikito
    

    View Slide