How to delay the teleportation in ABeamer
When you want to send a story via AJAX to a cloud render server, you need to teleport it. The teleportation process has 4 stages:
- When a story is created with
toTeleport=true
. In this stage, ABeamer stores configuration data, and takes a snapshot of the HTML/CSS data. - Every time the user adds an animation. In this stage, the animation is stored to be teleported before any task is executed.
- When
getStoryToTeleportAsConfig
orgetStoryToTeleport
is invoked. In this stage, it is stored the render and metadata information. - Send it by AJAX along with the assets to the cloud render server.
By taking the snapshot before any addAnimation
, ABeamer prevents tasks from duplicating the initial injected HTML code, but what happens, if you need to inject HTML or CSS before the initial snapshot is taken?
The most obvious answer it’s to inject the code before the story is created, but in this case, you won’t be able to take benefit from the services provided by ABeamer, such as:
- Access local server parameters.
- Access story configuration parameters (ex.
width
). - Use the built-in expression engine.
- Use of ABeamer plugins functionalities.
See it in action
Starting ABeamer 1.4, it’s possible to delay the initial HTML/CSS snapshot to a later phase, instead of being done when the story is created.
I will use the new gallery example animate-delay-teleportation
included in ABeamer 1.4.
In this example, you are doing the research of a brand name, and you want to present the results coming from a JSON file. Instead of creating a story for each possibility, you create a story template and you populate with different values depending of the JSON file.
Since you want to inject HTML code, and you want to teleport the story, you need to load JSON file before the story is created. This way, the snapshot will include the injected HTML code, but then you won’t be able to take benefit from ABeamer services.
Now with the new create story parameter toStartTeleporting: false
and the story method startTeleporting();
it’s possible to create the story, without taking the snapshot and at later phase trigger this process.
Let us go step-by-step. The basics:
To see it in action, open http://localhost:9000/foo/index.html.
This will display the data and graph for acme
brand name.
Now let us see for lighthouse
brand name.
open http://localhost:9000/foo/index.html?var=json%3Dlighthouse.
If you want to test the teleportation in local render server, just type:
And it will generate the foo/story.json
with the lighthouse inject into the HTML code.
You can see that on this piece segment from that file:
How does it works?
Now that we saw it in action, what is happening?
So in this example, I want to:
- Create an ABeamer story with
toStartTeleporting: false
creation parameter. - Get the server variable parameter named
json
from the story. - Load the
json
file based on that variable. - Inject the HTML code based the data received from the json file.
- Invoke
story.startTeleporting();
to create a HTML/CSS snapshot. - Configure the chart with the data from the JSON file.
- Call
scene1.addAnimation
to add the chart and reach animation.
If you open the foo/js/main.ts
, you will see this code fragments:
Once you have your template finished, and you are ready to teleport, uncomment the toTeleport
.
If you run it from a local render server with the parameter --teleport
, it will set the toTeleport
creation parameter to true
.
Now, in order to receive the server var parameter, and load the json file.
Once the data is loaded, we set the brand name, and trigger the initial teleportation snapshot.
Conclusion
Are there other ways to implement this example?
Yes, there are, you can implement your own querystring parser and get that information before you create the story, but this is just a simple example, ABeamer provides several services which are required for the story to be created, for all of those cases, delaying the snapshot creation until all the code is injected is the best strategy.