Building Native Android Apps with JavaScript

Building Native Android Apps with JavaScript

• 1.
  Building Native AndroidApps 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 isnot…. No DOM No Cross-Compilation No Plugins Required {N} is straight-up JS | Running as Native App
• 5.
  CommonJS MVVM Templates
• 8.
  We are OpenSource 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. Createa 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 upa {N} Project? UI, Logic, Styling & Modules!
• 11.
  ATypical {N} Project Allyour components in one place
• 12.
  The UI {N} usesXML 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 invokeNative 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} usesthe 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 inaction {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. Createa 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 Istart 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 MobileNinja {N} is here to help!
• 23.
  Native X-Platform Mobilewith JS NativeScript Blog | @NativeScript Go build your dream app!