Einstieg in die Hybrid-Entwicklung mit Ionic

Slide 1

Slide 1 text

Ionic

Slide 2

Slide 2 text

Aaron Czichon • cellent AG • Ionicframework.de • WebAtlas GbR • @inoverse • PHP , .NET (WebAPI), Knockout.js, AngularJS, Ionic

Slide 3

Slide 3 text

Ionic

Slide 4

Slide 4 text

SDK Platform

Slide 5

Slide 5 text

Ionic Framework (SDK)

Slide 6

Slide 6 text

Was ist Ionic? Entstehung Resourcen Cordova/Phonegap NPM Technologien AngularJS Ionic SDK

Slide 7

Slide 7 text

Was ist Ionic?

Slide 8

Slide 8 text

Was ist Ionic? + +

Slide 9

Slide 9 text

Was ist Ionic?

Slide 10

Slide 10 text

Entstehung von Ionic

Slide 11

Slide 11 text

Entstehung

Slide 12

Slide 12 text

Entstehung

Slide 13

Slide 13 text

Entstehung =

Slide 14

Slide 14 text

Resourcen

Slide 15

Slide 15 text

Resourcen ionicframework.com ionic.io ngcordova.com

Slide 16

Slide 16 text

Cordova/Phonegap

Slide 17

Slide 17 text

Cordova/Phonegap

Slide 18

Slide 18 text

Cordova/Phonegap

Slide 19

Slide 19 text

Cordova/Phonegap Cordova?!? Phonegap?!?

Slide 20

Slide 20 text

Cordova/Phonegap Cordova?!? Phonegap?!?

Slide 21

Slide 21 text

Cordova/Phonegap App Kamera File System WebView Ionic Plug-In System Kamera Plug-In File System Plug-In

Slide 22

Slide 22 text

Tools/Techniken

Slide 23

Slide 23 text

Tools/Techniken NodeJS / NPM Cordova Ionic SDK

Slide 24

Slide 24 text

Tools/Techniken Unsere App Ionic Angular JS Web View (Cordova) Native SDK

Slide 25

Slide 25 text

Warum Ionic?

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Hybrid Native Kosten Kosten Zeit Zeit Ionic Services Ionic Services

Slide 28

Slide 28 text

Downsides of Native „Our biggest mistake was betting too much on HTML5“

Slide 29

Slide 29 text

Multi-Million-Dollar Unternehmen Business ist abhängig von der App Viele native Entwickler? Game-Development?

Slide 30

Slide 30 text

Do native!

Slide 31

Slide 31 text

Ionic SDK UI Controls Javascript Library CLI Creator Playground

Slide 32

Slide 32 text

Framework

Slide 33

Slide 33 text

Ionicons

Slide 34

Slide 34 text

CLI / Lab

Slide 35

Slide 35 text

Ionic Playground

Slide 36

Slide 36 text

Ionic Creator

Slide 37

Slide 37 text

Framework: Controls

Slide 38

Slide 38 text

Framework: Controls  Custom HTML Tags  Anpassbar dank SASS  Platform-Classes  Dynamic Templates  Styling via Angular

Slide 39

Slide 39 text

Framework: Controls  Lists  Cards  Toggles  Tabs  Sidemenu  …

Slide 40

Slide 40 text

Framework: Library

Slide 41

Slide 41 text

Framework: Library Action Sheet Ionic Keyboard Ionic Keyboard Modal Views Popover Popups

Slide 42

Slide 42 text

Framework: Library  ConfigProvider  Max cached Views  Scrolling settings  Back Button Config  Checkbox config  Template settings  …

Slide 43

Slide 43 text

Framework: Library Platform Library

Slide 44

Slide 44 text

Framework: Library Navigation Stack View 1 View 2 View 3 - View 1 - View 2 - View 1