Cross Platform Mobile Developmemnt
1 like1,109 views
- Write code once and deploy to multiple platforms like iOS, Android and Windows Phone. - Use tools like Xamarin, PhoneGap, React Native etc to write apps using shared codebase like C#, JavaScript that compile to native apps. - Gain access to core mobile capabilities like contacts, camera while retaining a native user experience. - Reduce development costs and time to market by avoiding separate development for each platform. - Downside is need to maintain one codebase for multiple platforms and lack of full native capabilities and performance.
![var root = Titanium.Filesystem.resourcesDirectory;
var win = Titanium.UI.createWindow({
orientationModes : [Ti.UI.PORTRAIT],
backgroundImage : root + 'images/background.png'
});
var loginBtn = Ti.UI.createButton();
loginBtn.addEventListener('click',function() {
var homeWin = require('../pages/home').getHomeWin;
var homePage = new homeWin();
homePage.open();
win.close();
});
win.add(loginBtn);](https://image.slidesharecdn.com/cpmd1-130415060222-phpapp01/85/Cross-Platform-Mobile-Developmemnt-46-320.jpg)
Cross Platform Mobile Developmemnt
- 1. Cross-Platform Mobile Development Write Once.. Run Everywhere.. Any device..
- 2. Soutom Dhara [email protected] Soutom.dhara @soutom Soutom.wordpress.com
- 3. Cell phone usages is ubiquitous
- 4. Growth of the mobile web 120 100 80 52% 60 "Desktop" 32% "Mobile" 40 12% 3% 20 0 2009-04 2009-12 2010-08 2011-04 2011-12 2012-08 2008-12 2009-08 2010-04 2010-12 2011-08 2012-04 Source : http://gs.statcounter.com/#mobile_vs_desktop-IN-monthly-200812-201208
- 5. I want a Mobile App
- 6. Growth of Top 5 mobile operating system 45 40 35 30 "SymbianOS" "iOS" 25 "Android" "BlackBerry OS" "Samsung" 20 15 10 5 0 2008-12 2009-04 2009-08 2009-12 2010-04 2010-08 2010-12 2011-04 2011-08 2011-12 2012-04 2012-06 http://gs.statcounter.com/#mobile_os-ww-monthly-200812-201206
- 8. Mobile Platforms Operating 2011 Market 2015 Market System Share Share Android 38.9% 43.8% BlackBerry 14.2% 13.4% iOS 18.2% 16.9% WP7 / WM 3.8% 20.3% 2015 Other 24.9% 5.6% 2011 Total 100% 100% 2011 iOS Android 2015 BlackBerry WP Other
- 9. The Native Experience IDE Emulator Store Consumer IDE Emulator Store Consumer IDE Simulator Store Consumer
- 11. Native App Web Server Ruby/ java Native Http Request App External Web Service Files Images and Database other Device Backend 3rd Party Execute UI & some Execute central Application logic application logic
- 12. Demo
- 13. Native App : Advantages & disadvantages Production Learning Curve : Easy, Great Number of Tutorials + Libraries Tools : Great IDE with good debugging supports Monetization : Direct access to market place / app store Usage Scenario Data Driven App Rich Media User Experience Hardware : Direct Access to all Sensor / APIs User Interface Offline Capability : Available( SQL database / Flat File) Platform IOS Windows Phone 7.x Android Others... Cost for cross – platform : Vendor Lock-in, device specific optimization
- 15. Multi-plarform Apps ● Is this only for rich guys ● Time to complete a app
- 16. 5 Approaches ● Mobile Web ● Client Side Web ● Hybrid App ● Interpreted App ● Cross Compiling
- 17. The Mobile Web
- 18. Server-Side Web Web Server Ruby/ java Web Http Request Browser External Web Service Files Images and other Database Device Backend 3rd Party Executes UI & some Executes UI & central Application logic Client side logic
- 19. Frameworks / Toolkits Zurb Foundation http://foundation.zurb.com/ Twitter Bootstrap http://twitter.github.com/bootstrap/
- 20. Demo
- 21. Mobile Web : Advantages & disadvantages Production Learning Curve : Easy, Great Number of Tutorials + Libraries . Tools : Use any editor of your choice. Monetization : No App Store destribution. Usage Scenario Data Driven App Rich Media : Inferior Performance User Experience Hardware : Limited access of H/W features & APIs User Interface : Fancy UI possible, but platform specific style required Offline Capability : Available( SQL database / Flat File) Platform iOS Windows Phone 7.x (Mango) Android Others (Responsive Design) Cost for cross – platform : Low, plain HTML run on any type of browser
- 22. Client-Side Web
- 23. Client-Side Web Web Browser Web Server JavaScript Ruby/ Http java Request External Web Service Files Images and Images and other other Database Files Images and other Database Device Backend 3rd Party Executes UI & some Only central Application logic Application logic
- 25. Demo
- 26. Client-Side Web : Advantages & disadvantages Production Learning Curve : Easy, Great Number of Tutorials + Libraries . Tools : Use any editor of your choice. Monetization : No App Store distribution Usage Scenario Data Driven App Rich Media : Inferior Performance User Experience Hardware : Limited access of H/W features & APIs User Interface : Mostly iOS like UI library Offline Capability : HTML 5, Otherwise Limited Platform iOS Windows Phone 7.x (Mango) Android Others (Responsive Design) Cost for cross – platform : Low, plain HTML run on any type of browser
- 27. Hybrid Apps
- 28. Hybrid Apps Native App Web Server Native Code Ruby/ http:// http:// java External Interpreter Web Service http:// Bridge Files JavaScript Images and other Database Device Backend 3rd Party Executes UI & some Only central Application logic Application logic
- 30. Demo
- 31. Hybrid Apps : Advantages & disadvantages Production Learning Curve : Easy, Great Number of Tutorials + Libraries . Tools : Use any editor of your choice / commercial tools. Monetization : App Store distribution Usage Scenario Data Driven App Rich Media : Inferior Performance User Experience Hardware : Access to most H/W features & many API available User Interface : Huge effort required to match native UI Offline Capability : Platform iOS Windows Phone 7.x (Mango) Android Others (Responsive Design) Cost for cross – platform
- 32. Interpreted Apps
- 33. Interpreted Apps Native App Native APIs http:// Web Server API API API API API API API API Ruby/ java Abstraction Layer Abstraction Layer http:// Interpreter Files Images and other Database Database Database Application Application Backend Script Script Files Files Device Executes UI & some Client side logic Only central Application logic
- 35. Demo
- 36. Interpreted Apps : Advantages & disadvantages Production Learning Curve : Specific API, Great Number of Tutorials + Libraries . Tools : IDEs, including debugger Monetization : App Store distribution Usage Scenario Data Driven App User Experience Hardware : Access to H/W & API available, wrapped with specific API User Interface : truly native widgets Offline Capability Platform IOS Windows Phone 7.x Android Others Cost for cross – platform
- 37. Cross Compiling Image found at : http://www.flickr.com/photos/danholton/2853935782/sizes/m/in/photostream/
- 38. Cross Compiling (Mono) Native UI MonoTouch(iOS) (iOS) App (iOS) iOS MonoDroid UI (Android) (Android) (Android) Native Mono compiler App UI (wp7) (wp7) Android Core .NET RT Native (WP7) (shared) (shared) App C# MSIL compiler WP7 Backend
- 40. Cross Compiled Apps : Advantages & disadvantages Production Learning Curve : New tool chain (take getting used to) Tools : IDEs, but debugging in target environment. Monetization : App Store distribution Usage Scenario Data Driven App Rich Media : No partial supports User Experience Hardware : Access to H/W & API available, wrapped with specific API User Interface : Truly native widgets. Offline Capability : Platform iOS Windows Phone 7.x (Mango) Android Others (Responsive Design) Cost for cross – platform
- 41. Production Native Web Client-Side Hybrid Interpreted Cross web Compiled Learning Curve Tools Monetization Usages Scenario Data-driven App Rich Media User Experience Hardware User Interface Offline capability Platforms iOS Android WP7 Others Cost for cross platform
- 42. Questions
- 44. Advantages... Need to Know: Javascript , HTML, CSS, Ruby/ Python / PHP Supported OS for Mobile Apps Supported OS for Desktop Apps Native UI Open Source Full Access : camera, gps, local file system, phone book, more ….
- 45. Your Application Your Application Optional Optional UI API Phone API UI API Phone API Module Module Javascript – Objective C Bridge Javascript – Java Bridge iPhone OS Android OS Native iPhone APP Native Android APP Your Application UI API Phone API Optional Desktop supports Module Ruby , php, Python Javascript – Ruby - Python Bridge to OS and Javascript Windows OS – Mac OS – Linux OS
- 46. var root = Titanium.Filesystem.resourcesDirectory; var win = Titanium.UI.createWindow({ orientationModes : [Ti.UI.PORTRAIT], backgroundImage : root + 'images/background.png' }); var loginBtn = Ti.UI.createButton(); loginBtn.addEventListener('click',function() { var homeWin = require('../pages/home').getHomeWin; var homePage = new homeWin(); homePage.open(); win.close(); }); win.add(loginBtn);
- 47. var xhr = Titanium.Network.createHTTPClient(); xhr.onerror = function(e) { // Do some thing to notify the user }; xhr.open("POST", "http://abcd.com/users/login"); xhr.setRequestHeader("content-type","application/json"); var param = { "user_name" : "soutom", "password" : "mindfire", }; xhr.send(JSON.stringify(param)); xhr.onload = function() { if (this.status == '200') { // Success Block }else{ // Error Block } };
- 48. Questions
- 49. Thank You