Méthodologie

Support : https://drive.google.com/file/d/1Qsb4idqmkUEE5ESSWOFrKXXev9eUwrbE/view?usp=sharing

DRY (Do not Repeat Yourself)

  • http://bruno-orsier.developpez.com/principes/dry/

L’idée : ne pas répéter deux fois le même code surtout pour un projet maintenu à long terme.

Ca dépasse le stade du code (pas que copier/coller) mais également au niveau de la connaissance : collecte, organisation, modélisation…. Il est nécessaire aussi d’organiser la veille technologique d’une entreprise sans dupliquer ou répéter deux fois la même chose/recherche/stockage dans un secteur en perpétuel changement.

Solutions :

  • Veille : utiliser des outils de partages, comme le Cloud avec organisations des références par tags.
  • Code : segmentation des applications en modules eux-mêmes segmentés en Models/Views/Controlers ce qui permet de pouvoir adapter chaque module indépendament des autres ou de réutiliser un module venant d’un ancien projet. Ainsi un model pourra être appelé via un controler de template ou via une requête Ajax.
  • Méthodologie de commentaires… Rien de pire qu’un code non commenté (si un code dont les commentaires sont obsolètes). Il faut s’entendre sur la manière dont chaque membre de l’équipe commente ses codes.

Ne pas réinventer la roue

Il existe de nombreux scripts ou librairies partagées en OpenSource sur le Web. GitHub ou Codepen en sont les plateformes de référence.

Copier un script n’est pas un crime, citez vos sources et partagez vos adaptations.

Il existe de nombreuses bases de données libres d’accès. Ce sont les OpenDatas utilisables plus ou moins facilement. On les appellent des APIs de données. L’Europe impose aux établissements publiques de partager leurs données non confidentielles.

Agile (scrum)

https://www.thierry-pigot.fr/scrum-en-moins-de-10-minutes/?fbclid=IwAR0ah0nBEfJpfd6PtsmqmZzfVDYtZNKHfxcdxskC3Er4Ozl9XiLP8QnjEb4
Un principe fort des méthodes Agiles est la participation active du client lors de sprint. Cela permet de choisir plus finement les fonctionnalités réalisées à chaque incrément. Avant le démarrage du sprint 1, les objectifs sont définis lors d’un sprint 0. La mêlée (scrum meeting) a lieu quotidiennement et des réunions spécifiques permettent de lever les obstacles bloquants. Le Sprint a une durée variable (idéalement deux semaines). Après chaque sprint, une démonstration suivie d’une rétrospective ont lieu. Le propriétaire du produit peut à tout moment compléter ou modifier la liste des fonctionnalités à produire pour les prochains sprints.

  • Importance de la rétrospective sur le sprint et l’auto-organisation. (Avant de démarrer un nouveau sprint, l’équipe réalise une rétrospective. Cette technique analyse le déroulement du sprint achevé, afin d’améliorer ses pratiques. Le flot de travail de l’équipe de développement est facilité par son auto-organisation, il n’y aura donc pas de gestionnaire de projet.)
  • WarRoom : salle de réunion matinale et de fin de sprint avec le client. Un seul ordi connecté avec la branche Dev du projet.

Collaboration

  • Gestionnaire de tâches : Freedcamp, Trello, Basecamp., AirTable..
  • Traceur de bugs : Mantis, Freedcamp (payant), etc.
  • Codeanywhere/Cloud9 : gestionnaires de dockers distants pré-configurés et partageables.
  • Partage de fichiers : server ftp, Cloud privé, Google Drive, DropBox.

Techniques

La console

Dit aussi terminal.

VIM : éditeur de texte
https://openclassrooms.com/courses/reprenez-le-controle-a-l-aide-de-linux/vim-l-editeur-de-texte-du-programmeur

La console sur le device distant

Weinre permet d’afficher la console venant du device distant. C’est du remote debug.

Il s’installe avec npm. Il faut ajouter un script dans la page que l’on veut tetser.

Support : Weinre

Bower

Raz-le-bol sde tâches répétitives qui vous empêchent de vous concentrer sur votre coeur de métier ?

Support : Bower

Le but de cet outil développé par l’équipe de Twitter est de gérer les dépendances de votre projet. Lorsque vous débutez un nouveau projet, votre première tâche est de créer (ou de copier-coller) l’arborescence de vos fichiers et dossiers.

Votre mission suivante est d’aller visiter un par un les outils incontournables pour votre projet : jQuery, Modernizr, Bootstrap, etc. et d’installer les nouvelles versions de ces outils… ou alors de mettre à jour vos propres modules les uns après les autres. Et bien c’est fini !!

La liste des dépendances inscrites dans le registre de Bower est pour le moins impressionnante, et parmi lesquelles vous trouverez un bon nombre de célébrités :

Twitter Bootstrap, jQuery, html5boilerplate, font-awesome, modernizr, html5shiv, normalize, jQuery mobile, grunt, …

Un pré-requis est nécessaire au bon fonctionnement de Bower :

  • Node.js (et son manager NPM, Node Packaged Modules)
  • C:\Users\pcharlier\AppData\Roaming\npm

Ensuite ? : bower install jquery dans votre dossier de dev. Oui mais quoi ? https://bower.io/search/

Et si ma dépendance n’est pas à jour ? bower update jquery

Et si je veux installer une version précise ? bower install jquery#1.9.1

Enregistrer sa config

  • dans un fichier bower.json
  • dans un dossier particulier : .bowerrc avec { « directory »: « inc/ » }
  • Créer son bower.json -> bower init
  • Utiliser le bower.json : bower install
  • Si vous installez une dépendance qui dépend elle-même d’une autre dépendance, tout sera chargé automatiquement.
  • Vous pouvez stocker votre config sur le serveur de Bower. url : https://www.alsacreations.com/tuto/lire/1609-bower-pour-les-nuls.html

BEM (Block, Element, Modifier)

Le développement Web sous une approche composants (modules). L’idée est de diviser l’interface utilisateur en blocs indépendants. On peut ainsi réutiliser du code sans copier/coller.

Un bloc reçoit un nom de classe qui le décrit (ex. : search-form) et chaque élément de ce bloc ne pouvant être utilisé sans son parent, reprend le nom du parent + un complément (ex: search-form__input).

Les différents états d’un bloc ou élément sont réalisé en ajoutant une classe reprenant le nom du bloc suivi de l’état (ex: search-form search-form_focused ou search-form__button search-form__button_disabled).

Pour en savoir plus, c’est ici.

SMACSS (Scalable and Modular Architecture for CSS)

  • https://smacss.com/pages/fr
  • http://www.nicoespeon.com/fr/2013/05/tombez-pour-smacss/

Organiser ses css en modules et comportements. Une méthode optimale pour choisir le nom de ses classes.

SMACSS est un ensemble de conseils et de lignes de conduite élaborés par Jonathan Snoovvk et dont le but est de vous permettre d’organiser votre CSS de manière claire et intelligente.

3 principes :

  • Catégorisation
  • Nommage
  • Découpler le HTML du CSS : garder chaque module indépendant du contexte HTML dans lequel il se trouve

Le premier principe réside dans la catégorisation : on distingue et regroupe les règles CSS par affinité logique afin de structurer son code (base, layout, module, state, theme). On distingue 5 types de catégories :

  • Base
  • Layout
  • Moduler HTML/CSS
  • State
  • Theme

Base

s’agit des éléments par défaut tels qu’ils sont définis sur l’ensemble du site. Exemple : ul > li >a, body, em… Reset.css en font partie.

Layout

Il s’agit du découpage de l’architecture de votre site en sections principales. Ne comprend que les sections majeures du site.

Généralement, il s’agit de sélecteurs simples, descendants ou d’enfants, voire de classes ou d’identifiants (pour le coup, c’est bien le seul endroit où l’usage d’ID est tolérable). Exemple : .container, header, header .logo…

Module

Section mineure. On peut les retrouver dans plusieurs projets. Exemple : navigation et boutons. Un module est un bloc autonome. Ne pas utiliser votre CSS pour styliser votre module “en fonction de là où il se trouve”, vous passeriez à côté de la plaque!

State

l s’agit de classes qui viennent définir un état particulier dans lequel se trouvent vos éléments.

Généralement, une règle qui se trouve dans cette catégorie correspond à une simple classe CSS. Exemple : une classe ajoutée quand un élément est activé à la souris (.is-active) ou draggé (is-drag) ou encore convertir en block (is-block). Bien souvent, les états correspondent à des interactions avec l’utilisateur et ont des dépendances avec Javascript. Autre exemple : is-loading, ajouté à body pour toute nouvelle requête envoyée au serveur.

Theme

Dans certains cas, il se peut qu’un projet nécessite l’élaboration de différents thèmes pouvant s’interchanger en fonction des choix de l’utilisateur ou de l’équipe. On peut découpler l’apparence de la structure des modules (notamment) afin de pouvoir switcher facilement entre ces différents designs. Exemple : .theme-ocean header

Le second principe relève de la convention de nommage : ne pas utiliser des ID quand une classe fait très bien l’affaire, nommer les classes de manière à faire ressortir la logique qui s’y cache, …

  • pour les modules, il est judicieux que les classes partagent la même racine correspondant au module en question. Des projets comme Bootstrap adoptent d’ailleurs cette convention. (.btn, .btn-search, .btn-large)
  • pour state, il s’agit d’un état logique dans lequel se trouve un élément. Ainsi, il n’est pas bête que chaque classe transmettent cette intention avec .is- par exemple : .is-loading, .is-btn-active.
  • pour les themes donc, il est envisageable de créer une sorte de namespace explicite, notamment s’il est possible de switcher entre les différents thèmes proposés : .theme-ocean, .theme-silver.

Le troisième principe consiste à découpler le HTML du CSS : garder chaque module indépendant du contexte HTML dans lequel il se trouve, utiliser les sélecteurs d’enfants à bon escient, … C’est la condition sine qua none d’un code flexible, modulaire et réutilisable. Voir les exemple ici: http://www.nicoespeon.com/fr/2013/05/tombez-pour-smacss/

Avec ces 3 principes, SMACSS vous permet de poser des bases solides pour un CSS de qualité, made in Canada ! Combiné avec SASS ou LESS, vous organisez vos css en modules inclus dans votre css principale.

SASS, SCSS & LESS + prepross

Un préprocesseur CSS est un outil (ou programme) permettant de générer dynamiquement des fichiers CSS. L’objectif est d’améliorer l’écriture de ces fichiers, en apportant plus de flexibilité au développeur web. Le préprocesseur “Sass” est largement majoritaire parmi les développeurs web en ce moment. On distingue SASS (écriture stricte) de SCSS (plus récent et qui permet de mélanger la syntaxe SASS et CSS).

À quoi sert un préprocesseur ?

https://www.alsacreations.com/article/lire/1717-les-preprocesseurs-css-c-est-sensass.html En attendant CSS4.0, un préprocesseur apporte : des variables, des opérations et des fonctions natives, la possibilités de créer ses propres fonctions avec boucles et paramètres, etc.

Compilation

Il est nécessaire de convertir le code en code CSS via un compilateur :

  • Application : prepross, Codekit, Koala, Scout…
  • Plugin d’éditeur sur Atom, SublimeText ou Brackets
  • A l’aide de tasks runners : Parcel, Webpack, Gulp, Grunt, Brunch,…
  • En ligne ou sur serveur (Sassmeister ou librairies PHP).

Extension des fichiers : .less, .sass ou .scss

Méthodologie

  • découpe en fichiers « partials » importés dans le fichier principal.
  • imbrication de règles
  • selecteur « & » qui cible le parent inexistant en CSS
  • apport de fonctions natives comme lighten(#000, 10%)
  • Directive @extend qui permet d’intégré les proprités d’un autre sélecteur
  • Directive « % » qui permet de définit un sélecteur de référence non compilé
  • Les mixins permettent de définir ses propres fonctions avec paramètres, boucle et conditions. Appelées avec « @include ».

Demo avec prepross

  • url : https://www.alsacreations.com/article/lire/1717-les-preprocesseurs-css-c-est-sensass.html

SASS, SCSS ou LESS

SASS apporte beaucoup plus de possibilités que LESS et SCSS respectant l’écriture de CSS est plus souple. Résultat : foncer sur SCSS.

Et PostCss ?

PostCSS permet de modifier une CSS avec des outils du mêmes types basés sur JavaScript. On va préfixer les propriétés récentes et compresser le code final.

LiveReload

Méthode qui actualise automatiquement les écrans dans les navigateurs quand une modification est aportée à un fichier.

  • Prepros le fait
  • Plugin de votre IDE + plug-in du navigateur
  • Tasksmanager avec plugin du navigateur
  • node via ‘live-server’ à installer via npm install -g live-server (https://basementmedia.no/2015/06/26/previewing-website-when-editing-in-visual-studio-code/)

Git + Github ou Bitbucket

Assez de ces fichiers verion1.html, version1.1.html…. ou de ces emails foireux se croisant sur la toile.

Pensez aux outils de versioning dont le principal dans le monde du développement informatique est Git.

Github propose également https://pages.github.com/ pour héberger vos projets directement à partir de votre dépôt distant….

Git en gestion locale

Ressources: Git

Github, GitLab et Bitbucket en gestion distante

  • gratuitement Github vous permet de créer des projets publics. Pour des privés c’est payant. GitLab et Bitbucket permettent des dépôts privés et publics gratuitement.
  • Outils visuels : SourceTree, GitGUI

Prepros

url : prepros.io pour Mac, Windows et Linux Prepross est un tasks runner avec une interface graphique. Tout est disponible (preprcessing, minification, renommage, optimisation d’images pour le Web, concaténation de fichiers js et css, livereload et synchronisation de navigateurs…

Il suffit d’adapter les préférences du programme à vos méthodes de travail, de déposer le dossier de projet dans la colonne de gauche du programme et d’adapter enfin les préférences du projet.

Gulp

Gulp est un tasks runner tout comme Grunt ou Brunch. Grunt est plus répendu en France. Ici vous allez vous mêmes gérer vos modules en fonctions de ce que vous avez besoin. On peut trouver des milliers de modules compatibles Gulp. La mise en place est plus ardue que Prepross mais forcément plus fine en finale.

Un pré-requis est nécessaire au bon fonctionnement de Gulp :

  • Node.js (et son manager NPM, Node Packaged Modules)

Gulp s’installe en tant que package Node… entre-autre.

npm install gulp -g

Dans votre projet, il faut créer un gulpfile.js qui va reprendre les packages à utiliser dans votre projet, les tâches à exécuter dans l’ordre où elles doivent être exécutées. Il faut évidemment charger chaque package nécessaire au projet : npm install nom_package –save-dev.

L’instruction gulp (./node_modules/.bin/gulp si Gulp pas installé globalement) dans le Terminal lancera le module Gulp qui exécutera ce qui est demandé dans le fichier gulpfile.js.

npm init créera une fichier package.json qui pourra être réutilisé dans d’autres projets en collaboration avec votre gulpfile.js.

Pour un nouveau projet, déposer dans le dossier, je fichier jsonainsi que le fichier gulpfile.js et exécuter la commande npm init et c’est parti.

Pour utiliser le livereload, n’oubliez pas d’ajouter l’extension adéquate à votre navigateur.

Vous pouvez également intégrer Bower dans votre projet Gulp : gulp-bower, mais est-ce vraiment utile ?

Exemple de fichier Gulp : https://gist.github.com/torgeir/8507130

WebPack

Plus évolué qu’un simple taskrunner, il permet de moduler ses scripts et de les lier via des imports comme le fait Node.js. En sortie, on a un JS compatible avec le navigateur.

AU départ, Webpack ne gère que le JS. Les loaders lui permettent de traiter d’autres fichiers et de les convertir en modules valides pour votre application.

Les plugins vont nous permettent d’exécuter des tâches comme l’ioptimisation d’élements, gérer des actifs, etc.

En version 4.0, Webpack nécessite une arborescence simple avec 2 dossiers : /src et /dist. Il sait directement où chercher les fichiers à traiter et où stocker le résultat final.

npm init : initialise un projet node en créant un fichier « package.json » avec la configuration de votre projet.

npm i –save-dev webpack installe Webpack en tant que dépendance de développement de mon projet.

Avec la version 4.0, il faut aussi installer webpack-cli : npm i -D webpack-cli

./node_modules/.bin/webpack src/index.js –watch va exécuter le fichier index.js avec Webpack. Automatiquement, il va inclure log.js dans index.js et créer main.js dans le dossier src. Watch pour rester en écoute des modifications ultérieures.

La configuration se fait dans le fichier webpack.config.js.

En ajoutant la ligne « dev » : « webpack » dans les scripts du package.json, l’appli se lance via npm run dev.

Avec webpack 4, on peut définir les modes dev et build.

ES6 -> ES5 avaec Babel, ça passe par un « loader » dans les modules à configurer dans webpack.config.js. Un loader transforme du code lors de la « compilation ». Des les « rules » on précise le type de fichiers cibles, on définit le loader et ses options.
Il faut bien sûr installer le loader via npm i -D nom_loader

Minification : Ca passe par les plugins. Ici UglifyJsWebpackPlugin.
Ca passe aussi par une installation :  npm i -D uglifyjs-webpack-plugin et une configuration dans notre webpack.config.js.

Un exemple complet

 

 

 

 

 

 

 

 

Docker

Docker est un logiciel libre qui automatise le déploiement d’applications dans des conteneurs logiciels.

Le principe : lancer un docker par application/développement. Un conteneur Docker n’inclut pas de système d’exploitation, s’appuyant sur les fonctionnalités du système d’exploitation fournies par l’infrastructure sous-jacente.

Les dockers s’exécutent de manière autonome depuis une seule machine physique ou une seule instance par nœud. Cela permet aux nœuds d’être déployés au fur et à mesure que les ressources sont disponibles ou fonctionnalités nécessaires.

Utiliser Docker pour créer et gérer des containers peut simplifier la mise en œuvre de systèmes distribués en permettant à de multiples applications, tâches de fond et autres processus de s’exécuter de façon autonome sur une seule machine physique ou à travers un éventail de machines isolées.

L’avantage de Docker : pouvoir avoir une config bien précise selon les applications. Configuration déployable, partageable et multipliable à souhaits.

Certaines images prédéfinies sont utilisables et téléchargeables directement à partir du site Docker.

Une fois dans le terminal, la commande docker run -ti <<nom du docker>> démarre votre docker et vous y met dedans en terminal.

Petite introduction à Docker. Exemple de configuration.
Autre ressource.

Laisser un commentaire