Nouvelles librairies, nouveau frameworks, nouveau langages... le front de nos applications n'a cessé de se complexifier au cours des 10 dernières années. Ce Tool-in-Action va vous montrer comment GruntJs et ses nombreux plugins permettent de simplifier et d'automatiser le build de la partie front de vos applications Web Java.

1. Devoxx France 2016
GruntJs In Action
Sarah Buisson
1

2. Plan
2
●
Introduction
●
Grunt & Maven
●
Live Coding
– Plugin de base et hello World
– Bower: Gestions des dépendances
– Sass
– Jasmine & CasperJs : Tests automatisés du front
– Browserify :
●
Modularisation
●
Transpilation

3. Des nouvelles du
Front-End
3
Injection des dépendances
Effets de bords
Compatibilité
inter-navigateur
Css monolithique
Compatibilité inter-device
Versionning des dépendances
Régréssions

4. Des nouvelles du
Front-End
4
Injection des dépendances
Effets de bords
Compatibilité
inter-navigateur
Css monolithique
Compatibilité inter-device
Versionning des dépendances
Régréssions

5. Build & Front-End
5
Complexification du front-end.
→ Necéssité d'un outil de build
Avantages & Inconvénients de Grunt

6. Maven & Grunt
6

7. 7
Step 1 : <goal>create-resources</goal>
Initialise

8. 8
Step 2 : <goal>npm</goal>
Installe les
dépendances
du build

9. Step 3 : <goal>grunt</goal>
Task:MavenPrepare /src/ma
Task:[…] /target-grunt
Task:mavenDist /target-gru

10. Step 3 : <goal>grunt</goal>
Task:MavenPrepare /src/main/webapp/static /target-grunt
Task:[…] /target-grunt /target-grunt/dist
Task:mavenDist /target-grunt/dist /target/main/static

11. Live Coding
11
– Plugin de base et hello World
– Bower: Gestions des dépendances
– Sass
– Jasmine & CasperJs : Tests automatisés du front
– Browserify :
●
Modularisation
●
Transpilation

12. Merci de votre
attention
12
BackStopJS