VS005 - Cordova vs NativeScript

Size: px

Start display at page:

Download "VS005 - Cordova vs NativeScript"

Kelly Porter
6 years ago
Views:

1 presenta VS005 - Cordova vs NativeScript Fabio Franzini Microsoft MVP info@wpc2015.it #wpc15it 1

2 Apache Cordova Telerik NativeScript Cordova VS NativeScript Agenda #wpc15it 2

3 Apache Cordova Apache Cordova is a platform for building natively installed mobile applications using HTML, CSS and JavaScript

PhoneGap codebase to the Apache Software Foundation (ASF) PhoneGap is still a product of Adobe.

4 History 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.

5 Cordova Architecture

6 Apache Cordova Application s User Interface 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

7 Supported Platforms and API Accelerometer Camera Capture Compass Contacts File GeoLocation Media Network Notification Storage Updated list:

8 Development using Cordova 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

9 Code Example <!DOCTYPE html> <html> <head> <title>device Properties Example</title> <script type="text/javascript" charset="utf-8" src="cordova js"></script> <script type="text/javascript" charset="utf-8"> // Wait for Cordova to load document.addeventlistener("deviceready", ondeviceready, false); // Cordova is ready function ondeviceready() { navigator.geolocation.getcurrentposition(onsuccess, onerror); } // onsuccess Geolocation function 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 object function onerror(error) { alert('code: ' + error.code + '\n' + message: ' + error.message + '\n'); } </script> </head> <body> <p id="geolocation">finding geolocation...</p> </body> </html>

10 DEMO Apache Cordova

11 Telerik NativeScript

12 What is NativeScript? A runtime for building and running native ios, Android, and Windows Phone apps with a single, JavaScript code base!=!=

13 Why NativeScript? Its Open Source Free of Charge and available to anyone on GitHub ( 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

14 Access to Native Platform API

15 ECMAScript+ CSS

16 100% Shared Code

17 How does it Work?

18 NativeScript Android example Output:

19 NativeScript ios example

20 NativeScript and JS VMs NativeScript runs JavaScript on a JavaScript VM JavaScriptCore on ios V8 on Android JavaScriptCore on Windows

21 Invoking native APIs 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)

22 Cross Platform Modules: TNS modules 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).

23 TNS file module

24 HTTP module example

25 Two ways to use NativeScript

26 Telerik Platform 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!

27 NativeScript CLI Free and open source Android require JDK, Apache Ant, Android SDK ios require Xcode, Xcode CLI tools, ios SDK ios-sim npm package

28 Starting a new project and Running

29 Project Structure

30 app.js

31 Pages XML markup structure CSS for style Elements (e.g. <Page>, <Label>) are TNS modules

32 Data binding

33 DEMO Telerik NativeScript

34 Cordova VS NativeScript 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) info@wpc2015.it

35 Domande e Risposte Q & A info@wpc2015.it #wpc15it 35

36 CONTACTS

37 OverNet Education Tel Contatti OverNet #wpc15it 37

Mobile Development June 2015, TEIATH, Greece

Mobile Development June 2015, TEIATH, Greece Presentation Overview 1. Introduction 2. Mobile Application Development 3. Cordova / Phonegap 4. Development Framework 5. Examples 1. INTRODUCTION Introduction