Download as PDF, PPTX
Uploaded byPhuong Hoang Vu
Cross platform mobile approaches
This document discusses cross-platform mobile development. It defines cross-platform development as developing applications that can run on multiple platforms simultaneously. The document then explores different cross-platform approaches like web apps, hybrid apps, interpreted apps, cross-compiled apps, and generated apps. It provides details on how each approach works and when they are involved in the development process. The document also compares the different approaches based on factors like native access, performance, cost, and tools. It concludes that cross-platform options are not fully mature but can be good choices for prototypes, existing web apps, or as a shortcut to the market.
More Related Content
![[UX Series] 5 - Navigation](https://cdn.slidesharecdn.com/ss_thumbnails/navigation-150911112601-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
![[UX Series] 4 - Contrast in design](https://cdn.slidesharecdn.com/ss_thumbnails/contrastindesign-150911111617-lva1-app6892-thumbnail.jpg?width=640&height=640&fit=bounds)
![[UX Series] 2 - Clean design. Less is more](https://cdn.slidesharecdn.com/ss_thumbnails/ak7pcxfzs9q3y6ywjy24-signature-085edba094deb1097db5eeb63e43eae4848440a0bb65a4aa426f2323e93c2199-poli-150828120514-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
![[UX Series] 1b - 12 standard screen layouts](https://cdn.slidesharecdn.com/ss_thumbnails/enrwwps7midupojbmwj1-signature-085edba094deb1097db5eeb63e43eae4848440a0bb65a4aa426f2323e93c2199-poli-150828120514-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
![[UX Series] 3 - User behavior patterns and design principles](https://cdn.slidesharecdn.com/ss_thumbnails/vmm42awvqzihoupsjjkf-signature-085edba094deb1097db5eeb63e43eae4848440a0bb65a4aa426f2323e93c2199-poli-150828120514-lva1-app6892-thumbnail.jpg?width=640&height=640&fit=bounds)
![[UX Series] 1 - UX Introduction](https://cdn.slidesharecdn.com/ss_thumbnails/uxintroduction-150804131237-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
![[UX Series] 6 - Animation principles](https://cdn.slidesharecdn.com/ss_thumbnails/uxseries6-animationprinciples-150918113253-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Cross platform mobile approaches
![[IJCT-V3I2P36] Authors: Amarbir Singh](https://cdn.slidesharecdn.com/ss_thumbnails/ijct-v3i2p36-160609073434-thumbnail.jpg?width=640&height=640&fit=bounds)
Cross platform mobile approaches
- 1. Cross-platforms for MobileDevelopment Vũ Phượng Hoàng 08/2013
- 2. Content • What iscross-platforms development? • Why do we need cross-platforms? • How to go with cross-platforms? • Comparisons • Conclusions • Q & A • Resources
- 3. What is cross-platformsdevelopment? • Develop for multiple platforms • Simultaneous (or not) • Mobile platforms: • Android • iOS • Windows Phone
- 4. Why do weneed cross-platforms? • More customers, more $$$ • Short time to market • Synchronization • Simpler workflow • Can be less headache for developers?
- 5. How to gowith cross-platforms?
- 6. Plan Business Logic Code Compile Test Deploy Whendo cross-platforms participate?
- 7. Plan Business Logic Code Compile Test Deploy Whendo cross-platforms participate? Web App Hybrid App Interpreted App
- 8. Plan Business Logic Code Compile Test Deploy Whendo cross-platforms participate? Web App Hybrid App Interpreted App Cross-Compiled App
- 9. Plan Business Logic Code Compile Test Deploy Whendo cross-platforms participate? Web App Hybrid App Interpreted App Cross-Compiled App Generated App
- 10. Java Code-Base ObjectiveC Code-Base C# Code-Base (Java) Binary (Objective C) Binary (C#) Binary Back-End compile compile compile Native App Eclipse XCode Visual Studio Android iOS Windows Phone
- 11. Native App Workflow Youmust develop each by each platform…
- 12. Eclipse Code in AndroidSDK BuildSetup UI Test Native App Workflow
- 13. Eclipse Code in AndroidSDK BuildSetup UI Test XCode (Must be in MAC OS) Code in iOS SDK BuildSetup UI Test Native App Workflow
- 14. Eclipse Code in AndroidSDK BuildSetup UI Test XCode (Must be in MAC OS) Code in iOS SDK BuildSetup UI Test Visual Studio (Must be in Windows) Code in WP SDK BuildSetup UI Test Native App Workflow
- 15. Now, let’s havea look at cross-platforms methods!
- 16. Plan Business Logic Code Compile Test Deploy Cross-platformsat “Code” stage Web App Hybrid App Interpreted App
- 17. Browser Common Front-End Common UI Back-End use render Resources@ Server Server-side WebApp (Normal Website) Android iOS Windows Phone
- 18. Eclipse Code in JavascriptBuildSetup UI Test Test Test Test & Tweak Server-side WebApp Workflow
- 19. Client-side WebApp (LocalHTML files) Browser Common Front-End Common UI Back-End use render Resources @ Local Android iOS Windows Phone • How to make it look like Native?
- 20. Browser Front-End (e.g: ) Back-End use render Resources@ Local Client-side WebApp (Local HTML files) Android iOS Windows Phone Android UI iOS UI Windows Phone UI
- 21. Eclipse Code in BuildSetupUI Test Test Test Test & Tweak Client-side WebApp Workflow
- 22. Problems with WebApp •Home screen shortcut? • Native access? Native Web View (Browser) Back-End Javascript Code-Base compile
- 23. Wrapper (e.g PhoneGap) Web View(Browser) Back-End Java Library Objective C Library C# Library Javascript Code-Base use use use compile Javascript Bridge use Hybrid App (Website in a wrapper) Android iOS Windows Phone
- 24. Hybrid App Workflow Eclipse CodeinSetup UI Test Test Test Test & Tweak Test Ripple Build Build Build
- 25. Eclipse Code inSetup UI Test Test Test Test& Tweak Test Ripple Download Hybrid App Workflow (More convenient build version) PhoneGap Build
- 26. Javascript (or Lua)Code-Base Java Bridge Objective C Bridge C# Bridge Back-End Abstract Layer (e.g: ) use use useuse Interpreted App (Abstract API Layer) Android iOS Windows Phone
- 27. Titanium Studio (Eclipse-based) CodeinSetup UI Test Test Test Build Build Build Interpreted App Workflow
- 28. Cross-platforms at “Compile”stage Plan Business Logic Code Compile Test Deploy Cross-Compiled App
- 29. Cross-compiled App (MultipleCompilers) This is what they advertise …
- 30. C# code (Java) Binary(Objective C) Binary (C#) Binary Back-End Android Compiler iOS Compiler WP Compiler compile compile compile Cross-compiled App (Multiple Compilers) Android iOS Windows Phone
- 31. Cross-compiled App (MultipleCompilers) And this is what I had to do…
- 32. Shared C# code (Java)Binary (Objective C) Binary (C#) Binary Back-End Android Compiler (e.g Xamarin.Android) iOS Compiler (e.g Xamarin.iOS) WP Compiler compile compile compile C# Code for Android C# Code for iOS C# Code for WP use use use Cross-compiled App (Multiple Compilers) Android iOS Windows Phone
- 33. Xamarin Studio (VisualStudio-based) Code Shared C#Setup UI Test Test Test BuildCode in C# Xamarin.Android Re-use Shared C#Setup UI BuildCode in C# Xamarin.iOS Re-use Shared C#Setup UI BuildCode in C# Normal C# Cross-compiled App Workflow
- 34. Plan Business Logic Code Compile Test Deploy GeneratedApp Cross-platforms at “Logic” stage
- 35. Java Code-Base ObjectiveC Code-Base C# Code-Base (Java) Binary (Objective C) Binary (C#) Binary Back-End Business Logic Generated App (Code Generator) Android iOS Windows Phone Android iOS Windows Phone • Why not utilize “Business Logic”? compile compile compile
- 36. Java Code-Base ObjectiveC Code-Base C# Code-Base (Java) Binary (Objective C) Binary (C#) Binary Back-End Code Generator (e.g: Applause) Model (DSL) Generated App (Code Generator) Android iOS Windows Phone Android iOS Windows Phone compile compile compile
- 37. Generated App Workflow XText(Eclipse-based) ‘Code’ inSetup UI Test Test Test Build Build Build
- 38. Method SDK Native Access Perfor- mance Off -line Sync Human Resource Tools TimeEase Native App #1 #1 #1 #6 3 teams Free? 3 unit #2 Web App Sencha iUI #6 #5 #6? #1 1 team Free 1 unit #1 Hybrid App PhoneGap Flash Trigger.IO #3 #5 #5 #2 1,5 team Free 1,5 unit #3 Interpreted App Titanium RhoMobile #3 #4 #1 #5 1,5 team Free? 1,5 unit #4 Cross Compiling App Xamarin Marmalade Strawberry #3 #3 #1 #2 1,5 team $$$ 1,5 unit #5 Generated App Applause #2 #2 #1 #2 1 team + 3 teams Free 1 unit + 3 unit #6 Comparisons
- 39. Comparisons – Whouses which? • Native App: • Web App: • Hybrid App: • Interpreted App: • Cross-Compiled Game: • Generated App:
- 40. Comparisons – DemoStatistics (Lower is better) 0 5000 10000 15000 20000 25000 30000 35000 Native App Server-side Web App Client-side Web App PhoneGap Titanium
- 41. Native App WebApp PhoneGap Titanium Native Access Full API None Depend on framework Depend on framework Performance Best Worst – Depend on browser Worst – Depend on browser Good Cost Depend on # of platforms 1 team + quick development 1 team + quick development 1 team but Coded UI? Doc & Support Full documentations Large communities Full documentation Largest communities Good documentation Open forum Have documentation Open forum GUI Design Acceptable Great & Many Great & Many 25$ for ForgedUI 20$ for VisualUI Test Has debugging tools Has profiling tools Great debugging tools Great profiling tools Great debugging tools Great profiling tools Has debugging tools Has profiling tools Short list
- 42. Conclusion (Now what?) •Cross-platforms for developing mobile applications are not mature yet • Wise choices: • Web App for simple products (prototype?) • Native App for complex products • Hybrid App for existed Web App • Interpreted App is the market shortcut
- 43. • Q: Howabout native libraries? A: Plugin Bridge for Cordova-based frameworks (OTT application demo) Titanium Modules for Titanium • Q: Can I trust them? A: Behind PhoneGap is Adobe Titanium is trusted by ebay, Mitsubishi Xamarin is managed by GNOME co-founders • ... Q & A
- 44. • Quick comparison:http://www.markus- falk.com/mobile-frameworks-comparison-chart/ • Google, SlideShare are your friends • And I am, too :D More resources
- 45. Thank you forlistening! vuphuonghoang88@gmail.com