Skip to main content

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.   
  

  

Comments

Post a Comment

Popular posts from this blog

What does enable bitcode do in Xcode

Background: Now days compilation process for any language is divided into two parts and same is applicable for objective c. Frontend Compiler (Clang) Backend Compiler (LLVM) Frontend Compiler (Clang):  Responsibility of front-end compiler is to take a source code and convert into intermediate representation (IR).  In case of clang it is LLVM IR.  Backend Compiler(LLVM):  Responsibility of backend compiler is to take a IR as input and convert into object code. LLVM input is bitstream of LLVM IR (Bitcode) and output is sequence of machine instruction(Object code). Each  cpu or processor has different set of  M achine   instruction, So  LLVM output is CPU dependent or it can be executed on specific CPU only.   There may be question in your mind that  1) What is the need to divide into these phases? 2) What is LLVM IR? Can we see the LLVM IR as Output? What is the need to divide into these phases? It is beneficial for both the programming language designer a
Post a Comment
Read more

Asynchronous Request with NSOperationQueue

Today post is about how to run a asynchronous task in NSOperationQueue.  Generally we do not run a Asynchronous task in NSOperationQueue. It is also not recommended for any programmer to do that. This post is only for learning purpose what will happen if we schedule a asynchronous task in a queue and how can we complete that task:). So let us move to the learning: NSOperationQueue: In iOS NSOperationQueue is a class, which provide a way to perform operation concurrently. We also have others way to perform concurrent operation: 1) GCD 2) NSThread 3) pThread NSOperationQueue is a wrapper on GCD, which provides a very convenient way to execute operation concurrently. To create a Queue for Operation you have to simply allocate a object of the class: NSOperationQueue * opertionQueue = [[ NSOperationQueue alloc ] init ]; For this post let suppose you are making a queue to handle all Http request in your application. So i want to create a queue in Handler class
Post a Comment
Read more

Everything about BLE with iOS Part1 (Introduction)

In this article we will learn how to turn your iPhone to behave as peripheral (who has data to send) or central (who receive the data). What is BLE (Bluetooth Low energy device) ? Bluetooth LE is a wireless personal area network technology like its previous incarnation, Classic Bluetooth. It can be use to transfer and receiving of the data. What is difference between Classic and LE ? BLE has low power consumption and low data transfer rate. BLE can support large number of slaves. On the other hand Classic (3.0) support maximum 7 devices connectivity. Unique feature of BLE is advertising  functionality,  So other devices can scan,  connect and  receive data from the advertising BLE device. Other difference is in classic you need to pair the devices first for the communication. Terms: Peripheral:  It is device which advertise the service. In client-server architecture form we can say peripheral is server which has data to send to client. The basic difference i
Post a Comment
Read more