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.
getStoryToTeleportis 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.
- 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.
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: falsecreation parameter.
- Get the server variable parameter named
jsonfrom the story.
- Load the
jsonfile based on that variable.
- Inject the HTML code based the data received from the json file.
story.startTeleporting();to create a HTML/CSS snapshot.
- Configure the chart with the data from the JSON file.
scene1.addAnimationto 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
If you run it from a local render server with the parameter
--teleport, it will set the
toTeleport creation parameter to
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.
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.