Date post: | 13-Apr-2017 |
Category: |
Technology |
Upload: | brameshmadhav-s |
View: | 351 times |
Download: | 1 times |
Creating 'Native' Cross-Platform AppsBrameshmadhav S ( @sbmadhav )
The Fourth City
• To the Future!• React Native• Native Script• Demo
Agenda
To the FuturePhoneGap took us this far, but is it time to move on?
App Development Approaches
Native Mobile Experience/Capabilities/Services/
Portability (Cross Device Reusability)
Maintenance Cost (TCO)
Mobile Web App Hybrid App Mixed Hybrid App Native App
Write once ; Run anywhere
Learn once ; Write anywhere
React NativeThe website you want to convert to an app
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• 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!
Why React Native
Instant Reload
Why React Native
Single Environment for Multiple Platforms
Why 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 : http://localhost:8081/index.ios.bundle
Getting started with React Native
Demo
• All the goodness to React packaged out of the Web• 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
Summary – React Native
NativeScriptDo you need to know the web to write cross platform mobile apps?
NativeScript
No DOM
!=
!=
No cross compilation
!=Direct access to native APIs in JS
A runtime for building and running native iOS, Android, and (soon) Windows Phone apps with a single, JavaScript code base
Why NativeScript?
Skills Code
Access to native APIsCode ReuseSkills Reuse
How Does NativeScript work ?NativeScript runs JavaScript on a JavaScript VM
• JavaScriptCore on iOS
• V8 on Android
NativeScript Modules
https://www.npmjs.com/search?q=nativescript
Getting Started with NativeScript• CLI
• npm install –g nativescript (https://github.com/nativescript/nativescript-cli)
• tns create <project name> & tns platform add ios | android , tns run ios | android –emulator
• • Backend-as-a-service - Push notifications, cloud data, file
storage, etc.• Analytics• AppBuilder• Paid service with 30-day free trial
Demo
• 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
• https://www.nativescript.org/showcases shows all the apps built with Native script. It’s pretty nascent.
• Backed by Telerik with their Telerik Platform model • Community support is excellent
Summary – NativeScript
Philosophy matters
Mixed Hybrid Apps are the way forward
React Native & Native Script are easier and better ways to build Native Apps
Key Takeaways
© 2015 SAPIENT CORPORATION
Thank you