Building Native Android Apps with JavaScript

Building Native Android Apps using 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

Wait .. What?

{}

Native Andoid Apps

Built with JavaScript + CSS + XMLSingle Code Base

What it is not….No DOM

No Cross-Compilation

No Plugins Required

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

CommonJSMVVMTemplates

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!

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

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

A Typical {N} ProjectAll your components in one place

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"/>

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!

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!

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

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' : '' }" />

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

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

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

});

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

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:

Why {N} again?

You're a Mobile Ninja

{N} is here to help!

Native X-Platform Mobile with JS

NativeScript Blog | @NativeScript

Go build your dream app!