Comment développer (plus) sereinement du code frontend ?

Presenter Notes

De quoi va-t-on parler ?

  • Cadriciels
  • JavaScript vs langages compilés/transpilés
  • Utiliser les fonctionnalités offertes par le langage
  • Préprocesseurs CSS
  • Manipulation de DOM

Presenter Notes

Les cadriciels

Quel est le meilleur cadriciel pour un nouveau projet ?

Angular vs React vs Vue.js vs Ember vs ...

Presenter Notes

Les cadriciels

Non je ne rentrerai pas dans les trolls classiques, chaque cadriciel a ses forces et surtout chaque développeur a ses opinions.

Prenez le cadriciel avec lequel vous êtes à l'aise et celui qui répond le mieux à votre problématique !

Cependant une question mérite de se poser:

Est ce que j'ai vraiment besoin d'un cadriciel pour ce projet ?

Presenter Notes

Frameworkless

Le mouvement frameworkless, comme son nom l'indique, est une réflexion menée par un regroupement de développeurs pour développer des outils sans cadriciels. Il s'agit d'un mouvement qui n'est pas borné au frontend mais à l'ensemble des langages de programmation.

Petite précision avant de continuer:

Les cadriciels sont des outils très puissants et leur utilisation est (souvent) pertinente

Cons

  • Larges briques logicielles
  • Taille du projet
  • Barrière d'apprentissage
  • Beaucoup de fontionnalités

Presenter Notes

Cependant il s'agit de larges briques logicielles dont il convient de s'interroger quant à leurs intégrations systématiques. Cette intégration a un coût non négligeable sur la taille et l'évolution de votre projet. Si vous n'utilisez qu'un dixième des fonctionnalités apportées par ladite brique ne pourriez-vous pas réécrire cette dernière en la limitant à vos cas d'utilisations ? Il est possible et même souhaitable d'étendre cette réflexion aux bibliothèques logicielles utilisées.

JavaScript vs TypeScript

JavaScript est et reste le seul langage de script reconnu par l'ensemble des navigateurs Web sans installation de module tiers.

Ces dernières années ont vu l'apparition de langages permettant de générer du JavaScript.

Pros Cons
Ajout de nouvelles fonctionnalités non supportées nativement Étape de build
Ajout de sucre syntaxique
Prévention d'erreurs par mécanisme de transpilation/compilation

Le TypeScript n'en est qu'un exemple.

Presenter Notes

Les fonctionnalités de JS

Structurer correctement son code

JavaScript ne supporte nativement pas les namespace, comme en C++ ou en Java. Il est cependant possible d'utiliser des modules, des literal objects ou des fonctions anonymes pour correctement structurer son code.

Les mêmes règles de séparation des couches métier et présentation doivent être mises en place afin d'assurer la maintenabilité de son programme.

En plus des outils nommés ci-dessus, JavaScript supporte également les classes depuis ECMAScript2015.

Les promesses

Depuis ECMAScript 2017, JavaScript a introduit du sucre syntaxique afin de rendre plus lisible le code exécuté de façon asynchrone.

Presenter Notes

Les préprocesseurs CSS

Les règles rscss

Une liste de règles pour aider à générer du CSS maintenable

  • Les règles component doivent avoir au moins deux mots séparés avec - (.like-button)
  • Les règles elements doivent être composé d'un seul mot (field)
  • Utiliser le sélecteur > le plus souvent possible pour les élements
  • Éviter l'utilisation des sélecteurs de tag (h3)
  • Les règles variant doivent être préfixé par -
  • Les règles helpers doivent être préfixé par _
  • Un composant == un fichier

Presenter Notes

Les préprocesseurs CSS - Exemple

<article class="article-link">
  <div class="vote-box _centered">
    <button class="up"></button>
    <button class="down"></button>
    <span class="count">4</span>
    <span class="count -small">4</span>
  </div>
  <h3 class="title">Article title</h3>
  <p class="count">3 votes</p>
</article>
/** components/articles.scss **/
.article-link {
  > .title { /* ... */ }
  > .count { /* ... */ }
  > .count.-small { /* ... */ }
}
.vote-box {
  > .up { /* ... */ }
  > .down { /* ... */ }
  > .count { /* ... */ }
}

/** components/utils.scss **/
._centered { margin: auto !important; }

Presenter Notes

Les manipulations de DOM

La manipulation d'éléments DOM au sein de nos composants peut entraîner des erreurs de contexte lors des tests unitaires exécutés couvrant une fonctionnalité.

Uncaught ReferenceError: Can not getElementById of undefined

Pour palier à ça il est aisé de centraliser l'ensemble des manipulations de DOM au sein d'un même module dédié ou d'utiliser une bibliothèque.

Cela permettra de mocker les résultats nos méthodes afin d'obtenir un contexte dédié et reproductible sur l'ensemble de nos tests.

Presenter Notes

Merci de votre attention

TROUVERIE Joachim

Presenter Notes