Développeur Vue JS, Annecy, Geneve, Lausanne, Lyon

Un consultant à votre service pour vos projets d'application web ou de développement de modules sous Vue JS. Création d'application complète ou formation sur les bonnes pratiques de l'écosystème Vue JS.

Expert sur Vue JS

J'utilise régulièrement Vue JS pour l'intégrer dans les sites web pour les parties interactives (formulaire, modale, loader).

N'hésitez donc pas à me consulter pour vos besoins en développement d'application web ou pour du consulting sur les concepts et bonnes pratiques liées à l'écosystème Vue JS.

Vue JS, Quésako ?

Vue.js est un framework JavaScript open-source pour la construction d'interfaces utilisateur.

Il possède une approche progressive. C’est-à-dire que l’on peut l’utiliser pour développer des petites fonctionnalités, l'intégrer à un site existant ou pour développer des applications web complexes. Il a la particularité d’être de base assez léger et très performant.

Historique

Vue JS a été crée en 2014 par Evan You (un ancien développeur de chez Google) qui possédait une bonne expérience d’utilisation d’AngularJS (1re version d’Angular). Son idée était d'extraire les meilleures parties d'angularJS pour en faire quelque chose de très léger.

Fonctionnement de Vue JS

Contrairement à React JS, on dispose de bibliothèques officielles à utiliser dans une application Vue JS. Par exemple, Vuex pour gérer les data ou Vue Router pour les URL.
Ce sont des outils qui s’intègrent parfaitement à Vue JS.
La gestion des formulaires est aussi très bien gérée grâce aux attributs v-model et l'autobinding des valeurs. Ce qui simplifie le développement.

Il est possible de brancher Vue JS sur du code HTML existant dans une page web. Par exemple un formulaire, pour le rendre interactif.

Exemple de code Vue JS dans une page HTML :

Dans cet exemple, l'instance Vue se branche sur le formulaire existant pour prendre le contrôle. Vous pouvez tester le code sur cette page : https://codesandbox.io/s/lxzv2...

  <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Exemple Vue JS</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
<form id="app" v-on:submit.prevent="submit">
  <label>Email</label>
  <input type="email" v-model="email" />
  <label>Email</label>
  <select v-model="subject">
    <option disabled value="">Please select subject</option>
    <option>Informations</option>
    <option>Order</option>
    <option>Other</option>
  </select>
  <label>Message</label>
  <textarea v-model="message"></textarea>
  <input type="submit" value="Envoyer" />
  <div>
    Email: {{email}},<br /> Subject: {{subject}},<br /> Message: {{message}}
  </div>
</form>

<script type="text/javascript">
  new Vue({
    el: '#app',
    data: {
      subject: '',
      email: '',
      message: 'Hello Vue.js!'
    },
    methods: {
      submit: function() {
        alert(this.email + ' ' + this.subject + ' ' + this.message);
      }
    }
  });
</script>
</body>

</html>

Single File components

Un des points forts de Vue JS, se sont les Singles Files Components. Des fichiers qui comportent le code HTML (template), le code CSS et le code JavaScript afin de gérer complètement un composant.
Cela permet de se constituer des bibliothèques de composants réutilisables entre différents projets.

Exemple de code d'un Single File Component :

Nous reprenons le code de l'exemple précédent pour l'encapsuler dans un composant Vue JS. Vous pouvez tester le code sur cette page : https://codesandbox.io/s/5x0qr...
Notre formulaire devient maintenant réutilisable d'un projet à l'autre. Le code reste simple et tout se trouve au même endroit.

  <template>
    <form v-on:submit.prevent="submit">
        <label>Email</label>
        <input type="email" v-model="email" />
        <label>Subject</label>
        <select v-model="subject">
            <option disabled value="">Please select subject</option>
            <option>Informations</option>
            <option>Order</option>
            <option>Other</option>
        </select>
        <label>Message</label>
        <textarea v-model="message"></textarea>
        <input type="submit" value="Envoyer" />
        <div class="info">
            Email: {{email}},<br /> Subject: {{subject}},<br /> Message: {{message}}
        </div>
    </form>
</template>

<script>

export default {
    data(){
        return {
            subject: '',
            email: '',
            message: 'Hello Vue.js!'
        };
    },
    methods: {
        submit: function() {
            alert(this.email + ' ' + this.subject + ' ' + this.message);
        }
    }
}
</script>

<style lang="scss">
form {
    display: flex;
    flex-direction: column;

    label {
        margin: .5rem 0 0 0;
    }

    input[type="submit"] {
        margin-top: 1rem;
        margin-left: auto;
        width: 50%;
    }
}
.info {
    text-align: left;
    margin-top: 2rem;
}
</style>

Avantage de Vue JS

Un des avantages de Vue JS, c’est la simplicité. Il possède une courbe d’apprentissage rapide et prend en charge par défaut beaucoup de fonctionnalité.
Comme expliqué sur les exemples plus hauts, nous pouvons l’utiliser pour l’intégrer à un site existant pour développer des petites fonctionnalités comme des formulaires ou des widgets. Mais nous pouvons également l’utiliser pour développer des applications complètes et complexes.

Les possibilités d'utilisation sont assez larges et ça le rend très flexible.

Articles du blog sur #web app

Installer un serveur prerender pour le SEO de votre Web App

Web Application

Vous voulez faire indexer une Web App par les moteurs de recherche ? À moins que vous n'ayez développé votre application pour avoir un rendu serveur (SSR), vous avez comme unique solution, le prerender.

SEO pour les Web Apps React JS

Web Application

Le futur du web est mobile. Les gens consultent de plus en plus avec leurs smartphones. C’est pour cette raison que les Web Apps sont très certainement l’avenir en ce qui concerne les interfaces web.