cobalt intro
Before you start diving into Cobalt and create your first app, you need to understand a few things.
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 a 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.
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 serveral 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 good way
- It reduces the memory usage of your app
Here is a quick comparaison 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 increase and, at some point, the whole app may be loaded in the WebView. That's wrong. That's why we made Cobalt.
Each view can be customized with native components or options.
For this, you will have to name your views into the cobalt.conf file, at the root of your www folder.
In this file you will be able to define the native controller you use for each view and options that are attached to it.
That's important. Cobalt is not a UI framework. Cobalt is a tool to display web pages, navigate between them and organize the exchanges between the native side and the web content.
It provides a set of tool to abstract the platforms and stay coherent to their user guidelines.
The web view content is up to YOU. It is your role to make the UI, keep it clean and respect the platforms guidelines for the page content.
But you can use some cool libraries like ionics or EmberJs and so on to do this for you. Just use the Cobalt navigation system instead of the one they provide.
There is no unique way to use Cobalt in your app.
You can create a Cobalt app with 100% of web code and writing 0 lines of native code!
You can create a native app and use Cobalt for a single page, or two.
Web hidden in background
You can use Cobalt as a background helper for some web tasks, like some WebRTC stuff or some calculations you don't want to rewrite on each platform.
The Cobalt WebView doesn't need to be shown on screen to work.
You can create hybrid views with, for example, a native video player and a list of tracks in a Cobalt WebView.
You can also have multiple webviews on screen. Have them in a horizontal swiping system and so on.
Creating a Cobalt application implies some changes in what you may have learned when creating websites.
You will have to use your own way to display content as HTML from your data (Have a look at HandlebarsJS, EmberJS or AngularJS).
You can also generate your HTML content from a server but you will loose the offline possibilities of a native app.
To work with your data in your Cobalt app you will have to use a storage for your currently modified data.
Cobalt provide an enhanced localStorage and a WebServices plugin to store your data offline, filter them, and so forth.
Once you've made the jump, Cobalt offers a good way to create hybrid apps that compete with full native apps.
Cobalt is in constant enhancement and there is still a lot to do, but we are facing the sun with magic sunglasses so we won't be hurt.
If you have read all this, well, thank you! And please dive into the other chapters on the home page to continue.