Building hybrid apps with JS using Cordova is well known. In this presentation, we delve upon building "Native" apps using JavaScript. We are using the Open Source technology - NativeScript to build this native application.

1. Building Native Android Apps
using Javascript

2. 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:
abhishek.kant@telerik.com
Phone:
+91-124-4300987/ 996

3. Wait .. What?
{ }
Native Andoid Apps
Built with JavaScript + CSS + XML
Single Code Base

4. What it is not….
No DOM
No Cross-Compilation
No Plugins Required
{N} is straight-up JS | Running as Native App

5. CommonJS
MVVM
Templates

8. We are Open Source
Choice #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!

9. SeeittoBELIEVEit !
1. Create a NS App
2. Add Image to the app
3. Add a new page
4. Add an email
5. Add Email-validator
6. Validate for correct Email

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

11. ATypical {N} Project
All your components in one place

12. The UI
{N} uses XML
You build a Visual Tree
Just like XAML/HTML
You 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"/>

13. 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 UI
Invoked through JS!

14. 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!

15. The Logic w/ JavaScript
{N} utilizes a bridge
Has 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-generated
Injected into App package @ Build time

16. Improving Logic w/ MVVM
{N} supports Rich DataBinding
XAML-like Data Binding
Off course .. it's 2-Way
Renders 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' : '' }" />

17. Cross Platform w/ Modules
{N} bridge that takes functionality X-Platform
- Just like a Node module
- Dozens available | You can write custom modules

18. 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
});

19. SeeittoBELIEVEit !
1. Create a NS App
2. Add Image to the app
3. Add a new page
4. Add an email
5. Add Email-validator
6. Validate for correct Email

20. How do I start with OSS?
{N} Command Line Interface makes it easy
Grab the NativeScript CLI:
npm install -g nativescript
tns create MyApp
tns platform add android
Create Project & Add Platforms:
tns run android
tns run android --emulator
Run Project on Device or Emulator:

21. Why {N} again?

22. You're a Mobile Ninja
{N} is here to help!

23. Native X-Platform Mobile with JS
NativeScript Blog | @NativeScript
Go build your dream app!