Skip to content

Migrating from Cobalt 0.6 to Cobalt 1.0

Guillaume Gendre edited this page Mar 21, 2019 · 16 revisions

We removed cobalt events. Now, we use a publish/subscribe pattern for all exchanges between web and native.

Bye bye events, callbacks, onUnhandledEvent etc.

On web side

cobalt.sendEvent removed

You must use cobalt.publish instead.

Before

cobalt.sendEvent('eventName', { hip:1, hop:2 })

After

cobalt.publish('channelName', { hip:1, hop:2 })

warning : behavior is not the same : all webviews or native controllers that subscribed to this channel will receive your message.

cobalt.addEventListener removed

You must use cobalt.subscribe here.

Before

cobalt.addEventListener('eventName', function(data){
 console.log('data is', data)
})

After

cobalt.subscribe('channelName', function(data){
  console.log('data is', data)
})

warning : behavior is not the same : you will receive all messages sent to this channel including messages from other webviews or native controllers that published to it.

cobalt.init : defining events removed

You can't define event handler in cobalt.init anymore.

You must use cobalt.subscribe now as described in the previous paragraph.

Before :

cobalt.init({
    events: {
        "eventName" : function(data){
          console.log('received data', data)
        }
    }
})

After :

cobalt.init();
cobalt.subscribe('channelName', function(data){
  console.log('data is', data)
})

warning : behavior is not the same : you will receive all messages sent to this channel including messages from other webviews or native controllers that published to it.

Lifecycle events prefixed and sent to pubsub

All lifecycle events are now virtually sent to lifecycle:eventName channels

Before

cobalt.addEventListener("onPageShown", function(data) {
    console.log('page is shown')
});
cobalt.addEventListener("onAppStarted", function(data) {
    console.log('app just started')
});
cobalt.addEventListener("onAppBackground", function(data) {
    console.log('app is moved to background')
});
cobalt.addEventListener(onAppForeground", function(data) {
    console.log('page is back at front')
});

After

cobalt.subscribe('lifecycle:onPageShown', function (data){
    console.log('page is shown')
});
cobalt.subscribe('lifecycle:onAppStarted', function (data){
    console.log('app just started')
});
cobalt.subscribe('lifecycle:onAppBackground', function (data){
    console.log('app is moved to background')
});
cobalt.subscribe('lifecycle:onAppForeground', function (data){
    console.log('page is back at front')
});

Note that you can't subscribe to lifecycle events of other pages here.

cobalt.sendCallback removed

You must use cobalt.publish here again. This mean that the native side may give you a channel string somewhere, that you may use to reply.

Before

cobalt.addEventListener('eventName', function(data, callback){
    console.log('data is', data)
    cobalt.sendCallback(callback, { result: 42 })
})

After

cobalt.subscribe('channelName', function(data){
  console.log('data is', data)
  cobalt.publish(data.replyTo, { result: 42 })
})

In this example, you decided that native side sends a channel id in a replyTo key of the message. replyTo is here just an example, it could have been callbackChannel or even any string you wanted.

onBackButtonPressed updated

Event onBackButtonPressed is now part of the lifecycle events and should be catched in the lifecycle:onBackButtonPressed channel.

Use return true or return false to allow or disallow the app to go back. If you don't return anything or if you don't catch the lifecycle message, the app is allowed to go back.

Before

cobalt.addEventListener("onBackButtonPressed", function(data, callback){
    cobalt.log('you pressed back button');
    cobalt.sendCallback(callback,{value : true});
});

After

cobalt.subscribe('lifecycle:onBackButtonPressed', function (data){
    cobalt.log('you pressed back button');
    return true; //or false to disallow this back button use
});
Clone this wiki locally