vs005 - cordova vs nativescript€¢ apache cordova was originally called phonegap build by nitobi...
TRANSCRIPT
presenta
www.wpc2015.it – [email protected] - +39 02 365738.11 - #wpc15it 1
VS005 - Cordova vs NativeScript
Fabio Franzini – Microsoft MVP
Agenda
• Apache Cordova
• Telerik NativeScript
• Cordova VS NativeScript
www.wpc2015.it – [email protected] - +39 02 365738.11 - #wpc15it 2
Apache Cordova is a platform for building natively installed mobile applications using HTML, CSS and JavaScript
Apache Cordova
• Apache Cordova was originally called Phonegap build by Nitobi
• Open-source & free software from the beginning (MIT License), Apache License now
• Nitobi then aquired by Adobe and donated the PhoneGap codebase to the Apache Software Foundation (ASF)
• PhoneGap is still a product of Adobe. It is a distribution of Apache Cordova.Think of Apache Cordova as the engine that powers PhoneGap.
History
Cordova Architecture
• The user interface for Apache Cordova applications is created using HTML, CSS, and JavaScript.
• The UI layer is a web browser view that takes up 100% of the device width and 100% of the device height.
• The web view used by application is the same web view used by the native operating system iOS: Objective-C UIWebView class
Android: android.webkit.WebView
WP7: WebBrowser
WP8: WebBrowser control (Internet Explorer 10)
BlackBerry: WebWorks framework
Apache Cordova Application’s User Interface
Supported Platforms and API
• Accelerometer
• Camera
• Capture
• Compass
• Contacts
• File
• GeoLocation
• Media
• Network
• Notification
• Storage
Updated list:
http://wiki.apache.org/cordova/PlatformSupport
• Tools for development
Any HTML & JS editor
Platform SDK e.g. Android SDT, Android SDK, BB SDK, Xcode, Visual Studio.
Platform Emulator (usually provide along with SDK)
JS/HTML GUI Mobile framework e.g. JQuery, Sencha Touch, dojo Mobile, Ionic
Browser e.g. Firefox with Bugzilla extension, Chrome Browser
Development using Cordova
<!DOCTYPE html><html>
<head><title>Device Properties Example</title><script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script><script type="text/javascript" charset="utf-8">// Wait for Cordova to loaddocument.addEventListener("deviceready", onDeviceReady, false);
// Cordova is readyfunction onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError);}
// onSuccess Geolocationfunction onSuccess(position) {
var element = document.getElementById('geolocation');element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +'Altitude: ' + position.coords.altitude + '<br />' +'Accuracy: ' + position.coords.accuracy + '<br />' +'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br />' +
}
// onError Callback receives a PositionError objectfunction onError(error) {
alert('code: ' + error.code + '\n' + message: ' + error.message + '\n');}</script>
</head><body>
<p id="geolocation">Finding geolocation...</p></body>
</html>
Code Example
A runtime for building and running native iOS, Android, and Windows Phone apps
with a single, JavaScript code base
What is NativeScript?
!=
!=
• Its Open Source Free of Charge and available to anyone on GitHub (https://github.com/NativeScript/)
• Its Easy Code with JavaScript, Style with CSS
Create True Native Experience
• Its Powerful X-Platform UI Abstractions
Shared Busines Logic & Data Models
Third Party Native Libraries
Why NativeScript ?
How does it Work ?
NativeScript Android example
Output:
NativeScript iOS example
• NativeScript runs JavaScript on a JavaScript VM JavaScriptCore on iOS
V8 on Android
JavaScriptCore on Windows
NativeScript and JS VMs
• NativeScript uses reflection to build a list of available APIs for each platform.
• For optimal performance, this metadata is pre-generated, and injected into the app package at build time.
• V8/JavaScriptCore have C++ callbacks for JS function calls and property accesses.
• The NativeScript runtime uses those callbacks to translate JS calls into native calls.
• On iOS, you can directly call Objective-C APIs from C++ code.
• On Android, NativeScript uses Android’s JNI (Java Native Interface)
Invoking native APIs
• NativeScript-provided modules that provide cross-platform functionality.
• There are dozens of them and they’re easy to write yourself.
• TNS modules follow Node module’s conventions (CommonJS).
Cross Platform Modules: TNS modules
TNS file module
HTTP module example
Two ways to use NativeScript
• Backend-as-a-service Push notifications, cloud data, file storage, and more
• Analytics
• AppBuilder Cloud builds (build iOS apps on Windows, Windows Phone apps on a Mac)
NativeScript debugging and tooling
• Automated app testing
• Integrated in Visual Studio
• And more!
• http://telerik.com/platform
Telerik Platform
• Free and open source
• https://github.com/nativescript/nativescript-cli
• Android require JDK, Apache Ant, Android SDK
• iOS require Xcode, Xcode CLI tools, iOS SDK
ios-sim npm package
• https://github.com/nativescript/nativescript-cli#system-requirements
NativeScript CLI
Starting a new project and Running
Project Structure
app.js
• XML markup structure
• CSS for style
• Elements (e.g. <Page>, <Label>) are TNS modules
Pages
Data binding
www.wpc2015.it – [email protected] - +39 02 365738.11 34
Apache Cordova Telerik NativeScript
UI HTML + CSS Native Components
Native API Custom PlugIn Native mapping in JavaScript
Supported Platforms • Android
• iOs
• Winddows
• + 6 other platforms
• Android
• iOS
• Windows
(coming soon)
Cordova VS NativeScript
Contatti OverNetEducation
OverNet [email protected]
www.overneteducation.it
Tel. 02 365738
@overnete
www.facebook.com/OverNetEducation
www.linkedin.com/company/overnet-solutionswww.wpc2015.it
www.wpc2015.it – [email protected] - +39 02 365738.11 - #wpc15it 37