Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Hybrid application development


Published on

The presentation I prepared for AndroidDeveloperDays Ankara’12.

Published in: Technology
  • Be the first to comment

Hybrid application development

  1. 1. Hybrid ApplicationDevelopment Engin Yağız Hatay Software Developer
  2. 2. Who am I ?Engin Yağız• Computer Engineer• Full-Time software developer• Hybrid application developer
  3. 3. Outline• Ways of building an App…• Hybrid Application ?• Pros & Cons (Native/Web/Hybrid Apps)• JS – Native Communication & Websocket• Hybrid Frameworks / PhoneGap• How to debug ?• Who tried ?• The Future
  4. 4. Ways of building an App…Native Web HybridApplication Application ApplicationJava, HTML 5, JS-NativeObjective-C, JS, CommunicationC# … CSS 3 …
  5. 5. Hybrid Application ? • Developed with HTML5 wrapped in a native container. • No platform-specific languages like Objective-C or Java. • Can appear on app-stores • Ability to access to native capabilities (camera, microphone, contact list, or notification system)
  6. 6. Pros & Cons – (Native Application)• Better performance • More expensive to build, even for• Snappier /Smooth animations, a single platform. transitions, and faster load times. • AppStore submission/Approval• Can store more data offline Process• Can be featured and searched for • You must share a percentage with in the app store the store (30% for Apple’s App• Full access to the device’s Store, including in-app hardware and OS features purchases).• The App Store handles purchase • App updates must go through a transactions on your behalf new approval process each time.
  7. 7. Pros & Cons – (Web Application)• A single codebase which can be accessed • Interpreted code (opposed to by any browser-enabled mobile device. compiled code for native apps)• HTML/CSS/Javascript : Easier to learn than native languages like Objective-C or Java. • Don’t have full access to all the• Performance issues are becoming less of methods exposed by the device’s an issue as mobile browsers become operating system faster and their Javascript engines keep improving • Can’t be found on the app store.• No approval process needed, and updates • If you are looking to generate to the app can happen instantaneously revenue, it’s up to you to build a• No revenue sharing with an app store commerce model.
  8. 8. Pros & Cons – (Hybrid Application)• Market your app in each of the • Still subject to the store’s major mobile app stores. approval process and revenue• Gives you APIs to access some, if sharing. No instant updating. not all, of the features locked out • The app’s performance is still of the browser, such as camera, dependant on the device’s compass, contacts. Purchases are browser capabilities. managed by the App Store.
  9. 9. JS – Native Communication• “native bridge”• Different in every platform• Accomplished via WebView object on Android• Using Websocket(HTML5) is another approach. (Websocket Server : native / Websocket Client : web)
  10. 10. JS - Native Comm. On AndroidCalling native from js//Make sure that javascript is enabled in webviewWebView webView = new WebView();webView.getSettings().setJavaScriptEnabled(true);//Control android from javascript//addJavascriptInterface method adds androidControl//variable into jswebView.addJavascriptInterface( new AndroidController(), "androidControl" );
  11. 11. JS - Native Comm. On AndroidCalling native from js (cont.)//Java class that lets js to control the app through itpublic class AndroidController{ public void nativeLog(String msg) { Log .wtf("What a Terrible Failure", msg); WTF! }}//JSwindow.androidControl.nativeLog(‘We have a terriblesituation here’);
  12. 12. JS - Native Comm. On AndroidCalling js from native (cont.)//Just as simple aswebView.loadUrl("javascript:jsmethodname()");
  13. 13. Websocket• Wikipedia says : WebSocket is a web technology providing for bi-directional, full-duplex communications channels over a single TCP connection. The WebSocket API is being standardized by the W3C.• Websocket differs from TCP in that it provides for a stream of messages instead of a stream of bytes.
  14. 14. Using websocketvar webSocketClient;function connectToWebSocketServer() { webSocketClient = new WebSocket(ws://localhost:1111/some/resource/); webSocketClient.onopen = function() { alert(connection opened); }; webSocketClient.onerror = function() { alert(connection error); }; webSocketClient.onclose = function() { alert(connection closed); }; webSocketClient.onmessage = function(msg) { alert(msg:;};}connectToWebSocketServer();if(webSocketClient && webSocketClient.readyState == 1) { webSocketClient.send("Hello world!");}
  15. 15. Advantages of Websocket• WebSockets can communicate asynchronously from JavaScript to native.• WebSockets dont have a payload limit• WebSockets dont require encoding JSON strings as URL parameters• WebSockets should be faster than URL scheme navigation
  16. 16. Hybrid Frameworks• Apache Cordova (PhoneGap)• QuickConnect• Appcelerator Titanium
  17. 17. PhoneGap ACCELEROMETER• Developed by Nitobi CAMERA• Nitobi acquired by Adobe COMPASS CONTACTS• Now it is under Apache FILE Software Foundation GEOLOCATION MEDIA• Called Apache Cordova NETWORK NOTIFICATION(ALERT)(SOUND)(VIBRATION) STORAGE + PLUG-INs
  18. 18. PhoneGap – Examples<body onload="init();">function init() { document.addEventListener("deviceready", check_network, true);}function check_network() { var networkState =; var states = {}; states[Connection.UNKNOWN] = Unknown connection; states[Connection.ETHERNET] = Ethernet connection; states[Connection.WIFI] = WiFi connection; states[Connection.CELL_2G] = Cell 2G connection; states[Connection.CELL_3G] = Cell 3G connection; states[Connection.CELL_4G] = Cell 4G connection; states[Connection.NONE] = No network connection; confirm(Connection type:n + states[networkState]);}
  19. 19. PhoneGap – Examplesfunction onSuccess(acceleration) { alert(Acceleration X: + acceleration.x + n + Acceleration Y: + acceleration.y + n + Acceleration Z: + acceleration.z + n + Timestamp: + acceleration.timestamp + n);};function onError() { alert(onError!);};navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);, fail, { quality : 50});
  20. 20. Creating PhoneGap Plug-inJavapublic class MyPhoneGapPlugin extends Plugin {@Override public PluginResult execute (String action, JSONArray data, String callbackId){ PluginResult result = null; if (action.equals("getInfo")){ Log.d("MyPhoneGapPlugin ", "Plugin Called"); JSONObject jsonToReturn= create a JSONOBJECT result = new PluginResult(Status.OK, jsonToReturn); } return result;}
  21. 21. res/xml/plugins.xml<plugins><plugin name="App" value="org.apache.cordova.App"/><plugin name="Geolocation" value="org.apache.cordova.GeoBroker"/><plugin name="Device" value="org.apache.cordova.Device"/><plugin name="Accelerometer" value="org.apache.cordova.AccelListener"/><plugin name="Compass" value="org.apache.cordova.CompassListener"/><plugin name="Media" value="org.apache.cordova.AudioHandler"/><plugin name="Camera" value="org.apache.cordova.CameraLauncher"/><plugin name="Contacts" value="org.apache.cordova.ContactManager"/><plugin name="File" value="org.apache.cordova.FileUtils"/><plugin name="NetworkStatus" value="org.apache.cordova.NetworkManager"/><plugin name="Notification" value="org.apache.cordova.Notification"/><plugin name="Storage" value="org.apache.cordova.Storage"/><plugin name="Temperature" value="org.apache.cordova.TempListener"/><plugin name="FileTransfer" value="org.apache.cordova.FileTransfer"/><plugin name="Capture" value="org.apache.cordova.Capture"/><plugin name="Battery" value="org.apache.cordova.BatteryListener"/><plugin name="MyPhoneGapPlugin" value="com.myplugin.plugin"/> <plugin name="SplashScreen" value="org.apache.cordova.SplashScreen"/></plugins>
  22. 22. Creating PhoneGap Plug-inJavascriptvar CustomPlugin= function() { };CustomPlugin.prototype.getInfo = function(param,successCallback,failureCallback){ return PhoneGap.exec( successCallback, //Success callback from the plugin failureCallback, //Error callback from the plugin MyPhoneGapPlugin , //Tell PhoneGap to run which plugin getInfo, //Tell plugin, which action we want to perform [param]); //Passing list of args to the plugin};
  23. 23. Creating PhoneGap Plug-inJavascript – Invoke plug-invar successCallback = function(result){ //result is a json }Var failureCallback = function(error){ //error is error message }CustomPlugin.getInfo("", successCallback, failureCallback);
  24. 24. How to debug?• WEINRE - WEb INspector Remote• Now weinre is a part of Apache Cordova Project (PhoneGap)• iOS 5 - Enabling Remote Debugging via Private APIs in Mobile Safari
  25. 25. WEINRE • Debug Client is a traditional webkit browser. Familiar debugger view (like Web Inspector • Debug Target is the webkit- browser. • It consists of a javascript library which runs in your mobile browser along with your app. • With a little linkage to your code, this library exposes your javascript to the server for inspection and modification.
  26. 26. Debugging via• (weinre)Documentation for running weinre on your own pc :
  27. 27. iOS - Enabling Remote Debugging//in the didFinishLaunchingWithOptions method(BOOL)application:(UIApplication *)applicationdidFinishLaunchingWithOptions:(NSDictionary*)launchOptions// Enable Safaris Web Inspector for iOS 5[NSClassFromString(@"WebView")_enableRemoteInspector];Start debugging at http://localhost:9999 in safari Warning! – Do not forget to remove the remote inspector enabling code line before submitting your app into the app-store unless you want to get your app rejected. (Reason: Non-public API usage)
  28. 28. Who tried ?• Linkedin - 95% Web – WS/Url Scheme Lightweight libs (backbone.js-underscore.js) smooth infinite scrolling offline storage• Facebook• Cnet• HistoryCalls 
  29. 29. The Future• Better Support for HTML5• More optimized js engines• Better rendering• More powerful mobile devices• Ease of development• Cross-Platform• Games
  30. 30. Thank You! Engin Yağız Hatay
  31. 31. References•• properly-call-ObjectiveC-from-Javascript/• bridge-and-websockets••• 445e-8ceb- 97a2140866a9/entry/debugging_mobile_javascript_with_weinre?lang=en• con