title slide to be used at the start of a module. developing mobile apps roland guijt @rolandguijt
TRANSCRIPT
Developing Mobile Apps
Roland Guijtwww.rmgsolutions.nl
@rolandguijt
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
Mobile Device Adoption
10x faster than PC boom
2x faster than internet boom
In 2015 mobile internet usage will be greater than desktop internet usage
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
Mobile Apps
Applications that run on a phone or tablet that can be downloaded from an online store.
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
Objectives
The Three Choices
Cordova
Xamarin
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
The Three Choices
HybridCross
PlatformFramework
Native
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
Native Apps
Apps that are specifically made for a mobile platform and run directly and only on that platform.
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
Native:How does it
work?
Each platform uses different languageObjective C/Swift for iOSJava for Android
Class/Control libraryCocoa Touch for iOSAndroid APIs
RuntimeRegulates program flow
Different tools
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
Native Apps
No code reuse across platforms
Require knowledge of
used framework
Require knowledge of
multiple languages
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
Hybrid Apps
Mobile apps that are deployed in an app store, but are actually web apps.
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
Hybrid:How does it
work?
Runs in browser Chromeless
All HTML, CSS and javascript stored locallyNot on a server
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
Hybrid Mobile Apps
Code and UI reusable across
platforms
Based on Apache Cordova
Use existing web skills
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
Apache Cordova
An open source collection of javascript device APIs.
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
CordovaDistributions
PhoneGapBy Adobe
AppBuilderBy Telerik (aka Icenium)
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
Demo
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
Cross Platform Framework AppsNative mobile apps that are developed using a framework which enables the sharing of code between mobile platforms.
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
How does itwork?
Uses a runtime or interpreterDifferent in each productDeployment depends on platform
One programming languageFor all platforms
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
Cross Platform Framework Apps
Specific parts reusable across
platforms
Require knowledge of the mobile platform
Use existing language skills
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
Cross PlatformFrameworks
XamarinBy Xamarin
TitaniumBy Appcelerator
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
SupportedPlatforms
Separate products
Integrate in IDE
Android, iOS
Xamarin
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
RuntimeC#
Mono .NET implementation
Just in time/Ahead of time
Xamarin
Footprint
Performance
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
DeviceCapabilities
Exposed by C# classesDifferent for each platform
Xamarin
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
Tools Xamarin Studio
Visual Studio
Xamarin
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
AvailabilityCommercial
Limited free edition
Subscription
Xamarin
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
Demo
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
FormsShare UI Code
XAML support
Translates to native controls
Xamarin
Not suitable for all apps
Call native code using DependencyService
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
Demo
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
HybridCross
PlatformFramework
Native
Language
Javascript
Many libraries and frameworks
Hard to structure
Titanium: javascriptNot all libraries can be used
Xamarin: C#Powerful
MoreTabris: Java
Depends on platform
iOS: Objective C or Swift
Android: Java
Windows Phone: C#
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
HybridCross
PlatformFramework
Native
UI
HTML
Many tools
Use framework or vanilla js to manipulate
Titanium: XMLDesigner in IDE
Xamarin: Platform specific or Xamarin Forms
Other..
iOS: XMLDesigner in Xcode
Android: XMLDesigner in IDE
Windows Phone: XAMLDesigner Visual Studio/Blend
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
HybridCross
PlatformFramework
Native
Debugging
Harder than the others, recently got way better with VS!
Console messages or F12 tools
Full blown debugger in IDE
Full blown debugger in IDE
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
HybridCross
PlatformFramework
Native
Performance
Depends on browser
Render speed somewhat slower
Extra abstraction layer could take some extra time
Highest possible performance
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
HybridCross
PlatformFramework
Native
Footprint
Wrapper adds size to the package
Relatively big
Less important forlarger apps
Smallest possible footprint
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
HybridCross
PlatformFramework
Native
Tools
Your favorite IDE
Appbuilder has own IDEs and Visual Studio plugin
Fixed IDE per product
Xamarin has Visual Studio plugin
iOS: xCode on Mac
Android: Many choices
Windows Phone: Visual Studio
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
HybridCross
PlatformFramework
Native
Costs
Cordova and Phonegap are free
Appbuilder: $228-$1188/year for all platforms
Titanium is free, extended/supported version available
Xamarin: $299-$1899/year per platform
Free
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
HybridCross
PlatformFramework
Native
Code Sharing
100% code sharing
Can detect platform in javascript
Titanium and Xamarin: 100% sharing or UI per platform
No code sharing
Do Not Place Anything in This Space(Add watermark during editing)Note: Warning will not appear during Slide Show view.
To remove this warning from the template:1. View Slide Master2. Select topmost slide in slides pane
(Slide Master).3. Select the logo to the left and this text
box.4. Press Delete.
Thanks!
Contact me: [email protected]
@rolandguijt