JHIPster & Vue.js

JHipster Meetup - 30/01/19

Sahbi Ktifa

Thoiry, Yvelines

Octobre 2018

Lead Vue.js dans la team JHipster

@SahbiKtifa

sahbi-ktifa

JHipster Vue.js

Créé par Evan You

Vue.js 1.0 disponible dès 2014

Vue.js 2.0 en septembre 2016 (2.5.22 à ce jour)

Vue.js 3.0 prévu pour Q2 2019

Plus de 126K 

Historique

JHipster Vue.js

Composants

Arbre de composants Vue

Single File Component

<template>
    <p>Hello {{target}}!</p>
</template>

<script>
    export default Hello {
        data: function() {
            return {
                target: 'World'
            }
        }
    }
</script>

<style scoped>
p {
    font-weight: bold;
}
</style>

JHipster Vue.js

Librairies officielles

VueX - gestionnaire d'état (« state management pattern ») 

VueRouter - Lazy Loading routes, centralized configuration, routes params, ...

JHipster Vue.js

Librairies tierces

Vuelidate - Simple, lightweight model-based validation

Bootstrap Vue 4 - Most popular CSS Framework

Vuei18n - Simple et puissant plugin d'internationalisation

JHipster Vue.js

Démonstration

SHOWTIME

JHipster Vue.js

Statistiques & métriques

Analyse SonarQube AAA, au minimum 70% de coverage

JHipster Vue.js

Statistiques & métriques

Audits Lighthouse

JHipster Vue.js

Comparatifs

1,57 MB

1,07 MB

616 KB

JHipster Vue.js

Comparatifs

Plein la vue avec JHIPster

@SahbiKtifa