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

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.

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.

WebPack, Parcel et Vite

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.