Ignite your app development with Angular, NativeScript and Firebase
Download as PPTX, PDF0 likes23 views
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.
![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/85/Ignite-your-app-development-with-Angular-NativeScript-and-Firebase-35-320.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/85/Ignite-your-app-development-with-Angular-NativeScript-and-Firebase-40-320.jpg)
Ignite your app development with Angular, NativeScript and Firebase
- 1. Ignite your app development: F i 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. … in Medieval French Retrained! Programmer 14 yrs+ ladeezfirstmedia.com, thinglearn.com Now DevRel@Telerik
- 4. I’m a developer & I like mobile apps!
- 6. NativeScript F O R M O B I L E A P P S
- 7. What is NativeScript? A runtime 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 != Direct access to native APIs via JS != != No DOM
- 9. Why NativeScript? • Skills reuse • 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. • Bridge
- 15. Runs on V8 JavaScript VM Runs on JavaScriptCore VM
- 18. NativeScript modules Code Modules Platform API 2016
- 20. Example: NativeScript file module
- 21. Putting it all together Style with CSS Define UI with XML Logic with JavaScript
- 24. Two ways to use 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 • Use AppBuilder 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 to write NativeScript 1) 2) Standard JS + CSS + XML Angular 2
- 28. Angular 2 A R C H I T E C T U R E / F R A M E W O R K
- 30. Mix Well
- 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 <NS Module> 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. Android iOS Web
- 39. Angular 2 advanced seed • http://bit.ly/nativescript-angular-seed
- 40. 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"
- 41. The difference is in the UI Web UI != Mobile UI
- 42. Native Layouts Absolute Dock Grid Stack Wrap
- 43. Firebase B A C K E N D
- 44. ZOMG Firebase! Firebase at Google.io
- 45. What’s new with Firebase? 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 mobile apps Firebase at Google.io
- 47. Firebase + Nativescript Quick demo…
- 48. Twitter freaks out Firebase + NativeScript
- 49. Let’s build! You need a plugin from this guy