nativescript & angular 2 - entwicklertag · 2017-05-23 · nativescript & angular 2: von...
TRANSCRIPT
![Page 1: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/1.jpg)
Frederik von BergW11K / theCodeCampus
NativeScript & Angular 2
Von der Web-App zur nativenSmartphone-App
![Page 2: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/2.jpg)
Über mich
Ausgangslage
Was ist Angular?
Was ist NativeScript?
Was muss man bei Apps beachten?
Portierung
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 1
<1>
<2>
<3>
<4>
<5>
<6>
Überblick
![Page 3: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/3.jpg)
Frederik von Berg
W11K GmbH - the Web Engineers
theCodeCampus.de - Weiter. Entwickeln.
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 2
Software Developer<>Seit 2013 bei w11k GmbHScala und Web-Entwicklung </>
Gegründet 2000<>Entwicklung / ConsultingWeb / JavaEsslingen / Siegburg </>
Schulungen (seit 2007)<>Projekt-KickoffsUnterstützung im Projekt </>
Über uns
![Page 4: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/4.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 3
Trello Screenshot
![Page 5: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/5.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 4
Calendar for Trello Screenshot
![Page 6: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/6.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 5
https://calendar-for-trello.com/
Native App Screenshot
![Page 7: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/7.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 5
![Page 8: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/8.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 6
Calendar for Trello - Angular Webapp
Portierung mit wenig Aufwand
keine Hybrid App
<>
<>
<>
Ausgangslage
![Page 9: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/9.jpg)
Was ist Angular?
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App
![Page 10: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/10.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 8
KomponentenServices
ModuleDepen
dency-Injecto
r
Renderer
Ahead-of-time
-Compilation
Single-Page-A
pplication
Lazy-Loading
Pipes
CLI
Was ist Angular?
![Page 11: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/11.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 9
Grundlegendes Konzept in Angular 2
Gesamtes UI ist aus Baum von Komponenten aufgebautWiederverwendbare ElementeGrungerüst der Seite
Komponenten bestehen ausTemplate / View (HTML)KlasseDecorator an Klasse
<>
<>--
<>---
Komponenten
![Page 12: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/12.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 10
Typescript
Html
import { Component } from "@angular/core";1
2
@Component({3
// css selector to find the component's usage4
selector: "music-app",5
template: `6
<h1>Music App</h1>7
`8
})9
export class MusicAppComponent {}10
<body>1
<music-app></music-app>2
</body>3
KomponentenCode
![Page 13: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/13.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 11
Sehr allgemeines KonzeptIrgendwelche Funktionalität kapselnNicht UI spezifischImplementierungsdetails verstecken
EinsatzmöglichkeitenHöhere Abstraktion schaffen (REST)Integration anderer Bibliotheken (WebSocket)Datenhaltung, Datenzugriff, Caching, Logik, ...
Können Abhängigkeit zu anderen Services haben
<>---
<>---
<>
Services
![Page 14: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/14.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 12
Services sollten in Angular 2 als Klassen implementiert werden<>
import {Artist} from "./artist.model";1
2
export class ArtistService {3
getAllArtists(): Artist[] {4
/* return demo data or data from local storage5
* or data loaded from server or ... */6
return [];7
}8
}9
ServicesCode
![Page 15: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/15.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 13
Angular-spezifischer Code muss organisiert werdenGleiche Grundgedanken und Aufbau wie bei ES6 ModulenKapselung & WiederverwendbarkeitLeichtes Einbinden von BibliothekenGenaue Steuerung was wo verwendet wird
Ein Modul ist eine annotierte Klasse
<>----
<>
Module
![Page 16: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/16.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 14
Angular-Module bestehen u.a. ausImports: Welche anderen Module werden intern verwendetDeclarations: Was intern bekannt ist (quasi lokale Variablen)Exports: Was wird nach außen bekannt gemacht (für andere Imports -> Module)
<>---
@NgModule({1
declarations: [ AppComponent, MusicAppComponent ],2
imports: [ BrowserModule, FormsModule, HttpModule ],3
exports: [ AppComponent ],4
providers: [ ArtistService ]5
})6
export class AppModule { }7
ModuleCode
![Page 17: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/17.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 15
DOM Entkoppelung
Renderer wird beauftragt, um DOM zu ändern
Typen:Angular RendererAngular UniversalNativeScript
<>
<>
<>---
Renderer
![Page 18: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/18.jpg)
Was ist NativeScript?
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App
![Page 19: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/19.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 17
Open Source
JavaScript, XML(HTML), CSS
TypeScript -> Angular2
Layouts
Generiert Native Elemente
Android 4.2, iOS 8
<>
<>
<>
<>
<>
<>
Was ist NativeScript?
![Page 20: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/20.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 18
JS Engine generiert native Elemente
Schnittmenge von nativen KomponentenLabelButtonSwitch, Slider, Image ...
Voller Zugriff auf native Funktionalitäten (z.B. Kamera)
Plattformspezifische Benutzerführung
Plattformspezifische Anpassungen möglich
Node Plugins können genutzt werden
Unit Testbar
UI Testframework verfügbar
<>
<>---
<>
<>
<>
<>
<>
<>
Was ist NativeScript? - Funktionsweise
![Page 21: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/21.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 19
if (application.android) {1
let intent =2
new android.content.Intent(3
android.content.Intent.ACTION_VIEW,4
android.net.Uri.parse(this.card.url)5
);6
application.android.currentContext.startActivity(7
android.content.Intent.createChooser(intent,8
"Open Card...")9
);10
} else if (application.ios) {11
dialogs.alert("Sorry, this is not implemented yet.")12
.then(function() {13
console.log("Dialog closed!");14
});15
}16
Was ist NativeScript? - FunktionsweiseCode
![Page 22: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/22.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 20
Was ist NativeScript? - UI-Komponenten
![Page 23: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/23.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 21
Was ist NativeScript? - UI-Komponenten
![Page 24: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/24.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 22
AbsoluteLayout
DockLayout
GridLayout
StackLayout
WrapLayout
FlexBoxLayout
<>
<>
<>
<>
<>
<>
Abb: NativeScript Docs
Was ist NativeScript? - Layout
![Page 25: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/25.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 23
<MainActionBar title="Overdue Cards"></MainActionBar>1
<StackLayout class="page">2
<ListView [items]="cards" *ngIf="cards.length > 0"3
class="list-group">4
<ng-template let-card="item">5
<calendar-card [card]="card" class="list-group-item">6
</calendar-card>7
</ng-template>8
</ListView>9
</StackLayout>10
Was ist NativeScript? - LayoutCode
![Page 26: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/26.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 24
Was ist NativeScript? - Layout
![Page 27: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/27.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 25
CSS Styling (Sass & Less möglich)
Ganze App: app.css
Plattformspezifisch: app.android.css | app.ios.css
ein Stylesheet pro Template (Angular spezifisch)
Inline-Styling
Theme seit 2.4definierte CSS-Attribute (h1, body, text-primary, m-t-5 )Themebuilder
<>
<>
<>
<>
<>
<>--
Was ist NativeScript? - Styling
![Page 28: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/28.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 26
Benötigt:Node, npm ... IDE der WahlAndroid SDK + EmulatorXCode für iOSJS, HTML, CSS - Kentnisse ... learning by doing ;-)
Liefert:CLI -> npm install -g nativescriptVisual Studio Code PluginHot Reloading / LivesyncDebugging (Chrome oder Visual Studio Code)
<>----
<>----
Was ist NativeScript? - Tooling
![Page 29: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/29.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 27
Projektsetup:tns create FirstApp --ng
cd FirstApp/
tns run android
<>---
Was ist NativeScript? - Tooling
![Page 30: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/30.jpg)
Vorteile einer App Was muss man bei Apps beachten?
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App
![Page 31: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/31.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 29
Web App / Website:InformativBenötigt eine Datenverbindungeinfache UpdatesResponsive
Mobile app:Interaktiv - Task drivenohne Datenverbindung möglichBenachrichtigungenBranding / KundenbindungPerformanceNative Oberfläche, gewohnte Benutzerführung
<>----
<>------
Was muss man bei Apps beachten?
![Page 32: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/32.jpg)
Mobile App auf Web App Basis Eine Codebasis?
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App
![Page 33: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/33.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31
UI und plattformunabhängiger Code teilen (Services, Models, Pipes, ...)NPM Abhängikeiten müssen gleich seinwindow darf nicht referenziert seinplatformspezifischer Code kann evtl. nicht geteilt werden (z.B. "Localstorage")
Komponenten haben unterschiedliche Templates
Authentifiezierung muss evtl. umgestellt werden
<>---
<>
<>
Mobile App auf Web App Basis - Allgemein
![Page 34: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/34.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 32
Möglichkeiten:Projektstart: Angular + NativeScript Seed/Starter ProjektKomplex: geteilte NPM PaketePragmatisch: Symlinks
Geteilte Resourcen müssen immer unterhalb des /app Verzeichnis in NativeScript liegen, sonst werdendiese nicht mit in die App gepackt und können nicht genutzt werden.
<>---
Mobile App auf Web App Basis - Allgemein
![Page 35: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/35.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 33
Verfügbarkeit:NathanWalker/angular-seed-advancedjlooper/angular-starter
Aufbau:alles in einem Verzeichnisgeteilter Code in "shared" VerzeichnisTemplates werden ausgetauscht (*.tns.html)
Funktionsweise:Build kopiert shared files in NativeScriptBuild ersetzt die Importpfade entsprechend
Für neue Projekte geeignet
Annahme: die UI wird auseinanderlaufen
viel "Magic" im Spiel
<>--
<>---
<>--
<>
<>
<>
Mobile App auf Web App Basis - Seed Projekte
![Page 36: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/36.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 34
geteilen Code in npm Pakete packen
kapseln in Module
Paket in NativeScript Projekt nutzen
Herausforderung:PflegeBuild + Auslieferung
Geeignet: falls die WebApp schon fertig ist
Projekte müssen nicht am gleichen Ort liegen
<>
<>
<>
<>--
<>
<>
Mobile App auf Web App Basis - NPM Paket
![Page 37: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/37.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 35
Pragmatisch
Dependencies des Clients auf NativeScript anpassen
geteilten Code in "shared"-Ordner legen
"shared"-Ordner per Symlink in NativeScript "app"-Ordner einbinden
Funktioniert super für einen Prototyp
erstmal keine Buildanpassung nötig
<>
<>
<>
<>
<>
<>
Mobile App auf Web App Basis - Shared Folder
![Page 38: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/38.jpg)
Na, noch Fragen? frederikvonberg
github.com/fvonberg
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App
![Page 40: NativeScript & Angular 2 - Entwicklertag · 2017-05-23 · NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 31 UI und plattformunabhängiger Code teilen (Services,](https://reader036.vdocuments.us/reader036/viewer/2022062414/5f020b617e708231d4024cd6/html5/thumbnails/40.jpg)
NativeScript & Angular 2: Von der Web-App zur nativen Smartphone-App 38
Webseiten:https://www.angular.io/
https://www.nativescript.org/
https://developer.android.com/index.html
https://developer.apple.com/
Logos und Bilder:Font Awesome by Dave Gandy -http://fontawesome.io
Quellen