12 libs JS front que j’utilise tout le temps

Par Christophe Porteneuve • Publié le 22 septembre 2014 • 7 min

jQuery (ou Zepto)

Évidemment. Pas trop besoin que je présente jQuery. Ça peut en surprendre certains, vu que je suis à la base un core committer de Prototype.js. Seulement voilà, avec le temps, l’énorme force de frappe de l’équipe (et de l’écosystème) jQuery, combiné à l’apparition d’Underscore (voir plus loin), a eu raison des quelques heures occasionnelles qui restent à Prototype.js (grâce aux vaillants efforts d’Andrew Dupont). On est bien loin de 2008…

En revanche, jQuery reste un gros mammouth en raison de ses nombreuses évolutions d’API… et de la compatibilité oldIE. Ceci dit, même jQuery 2, qui envoie péter oldIE, pèse toujours allègrement 241Ko (82Ko minifié, 29Ko gzippé), ce n’est pas rien.

Quand Underscore est apparu (encore un super projet de Jérémy Ashkenas), les « Prototypistes » qui refusaient de passer à jQuery faute d’outils algorithmiques potables ont trouvé de quoi compenser, et ont pu sauter le pas.

En revanche, si je n’ai pas besoin d’IE 9, ou simplement pas besoin de trop de features pointues de jQuery, je m’allège direct en prenant plutôt Zepto, la p’tite lib conçue à la base pour les mobiles, mais désormais beaucoup plus largement compatible, pilotée par Thomas Fuchs (célèbre pour Script.aculo.us et Freckle, entre autres tas de trucs cool).

Ça ne pèse que 54Ko (9.1Ko gzippé), l’API est compatible avec celle de jQuery (en gros, sauf cas de figure bien pointu, tu n’auras pas une ligne de ton code à changer), et ça défonce grave. J’aime.

Underscore

Les gens l’adorent, et pas que côté Node (il est téléchargé par npm install environ 48 000 fois par jour, quand même)… Elle est par exemple bien connue de JSBin et JSFiddle, entre autres. Underscore est la p’tite lib d’algo et de programmation fonctionnelle toute clean de Jérémy Ashkenas, le jeune dieuhomme qui nous a aussi donné CoffeeScript et Backbone, par exemple.

Underscore fournit une implémentation clean, lisible, performante et très bien documentée d’une tonne de petits besoins algos et fonctionnels récurrents. C’est de l’ES3, donc ça tourne absolument partout. Finies, les boucles manuelles, les algos basiques qu’on se recode non-stop pour trier, filtrer, piocher, regrouper, découper… On trouve aussi plein de petites contribs annexes.

Et en plus, avec deux syntaxes : une qui « fait objet » (_(sujet).method(…)) et l’autre qui reste procédurale (_.method(sujet, …)). Choose your weapons.

Petites démos vite fait à l’arrache :

var people = [
  { name: 'Christophe', age: 36, language: 'JS' },
  { name: 'Élodie', age: 33, language: 'Ruby' },
  { name: 'Alice', age: 25, language: 'JS' },
  { name: 'Bob', age: 31, language: 'JS' },
  { name: 'David', age: 20, language: 'JS' },
]

// Q: Combien de gens ont JS comme langage ?
_.where(people, { language: 'JS' }).length
// R: 4

// Q: Quels sont les noms des gens de plus de 25 ans parlant JS ?
_.chain(people)
  .filter(function (p) {
    return p.age > 25
  })
  .where({ language: 'JS' })
  .pluck('name')
  .value()
// R: ['Christophe', 'Bob']

// Q: Quelle est la personne la plus agée ? Sachant que je veux pas me
// galérer à faire un callback manuel d'exploitation de la propriété `age`
// pour la comparaison…
_.max(people, _.partial(_.result, _, 'age'))
// R: { name: 'Christophe', age: 36, language: 'JS' }

Quand on vient de Prototype.js par exemple, qui contient pas mal de choses de ce type-là, jQuery seul nous fait nous sentir tous nus, avec un pauvre silex dans la main. L’arrivée d’Underscore a permis de sauter le pas, en remplaçant certes une lib par deux, mais pour un potentiel nettement supérieur au final.

Si vous voulez la jouer super hipster et kool-aid drinker, vous pouvez plutôt prendre Lo-Dash, de JDD. Moi non.

Moment (et Moments-Away)

L’API Date de JavaScript est une sous-merde copiée-collée du JDK, pour des tas de raisons honteuses qui remontent à mai 1995, quand Netscape et Sun bossaient mains dans poil dans la main pour sortir JavaScript et Java dans le future Netscape Navigator 2.0.

On y retrouve les mêmes conneries systématiques : getYear() qui retire bêtement 1900, getMonth() qui démarre à zéro, getDay() qui ne renvoie pas le jour du mois mais celui de la semaine (et getDate() qui renvoie celui du mois)… Bref, la grosse lose.

Et dès que tu veux formater ou parser une date, c’est un boxon monstre. Surtout quand tu joues avec les fuseaux horaires, ou que tu veux ajouter/retirer des durées variables (en gros, tout ce qui est basé sur des mois).

Sauf que. Sauf que.

On a cette petite merveille de Moment.js. Qui tue, qui est super-utilisée, super testée, qui marche partout (base ES3), qui est internationalisée à mort (mais tu peux n’intégrer que les langues qui t’intéressent), qui fait tout et le café.

Micro-démo de rien du tout :

moment.lang('fr')
moment().format('dddd D MMMM YYYY HH:mm') // => 'lundi 22 septembre 2014 17:21'
moment().startOf('day').fromNow() // => 'il y a 17 heures'
moment().subtract(3, 'days').calendar() // => 'vendredi dernier à 17:21'

La page d’accueil fait une belle petite démo. Pense à choisir “français” un peu plus bas, pour voir ta langue en action. Et va donc jeter un œil aux sections de la doc (menu de droite) pour voir à quel point c’est cool et sympa.

J’aime tellement cette petite lib que j’ai même pondu une surcouche qui me donne accès aux syntaxes « façon ActiveSupport » que j’affectionne tant pour calculer des écarts de temps dans le passé ou l’avenir : Moments-Away. Z’allez voir si c’est pas mignon…

// Basé sur une date / un moment :
var d = new Date(2013, 10, 6)
'3 months'.after(d)
'1 year'.before(d)

// Basé sur maintenant :
'1 month'.fromNow()
'2 weeks'.ago()

// Plutôt basé nombres que Strings ?
;(3).months().after(d)
;(1).year().before(d)

var om = 1,
  ow = 2
om.months().fromNow()
ow.weeks().ago()

Bootstrap

Vu que j’utilise beaucoup Bootstrap comme framework CSS (notamment pour les backoffices, mais aussi souvent en frontal visiteur), je recours naturellement à eux pour des trucs comme les dialogues modaux, les popovers et tooltips, les onglets, etc.

Leur lib intégrée me suffit amplement, et c’est facile de n’intégrer que les parties dont on a besoin. Et j’aime bien leur API.

Select2

Dès que je dois faire quoi que ce soit de non-trivial avec une saisie « dans une liste », que ce soit basé sur un <select> ou un champ texte, je sors Select2 (qui comme son nom ne l’indique pas est en 3.5.1 là tout de suite).

C’est sans conteste un des plugins jQuery les mieux foutus, extrêmement utilisé et très bien maintenu. Je peux faire tout ce que je veux avec :

• Homogénéiser le look des mes combos sur toutes les plates-formes
• Proposer une saisie à complétion parmi une liste large de valeurs
• Customiser l’aspect des valeurs dans la liste (*$habillage riche**)
• Charger dynamiquement un résultat / plus de résultats sur défilement
• Tripatouiller mon filtrage comme bon me semble
• Proposer une saisie multiple en mode tags, libres ou contraints
• Désactiver certaines valeurs ou les verrouiller dans la sélection

C’est une grosse tuerie. Je préfère cent fois à des listes de cases à cocher à rallonge pour des sélections multiples, par exemple. Mais ça gère une tonne de cas.

Comme j’utilise beaucoup Bootstrap, j’ai tendance à rajouter une CSS tierce, très bien maintenue, qui ajuste juste comme il faut la CSS de Select2 pour qu’elle se fonde nickel dans le paysage.

Kalendae

Sans doute ma lib de date picker préférée. Kalendae a sans doute quelques petits défauts (mes UX préférées nécessitent souvent que je la configure un brin pour les obtenir), mais elle est extrêmement polyvalente :

• Popup ou persistante
• Mois multiples
• Sélections faciles, adjacentes ou disjointes
• Pré-sélection et désactivation avancée de dates
• Limitation facile des intervalles de dates autorisés
• Facile à restyler en Bootstrap 3
• Facile à internationaliser

À noter qu’elle intègre Moment, du coup si on l’a, inutile de doublonner, on peut exposer publiquement son Moment incorporé.

Highcharts (et ses copains)

Déjà bien installé depuis des années dans le paysage, Highcharts est devenue la lib de référence pour les graphiques « classiques » (graphiques au sens Excel, par exemple) sur des données numériques et temporelles.

Extrêmement puissante, proposant de base une pléthore de graphiques, combinables et personnalisables à souhait, parfaitement testée et maintenue, elle est gratuite pour un usage non commercial, et tarifée très raisonnablement pour le reste.

Ayant moi-même, par le passé, perdu pas mal de temps à développer ce genre de trucs par-dessus Raphaël et gRaphaël pour mes besoins propres, je peux vous dire que le tarif est amorti dès la première utilisation !

C’est bourré de fonctionnalités jusqu’à la gueule, super solide, propre, multi-plateformes, et c’est du pur JS/CSS/HTML5.

Les mêmes vous proposent aussi Highstock, spécialisé dans les tickers (graphiques mis à jour en temps réel, à échelle dynamique, type valeurs boursières) et Highmaps (représentations cartographiques, particulièrement abouti lui aussi).

Tout ça envoie cette merde de Google Charts sur orbite vite fait, je vous le dis d’expérience.

Baladez-vous dans les démos, c’est juste hallucinant. Je n’utilise rien d’autre depuis plusieurs années déjà (et oui, j’ai payé la licence), et j’en suis absolument enchanté.

Lawnchair (ou localForage)

J’utilise de plus en plus souvent du stockage « lourd » côté client. En gros, c’est soit du localStorage, soit du IndexedDB. Le souci c’est que les APIs de base sont soit super limitées (ex. localStorage), soit atrocement complexes (ex. IndexedDB). Et elles sont très variées, du coup si je veux changer de moteur de stockage (pour gagner en capacité, par exemple), je dois tout réécrire.

Lorsque je ne suis même pas sûr d’avoir localStorage, ou que je veux tourner sur des vieilles bouses, j’utilise souvent Lawnchair.

Outre son logo indépassable[^1], cette petite lib écrite y’a longtemps par Brian LeRoux (alias Monsieur PhoneGap) propose une API homogène, pratique et au look asynchrone pour toute une pelletée de moteurs : il suffit de charger, dans l’ordre de priorité décroissante, les adaptateurs qu’on accepte. Le premier pris en charge remporte la partie (ex. dom pour localStorage).

Et puis comment résister à une API qui ne dit pas clear() mais nuke(), hein, franchement ?

Ceci dit, si je suppose que j’aurai au moins localStorage et que je cherche une API plus « moderne », notamment en étant orientée promesses, j’adore le wrapper localForage maintenu par Mozilla. Super agréable, et très puissant. Juste, il va tenter le gros lot d’abord (IndexedDB) pour ne revenir à localStorage que par dépit… À voir si ça vous va.

Webshim

Alors attention, là, potentiellement gros mammouth, ça dépend complètement des navigateurs et fonctionnalités que vous voulez. Je suis tombé sur ce projet cet été, en cherchant à homogénéiser la prise en charge et le look-and-feel des champs HTML5 et de leurs validations sur tout un tas de plates-formes.

Webshim propose une tonne de polyfills, à la carte, qui pour la plupart sont activables dès IE7, voire IE6 pour les plus malchanceux. Au démarrage, il feature-detects les polyfills dont il a besoin pour satisfaire votre liste de courses, et les charge en essayant d’être aussi économe sur les requêtes que possible.

Ça marche bien, c’est très configurable, et j’ai même réussi à faire une intégration nickel côté look avec les erreurs de style Bootstrap 3 générées par mon back-end. Le seul truc qui peut un peu énerver, c’est vouloir absolument forcer du single-load de gros JS concaténé, webshim compris (mon projet utilisait une grosse concaténation pour tout le reste, et laissait Webshim charger ses dépendances dynamiques lui-même). On peut aussi obtenir des résultats intéressants dans l’univers AMD avec RequireJS et r.js.

C’est très bien maintenu, les auteurs sont réactifs et c’est très utilisé. Un vrai truc intéressant, et plutôt light si vos besoins sont ciblés.

Envie d’en savoir plus ?

On fait des formations JS magnifiques, qui font briller les yeux et frétiller les claviers :

• JS Total, pour apprendre tout ce qu’il faut pour faire du dev web front moderne, efficace, rapide et haut de gamme.
• Node.js, pour découvrir, apprivoiser puis maîtriser le nouveau chouchou de la couche serveur, qui envoie du gros pâté !

[^1]: En référence à CouchDB, Lawnchair est « comme un canapé (couch), mais plus petit, et à l’extérieur (dans le navigateur) ». Donc une chaise de jardin.