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

B0beb3dec0b3d42ad0eae3158d80f19c?s=128

Matthieu Bué

October 05, 2017
Tweet

Transcript

  1. Bonsoir je suis matthieu.

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

  3. Rendez-vous en terre inconnue

  4. 1 sortir de sa zone de confort

  5. « On a besoin d’aide. »

  6. None
  7. « Ok, j’arrive ! »

  8. frustration confort danger savoir-faire demande

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

  10. HIPSTER ALERT!

  11. None
  12. None
  13. None
  14. None
  15. Plonger dans le code…

  16. …sans se noyer.

  17. None
  18. None
  19. None
  20. Bootstrap

  21. Au fond du seau.

  22. 2 pendre le taureau par les c…

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

  26. None
  27. item menu item item item item item

  28. …puis remonter progressivement au scope principal.

  29. La structure générale.

  30. None
  31. None
  32. « Angular, bro ! »

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

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

  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;} …
  37. 3 ne pas foncer tête baissée

  38. Penser à la maintenabilité.

  39. Organiser ses fichiers.

  40. None
  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
  42. Écrire un code propre.

  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
  44. Tout variabiliser (ou presque).

  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;
  46. Désolidariser modules et contextes.

  47. None
  48. None
  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 …
  50. Du code intelligible.

  51. 4 assumer ses choix

  52. Bootstrap

  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';
  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';
  55. None
  56. 5 faire vivre son code

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

  58. None
  59. None
  60. None
  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 …
  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
  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';
  64. Ne pas hésiter à changer d’arborescence.

  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';
  66. None
  67. None
  68. None
  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
  70. None
  71. None
  72. None
  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
  74. None
  75. None
  76. None
  77. None
  78. None
  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
  80. None
  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";
  82. None
  83. 6 prendre du recul

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

    confs.
  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
  86. SORTEZ - de votre - zone de CONFORT SORTEZ -

    de votre - zone de CONFORT
  87. Merci. Matthieu Bué . UX developer . @twikito