building native android apps with javascript

23
Building Native Android Apps using Javascript

Upload: abhishek-kant

Post on 19-Jan-2017

656 views

Category:

Technology


3 download

TRANSCRIPT

Page 1: Building Native Android Apps with JavaScript

Building Native Android Apps using Javascript

Page 2: Building Native Android Apps with JavaScript

Abhishek Kantअभि�षेक कान्त

–B.E. MBA.–15 years in industry–MCAD. Certified Scrum Master.–Course Author – NoSQL w/ CouchDB–Ex-Satyam Computers. –Ex-Microsoft –@abhishekkant

Contact:[email protected] Phone: +91-124-4300987/ 996

Page 3: Building Native Android Apps with JavaScript

Wait .. What?

{}

Native Andoid Apps

Built with JavaScript + CSS + XMLSingle Code Base

Page 4: Building Native Android Apps with JavaScript

What it is not….No DOM

No Cross-Compilation

No Plugins Required

{N} is straight-up JS | Running as Native App

Page 5: Building Native Android Apps with JavaScript

CommonJSMVVMTemplates

Page 6: Building Native Android Apps with JavaScript
Page 7: Building Native Android Apps with JavaScript
Page 8: Building Native Android Apps with JavaScript

We are Open SourceChoice #1: {N} is OSS on GitHub

Start @ https://www.nativescript.org/

Check out | Use it | Fork it https://github.com/NativeScript/NativeScript

Yep, it's completely FREE .. there is no catch!

Page 9: Building Native Android Apps with JavaScript

See it to BELIEVE it !

1. Create a NS App2. Add Image to the app3. Add a new page4. Add an email5. Add Email-validator 6. Validate for correct Email

Page 10: Building Native Android Apps with JavaScript

What makes up a {N} Project?UI, Logic, Styling & Modules!

Page 11: Building Native Android Apps with JavaScript

A Typical {N} ProjectAll your components in one place

Page 12: Building Native Android Apps with JavaScript

The UI{N} uses XML

You build a Visual Tree Just like XAML/HTMLYou get UI elements

& Container controls

These become Native UI .. little Magical!

<Image source="{thumbnailImageSource}" width="72" height="72"/><Label text="{itemTitle}" textWrap="true" cssClass="title" /><Button text="{authoredBy}“ width="150“ cssClass="author"/>

Page 13: Building Native Android Apps with JavaScript

Can I invoke Native UI?{N} supports Native UI element instatiation

var alert = new UIAlertView(); alert.message = "Hello World"; alert.addButtonWithTitle("OK"); alert.show();

Native UIInvoked through JS!

Page 14: Building Native Android Apps with JavaScript

The Styling{N} uses the ubiquitous CSS<Page loaded="load">

<Label text="{{ message }}" /></Page>

.Label {color: red; font-size: 20;margin: 20;

}

Yep - CSS to style Mobile App elements!

Page 15: Building Native Android Apps with JavaScript

The Logic w/ JavaScript{N} utilizes a bridgeHas full access to Native APIs

- That's all of iOS + Android APIs!

Uses Reflection to look up Native APIs List of APIs for each Platform Metadata pre-generatedInjected into App package @ Build time

Page 16: Building Native Android Apps with JavaScript

Improving Logic w/ MVVM{N} supports Rich DataBinding

XAML-like Data Binding Off course .. it's 2-WayRenders Adaptively

for each platform

Data Binding powered by Polymer Expressions!

<Image source="{thumbnailImageSource}"width="72"height="72"

<Label verticalAlignment="top"/>

text="{{ num_comments ? num_comments

+ ' comments' : '' }" />

Page 17: Building Native Android Apps with JavaScript

Cross Platform w/ Modules{N} bridge that takes functionality X-Platform

- Just like a Node module- Dozens available | You can write custom modules

Page 18: Building Native Android Apps with JavaScript

A Module in action{N} allows you to bring in what's needed

- This is a generic HTTP Module- Works the same way in each Platform

var http = require("http"); http.getJSON("https://api.myservice.com")

.then(function(result){// result is a JSON object// do stuff

});

Page 19: Building Native Android Apps with JavaScript

See it to BELIEVE it !

1. Create a NS App2. Add Image to the app3. Add a new page4. Add an email5. Add Email-validator 6. Validate for correct Email

Page 20: Building Native Android Apps with JavaScript

How do I start with OSS?{N} Command Line Interface makes

it easy Grab the NativeScript CLI:npm install -g nativescript

tns create MyApptns platform add android

Create Project & Add Platforms:

tns run androidtns run android --emulator

Run Project on Device or Emulator:

Page 21: Building Native Android Apps with JavaScript

Why {N} again?

Page 22: Building Native Android Apps with JavaScript

You're a Mobile Ninja

{N} is here to help!

Page 23: Building Native Android Apps with JavaScript

Native X-Platform Mobile with JS

NativeScript Blog | @NativeScript

Go build your dream app!