Monthfévrier 2018

[javascript] L’exécution des ressources JS d’un projet via une fonction _autoload et l’encapsulation de code dans des namespaces

A étudier également: Lazy Loading JavaScript Modules With ConditionerJS sur Smashing Magazine.

ATTENTION: Note that this only works in browsers that support Dynamic import(). At the time of this writing that would be Chrome 63 and Safari 11.

Comme d’hab on pourra pas s’en servir parce qu’on doit tjrs avoir une compatibilité avec un vieux navigateur à la noix.


Télécharger une démo
(zip 35ko).

Article de Jean-Luc BOES sur le blog Netapsys: Introduction aux développements sur la suite SAP Hybris (section Le javascript).

Le javascript dans Hybris est du javascript standard mais il est intéressant de remarquer la fonction d’autoload et l’utilisation des espaces de noms. Chaque fichier javascript doit définir une variable _autoload et chaque fonction remplissant les conditions seront appelé une fois le DOM de la page web chargée.

[à traduire] to avoid collisions and improve code organization when working with components under another namespace

Remarque

Attention: je ne suis (pour l’instant) pas parvenu à faire fonctionner l'autoload lorsqu’une condition doit être remplie (dans notre exemple ci-dessous ["bindCarousel", $(".js-owl-carousel").length != 0]) et que les sources JS sont chargées au sein de l’élément HEAD d’un document. Il faut obligatoirement charger les sources Js (au moins l’autoload et les fichiers qui y font référence) tout en bas du DOM, juste avant la fermeture de la balise BODY, et ce même si le code JS est encapsulé dans un $(document).ready(function(){}); ou équivalent.

Cela ne devrait pas être un problème en soi car faire appel aux sources JS en bas de page est une bonne pratique, mais d’expérience ce n’est pas toujours possible…

Source de la fonction _autoload

Assurez vous que ACC soit disponible

Exemple d’utilisation

Cette méthodologie consiste à limiter le nombre d’initialisation d’un même plugin (ici Owl Carousel). On l’initialise une seule fois via la classe .js-owl-carousel affectée à tous les carousels utilisés dans le site. On passe ensuite les paramètres pour différentes configs (default, rotating-image, lazy-reference) en fonction d’une classe (.js-owl-default, .js-owl-rotating-image, .js-owl-lazy-reference) présente dans la vue.

Vue HTML pour un carousel avec config « lazy-reference » (voir au-dessus)

Notez ligne 8 la présence de la classe .js-owl-lazy-reference (qui déclenche la config) sur le même élément que la classe .js-owl-carousel (qui initialise le plug-in).

Modifier à la volée les paramètres d’un objet

Conclusion

Je n’ai pas un niveau de ninja en javaScript (je pratique pas mal jQuery pour répondre à des contraintes liées au front). Cette organisation du code JS autour d’une fonction _autoload (la méthodologie adoptée par les concepteurs d’Hybris) m’a permis de rentrer facilement dans le code sans lire aucune documentation et de greffer rapidement mes propres fonctions à l’existant sans pour autant le dénaturer, tant j’ai trouvé cette ossature facile à comprendre. C’est là l’intérêt de l’utilisation d’un pattern.

Pour aller plus loin

et ses patterns (et notamment le namespaced pattern dont la philosophie se rapproche de la méthodologie JS Hybris.

[JavaScript] Initialiser un plugin avec plusieurs configs pré-définies

Cette méthodologie consiste à limiter le nombre d’initialisation d’un même plugin (ici Owl Carousel). On l’initialise une seule fois via la classe .js-owl-carousel affectée à tous les carousels utilisés dans le site. On passe ensuite les paramètres pour différentes configs (default, rotating-image, lazy-reference) en fonction d’une classe (.js-owl-default, .js-owl-rotating-image, .js-owl-lazy-reference) présente dans la vue.

Code JS

Vue pour un carousel avec config « lazy-reference »

Notez la présence de la classe .js-owl-lazy-reference (qui déclenche la config) sur le même élément que la classe .js-owl-carousel (qui initialise le plug-in).

[javaScript] Mettre en place le plugin videoJS avec une playlist façon YouTube

VideoJS, sources du projet sous Git, documentation officielle.

Exemple avancé (avec playlist). Sources: Playlist Plugin for video.js (Brightcove), Video.js Playlist UI (Brightcove).

Un tutoriel de mise en place (incomplet – en tout cas je n’ai pas réussi à faire fonctionner une playlist avec les seules infos données dans ce tuto).

LA SOLUTION pour une mise en place qui fonctionne.

Mes retours après mise en place dans un projet:

  • Les sources sont fournies brutes avec un workflow à base d’NPM + Grunt qui permet de builder des versions custom « production-ready ».
  • Les sources de styles sont en SASS.
  • Les sources de JS sont en ES5 (ou ES6?).
  • Je n’ai pas réussi à faire fonctionner le cli fourni pour procéder au build… notamment des fichiers JS. J’ai dû procéder à une mise à jour de Node et NPM sur ma machine; je me suis arrêté parce que le build process me renvoyait d’autres erreurs par la suite.
  • J’ai récupéré des sources JS buildées sur différents services de CDN.
  • L’exemple avancé (avec playlist) intègre un plugin mux et fonctionne avec React ce qui n’était pas utile dans mon cas. De plus,
    sa mise en place est assez mal décrite dans le billet de blog qui détaille sa mise en place.
  • C’est un post sur stackoverflow – Create playlists for video.js qui m’a mis sur la voie.

Sources:

Markup HTML

Styles

video-js.less

Passer ce bloc de code