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

B0beb3dec0b3d42ad0eae3158d80f19c?s=128

Matthieu Bué

October 05, 2017
Tweet

Transcript

  1. 6.
  2. 11.
  3. 12.
  4. 13.
  5. 14.
  6. 17.
  7. 18.
  8. 19.
  9. 20.
  10. 23.
  11. 24.
  12. 26.
  13. 30.
  14. 31.
  15. 33.
  16. 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;} …
  17. 40.
  18. 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
  19. 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
  20. 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;
  21. 47.
  22. 48.
  23. 52.
  24. 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';
  25. 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';
  26. 55.
  27. 58.
  28. 59.
  29. 60.
  30. 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
  31. 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';
  32. 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';
  33. 66.
  34. 67.
  35. 68.
  36. 70.
  37. 71.
  38. 72.
  39. 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
  40. 74.
  41. 75.
  42. 76.
  43. 77.
  44. 78.
  45. 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
  46. 80.
  47. 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";
  48. 82.
  49. 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
  50. 86.