Creating 'Native' Cross-Platform Apps. Brameshmadhav S

Transcription

1 Creating 'Native' Cross-Platform Apps Brameshmadhav S

2 Agenda To the Future! React Native Native Script Demo

3 To the Future PhoneGap took us this far, but is it time to move on?

4 Understanding the Spectrum Full Capability Titanium ReactNative Adv. UI interaction Fast performance App store distribution Native Hybrid Cordova Xamarin Web Developer Skills Access to native platform App store distribution Single Platform Multiple Platform Long time ago I was THE thing. Not anymore That poor thing HTML5 Web Developer Skills Instant updates Partial Capability

5 App Development Approaches Web Application Hybrid Application Mixed Hybrid Application Native Application Runs on Mobile Browser HTML/CSS/JS Programming model Dynamic Web Application or Ajax Application or Single Page Apps No device Feature Integration Not distributed through appstore, easier adoption Web code executed within native container Native WebView or Cordova Wrapper HTML/CSS/JS components are packaged with the app Backend integration using REST/JSON (Not HTML) Distributed through appstore Augment web code with Native SDK to create unique experience Native and Web components coexist Take advantage of best of both approaches Backend integration using REST JSON web services Distributed through appstore Developed using native SDK Native appearance and device capabilities Backend integration using REST JSON/XML web services Distributed through appstore Native Mobile Experience/Capabilities/Services/ Portability (Cross Device Reusability) Maintenance Cost (TCO)

6

7 React Native The website you want to convert to an app

8 React Native Uses similar philosophy to React Virtual DOM is the new playground In brief, the application UI is simply expressed as a function of the current application state Competes with Appcelerator Titanium Application logic is written and runs in JavaScript, whereas your application UI is fully native. Therefore you have none of the compromises typically associated with HTML5 UI. Open source!

9 Getting started with React Native npm install -g react-native-cli react-native init <project-name> For ios : <project-name>/ios/<project-name>.xcodeproj For Android : react-native run-android from the project folder This will open a terminal which will help live reload the project Usually at :

10 Demo

11 Summary React Native All the goodness to Titanium packaged with brand Facebook The concept of virtual DOM driving React is so amazing Amazing Community support and traction React native for Android was released less than a month ago Production ready? Yes and No Facebook Groups app runs completely on this

12 NativeScript Do you need to know the web to write cross platform mobile apps?

13 != No DOM NativeScript A runtime for building and running native ios, Android, and (soon) Windows Phone apps with a single, JavaScript code base!= No cross compilation!= Direct access to native APIs in JS

14 Why NativeScript? Skills reuse Standards-based JavaScript, CSS, optionally TypeScript Code reuse npm modules, 3 rd -party ios and Android libraries Easily use native APIs No wrappers to access native APIs Use native UI elements Open source!

15 How Does NativeScript work? NativeScript runs JavaScript on a JavaScript VM JavaScriptCore on ios V8 on Android

16 NativeScript Modules NativeScript-provided modules that provide cross-platform functionality. There are dozens of them and they re easy to write yourself. NativeScript modules follow Node module s conventions (CommonJS).

17 NativeScript CLI npm install g nativescript ( System Requirements Android : JDK, Apache Ant, Android SDK ios : Xcode, Xcode CLI tools, ios SDK tns create <project name> cd <project name> tns platform add ios android tns run ios android --emulator

18 Backend-as-a-service Push notifications, cloud data, file storage, etc. Analytics AppBuilder Cloud builds (build ios apps on Windows, Windows Phone apps on a Mac) NativeScript debugging and tooling Screen Builder (app scaffolding) IDE extensions Paid service with 30-day free trial

19 Demo

20 Summary NativeScript The power of true native apps at your disposal! As simple as that Hybrid mobile apps are of the past. Time to look at the Future-Past shows all the apps built with Native script. It s pretty nascent. Backed by Telerik with their Telerik Platform model Community support is excellent

21 Thank you, 2015 SAPIENT CORPORATION