How Cross Platform works in native world

Cross Platform:

Cross platform means here single application or codebase run on multiple mobile platform(iOS, android).

Today most of the organization focusing on mobile world. When an organisation take first step in the domain the very first question in there mind is.

Should i go with native development or cross platform?

There Decision based on the some factors

Native (Pros): 

1) Native Look and feel

2) High Performance

3) No restriction over device capability (Like camera, Bluetooth) etc

and Many more

Native (Cons):

1) More resources require to develop native application. i.e more money

2) Training require for each platform.

CrossPlatform (Pros):

1) Developer need to know only single technology or language (Javascript and Html). 

2) Less resources require for developing and maintaining application.

3) Distribution can be done like other native apps (App store, Play store) 

  

 CrossPlatform (Cons):

1) Application developed using HTML have look and feel like web pages.

2) Some Platform provides native look and feel like Titanium, Kony, But when we need to focus on performance like execution time, memory handling then again we need to look into native side.

3) There are some restriction on device capability.

4) Major drawback in case of cross platform frame work is we cannot to be up to date with the technology coming. 

Types of Cross platform mobile application:

HTML and CSS based Applications:

These are like a mobile website created with HTML and CSS. Phone-gap is most popular platform in this category. Such apps have poor performance because javascript component are two heavy and slow for mobile application. They provide some native capability like camera, open url etc. How they provide native access will be discuss in later part.

Hybrid cross platform Applications:

Mobile operating system provides support to javascript through javascript engine. These platform use this support to develop the framework for application. In case of iOS this engine is javascript core and android has V8. 

The advantage of these applications over HTML is it provide you native look and feel. All the component will be native. But the interaction between javascript and native is little bit slow. Also you do to have access all the api of native until it is exposed by the framework developer. Next section will explain how you can expose or develop this kind of framework for iOS.

How these application interact with native environment:

HTML and CSS based Applications:

A HTML based application will run in a web view. All your code render in the web view. You do not have direct access to device capability. Following is the architecture for a HTML based application:

So the question is how your application launch the camera application from the web view. If we only have a web view to render the code. In iOS here is the trick:

There is abstract class called NSURLProtocol which can capture all the request going from your application. So you can redefine all the network handling for your application using this class.

We will implement this class to open a camera from a web-view.

Create a project and add a web view to your application. Crate a class let be "CrossURLProtocol" and inherit it from NSURLProtocol.

Register the Protocol with the loading system:

AppDelegate.m

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [NSURLProtocol registerClass:[CrossURLProtocol class]];
    return YES;
}

CrossURLProtocol.m

Override the method :

These method will be called every time whenever a request is made from your application and you are returning No here. That means default loading system will handle this. If you want to handle it yourself then you must return Yes. 

+ (BOOL)canInitWithRequest:(NSURLRequest *)request {
    return NO;
}

Let suppose you want to open camera from the application then you must write the code in following manner:

+ (BOOL)canInitWithRequest:(NSURLRequest *)request {

    NSString* urlString = request.URL.absoluteString;

    if([urlString hasPrefix:@"Camera:"]){

        //Write a code to open camera

        return NO;

    }

    return NO;

}

Now whenever you open url in html with camera prefix:

"window.location.href = 'Camera://'"

This will open the camera in the application. So in this manner you can write your own protocol and provide a framework for the mobile web application.

Hybrid cross platform Applications:

An application written in javascript language which interact with native component at run time through javascript engine. You can access all the device capability just need to write code to handle that. Look and feel of application is like a native application.

So now question is how to develop framework which can support this type of application. Create a application in Xcode and add a "JavaScriptCore.framework" in the application.

Create a class JavascriptHandler indoor project.

Make sure your class adopt the protocol JSExport.

Import the header file in your class:

#import <JavaScriptCore/JavaScriptCore.h>

JavascriptHandler.h

@interface JavascriptHandler : NSObject<JSExport>

- (NSString*) testName;

@end

JavascriptHandler.m

@implementation JavascriptHandler

- (NSString*) testName{

    return @"java Script Core Test";

}

@end

Now in your main view controller add a webview and try to load any simple html page with single button.

ViewController.m

In web view Delegate method:

- (void)webViewDidFinishLoad:(UIWebView *)webView

{

    // get JSContext from UIWebView instance

    JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

    

    // register JavascriptHandler class

    context[@"JavascriptHandler"] = [JavascriptHandler class];

  

}

Now try to call the method "JavascriptHandler.testName()" from your html page on button click. It will return the same value. i.e it . You learn first step to build a framework. In this manner you can provide all the API to javascript developer for native handling.

There are other Hybrid platform like Xamarin which use C#language to develop the application for cross platform. Approach is totally different in that case. It works on compile time.