A word on Cobalt navigation

This article was inspired by the intro page of the Cobalt documentation.

Before you start diving into Cobalt and create your first app, you need to understand a few things.

Web pages and views

A Cobalt application is a set of HTML pages, embedded into a native iOS project and a native Android project.

A mobile app usually contains views, for example: a home screen, a list of users, a form, a detailled item with a video, and so on.

In a Cobalt app, each view is defined in a separate HTML page.

Of course, you can use a single HTML page for multiple views of content with some basic JavaScript but you will probably loose some of the benefits of Cobalt.

Native navigation between views

Having each view of your app in a separate HTML page allows Cobalt to load them in different WebViews (a native component to display Web content).

This means you can have native transitions between your views. No laggy JavaScript or CSS animation. They will be smooth, fluid, perfect as if it was a native app, because it IS actually a native transition!

Having a separate HTML page for each views has several other benefits:

  • page layout is simpler to create. No CSS fixed-positionning bugs anymore,
  • simpler is faster on mobile: less divs, more speed,
  • it helps you organize your code the right way,
  • it reduces the memory usage of your app.

Here is a quick comparison with Cordova, the most popular “hybrid” framework:

As you can see, in a Cordova application, all views are shown into a unique WebView. All transitions are made with CSS and JavaScript, pages are loaded dynamically with ajax, memory allocation increases and, at some point, the whole app may be loaded in the WebView. That’s wrong and that’s why we made Cobalt.

Wait, all my script and CSS files will be reloaded in each pages? Isn’t it bad?

No it’s not. WebViews are like a browser in your app, they have a cache. We experimented a bit with it recently. If you load the same script file in every page, the first load will be longer but others will be way faster.

Here are the numbers for iOS. As you can see, the cache work is quite good:

cache_effects_ios

Here are the numbers for Android. As you can see, Android cache is worse but interpreter seems to be faster on first load.

cache_effects_android

Also, try to keep your code base small. Once again: the lesser, the better. Tests were made on an iPad 3 and a Nexus 4 running Android 4.X. Mesured time is the time between WebView creation and cobaltIsReady event.

FacebookTwitterGoogle+LinkedIn