Blackbell API - user app | Blackbell Documentation

How rendering works?

In Ember.js case, html dom renders on fastboot side (ssr), then html removes and rerenders on client side again.

To avoild rerender, it’s possible to enable rehydration. In this case ember.js will use dom from ssr for first initialization, it resolves issue with dynamic scripts, styles etc.

To enable rehydration need to run fastboot-server with flag EXPERIMENTAL_RENDER_MODE_SERIALIZE=true

See details here: https://github.com/ember-fastboot/ember-cli-fastboot#rehydration -

How bb-api works?

bb-api - service integrated inside ua-app for better coding via custom script (Header snippet).

If you would like to add some custom scripts to use exists jQuery, or subscribe on transition events, you can use it.

code example for HEADER SNIPPET

<script >
    window.onBlackBellAPiReady = function(api) {
        api.on('transition', function() {
            console.log(window.location.href);
        })
    } 
</script>

window.onBlackBellAPiReady - function, will be fired after all js-code will be ready, inside this function you can use jQuery, create logic for dom, and get access to api service

transition - event triggers on initial, and each time after user did transition to another route. In this case you can handle some analytics, metrics etc..

Here is small example how it can be used for gtag:

<script async src = "https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID" > < /script> 

<script >
    window.dataLayer = window.dataLayer || [];
function gtag() {
    dataLayer.push(arguments);
}

gtag('js', new Date());

gtag('config', 'GA_MEASUREMENT_ID', {
    send_page_view: false
});

window.onBlackBellAPiReady = function(api) {
        api.on('transition', function() {
            gtag('event', 'page_view', {
                page_title: document.title,
                page_location: window.location.href,
                page_path: window.location.pathname,
            })
        })
    } 
</script>