WebComponent avec VueJS

Aujourd'hui, j'ai testé VueJS. Cette lib permet de créer assez simplement des webcomponent réactif, voire des apps complètes. Mais ce que j'ai apprécié, c'est justement cette possibilité de créer des petits webcomponents autonomes qu'on peut ensuite réutiliser n'importe où. Pour prouver mes dires, j'ai écrit un formulaire de recherche qui utilise Algolia pour chercher dans les posts de ce blog. Pour l'afficher ci dessous, je n'ai eu qu'à insérer une balise link, une balise script puis la balise correspondant à mon webcomponent : <search> :

<search></search>  
<link href=https://works.hadrien.eu/algolia-vuejs/css/app.2c00791366d54647d6eb51ac93e64cec.css rel=stylesheet>  
<script type=text/javascript src=https://works.hadrien.eu/algolia-vuejs/js/search-component.js></script>  

Et voilà le résultat :

Je peux donc facilement insérer mon formulaire de recherche partout où j'en ai envie que ça soit sur une page html statique, un article de blog ou une application complexe angularjs, aurelia ou n'importe quoi d'autre.

Ce que j'ai beaucoup apprécié avec cet outil, c'est qu'il permet de séparer template, logique et style à la façon des web components.

La partie template utilise le moteur de template mustache et rassurera tous les développeurs angular. On peut interpoler des expression, appeler des méthodes, utiliser des filtres, insérer d'autres components, faire du two way data binding.

Coté implémentation, c'est du ESNext. Même si la déclaration du component est un simple objet et pas une classe, on peut facilement importer des services ou autres libs grâce à import from. Le component dispose d'un cycle de vie complet grâce auquel on pourra exécuter du code lors de la création de la balise, ou lors de sa suppression par exemple.

Pour finir, on peut donc définir un style pour le component et grâce à un attribut particulier (scoped), on peut limiter ces déclarations css à ce composant uniquement.

Voici pour illustrer tout ça mon component <search-form> inséré lui même par le component principal <search> et définie dans le fichier SearchForm.vue :

<template>  
  <form>
    <input
      type="search"
      placeholder="Search something"
      v-model="query"
      debounce="500">
    <p>Powered by <span>Algolia</span></p>
  </form>
</template>

<script>  
import search from '../services/search'  
export default {  
  data () {
    return {
      query: ''
    }
  },
  watch: {
    query: async function (newVal) {
      await search.search(newVal)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->  
<style scoped>  
input {  
  font-size: 40px;
  line-height: 40px;
}
p {  
  font-size: 14px;
}
span {  
  display: inline-block;
  width: 50px;
  height: 16px;
  background: url(../assets/Algolia_logo_bg-white.svg) no-repeat;
  background-size: contain;
  text-indent: -10000px;
  vertical-align: middle;
}
</style>

Et au passage, j'ai donc aussi testé Algolia qui est un moteur de recherche en Saas permettant d'externaliser la recherche de données de façon très simple mais surtout très performante. Très intéressant service !

Hadrien

Hi, I'm a french Web Lead Developer, Front End Architect from Toulouse, France. I've worked for 7 years for Overblog then 2 years with AngularJS. Now, I'm a great fan of Aurelia.io.

Toulouse, France https://hadrien.eu