Download to read offline
![Same functionality, {N} + ng2 // main.ts import {nativeScriptBootstrap} from "nativescript-angular/application"; import {Component, View} from "angular2/angular2"; import {dialogs} from "ui/dialogs"; @Component({}) @View({ directives: [], template: ` <stack-layout> <button (tap)="showAlert()" text="Hello World"></button> </stack-layout> ` }) class HelloPage { showAlert() { dialogs.alert({ message: "NativeScript rocks!" }); } } export function loaded() { nativeScriptBootstrap(HelloPage, []); }](https://image.slidesharecdn.com/firebase-231015210950-85c23d40/75/Ignite-your-app-development-with-Angular-NativeScript-and-Firebase-35-2048.jpg)
![One syntax for all Attribute Binding: [attribute] Event Binding: (event) Intercepting input: #idhandler Conditions: *ng-if="expression" Loops: *ng-for="expression" Styling: [class.myStyle]="expression"](https://image.slidesharecdn.com/firebase-231015210950-85c23d40/75/Ignite-your-app-development-with-Angular-NativeScript-and-Firebase-40-2048.jpg)
Uploaded byJen Looper
Ignite your app development with Angular, NativeScript and Firebase
This document discusses using Firebase and NativeScript to build mobile apps with a single JavaScript codebase. NativeScript allows building native iOS and Android apps with JavaScript by providing direct access to native APIs and UI elements. It can be used with or without Angular 2. Firebase provides backend services like realtime database, analytics, authentication and remote config that can be easily integrated into NativeScript apps. A demo is shown of building a simple Twitter-like app with NativeScript and Firebase.
Ignite your app development with Angular, NativeScript and Firebase
- 1. Ignite your app development: Fi r e b a s e + N a t i v e S c r i p t + A n g u l a r 2 J E N L O O P E R D E V E L O P E R A D V O C AT E , T E L E R I K / P R O G R E S S @ J E N L O O P E R
- 3. $whoami Ph.D. … inMedieval French Retrained! Programmer 14 yrs+ ladeezfirstmedia.com, thinglearn.com Now DevRel@Telerik
- 4. I’m a developer& I like mobile apps!
- 5.
- 6. NativeScript F O RM O B I L E A P P S
- 7. What is NativeScript? Aruntime for building and running native iOS, Android, and (soon) Windows Universal apps with a single, JavaScript code base with or without using Angular JS.
- 8. No cross compilation != Directaccess to native APIs via JS != != No DOM
- 9. Why NativeScript? • Skillsreuse • JavaScript and CSS • Angular2 • Code reuse • npm modules, 3rd-party iOS and Android libraries • Easily use native APIs • No wrappers to access native APIs • Use native UI elements • Open source • Supported in Telerik Platform
- 10.
- 11.
- 12.
- 13.
- 15. Runs on V8JavaScript VM Runs on JavaScriptCore VM
- 18. NativeScript modules Code ModulesPlatform API 2016
- 20.
- 21. Putting it alltogether Style with CSS Define UI with XML Logic with JavaScript
- 24. Two ways touse NativeScript 1) 2)
- 25. Command Line Interface(CLI) • Use Command Prompt (Win) or Terminal (Mac, Linux) • Free, Part of open source project • Requires installation, local environment setup to build for iOS/Android (requires Mac for iOS) • Integrates with Visual Studio Code (via plugin) WHY: More control, Free, Integrate with existing IDEs/code editors WHO: More technical developers used to using CLI, Open source developers
- 26. Telerik Platform • UseAppBuilder or Screen Builder • Subscription required • Build in the cloud (no local install required) • Easiest way to get started • Full support for {N} WHY: Richer tooling, Easier setup, Platform integrated WHO: Less technical developers, Prefer Platform integrations, Windows developers targeting iOS
- 27. Two ways towrite NativeScript 1) 2) Standard JS + CSS + XML Angular 2
- 28. Angular 2 A RC H I T E C T U R E / F R A M E W O R K
- 30.
- 32.
- 33. Why NativeScript +Angular 2? • Angular 1 = a technology that relies on browser tech to manipulate the DOM. • NativeScript has no DOM to manipulate • Angular 2 decoupled the Angular framework from the DOM • The door is open to new mobile-friendly tech to leverage this newly decoupled framework!!
- 34. A standard {N}app snippet <!-- main.xml --> <page> <StackLayout> <Button text= "Hello World" tap= "showAlert" /> </StackLayout> </page> /* main.js */ var dialogs = require("ui/dialogs"); exports.showAlert = function() { dialogs.alert({ message: "NativeScript rocks!" }); };
- 35. Same functionality, {N}+ ng2 // main.ts import {nativeScriptBootstrap} from "nativescript-angular/application"; import {Component, View} from "angular2/angular2"; import {dialogs} from "ui/dialogs"; @Component({}) @View({ directives: [], template: ` <stack-layout> <button (tap)="showAlert()" text="Hello World"></button> </stack-layout> ` }) class HelloPage { showAlert() { dialogs.alert({ message: "NativeScript rocks!" }); } } export function loaded() { nativeScriptBootstrap(HelloPage, []); }
- 36. The big picture XMLHttpRequest <NSModule> Native iOS call Native Android call iOS App Android App
- 37. The bigger picture({N}+NG2) HTTP <Angular Component> XMLHttpRequest <NS Module> Native iOS call Native Android call Ajax call iOS App Android App Web App XMLHttpRequest <Browser>
- 38.
- 39. Angular 2 advancedseed • http://bit.ly/nativescript-angular-seed
- 40. One syntax forall Attribute Binding: [attribute] Event Binding: (event) Intercepting input: #idhandler Conditions: *ng-if="expression" Loops: *ng-for="expression" Styling: [class.myStyle]="expression"
- 41. The difference isin the UI Web UI != Mobile UI
- 42. Native Layouts Absolute DockGrid Stack Wrap
- 43. Firebase B A CK E N D
- 44. ZOMG Firebase! Firebase atGoogle.io
- 45. What’s new withFirebase? Announcements from Google.io: Firebase 3.0 • Firebase analytics • Google Cloud Messaging is becoming Firebase Cloud Messaging (push notification service) • AdMob integration • Remote Storage • Hot push! Firebase Remote Config • (as always) Firebase realtime database • Firebase hosting • Firebase authentication (social logins)
- 46. Firebase for mobileapps Firebase at Google.io
- 47.
- 48. Twitter freaks out Firebase+ NativeScript
- 49. Let’s build! You needa plugin from this guy
- 50. Can we talk? @jenlooper http://www.ladeezfirstmedia.com TelerikDevRel @progressSW jen.looper@progress.com