close
#Frameworks single-page 101
En moins d'une décennie, les frameworks javascript sont devenus la pierre angulaire (si j'ose dire) du web moderne. S'il y a plus d'avantages que l'on ne peut en compter, il y a aussi quelques bémols qui méritent d'être mentionnés :
- Ils peuvent aller du package le plus basique à une véritable usine à gaz de logiciels prête à l'emploi.
- Certains d'entre eux ne sont plus supportés depuis longtemps (c'est le cas d'Angular JS).
- Et surtout, tous les éléments ne sont pas réinitialisés automatiquement lorsque vous naviguez vers une autre page dans la même application.
Access est un outil de paywall très simple, basé sur des iframes qui, parce qu'il utilise des iframes, n'interférera jamais avec les frameworks front-end existants ou futurs.
Vous êtes donc libre d'utiliser le framework de votre choix. Le principe de base sera probablement le même sur tous les frameworks : créer, utiliser et surtout détruire votre paywall.
Nous ne traiterons pas ici de l'implémentation de React car nous gérons déjà tout automatiquement pour vous dans
@poool/react-access.#Principe
La plupart des frameworks (si ce n'est tous) font de leur mieux pour gérer correctement la mémoire qu'ils utilisent afin d'être aussi efficaces que possible.
Ils attendent évidemment de vous que vous fassiez de même. Si vous utilisez l'un de ces frameworks, vous connaissez déjà les logiques de mount/init & unmount/destroy et les différentes méthodes disponibles pour réinitialiser un élément avant la prochaine navigation.
Access n'est pas différent :
- Vous créez un paywall lors d'un mount/render de votre composant parent pour la première fois.
- Vous le détruisez lors d'un unmont/destroy de votre composant parent.
Nous faisons tout notre possible pour séparer les instances de paywall et éviter toute interférence entre elles mais il n'est pas garanti que tout fonctionnera comme il se doit. À moins que vous ne les implantiez correctement en premier lieu.
#Installation
La première étape de ce guide consiste à ajouter le script
Access.js à votre application.
Nous recommandons d'utiliser directement l'url CDN car elle garantit que le script est toujours à jour, mais si vous préférez l'installer en utilisant des loaders comme SystemJS ou AMD vous pouvez le faire également.#Créer un paywall
Maintenant qu'Access est installé sur votre application, et en supposant que vous avez déjà une application complète fonctionnant dans un environnement local, nous allons maintenant créer une page article premium (tous les exemples seront écrits en javascript standard) :
Comme vous pouvez le constater, nous avons fait simple : nous avons créé une page avec un titre, du contenu et un élément vide dans lequel nous voulons intégrer notre paywall.
Maintenant que nous avons notre base, nous pouvons créer notre paywall pendant la phase mount/init de notre composant :
Pas grand-chose de nouveau par rapport au guide précédent, hein ? Voici le hic : si vous cliquez plusieurs fois sur un lien dans la même page et que vous créez à chaque fois un paywall sur cette même page, vous vous retrouverez probablement avec plusieurs paywalls affichés les uns en dessous des autres.
C'est parce que nous n'avons pas dit à notre framework comment éliminer notre paywall, pour l'instant.
#... ET DÉTRUISEZ-LES TOUS !
La méthode pour y parvenir diffère évidemment d'un framework à l'autre, mais le principe de base est toujours le même : effectuer une action "clean" lorsque notre composant est détruit.
Comme le montrent les snippets ci-dessus, nous n'avons rien inventé : nous avons simplement tiré parti d'une fonctionnalité puissante des frameworks web modernes : les cycles de vie.
Chaque composant affiché possède quelques événements de cycle de vie qui sont généralement utilisés pour effectuer des actions supplémentaires que vous ne pouvez pas effectuer sur un input utilisateur.
Cela nous donne donc la possibilité de détruire manuellement notre paywall en même temps que notre composant parent, en utilisant la méthode
.destroy(), sans s'inquiéter de ce qu'il deviendra une fois que notre composant parent aura disparu.Dans notre prochain guide, nous verrons comment mieux gérer les perturbations de réseau et éviter d'afficher un paywall par défaut non personnalisé ⚡️.