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

Rendez-vous en terre inconnue

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

Matthieu Bué

October 05, 2017
Tweet

More Decks by Matthieu Bué

Other Decks in Programming

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