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.
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. »
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!
15. Plonger dans le code…
16. …sans se noyer.
20. Bootstrap
21. Au fond du seau.
22. 2 pendre le taureau par les c…
25. S'occuper d’un scope précis…
27. item menu item item item item item
28. …puis remonter progressivement au scope principal.
29. La structure générale.
32. « Angular, bro ! »
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.
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.
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';
56. 5 faire vivre son code
57. Ne pas hésiter à renommer variables/classes/ID.
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';
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
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
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
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";
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