Chaîne de build Front K-Sup

Ce document présente la chaine de build front de K-Sup.

Historique

Jusqu'à la version 7.0 de K-Sup, le build était géré par WRO et Compass.

Ceux-ci s'occupaient de plusieurs choses :

transpilation des fichiers scss vers des fichiers css avec Compass¹

interprétation des messages spring pour l'i18n présents dans les fichiers javascript

constuction de bundles, appelés group css et js

minification du code

possibilité d'étendre les fonctionnalités précedentes pour les extensions et projets

Cas d'usage général de la chaîne de build front

@startuml
    skinparam actorStyle awesome

    rectangle Utilisateur {
        :dév:
        :inté:
        :jenkins:
    }

    rectangle Résultat {
        :Front < 7.0:
        :Front > 7.0:
        :Back office:
    }

    usecase build as "Compiler du CSS
    ==
    Compiler du JS
    ==
    Traduire des messages JS
    "

    :dév: -down-> build
    :inté: -down-> build
    :jenkins: -down-> build

    build --down->> :Front < 7.0:
    build -down->> :Front > 7.0:
    build -down->> :Back office:

@enduml

Le produit et chacune des extensions qui exposent des ressources publient un jar classes qui contient les ressources nécessaires ainsi que le fichier de configurations permettant de regrouper ces ressources en bundle.

Pour construire un projet, un package npm nommé ksup-front-build prend en charge le build des JS et des CSS. Ce package a la responsabilité de récupérer les différentes configurations nécessaires au projet et à ses dépendances.

Une fois récupérées, fusionnées et consolidées, ces configurations servent à la construction des bundles qui sont nécessaires au fonctionnement du front de K-Sup.

Pour le JS : webpack est utilisé
Pour le CSS : postcss et sass (sass-dart) sont utilisés

Ces bundles sont référencés dans les jsp ; soit par les tags jstl <resources:link> et <resources:script>, soit directement avec les tags HTML <script> et <link>.

La résolution en URL vers les fichiers générées est faite par la classe ResourceUtils.

Vue générale

@startuml

skinparam arrow {
    FontSize 10
    FontName Impact
    Color #FF6655
    FontColor #444
}

skinparam actor {
    FontColor #333
}

skinparam package {
    FontSize 14
    BackgroundColor #ccc
    BorderColor #888
    FontName Arial
}

skinparam frame {
    BackgroundColor #fff
}

frame "Build Front sans WRO" {

    package "ksup" {
        rectangle "ksup-jsp"
        rectangle "ksup-js"
        rectangle "ksup-scss"
        rectangle "ksup-conf"
        "ksup-conf" -up-> "ksup-js"
        "ksup-conf" -up-> "ksup-scss"

        note right of "ksup-conf"
            Définit des bundles
        endnote
    }

    package "extension#n" {
        rectangle "ext-jsp"
        rectangle "ext-js"
        rectangle "ext-scss"
        rectangle "ext-conf"
        "ext-conf" -up-> "ext-js"
        "ext-conf" -up-> "ext-scss"

        note right of "ext-conf"
            Étends les bundles produit
            En définit de nouveaux
        endnote

    }

    package "projet" {
        rectangle "projet-jsp"
        rectangle "projet-js"
        rectangle "projet-scss"
        rectangle "projet-conf"

        "projet-conf" -up-> "projet-js"
        "projet-conf" -up-> "projet-scss"

        note right of "projet-conf"
            Étends les bundles produit
            En définit de nouveaux
        endnote

        (npm)

        note top of (npm)
            La construction du livrable
            par maven lance ce build
        endnote
    }

    package "build-front-ksup" {
        [script de build] -up-> "ksup-conf": 1
        [script de build] -up-> "ext-conf": 2
        [script de build] -up-> "projet-conf": 3
    }

    package "livrable" {
        rectangle "bundles css + manifest"
        rectangle "bundles js + manifest"
    }

    "bundles css + manifest" <-up- [script de build]
    "bundles js + manifest" <-up- [script de build]

    (npm) --> [script de build]: Build

}

@enduml

Documentation K-Sup

Chaîne de build Front K-Sup

Historique

Cas d'usage général de la chaîne de build front

Fonctionnement

Vue générale

Développement d'un projet

Développement des extensions K-Sup

i18n