building native android apps with javascript
Post on 19-Jan-2017
656 Views
Preview:
TRANSCRIPT
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:abhishek.kant@telerik.com 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!
top related