## Objectif

Quand nous développons des sites Web, nous avons à cœur de les rendre les plus légers possibles afin d’améliorer les performances pour les utilisat⋅eurs⋅rices, et aussi de réduire l'utilisation de la bande-passante pour diminuer l’énergie nécessaire à fournir ces services.

Néanmoins, il n’est pas toujours facile d’identifier quelles sont les parties à améliorer. Il existe plusieurs outils ([EcoIndex](https://www.ecoindex.fr/) ou [Greenspector](https://greenspector.com/) pour l’impact environnemental), et nous avons retenu Lighthouse qui mesure les performances comme l'accessibilité, et que nous avons pu intégrer facilement à notre CI.

## Lighthouse

[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview?hl=fr) est un outil de mesure des performances d’une page Web développé par Google. Il évalue notamment : la vitesse d’affichage et de poids de page, le référencement (SEO), ainsi que l’accessibilité. Il simule la navigation comme le ferait un humain, et calcule le temps passé entre la demande du navigateur et la fin de l’affichage. Tout en évaluant le temps passé à télécharger les scripts et feuilles de style, et à exécuter le code Javascript.

On peut l’utiliser pour générer un rapport de la page que l’on souhaite (par exemple, [notre site](https://pagespeed.web.dev/analysis/https-www-troopers-coop/lz3s7730k4?form_factor=mobile)) : 

![performances.png](https://strapi.troopers.coop/uploads/performances_d4cdbbf7cf.png)

On souhaitait mesurer régulièrement les performances d’un projet afin de vérifier qu’elles ne s’éloignent pas de notre objectif, mais cela nous aurait demandé de lancer des analyses manuellement à intervalles réguliers.

Heureusement, il est possible d'automatiser ces analyses, nous allons vous présenter comment.

## Intégration continue

Grâce à notre [expérience avec GitLab CI](https://www.troopers.coop/blog/donnez-des-ailes-a-votre-gitlab-ci), nous avons pu facilement mettre en place une tâche automatique qui lance Lighthouse : 

1. un⋅e développeu⋅r⋅se modifie le code du projet
2. la personne pousse ses changements sur GitLab ouvre une demande de fusion
3. GitLab CI lance automatiquement la compilation du projet
4. ensuite, GitLab CI va faire tourner [Lighthouse](https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/getting-started.md) (via Docker) sur cette version du code, puis les envoyer à Google
5. les résultats du rapport sont visibles via un lien généré par Lighthouse

## Confidentialité des données et évolution dans le temps

Ces mesures sont très intéressantes, mais nous voulions améliorer 2 points : 
- stocker les données dans notre infrastructure au lieu d’envoyer les données à Google
- avoir un historique pour pouvoir comparer les rapports avant et après un changement

Fort heureusement, Google fournit également le[ côté serveur de Lighthouse](https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/server.md). Nous avons ainsi pu configurer notre propre instance (également via Docker).

Ainsi, GitLab CI envoie les résultats des analyses sur notre Lighthouse, ce qui ouvre de nouvelles possibilités :
- confronter les notes et mesures pour vérifier qu’une évolution ne dégrade pas les performances du site, pour ensuite faire des corrections adéquates ou expliquer au client si une diminution des performances est inévitable (par exemple, l’ajout d’une image, même optimisée, aura forcément un coût)
- constater l’évolution au fur et à mesure du temps, afin d'avoir une vue d’ensemble des performances
- les données ne sont pas transmises à Google, nous gardons le contrôle des résultats

Exemple : 
![exemple.png](https://strapi.troopers.coop/uploads/exemple_e08f69e31a.png)

Il faut prendre en compte qu’il y a une variabilité entre les résultats due aux serveurs de CI :
- Lighthouse peut être lancé par des serveurs différents, qui n’ont pas les mêmes performances
- ces serveurs peuvent être plus ou moins occupés en fonction des autres tests en cours
- il peut y avoir une congestion sur le réseau à ce moment-là (pour les appels à Strapi, qui héberge le contenu des pages)

Pour pallier cela, nous sommes en train de tester différentes solutions : restreindre Lighthouse à un seul serveur, mettre en cache les données de Strapi avant de lancer les tests pour éliminer la variabilité du réseau, etc
.
## Configuration de Lighthouse
### Côté serveur
docker-compose.yml


```yaml
services:
 lighthouse-ci-server:
 lighthouse-ci-server:
 image: 'patrickhulce/lhci-server'
 restart: always
 ports:
   - '127.0.0.1:9001:9001'
 volumes:
   - '/var/docker/lighthouse/:/data'
```

On peut alors interroger ce serveur pour [créer un projet](https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/getting-started.md#project-creation).
### Dans le projet
On utilise les règles recommandées par Lighthouse et on définit quelle(s) URL(s) on souhaite utiliser : 

 .lighthouserc.js 

```javascript
module.exports = {
 ci: {
   assert: {
     preset: 'lighthouse:recommended',
   },
   collect: {
     url: ['http://localhost:3000/fr'],
   },
   upload: {
     target: 'temporary-public-storage',
   },
 },
}
```

### Dans GitLab CI
On définit 3 valeurs de configuration via les variables de GitLab CI : 
- LIGHTHOUSE_USER : utilisateur HTTP
- LIGHTHOUSE_PASSWORD : mot de passe HTTP
- LIGHTHOUSE_BUILD_TOKEN : généré quand on a créé un projet


.gitlab-ci.yml

```yaml
.lighthouse-ci: &lighthouse-ci
 image: cypress/browsers:node-20.17.0-chrome-128.0.6613.119-1-ff-130.0-edge-128.0.2739.63-1
 stage: tests
 tags:
   - yarn-cache
 before_script:
   - yarn global add @lhci/cli@0.14.x
 only:
   - merge_requests
   # this is required to provide a base build to Lighthouse
   - develop


tests-lighthouse-ci:
 <<: *lighthouse-ci
 script:
   - yarn install


   - yarn build-web


   - nohup yarn start-web &
   - .ci/wait-for-it.sh localhost:3000 --timeout=120 # Donne du temps au serveur pour démarrer


   - lhci collect --numberOfRuns 1 --collect.settings.chromeFlags="--no-sandbox"
   # Supprimer les résultats du « pré-chauffage »
   - rm -rfv .lighthouseci/


   - lhci collect --collect.settings.chromeFlags="--no-sandbox"


   - lhci assert
 artifacts:
   paths:
     - .lighthouseci/
   expire_in: 24 hrs
   when: always
 allow_failure: true


lighthouse-ci:upload:
 <<: *lighthouse-ci
 stage: lighthouse
 needs: ['tests-lighthouse-ci']
 dependencies: ['tests-lighthouse-ci']
 variables:
   LHCI_SERVER_BASE_URL: https://lighthouse.troopers.agency
   LHCI_BASIC_AUTH__USERNAME: ${LIGHTHOUSE_USER}
   LHCI_BASIC_AUTH__PASSWORD: ${LIGHTHOUSE_PASSWORD}
   LHCI_TARGET: lhci
   LHCI_TOKEN: ${LIGHTHOUSE_BUILD_TOKEN}
 script:
   # the directory must exist
   - ls -lh ${PWD}/.lighthouseci/
   - lhci upload
```

## Conculsion
L’ajout de Lighthouse à nos processus qualité nous offre un nouveau regard quantitatif sur les performances de nos projets web. C’est rapidement devenu un des indicateurs qui nous aide à améliorer nos développements au quotidien, et par conséquent les projets de nos clients.

![meme.png](https://strapi.troopers.coop/uploads/meme_57e739fc67.png)

Mesurer les performances de nos sites web avec LightHouse, côté client et serveur

En avril dernier, nous vous avions proposé un petit quiz du Numérique Responsable, et vous avez été nombreux⋅se⋅s a y participer, avec une moyenne générale de 7.36/10 ; Félicitations !

Pour celles et ceux qui n'ont pas eu l'occasion de participer, ne vous inquiétez pas, il reste en ligne à l'adresse suivante : https://quizz.troopers.coop/

Voici les réponses à toutes les questions, avec un lien vers le post LinkedIn du mardi NR lié :

## Quels sont les trois piliers du Numérique Responsable ?

Réponse : Planète, Personnes, Prospérité


https://www.linkedin.com/feed/update/urn:li:activity:7158036208969744384


## Comment s'appelle le référentiel pour l'écoconception des services numériques ?

Réponse : Le RGESN


## Que signifie le sigle RGAA ?

Réponse : Référentiel Général d’Amélioration de l’Accessibilité

https://www.linkedin.com/feed/update/urn:li:activity:7160580387822297089


## Parmi ces éléments, laquelle est une bonne pratique d'éco conception ?

Réponse : Mise en place d’une police système

https://www.linkedin.com/feed/update/urn:li:activity:7163109551653789697


## À quoi sert un élément HTML avec l'attribut "lang" ?

Réponse : À signifier un changement de langue au lecteur d'écran

https://www.linkedin.com/feed/update/urn:li:activity:7165653862257803265


## Où se situent les deux tiers de l'impact environnemental numérique ?

Réponse : Dans les équipements utilisateurs

https://www.linkedin.com/feed/update/urn:li:activity:7168183020137492480


## Comment faire pour que les notifications soient bien restituées au lecteur d'écran ?

Réponse : Ajouter le role "alert"

https://www.linkedin.com/feed/update/urn:li:activity:7170726690736828416



## Quelle est la phase la plus importante du projet pour l'éco-conception ?

Réponse : La conception

https://www.linkedin.com/feed/update/urn:li:activity:7168183020137492480



## En 2020, quel est le pourcentage des sites publics qui ont respecté l'obligation de publier leur attestation de conformité au Référentiel Général d'Amélioration de l'Accessibilité (RGAA) ?

Réponse : 4%


## J'ai mis une image de plante verte pour décorer mon article sur l'éco-conception. Que dois-je mettre dans l'alternative textuelle de l'image ?

Réponse : Rien du tout (alt="")

https://www.linkedin.com/feed/update/urn:li:activity:7183388288316014592


Pour appronfondir vos connaissance en numérique responsable, n'hésitez pas à consulter les documents de référence que sont le [RGAA](https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/) et le [RGESN](https://ecoresponsable.numerique.gouv.fr/publications/referentiel-general-ecoconception/).

Alors, sur quelle(s) question(s) avez-vous répondu faux ? Dites-le nous sur les réseaux ! 


Quiz Numérique Responsable : les réponses aux questions !

## Problème


Easyadmin est une solution de zone d’administration pour une application web, basé sur des CRUD (Create, Read, Update, Delete) pour les différents objets métiers (les utilisateurs, les articles d’un blog, les clients, etc.).

Ces objets métier peuvent être caractérisés par un contenu texte sous la forme de code html mis en forme, pour mettre du contenu en italique, en gras, ou pour définir un hyperlien.

Il existe des éditeurs en javascript pour réaliser cette mise en forme d’une façon pratique pour un utilisateur. Easyadmin [intègre](https://symfony.com/bundles/EasyAdminBundle/current/fields/TextEditorField.html) d’ailleurs une bibliothèque javascript pour cette fin : [Trix](https://github.com/basecamp/trix). S’il a l’avantage d’être léger et simple, cet éditeur peut manquer de fonctionnalités avancées comme l’upload de média.

C’est pourquoi nous allons mettre en place [CKEditor](https://ckeditor.com/) pour remplir cette fonction. 

À l’heure où nous écrivons cet article, la version d'EasyAdmin est la 4.11 et celle de CKEditor est la 42.0. Mais il est fort probable que la méthode fonctionne avec les versions ultérieures.

Pour les versions plus anciennes de CKEditor, il existe un [bundle symfony](https://symfony.com/bundles/FOSCKEditorBundle/current/index.html) pour avoir un élément de formulaire de type WYSIWYG. Mais il ne prend pas un charge CKEditor 5, qui par ailleurs est plus simple à utiliser. Nous allons donc l’installer et le configurer manuellement, ce qui nous donnera toute l’amplitude de personnalisation proposée par CKEditor.

## Prérequis

Nous considérerons que Symfony est installé avec EasyAdmin et fonctionnel, et que qu’un Crud pour un objet __Post__ est disponible, incluant un champ __Content__ stockant du HTML.

## Fonctionnement de base

Pour la gestion de dépendances javascript, nous utiliserons la solution qui est poussée par Symfony et qui a l’avantage d’être indépendant de Nodejs : [AssetMapper](https://symfony.com/doc/current/frontend/asset_mapper.html). Elle est installée par défaut avec tout projet Symfony récent.

Nous installons donc CKEditor via la commande
```bash
bin/console importmap:require ckeditor5
```

Asset mapper fonctionne selon le principe qu’un fichier doit servir de point d’entrée pour utiliser différents composants. Nous ajoutons maintenant la définition de cet entrypoint dans la configuration des assets, le fichier ```importmap.php``` à la racine du projet :

```php
    …
    'admin' => [
        'path' => './assets/admin.js',
        'entrypoint' => true,
    ],
    …
```

Créons maintenant ce fichier à l’emplacement ```assets/admin.js``` où nous faisons appel à notre librairie pour l’appliquer aux éléments de formulaires

```javascript
import 'ckeditor5/dist/ckeditor5.css';

document.querySelectorAll('[data-ckeditor=full]').forEach((editor) => {
    ClassicEditor.create(editor, {}});
});
```

Il nous reste maintenant à configurer le champ dans le contrôleur easyadmin

```php
namespace App\Controller\Admin;

use App\Entity\Article;
use EasyCorp\Bundle\EasyAdminBundle\Controller\AbstractCrudController;
use EasyCorp\Bundle\EasyAdminBundle\Field\TextareaField;

class ArticleCrudController extends AbstractCrudController
{
    public static function getEntityFqcn(): string
    {
        return Article::class;
    }

    public function configureFields(string $pageName): iterable
    {
        return [
            …
            TextareaField::new('content')->setLabel('admin.article.content')->setFormTypeOption('attr', ['data-ckeditor' => 'full']),
        ];
    }
}
```

Et voilà un champ gérer par CKEditor pour un beau WYSIWYG :) Par contre, on se retrouve avec l’éditeur de base, que nous voulons justement personnaliser …

## Personaliser 

La personnalisation de CKEditor se fait en passant un objet en paramètre. Nous vous proposons cette configuration très complète.

```javascript
import {
    ClassicEditor, AccessibilityHelp, Alignment, Autoformat, AutoImage, AutoLink, Autosave, BalloonToolbar, BlockQuote, Bold, Code, CodeBlock, Essentials, FindAndReplace, FontBackgroundColor, FontColor, FontFamily, FontSize, GeneralHtmlSupport, Heading, Highlight, HorizontalLine, HtmlComment, HtmlEmbed, ImageBlock, ImageCaption, ImageInline, ImageInsert, ImageInsertViaUrl, ImageResize, ImageStyle, ImageTextAlternative, ImageToolbar, ImageUpload, Indent, IndentBlock, Italic, Link, LinkImage, List, ListProperties, Mention, Paragraph, RemoveFormat, SelectAll, ShowBlocks, SimpleUploadAdapter, SourceEditing, SpecialCharacters, SpecialCharactersArrows, SpecialCharactersCurrency, SpecialCharactersEssentials, SpecialCharactersLatin, SpecialCharactersMathematical, SpecialCharactersText, Strikethrough, Style, Subscript, Superscript, Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar, TextTransformation, Underline, Undo
} from 'ckeditor5';

const editorConfig = {
    toolbar: {
        items: ['undo', 'redo', '|', 'sourceEditing', 'showBlocks', 'findAndReplace', 'selectAll', '|', 'heading', 'style', '|', 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|', 'bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript', 'code', 'removeFormat', '|', 'specialCharacters', 'horizontalLine', 'link', 'insertImage', 'insertTable', 'highlight', 'blockQuote', 'codeBlock', 'htmlEmbed', '|', 'alignment', '|', 'bulletedList', 'numberedList', 'indent', 'outdent', '|', 'accessibilityHelp'
        ],
        shouldNotGroupWhenFull: true
    },
    plugins: [
        AccessibilityHelp, Alignment, Autoformat, AutoImage, AutoLink, Autosave, BalloonToolbar, BlockQuote, Bold, Code, CodeBlock, Essentials, FindAndReplace, FontBackgroundColor, FontColor, FontFamily, FontSize, GeneralHtmlSupport, Heading, Highlight, HorizontalLine, HtmlComment, HtmlEmbed, ImageBlock, ImageCaption, ImageInline, ImageInsert, ImageInsertViaUrl, ImageResize, ImageStyle, ImageTextAlternative, ImageToolbar, ImageUpload, Indent, IndentBlock, Italic, Link, LinkImage, List, ListProperties, Mention, Paragraph, RemoveFormat, SelectAll, ShowBlocks, SimpleUploadAdapter, SourceEditing, SpecialCharacters, SpecialCharactersArrows, SpecialCharactersCurrency, SpecialCharactersEssentials, SpecialCharactersLatin, SpecialCharactersMathematical, SpecialCharactersText, Strikethrough, Style, Subscript, Superscript, Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar, TextTransformation, Underline, Undo
    ],
    balloonToolbar: ['bold', 'italic', '|', 'link', 'insertImage', '|', 'bulletedList', 'numberedList'],
    fontFamily: {
        supportAllValues: true
    },
    fontSize: {
        options: [10, 12, 14, 'default', 18, 20, 22],
        supportAllValues: true
    },
    heading: {
        options: [
            {
                model: 'paragraph',
                title: 'Paragraph',
                class: 'ck-heading_paragraph'
            },
            {
                model: 'heading1',
                view: 'h1',
                title: 'Heading 1',
                class: 'ck-heading_heading1'
            },
            {
                model: 'heading2',
                view: 'h2',
                title: 'Heading 2',
                class: 'ck-heading_heading2'
            },
            {
                model: 'heading3',
                view: 'h3',
                title: 'Heading 3',
                class: 'ck-heading_heading3'
            },
            {
                model: 'heading4',
                view: 'h4',
                title: 'Heading 4',
                class: 'ck-heading_heading4'
            },
            {
                model: 'heading5',
                view: 'h5',
                title: 'Heading 5',
                class: 'ck-heading_heading5'
            },
            {
                model: 'heading6',
                view: 'h6',
                title: 'Heading 6',
                class: 'ck-heading_heading6'
            }
        ]
    },
    htmlSupport: {
        allow: [
            {
                name: /^.*$/,
                styles: true,
                attributes: true,
                classes: true
            }
        ]
    },
    image: {
        toolbar: ['toggleImageCaption', 'imageTextAlternative', '|', 'imageStyle:inline', 'imageStyle:wrapText', 'imageStyle:breakText', '|', 'resizeImage'
        ]
    },
    link: {
        addTargetToExternalLinks: true,
        defaultProtocol: 'https://',
        decorators: {
            toggleDownloadable: {
                mode: 'manual',
                label: 'Downloadable',
                attributes: {
                    download: 'file'
                }
            }
        }
    },
    list: {
        properties: {
            styles: true,
            startIndex: true,
            reversed: true
        }
    },
    mention: {
        feeds: [
            {
                marker: '@',
                feed: [
                    /* See: https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html */
                ]
            }
        ]
    },
    placeholder: 'Type or paste your content here!',
    style: {
        definitions: [
            {
                name: 'Article category',
                element: 'h3',
                classes: ['category']
            },
            {
                name: 'Title',
                element: 'h2',
                classes: ['document-title']
            },
            {
                name: 'Subtitle',
                element: 'h3',
                classes: ['document-subtitle']
            },
            {
                name: 'Info box',
                element: 'p',
                classes: ['info-box']
            },
            {
                name: 'Side quote',
                element: 'blockquote',
                classes: ['side-quote']
            },
            {
                name: 'Marker',
                element: 'span',
                classes: ['marker']
            },
            {
                name: 'Spoiler',
                element: 'span',
                classes: ['spoiler']
            },
            {
                name: 'Code (dark)',
                element: 'pre',
                classes: ['fancy-code', 'fancy-code-dark']
            },
            {
                name: 'Code (bright)',
                element: 'pre',
                classes: ['fancy-code', 'fancy-code-bright']
            }
        ]
    },
    table: {
        contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties']
    },
};


document.querySelectorAll('[data-ckeditor=full]').forEach((editor) => {
    ClassicEditor.create(editor, editorConfig);
});

```

Voilà un éditeur vraiment complet.

À présent, on peut aussi définir deux configurations différentes. Par exemple, on pourrait ajouter une version mini avec uniquement la mise en forme des textes. Nous pouvons la définir et l’appliquer à d’autres contextes.

```javascript
import {
    ClassicEditor,
} from 'ckeditor5';

const editorConfig = {
    toolbar: {
        items: [
            'bold',
            'italic',
            'underline',
            'strikethrough',
            'removeFormat',
        ],
    },
};

document.querySelectorAll('[data-ckeditor=mini]').forEach((editor) => {
    ClassicEditor.create(editor, editorConfig);
});
```

Pour utiliser cette configuration alternative, il suffit de la préciser dans le contrôleur :

```
    …
    TextareaField::new('content')->setLabel('admin.article.content')->setFormTypeOption('attr', ['data-ckeditor' => 'mini']),
    …
```


## En bonus : upload de media

L’upload de media depuis l’interface de WYSIWYG est une fonctionnalité vraiment pratique pour y intégrer des médias directement. CKEditor gère justement cette fonctionnalité. On va commencer par indiquer à CKEditor l’URL pour uploader les médias :

```javascript
import {
    …
    ImageUpload,
    SimpleUploadAdapter,
} from 'ckeditor5';

const editorConfig = {
    …
    plugins: [
        …
        ImageUpload,
        SimpleUploadAdapter,
    ],
    simpleUpload: {
        uploadUrl: '/admin/upload',
    }
};
```

Et voici le contrôleur Symfony associé qui renvoie la réponse attendue par ce «SimpleUploadAdapter» pour faire son travail correctement.

```php
namespace App\Controller\Admin;

use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;

class UploadController
{
    #[Route('/admin/upload', name: 'app_admin_upload', methods: ['POST'])]
    public function index(
        Request $request,
    ): Response {
        $path = 'uploads/wysiwyg';
        $uploadedFile = $request->files->get('upload');
        $originalFilename = pathinfo((string) $uploadedFile->getClientOriginalName(), PATHINFO_FILENAME);
        $filename = $originalFilename.'-'.uniqid().'.'.$uploadedFile->guessExtension();
        $request->files->get('upload')->move($path, $filename);
        $host = $request->getScheme().'://'.$request->getHttpHost();

        return new JsonResponse(['url' => $host.'/'.$path.'/'.$filename]);
    }
}
```


## Le mot de la fin


Finalement, nous avons vu que brancher la version 5 de CKEditor sur l’EasyAdmin basé sur Symfony est simple et hautement personnalisable. Parfois, ça vaut le coup de faire ce type de liaison soi-même et ne pas chercher un bundle ou une extension pour réaliser des liaisons finalement simples.

Installer CKeditor5 dans Easyadmin : une solution pas à pas

De nos modestes débuts sous le nom d'App Ventus à notre transformation en véritable coopérative sous l'enseigne de Troopers, notre voyage a été marqué par une quête d'identité et d'une gouvernance qui fait sens pour tous ceux qui composent notre équipe. 

Nous avons traversé de nombreuses étapes pour créer et développer l’agence afin qu’elle devienne la **coopérative** que vous connaissez aujourd’hui. Nous avons évolué, affiné notre identité et notre culture d'entreprise pour que Troopers corresponde le plus possible à la vision et aux valeurs de ses coopérateur·trices. 

En adoptant l'Holacratie puis en transformant notre agence en SCOP, nous avons franchi un cap significatif vers une **gouvernance partagée**, prônant des valeurs trop souvent oubliées dans le monde professionnel : l'autogestion, la flexibilité et le bien-être au travail. 

Et si on vous montrait comment on met tout ça en place ? 
Vous verrez que ce mode d'organisation apporte non seulement des bénéfices pour nous, en tant qu’associé·es coopérateur·trices, mais aussi pour nos clients !


## Holacratie : flexibilité et prise de décision collective
C’est en 2020 que nous adoptons l'Holacratie comme méthode de gouvernance et, après plusieurs années d'évolution, définissons notre ultime raison d’être : **Concevoir des solutions numériques utiles et respectueuses des enjeux sociaux et environnementaux actuels grâce à un collectif autonome libéré.** 

Ce tournant reflète notre engagement envers la gouvernance partagée, l'autonomie, la responsabilité et l'implication de tous les membres de l'équipe dans la pérennité de l’entreprise.  Une culture d'entreprise centrée sur la force du collectif, l'expertise technique, le partage de connaissances, l'innovation managériale, l'intégrité et la possibilité d'être soi-même, même en entreprise.

### Mais concrètement, l’holacratie, quèsaco ?
L'holacratie est une **méthode permettant de repenser la prise de décision et la gouvernance**. Elle permet aux organisations de s'auto-organiser de manière agile, sans hiérarchie traditionnelle. Chez Troopers, chaque collaborateur joue un rôle clé dans l'organisation, contribuant activement à la dynamique de la coopérative.

Inspirée de la sociocratie, l'holacratie repose sur quatre grands principes (source : [La Toupie](https://www.toupie.org/)) : 

- des cercles interdépendants et auto-organisés
- des doubles liens entre ces cercles
- des décisions par consentement 
- des élections sans candidats

Cet engagement envers une gouvernance partagée se traduit par des **projets plus fluides** et une **meilleure communication**. Notre organisation holacratique favorise l'innovation, l'adaptabilité et une prise de décision rapide, garantissant des **solutions sur mesure** pour nos clients et une approche proactive des défis.

### Le management par rôles
“Ahhh l’holacratie, encore une idée utopiste, ça doit pas marcher leur truc.”

L'holacratie, c’est avant tout un cadre qui permet aux collaborateurs d’être **concentrés sur l’opérationnel**. Le **management de rôles plutôt que de personnes** permet de retirer toute subjectivité, particulièrement dans les difficultés. Si problème il y a, ce n’est pas une histoire de personne, c’est qu’il y a un manque quelque part dans la définition et/ou l’attribution des responsabilités. C’est bien parce que les salarié·e·s ne sont pas seulement des ressources humaines au profit de l’activité, que nous prenons en compte les individualités pour penser nos actions au service de notre culture d’entreprise. Et ça, c’est beau !

Nous adoptons une approche d'**entreprise libérée** en mettant en œuvre l'**autogestion**. Contrairement aux structures traditionnelles avec des fiches de poste bien définies, chaque Troopers peut choisir des rôles en fonction de ses compétences et de ses intérêts, en plus des missions pour lesquelles il ou elle a été embauché·e. Par exemple, un développeur Java Script pourrait également endosser les rôles de Gestion du blog, Community management ou QVT. 

Ce système permet à chacun et chacune de **monter en compétences** dans différents domaines tout en offrant une diversité de points de vue et d'expertises à la coopérative : une mesure simple qui nous permet d'**innover** constamment et de prendre des décisions efficaces ! 

#### Pour faire simple

**Au lieu de fonctionner comme ça :** 

### Gestion des rôles, des tensions et décisions par consentement
Chez Troopers, un rôle n'est pas attaché à une personne spécifique, ce qui facilite la **mobilité interne** et donc notre adaptabilité aux besoins évolutifs de nos clients. Chaque rôle est défini par une **raison d'être** et des **redevabilités**. Il peut être tenu par une ou plusieurs personnes. 

Par exemple, le rôle “gestion de projet” ci-dessous, est tenu par trois Troopers : Alexis, Julien et Paul. Ce rôle a une raison d’être bien définie (but) et comporte ses propres redevabilités (responsabilités).

Chaque Troopers est donc affecté à un ou plusieurs rôles, en fonction de ce pour quoi il ou elle a été embauché·e bien sûr, mais aussi en fonction des domaines qui l'intéressent et dans lesquels il ou elle pense pouvoir apporter une valeur ajoutée. 

Quelques exemples de Troopers qui **varient leurs missions et compétences** grâce à la méthode holacratique : 

Leticia, notre  UX/UI **designer**, met son expertise au service de nos projets clients au quotidien. Elle prête également son œil artistique pour travailler l'image de l'agence, notamment à travers la création de visuels pour nos posts. Grâce à sa formation en **éco-conception**, Leticia a aussi rédigé des articles et nous accompagne dans la rédaction de contenus sur ce sujet. 

En dehors de ses heures de travail, Gwenn anime une chaîne et un compte Twitter dédiés à la langue bretonne. Grâce à notre organisation holacratique, nous bénéficions de ses **compétences en communication** pour enrichir notre page LinkedIn et Twitter. Des atouts supplémentaires pour Troopers et des missions plus variées pour notre collaborateur !

Anciennement **chargée de communication**, Cécile s'est intéressée au secteur des ressources humaines, notamment à la gouvernance partagée. Ses missions ont évolué, allant de prises de parole lors d'événements à la mise en place de la gouvernance partagée chez Troopers avec Julien, pour finalement être en charge du **développement RH**. Ce changement a été rendu possible grâce à l'holacratie et à sa flexibilité.

La méthode holacratique nous permet non seulement d’être **plus flexible** dans nos missions, mais aussi de traiter des **tensions**, un concept clef en holacratie. 

Loin d'être synonymes de problèmes ou de conflits, les tensions représentent simplement un écart entre ce qui était prévu et ce qui se réalise. Les tensions opérationnelles sont résolues lors d'une réunion de triage, celles concernant les rôles ou les cercles sont discutées en réunion de gouvernance, tandis que la gestion administrative et des ressources humaines relève du cercle support.

Les tensions conduisent souvent à la création de nouveaux projets ou à l'optimisation de notre organisation, mais avant toute chose, elles sont débattues en réunion. 


Chez Troopers, la plupart des décisions sont prises par **consentement**, grâce à un processus de réunion structuré à plusieurs étapes : clarification, ressenti, objection et bonifications pour traiter les objections s’il y en a. Cette approche permet à chaque Troopers de donner son avis. On crée du lien, on répond aux interrogations et surtout, on s’écoute !

Nos prises de décision aboutissent toujours. Au lieu d'allers-retours hiérarchiques, nos réunions sont structurées, productives et limitées à 1 heure. En privilégiant la **réflexion collective et la co-construction**, nous parvenons à des solutions optimales qui répondent aux besoins de nos clients et à nos objectifs organisationnels.

Si vous souhaitez appliquer l'holacratie de votre côté, attention à ne pas prendre des bouts de méthode par-ci par-là. Vous devez d’abord l'appliquer dans son entièreté, pour ensuite l'adapter à ce qui vous correspond le mieux ! 


C’est bien beau d’appliquer l’holacratie, de partager les responsabilités et de prendre des décisions avec l’accord de tous les coopérateur·trices, mais chez Troopers, on va encore plus loin. C’est en 2021 que nous transformons notre agence en SCOP, franchissant un pas de plus vers une gouvernance partagée. **À compter de cette date, l’entreprise appartient à tous·tes celles et ceux qui y travaillent !**

## SCOP : communication transparente et valeurs partagées
### Structure du capital et partage des bénéfices
Juridiquement, une SCOP (**Société coopérative et participative**) est une société coopérative pouvant prendre la forme d'une SA, SARL ou SAS, dans laquelle les salariés sont les principaux associés et exercent le pouvoir démocratiquement. (source : [les-scop](https://www.les-scop.coop/)).
Dans une SCOP, le capital varie en fonction des entrées et sorties des **associé·es coopérateur·rices**. 

Chez Troopers, la candidature en tant qu'associé·e est obligatoire, conduisant chaque coopérateur.trice à candidater pour devenir sociétaire après un an. Ce délai peut aussi être écourté à la demande du salarié si ce dernier souhaite intégrer le sociétariat plus rapidement, on parle alors de candidature volontaire. Afin d’assurer une participation équitable, chaque associé·e coopérateur·trice doit acquérir 10 parts, sous un an, à partir de son entrée en tant qu'associé·e, conformément à nos statuts et dispose d'une voix, pour une représentation équitable. 

Le modèle SCOP nous oblige à **partager les bénéfices** générés par l'activité avec toutes les personnes impliquées dans l’activité de l’entreprise. Plutôt que de réserver ce partage aux associé·es uniquement sous forme de dividende, nous répartissons la part travail à tous les salarié·es coopérateur·rices. Cette répartition est réalisée au prorata du temps de travail et de l'ancienneté de chaque individu. Mais ce n’est pas tout ! En plus de nous permettre de reverser la part travail à tous, le modèle SCOP nous donne l’occasion de verser une part supplémentaire aux associés uniquement, en ajoutant le dividende à leur part travail. Chez Troopers, nous avons choisi de renoncer à ce choix, **on considère qu’une entreprise est représentée par ses salariés et fonctionne grâce à eux, rien de plus logique donc, de redistribuer le bénéfice !** 

Notre fonctionnement permet à chaque coopérateur·trice d’être activement investi·e dans la mise en place de nos projets et ceux de nos clients. Cet engagement se traduit par une plus grande implication, une meilleure qualité de travail et donc des résultats plus satisfaisants.

### La Présidence chez Troopers, une (vraie) démocratie
C’est bien joli tout ça, mais les lois sont les lois, il nous faut un président !

La **présidence** chez Troopers est donc encadrée par un mandat de 3 ans, préalablement défini par nos statuts en **assemblée générale**. La présidence tournante est l'occasion d'élire un·e nouveau·velle Président·e parmis les associé·es, à travers des élections sans candidat, dont nous vous parlerons plus en détails dans un prochain article. On ne parle pas de gérance ni de pilotage, le président se porte garant de l’entreprise aux yeux de l’État. Les décisions les plus importantes, celles qui doivent être validées par les associé·es, sont prises en Assemblée Générale, mais la plupart sont prises plus simplement lors de réunions entre coopérateur·trices. 

Depuis notre transition vers ce modèle, nous avons constaté que chacun·e se sentait plus légitime pour participer aux décisions et proposer des initiatives. La résonance entre les valeurs collectives et individuelles est essentielle pour nous. En tant que SCOP SAS, nous garantissons une collaboration étroite, une relation de confiance et une réponse précise aux besoins de nos clients. **Nous privilégions une communication ouverte, honnête et transparente à tous les niveaux**, pour garantir à nos clients une collaboration fructueuse.

Notre transformation en SCOP a donc été marquée par des collaborateur·trices plus épanoui·es et des projets clients réussis, mais pas seulement ! Nous avons constaté une augmentation significative de notre résultat. Après notre première année, nous avons enregistré notre meilleur résultat depuis la création de l'entreprise, avec un taux d'évolution de 124,56 %. **Un succès qui souligne l'efficacité et la pertinence de notre modèle coopératif !**

Pour finir, on vous laisse avec une citation de notre Jeff Bezos à nous, **Paul Andrieux**, le co-fondateur originel, mais aussi le président sortant de notre SCOP : 

"En tant que fondateur, malgré une organisation déjà très horizontale, j’ai senti dès notre passage en coopérative un changement palpable dans l’équipe. La nouvelle répartition, aussi radicale, des responsabilités et des pouvoirs au sein de l’organisation a profondément changé le point de vue des salariés, maintenant coopérateurs, sur l’organisation. **Ils sont chez eux, et ça change tout.**"

Nos engagements pour une gouvernance partagée

Dans [l’article précédent](https://www.troopers.coop/blog/github-gitlab-et-l-integration-continue) nous avions présenté GitHub et GitLab, nous allons maintenant montrer comment on actionne les CI en pratique.

## GitHub et ses Actions
Pendant plusieurs années, GitHub n’intégrait pas de solution de CI et il fallait s’appuyer sur des services externes comme Travis CI ou CircleCI afin d’exécuter les tests automatiquement, ce qui était fastidieux à configurer car il fallait connecter deux services différents.

Ceci a changé à partir de 2018 quand GitHub a intégré un service de CI gratuit nommé Actions. Sa grande force est la possibilité d’utiliser des recettes existantes, par exemple pour installer PHP et des modules en quelques lignes de configuration.

Pour les projets non publics (autrement dit les projets privés), GitHub offre 2 000 minutes d’utilisation des Actions par mois.

## GitLab et sa CI

Dès le début de notre bascule sur GitLab, nous nous sommes appuyés sur son service CI afin de lancer automatiquement les tâches de tests (fonctionnels, unitaires ou E2E) et de vérification de la qualité du code (formatage et logique).

Les tests automatisés sont lancés par 4 serveurs physiques qui jouent le rôle de runner, chaque serveur attend en permanence que des tests soient en file d’attente. Dès qu’un test apparaît dans cette file d’attente, le serveur lance le test. Par exemple, chez Troopers les tests sont créés quand une demande de fusion (Merge Request) est ouverte dans GitLab.

Comme GitHub Actions, GitLab est en train de mettre en place un système de recettes réutilisables (les components) cependant cette fonctionnalité est encore en beta et nous n’avons pas encore tenté l’expérience. La documentation n’est pas très claire sur le résultat : est-ce que ça crée un ou plusieurs jobs sur la CI ?

[GitLab.com](https://about.gitlab.com/) (la plate-forme officielle) offre 500 minutes d‘utilisation par mois pour les projets privés.

## GitHub Actions et GitLab CI en pratique

Afin de montrer la configuration en pratique, nous avons créé un projet qui contient un fichier PHP simple avec une spécificité : l’extension intl est nécessaire pour que PHP puisse l’exécuter.

La CI aura 2 rôles :
- vérifier que le script peut être exécuté sans erreur
- vérifier que la syntaxe du script est correcte, grâce à l’outil PHP-CS-Fixer

Les deux services sont configurés via des fichiers YAML dont la syntaxe est assez similaire.




### Avec GitHub Actions

Fichier `.github/workflows/tests.yaml` : 

```yaml
name: Tests

on: [pull_request]

jobs:
  tests:
    name: Test
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup PHP, with extensions
        uses: shivammathur/setup-php@v2
        with:
          php-version: 8.2
          extensions: intl

      - name: Run tests
        run: php -f ./src/script.php
```

[source du script](https://github.com/Troopers/ci-playground/blob/ff973b2421a8abbb06566259b9179d19b7751ea9/.github/workflows/tests.yml)

Résultat dans une [_Pull Request_](https://github.com/Troopers/ci-playground/pull/1) :

Comme vous pouvez le constater, l’utilisation des actions existantes de GitHub permet de faire des opérations complexes avec quelques lignes de code pour décrire les paramètres qui seront passés aux Actions déjà existantes.

Le mot-clé `uses:` sert à appeler des Actions préexistantes. L’ajout de l’extension `intl` est simplifié au maximum grâce à l’action [shivammathur/setup-php](https://github.com/shivammathur/setup-php) qui gère les extensions PHP à notre place.


### Avec GitLab CI

Fichier `.gitlab-ci.yml` :

```yaml
stages:
  - install
  - tests
  - quality

variables:
  JAKZAL_IMAGE: jakzal/phpqa:1.96.3-php8.2-alpine

build-php:
  stage: install
  image: troopers/docker-images:docker-pip-docker-compose
  services:
    - docker:dind
  before_script:
    - echo -e "\e[0Ksection_start:`date +%s`:docker-login[collapsed=true]\r\e[0Kdocker login"
    - docker login -u gitlab-ci-token -p $CI_JOB_TOKEN $CI_REGISTRY
    - echo -e "\e[0Ksection_end:`date +%s`:docker-login\r\e[0K"
  script:
    - ./.gitlab/build-job-php
  only:
    - merge_requests

tests:
  stage: tests
  image: ${CI_REGISTRY}/${CI_PROJECT_PATH}/php:latest
  needs: [ 'build-php' ]
  only:
    - merge_requests
  script:
    - echo -e "\e[0Ksection_start:`date +%s`:tests\r\e[0Ktests"
    - php -f ./src/script.php
    - echo -e "\e[0Ksection_end:`date +%s`:0Ktests\r\e[0K"

php-cs-fixer:
  image: ${JAKZAL_IMAGE}
  stage: quality
  needs: [ ]
  only:
    - merge_requests
  script:
    - echo -e "\e[0Ksection_start:`date +%s`:php-cs-fixer\r\e[0KPHP-CS-Fixer"
    - php-cs-fixer --dry-run --diff --no-interaction --ansi fix --show-progress none
    - echo -e "\e[0Ksection_end:`date +%s`:0Kphp-cs-fixer\r\e[0K"
```

[source du script](https://gitlab.com/troopers-nantes/ci-playground/-/blob/847b1468a8d89c2adf5ff9d06b35992e162d9c42/.gitlab-ci.yml)

Résultat dans une [_Merge Request_](https://gitlab.com/troopers-nantes/ci-playground/-/merge_requests/1) :

Quant à GitLab, aucune recette externe n’est utilisée, chaque étape doit être définie dans le fichier de configuration. En contrepartie, on voit exactement les étapes qui vont être réalisées par GitLab, alors qu’avec GitHub Actions, il faut aller voir dans le code source de `shivammathur/setup-php@v2` si on veut comprendre ce qu’il se passe sous le capot lors de cette étape.

Afin de disposer d’un environnement PHP avec l’extension `intl`, on doit passer par plusieurs étapes :

1. construire une image Docker (notez qu’on fait un appel direct au programme `docker build`)
2. pousser l’image sur le _registry_ de GitLab
3. dans un second temps, récupérer l’image et lancer le test

Cela peut sembler contraignant, mais au final ça n’ajoute que 40 secondes dans le temps total de la CI (une fois que l’image a été construite, la CI ne la re-construit pas afin d’économiser du temps), ça fait peu de différence car nos CI tournent en moyenne pendant 10 minutes.

Alors qu’avec GitHub Actions, l’installation de l’extension intl n’a nécessité que 2 lignes de configuration. Nous espérons que les components de GitLab seront aussi performants que les actions de GitHub.

(note : il est aussi possible de lancer un conteneur Docker basé sur PHP puis d’installer l’extension `intl` à la volée, mais cette étape prendrait entre 2 et 3 minutes à chaque fois que la CI tourne, cela serait inefficace à long terme.)

Pour des explications complètes, nous vous invitons à voir les exemples d’un article précédent : https://www.troopers.coop/blog/votre-workflow-sous-steroides-avec-gitlab-ci

## Conclusion

GitHub Actions et GitLab CI sont des outils extrêmement puissants, on peut configurer toutes les opérations que l’on souhaite :
- lancer des batteries de tests
- vérifier notre propre code par des analyses statiques
- déployer des conteneurs Docker sur des serveurs Web
- compiler un projet React en site statique puis envoyer les fichiers sur un serveur Web
- générer un storybook et l’héberger via GitLab Pages, ce qui est plus rapide que de configurer un serveur Web
- déployer une application mobile via Expo EAS
- etc.

GitHub, avec son service Actions, offre une intégration fluide et de puissantes recettes prédéfinies qui réduisent significativement le temps et l'effort nécessaires à la configuration des environnements et à l'exécution des tests. GitLab, d’un autre côté, offre une transparence et un contrôle accrus sur les processus grâce à ses configurations détaillées, permettant aux équipes de comprendre et de gérer chaque étape du pipeline de CI/CD.


L'intégration continue en pratique

Chez Troopers, on gère le code source de nos projets grâce à git, c’est un logiciel de suivi de version. Cela permet à chaque personne travaillant sur un projet de récupérer le code source, d’y apporter des modifications puis de partager le résultat avec les autres personnes.

Il est possible d’utiliser git sans interface web, mais l’utilisation d’une plateforme en ligne présente de nombreux avantages : on peut facilement visualiser quels sont les changements apportés sur le code source, ajouter des commentaires ou suggérer des modifications et valider la liste des changements.

Il existe beaucoup d’acteurs fournissant ce service, et nous allons ici nous attarder sur deux d’entre eux que nous affectionnons particulièrement : GitHub et GitLab.

Nous allons voir comment nous tirons profit de ces services afin d’automatiser les tests et les contrôles qualité.


## CI et CD, qu’est-ce que c’est ?
L’Intégration Continue (Continuous Integration ou CI) est un ensemble de processus qui visent à automatiser l’exécution des tests et contrôles qualité d’un projet informatique.

Le déploiement continu (Continuous Delivery ou CD) est une pratique qui consiste à déployer les derniers développements d’un projet facilement en quelques clics ou de façon automatique.

Plutôt que de confier la responsabilité de ces actions à l’équipe de développement, on automatise ces méthodes, ce qui prévient tout oubli. Autre avantage : déployer fréquemment permet de rendre cette opération routinière : l’équipe prend l'habitude de déployer plus souvent, de plus petits incréments de code. Les bugs sont détectés plus tôt et corrigés plus vite.


Voici concrètement comment cela se passe : 
1. Le développeur ou la développeuse pousse son code vers GitHub ou GitLab et crée une demande de fusion
2. La CI est lancée automatiquement
3. Le résultat est affiché sur la page de la demande de fusions, il y a 2 cas possibles : 
- Un test a échoué, il peut s’agir d’une régression sur une fonctionnalité existante ou d’un comportement qui nécessite que le test soit mis à jour (par exemple si le texte attendu a été modifié) ; la fusion du code est bloquée, le code doit être modifié jusqu’à ce que les tests soient valides
- Tous les tests ont été réalisés avec succès ; la fusion du code est possible
4. Après la fusion du code sur la branche de développement, le code est directement déployé sur un environnement de test, grâce à la CD


## GitHub, la plateforme de référence
[GitHub](https://github.com/) a été créé en 2008, c’est un service commercial dont les sources sont fermées.

Son utilisation est gratuite pour les projets open source, et une version payante amène [différents avantages](https://github.com/pricing). Ce service est rapidement devenu le plus populaire des services d’hébergement de projets, éclipsant par exemple SourceForge et BitBucket. Nous l’utilisons toujours pour nos projets open source.

Malgré les qualités de ce service, de nombreux projets open source choisissent de ne pas utiliser GitHub afin de conserver la souveraineté des données et de ne pas être dépendant d’un écosystème qui dépend entièrement de la société GitHub. Cela amène plusieurs risques : GitHub peut changer ses conditions d’utilisation du jour au lendemain, par exemple en supprimant l’utilisation gratuite pour les projets open source ou bien en décidant unilatéralement qu’un projet n’est plus le bienvenu chez GitHub.

Il est possible de déployer sa propre instance de GitHub grâce à l‘offre GitHub Enterprise Server pour 21 $ / mois / utilisateur (plus les frais d’hébergement).

## GitLab, l'alternative open source
[GitLab](https://about.gitlab.com/) a été lancé en 2011, c’est un projet open source qui peut être utilisé de plusieurs façons : 
- L’instance principale gitlab.com, qui a des fonctionnalités gratuites et payantes comme GitHub
- D’autres instances hébergées par des prestataires externes
- En hébergeant sa propre instance de GitLab (auto-hébergement)

Chez Troopers nous l’utilisons depuis 2017 en auto-hébergement. Notre instance de GitLab tourne grâce à Docker, et nous avons effectué les mises à jour au fur et à mesure des années.

Nous n’avons rencontré qu’un seul souci lors d’une migration vers un nouveau format de stockage des données git. Malgré ce problème, Gitlab est un modèle du genre : de nombreux logiciels ont des processus de mise à jour plus complexes.

## Conclusion
Bien que chaque plateforme ait ses particularités, le choix entre GitHub et GitLab dépendra finalement des besoins spécifiques de l'équipe et du projet, ainsi que de la préférence pour un modèle plus ouvert ou plus intégré. Quelle que soit la plateforme choisie, l'automatisation apportée par ces outils peut considérablement accélérer le développement, améliorer la qualité du code, et permettre des déploiements plus fréquents et fiables.

Dans un prochain article, nous montrerons des exemples de mise en pratique d'intégration continue sur ces deux plateformes.

## Alternatives à GitHub et GitLab
- [Gitea](https://about.gitea.com/) : un logiciel léger qui nécessite moins de ressources matérielles que GitLab (cela peut par exemple tourner sur un Raspberry Pi) mais n’intègre pas de système de CI
- Codeberg : un fork de Gitea, voir [cet article chez LinuxFr](https://linuxfr.org/news/codeberg-la-forge-en-devenir-pour-les-projets-libres)

Le blog de Troopers

Mesurer les performances de nos sites web avec LightHouse, côté client et serveur

Quiz Numérique Responsable : les réponses aux questions !

Installer CKeditor5 dans Easyadmin : une solution pas à pas

Nos engagements pour une gouvernance partagée

L'intégration continue en pratique

GitHub, GitLab et l’intégration continue