JS goes mobile: Eine Übersicht. Frederik von Berg w11k / thecodecampus

Transkript

1 JS goes mobile: Eine Übersicht Frederik von Berg w11k / thecodecampus

2 Überblick <1> <2> <3> <4> <5> <6> Über mich Historie Mobile Native JavaScript Vergleich mit Nativ & Hybrid Frameworks Setup & Codebeispiel JS goes Mobile - Karlsruher Entwicklertag

3 Über uns Frederik von Berg <> Software Developer Seit 2013 bei w11k GmbH Scala und Web-Entwicklung </> w11k GmbH - the Web Engineers <> Gegründet 2000 Entwicklung / Consulting Web / Java Esslingen / Siegburg </> thecodecampus.de - Weiter. Entwickeln. <> Schulungen (seit 2007) Projekt-Kickoffs Unterstützung im Projekt </> JS goes Mobile - Karlsruher Entwicklertag

4 Native Apps Vor gar nicht allzu langer Zeit... JS goes Mobile - Karlsruher Entwicklertag 2016

5 Nativ JS goes Mobile - Karlsruher Entwicklertag

6 Hybrid Apps Halt, ich schreibe doch keinen doppelten Code! JS goes Mobile - Karlsruher Entwicklertag 2016

7 Halt, doppelter Code? - Hybrid JS goes Mobile - Karlsruher Entwicklertag

8 Der Neuling - Mobile Native JavaScript Native Apps in JavaScript JS goes Mobile - Karlsruher Entwicklertag 2016

9 Der Neuling - Mobile Native JavaScript React Native <> Native Anwendungen geschrieben in JavaScript <> kein WebView JS goes Mobile - Karlsruher Entwicklertag

10 Nein, nicht schon wieder ein Framework! Was brauch ich als Entwickler? JS goes Mobile - Karlsruher Entwicklertag 2016

11 Voraussetzung für Entwickler <> Einen Rechner mit NodeJS <> Kenntnisse JavaScript / TypeScript HTML & CSS Als Plus: Android / ios Kenntnisse JS goes Mobile - Karlsruher Entwicklertag

12 JS goes Mobile - Karlsruher Entwicklertag 2016 Ein kleines Beispiel...

13 Codebeispiel zum Einstieg Code NativeScript + Angular2 + TypeScript import {Component} from selector: "my-app", template: StackLayout Label text "Drücke den Button" class "title" /Label Button text "Button" (tap) "ontap()" /Button /StackLayout }) export class AppComponent { public ontap() { console.log("ich wurde geklickt"); } } JS goes Mobile - Karlsruher Entwicklertag

14 Codebeispiel zum Einstieg Screenshot TheCodeCampus - Angular 2 & TypeScript Grundlagen 13

15 Was ist 'Mobile Native JavaScript'? JS goes Mobile - Karlsruher Entwicklertag 2016

16 Was ist 'Mobile Native JavaScript'? <> JS Engine generiert native Elemente <> Schnittmenge von nativen Komponenten Label Button Switch, Slider, Image... <> Voller Zugriff auf native Funktionalitäten (z.b. Kamera) <> Plattformspezifische Benutzerführung <> Plattformspezifische Anpassungen möglich JS goes Mobile - Karlsruher Entwicklertag

17 JS goes Mobile - Karlsruher Entwicklertag 2016 Demo

18 Vergleich zu nativen Apps JS goes Mobile - Karlsruher Entwicklertag 2016

19 Vergleich zu nativen Apps Vorteile MNJS: <> keine spezifischen Plattformkenntnisse nötig <> Wissen aus der Webentwicklung <> Ein Framework, mehrer Plattformen <> Wiederverwendbarkeit von Code Vorteil Nativ: <> Schneller Startupzeiten <> höhere Performance möglich <> Besseres Tooling <> Größere Community JS goes Mobile - Karlsruher Entwicklertag

20 Vergleich zu hybrid Apps JS goes Mobile - Karlsruher Entwicklertag 2016

21 Vergleich zu hybrid Apps Vorteile MNJS: <> Plattformspezifische Darstellung <> Native Bedienkonzepte <> Flüssige Bedienung Vorteil Hybrid: <> Liefert (oft) noch eine Web-/Desktop-App <> Entwicklung im Browser <> Größere Community <> Erlaubt direkten nativen Zugriff JS goes Mobile - Karlsruher Entwicklertag

22 Welche Frameworks gibt es? JS goes Mobile - Karlsruher Entwicklertag 2016

23 JS goes Mobile - Karlsruher Entwicklertag 2016 React Native

24 Frameworks - React Native <> Facebook <> Open Source <> "learn once, write anywhere" <> JavaScript (JSX) <> CSS artiges Styling React Native <> Layouts per Flexbox <> Native Elemente, aber kein natives Styling <> Debugging in Chrome möglich JS goes Mobile - Karlsruher Entwicklertag

25 Frameworks - React Native: Codebeispiel Code React Native import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, TouchableNativeFeedback, View } from 'react-native'; class ReactNativeExample extends Component { render() { return ( View style {styles.container} Text style {styles.welcome} Welcome to React Native! /Text TouchableNativeFeedback onpress {this._onpressbutton} View style {{width: 80, height: 40, backgroundcolor: '#DDDDDD' }} Text style {{margin: 5}} Button /Text /View /TouchableNativeFeedback /View ); } _onpressbutton() { console.log("ich wurde geklickt"); } } const styles StyleSheet.create({ /* hier folgen noch mehr Styles */ }); AppRegistry.registerComponent('ReactNativeExample', () ReactNativeExample);

26 Frameworks - React Native: Screenshot Screenshot

27 JS goes Mobile - Karlsruher Entwicklertag 2016 NativeScript

28 NativeScript <> Telerik <> Open Source <> JavaScript, XML(HTML), CSS <> TypeScript -> Angular2 <> Bekannte Layouts <> Natives Styling als Standard <> Debugging über VSCode Plugin JS goes Mobile - Karlsruher Entwicklertag

29 NativeScript - Natives Styling JS goes Mobile - Karlsruher Entwicklertag

30 JS goes Mobile - Karlsruher Entwicklertag 2016 Ein einfaches Setup

31 NativeScript - Setup Voraussetzung: <> Android SDK/ X-Code & Node installieren <> npm install -g nativescript Projekt anlegen: <> Normales Setup: tns create Demo <> Angular 2 & Typscript: tns create Demo --ng Anwendung starten: <> cd Demo <> Android hinzufügen: tns platform add android <> App starten: tns run android <> Livereload: tns livesync android --watch JS goes Mobile - Karlsruher Entwicklertag

32 JS goes Mobile - Karlsruher Entwicklertag 2016 Beispiel in VisualCode

33 Na, noch Fragen? frederikvonberg github.com/fvonberg JS goes Mobile - Karlsruher Entwicklertag 2016

34 @thecodecampus

35 Quellen Webseiten: Logos und Bilder: Font Awesome by Dave Gandy - Nativescript Android Button Nativescript ios Button JS goes Mobile - Karlsruher Entwicklertag