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.
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).
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:
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:
Here are the numbers for Android. As you can see, Android cache is worse but interpreter seems to be faster on first load.
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.