Building Native Android Apps with JavaScript
Download as PPTX, PDF0 likes792 views
The document introduces NativeScript, a framework for building native Android apps using JavaScript, CSS, and XML with a single code base. It explains the components of a NativeScript project, including its UI, logic, and styling, while emphasizing its open-source nature and ease of use. The document also outlines the benefits of NativeScript, such as access to native APIs, cross-platform functionality, and rich data binding capabilities.
Building Native Android Apps with JavaScript
- 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: [email protected] 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
- 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!