Outils Frameworks

JavaScript étant le seul langage coté client, une application web devient rapidement complexe à maintenir. De plus, on est souvent amené à créer des fonctionnalités standards, c’est pourquoi l’utilisation d’un framework est alors envisagée.

jQuery

Le premier framework de l’ère de l’industrialisation du web est jQuery. Ce n’est pas à proprement parler un framework, mais une simple librairie qui ajoute une couche d’abstraction et qui simplifie le développement JS.

jQuery n’est plus vraiment d’actualité aujourd’hui, mais cela permettait de pallier les bugs navigateurs grâce à son API qui lui est propre.

Exemple d’évènement click :

// jQuery
$('#el').click(function () {
  console.log('Hello')
})

// Vanilla JS
var el = document.querySelector('#el')
el.addEventListener('click', function () {
  console.log('Hello')
})

// Vanilla JS (avec support vieux navigateurs)
// beaucoup plus complexe en vrai
var el = document.getElementById('el')
if (el.addEventListener) {
  el.addEventListener('click', function () {
    console.log('Hello')
  })
} else if (el.attachEvent) {
  el.attachEvent('onclick', function () {
    console.log('Hello')
  })
}

Angular, React, Vue, etc.

Depuis 2010, de nombreux frameworks ont été crées, notamment parce que le web a pris une part de plus en plus importante dans le développement d’applications (web ou non d’ailleurs).

On peut citer Angular (2010), Backbone (2010), Ember (2011), React (2013), Vue (2015) ou Svelte (2017) pour les plus connus.

Ils tentent tous de simplifier le développement coté client, notamment en créant des interfaces réactives, au sens de «interface qui se met à jour presque automatiquement».

Voici quelques concepts importants de ces frameworks :

• une interface est découpée en multiple composants, et chaque composant :
  • a un état à un instant t
  • a un rendu attendu en fonction de cet état (représentation DOM)
  • réagit à des évènements
  • peut s’intégrer facilement dans d’autres composants, ou peut être intégré
• le DOM n’est pas mis à jour par le développeur, c’est le framework qui s’en charge. Seul l’état de l’application est modifié
• une architecture de communication entre composants est utilisée pour :
  • avoir un cycle de mise à jour unidirectionnel
  • avoir un état global et complet à un instant t
  • gagner en maintenance et prédictibilité