close
#Single-page frameworks basics
In less than a decade, javascript frameworks have become the angular stone (if I may) of the modern web. While there are more benefits than we can count, there are also some caveats worth mentionning:
- They can go from the most basic and smallest package possible to a complete out-of-the-box enterprise software machinery
- Some of them are not supported for a long time (looking at you Angular JS)
- And most importantly, things are not reseted automatically when you navigate to some other page inside the same app
Access is a very simple iframe-based paywall utility that, because it uses iframes, will never interfer with any existing or future front-end frameworks.
Thus, you're free to use the framework of your choosing. The major principle will probably be the same on any of them: create, use and most of all destroy your paywall.
We will purposely not cover the React implementation here as we already manage everything automatically for you in
@poool/react-access.#Principle
Most of the frameworks out there (if not all) will try their best to correctly manage and garbage-collect the memory they use in order to be as efficient as possible.
They obviously expect you to do the same. If you intensively use one of those popular frameworks, you already know about mount/init & unmount/destroy logics and how you can manage to dispose of something before the next navigation. Access is no different:
- You create a paywall when you first mount/render your parent component
- You destroy it when you unmount/destroy your parent component
While we try our best to separate paywall instances and avoid any interference between them, it's not guaranteed everything will work as it is supposed to unless you correctly implement them in the first place.
#Installation
The starting point of this guide consists in adding the
Access.js script to your app.
We recommend using the direct CDN url as it guarantees the script is always up to date, but if you prefer to install it using loaders like SystemJS or AMD you can.#Create a paywall
Now that Access is installed on your app, and assuming you already have a full app running on a local environment, we will now create a premium article page (all examples will be written in plain javascript):
As you can see, we went straight to the point: we created a simple page with a title, some content and an empty element in which we want our paywall to be.
Now that we have our base, we can create our paywall during the mount/init phase of our component:
Nothing changed much from the previous guide, huh? Here comes the catch: if you click multiple times on a link in the same page and create a paywall on this same page each time, you'll probably end up with multiples paywalls displayed below one another.
That's because we haven't told our framework how to dispose of our paywall, yet.
#... AND DESTROY THEM ALL!
The method to achieve this obviously differs between frameworks, but the main principle is always the same: perform a clean action when our component is destroyed.
As highlighted in the snippets above, we didn't invent anything and simply took advantage of a powerful feature of modern web frameworks: lifecycles.
Each rendered component has a few lifecycle events which are commonly used to perform additional actions you can't perform on user input.
This finally gives us the opportunity to manually destroy our paywall alongside our parent component, using the
.destroy() method, without thinking about what it will become once our parent component disappears.In our next guide, we will see how we can better handle any network fluctuation and avoid showing a non-customized default black paywall ⚡