SlideShare ist ein Scribd-Unternehmen logo
1 von 52
Downloaden Sie, um offline zu lesen
VON UIKIT ZU SWIFTUI – WAS
BEIM UMSTIEG ZU BEACHTEN IST
contact@letsdev.de
www.letsdev.de
06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner
AGENDA
2
// Imperative und deklarative Programmierung
// Aufbau von SwiftUI Views
// Zusammenspiel mit UIKit
// UIKit vs SwiftUI
// Live Demo
// Fazit
06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner
IMPERATIV
3
// Zeile für Zeile wird nacheinander ausgeführt
// UI nach State Changes manuell updaten
06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner
DEKLARATIV
11
// SwiftUI View wird durch Code beschrieben
// UI wird bei State Changes automatisch geupdatet
06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner 12
06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner 14
VStack
ZStack
HStack
06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner 17
.foregroundColor
ViewModifiers
.padding.frame
.offset
.background
.cornerRadius
.font
.fontWeight
.fill
.lineLimit
.lineSpacing
.kerning
06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner
Like the name implies, a property
wrapper is essentially a type that wraps a
given value in order to attach additional
logic to it
Quelle Definition: https://www.swiftbysundell.com/articles/property-wrappers-in-swift/
PROPERTY WRAPPERS
20
06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner
PROPERTY WRAPPERS
21
// Swift 5.1 Feature
// Spielen eine große Rolle in SwiftUI
// Es können auch eigene Property Wrapper definiert werden
06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner
OPAQUE RETURN TYPES
30
// Erfordern, dass immer der gleiche Typ zurückgegeben wird
// Compiler Optimierung
// Protokolle mit associatedTypes können zurückgegeben werden
// Implementation Details bleiben dem Anwender verborgen
Function declares an opaque return
type, but has no return statements
in its body from which to infer an
underlying type
06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner 36
@ObservedObject
06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner
ZUSAMMENSPIEL MIT UIKIT
40
// UIViewRepresentable
// UIViewControllerRepresentable
// UIHostingController
06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner
LIMITIERUNGEN
43
// UICollectionView
// NSAttributedString
// UITextField
// Modal Presentations
06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner 44
// Views sind Klassen und Models Structs
// Vererbung
// Über 10 Jahre im Einsatz
// Storyboards/Xib Merge Konflikte
// Sehr viel Auto Layout Code
UIKit SwiftUI
Quelle: https://unsplash.com/photos/qlaot0VrqTM
Storyboard & Xib
UI in code
Quelle: https://twitter.com/Hakonbogen/status/1228265956843171840
06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner 47
// Views sind Klassen und Models Structs
// Vererbung
// Über 10 Jahre im Einsatz
// Storyboards/Xib Merge Konflikte
// Sehr viel Auto Layout Code
// State Changes müssen manuell
geupdated werden
// Views sind Structs und Models Klassen
// Composition
// Auf der WWDC 2019 vorgestellt
// Swift Code als Format
// Meist weniger View Code
// UI spiegelt immer den aktuellen State
wider
// In einigen Fällen muss noch auf UIKit
zurückgegriffen werden
UIKit SwiftUI
LIVE DEMO
06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner 49
06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner
FAZIT
50
// An einigen Stellen noch bemerkbar, dass SwiftUI sehr neu ist
// Dort, wo nicht auf UIKit zurückgegriffen werden muss, schneller und weniger Code
// iOS 13+
// Möglich, nach und nach auf SwiftUI umzustellen
// Anfangen mit unkritischen Views
let's dev GmbH & Co. KG
Eimsbütteler Chaussee 21
20259 Hamburg
Fon: +49 40 60 77 922 0
Fax: +49 40 60 77 922 1
let's dev GmbH & Co. KG
Alter Schlachthof 33
76131 Karlsruhe
Fon: +49 721 266 765 0
Fax: +49 721 266 765 1
VIELEN DANK.
contact@letsdev.de
www.letsdev.de
06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner
REFERENZEN
52
// https://www.hackingwithswift.com/articles/187/how-to-use-opaque-return-types-in-
swift-5-1
// https://medium.com/@PhiJay/whats-this-some-in-swiftui-34e2c126d4c4
// Eidhof, C., & Krugler, F. (2020). Thinking in SwiftUI (1. Aufl.). Abgerufen von https://
www.objc.io/books/thinking-in-swiftui/
// https://www.swiftbysundell.com/articles/property-wrappers-in-swift/
// https://www.hackingwithswift.com/

Weitere ähnliche Inhalte

Ähnlich wie Von UIKit zu SwiftUI - was beim Umstieg zu beachten ist

Responsive Design by Peter Grosskopf
Responsive Design by Peter GrosskopfResponsive Design by Peter Grosskopf
Responsive Design by Peter GrosskopfPeter Grosskopf
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGapStefan Kolb
 
Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2Manfred Steyer
 
Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2Manfred Steyer
 
"Smartibot" im Einsatz bei der Studienwerbung an der OvGU Magdeburg
"Smartibot" im Einsatz bei der Studienwerbung an der OvGU Magdeburg"Smartibot" im Einsatz bei der Studienwerbung an der OvGU Magdeburg
"Smartibot" im Einsatz bei der Studienwerbung an der OvGU MagdeburgVincentS14
 
Connecting Android - Externe Hardware mit dem grünen Roboter verbinden
Connecting Android - Externe Hardware mit dem grünen Roboter verbindenConnecting Android - Externe Hardware mit dem grünen Roboter verbinden
Connecting Android - Externe Hardware mit dem grünen Roboter verbindeninovex GmbH
 
Connecting Android - Externe Hardware mit dem grünen Roboter verbinden
Connecting Android - Externe Hardware mit dem grünen Roboter verbindenConnecting Android - Externe Hardware mit dem grünen Roboter verbinden
Connecting Android - Externe Hardware mit dem grünen Roboter verbindeninovex GmbH
 
CSI: WP - Dem Windows Phone auf der Spur, Internetspecial: SDK & Development-...
CSI: WP - Dem Windows Phone auf der Spur, Internetspecial: SDK & Development-...CSI: WP - Dem Windows Phone auf der Spur, Internetspecial: SDK & Development-...
CSI: WP - Dem Windows Phone auf der Spur, Internetspecial: SDK & Development-...Gordon Breuer
 
2019 DNUG #46: Mobil bis Desktop auf einen Schlag – Web-Anwendungen zu Progre...
2019 DNUG #46: Mobil bis Desktop auf einen Schlag – Web-Anwendungen zu Progre...2019 DNUG #46: Mobil bis Desktop auf einen Schlag – Web-Anwendungen zu Progre...
2019 DNUG #46: Mobil bis Desktop auf einen Schlag – Web-Anwendungen zu Progre...Knut Herrmann
 
SAP Build Process Automation: Hands-on Session
SAP Build Process Automation: Hands-on SessionSAP Build Process Automation: Hands-on Session
SAP Build Process Automation: Hands-on SessionIBsolution GmbH
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.GFU Cyrus AG
 
Mainframe-Zugriff via Java
Mainframe-Zugriff via JavaMainframe-Zugriff via Java
Mainframe-Zugriff via JavaFrank Rahn
 
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)die.agilen GmbH
 
DACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdfDACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdfDNUG e.V.
 
Wie Sie den Projektabwicklungsplan als zentrales Dokument der Kollaboration n...
Wie Sie den Projektabwicklungsplan als zentrales Dokument der Kollaboration n...Wie Sie den Projektabwicklungsplan als zentrales Dokument der Kollaboration n...
Wie Sie den Projektabwicklungsplan als zentrales Dokument der Kollaboration n...Itten+Brechbühl AG
 
Magdeburger Developer Days 2018 - Warum warten auf die IDE?
Magdeburger Developer Days 2018 - Warum warten auf die IDE?Magdeburger Developer Days 2018 - Warum warten auf die IDE?
Magdeburger Developer Days 2018 - Warum warten auf die IDE?Robin Sedlaczek
 
Build Patterns - Patterns und Best Practices für den Build Prozess
Build Patterns - Patterns und Best Practices für den Build ProzessBuild Patterns - Patterns und Best Practices für den Build Prozess
Build Patterns - Patterns und Best Practices für den Build ProzessRalf Abramowitsch
 

Ähnlich wie Von UIKit zu SwiftUI - was beim Umstieg zu beachten ist (20)

VDC Newsletter 2011-01
VDC Newsletter 2011-01VDC Newsletter 2011-01
VDC Newsletter 2011-01
 
Responsive Design by Peter Grosskopf
Responsive Design by Peter GrosskopfResponsive Design by Peter Grosskopf
Responsive Design by Peter Grosskopf
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
 
React & Redux
React & ReduxReact & Redux
React & Redux
 
Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2
 
Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2Moderne Web-Anwendungen mit Angular 2
Moderne Web-Anwendungen mit Angular 2
 
"Smartibot" im Einsatz bei der Studienwerbung an der OvGU Magdeburg
"Smartibot" im Einsatz bei der Studienwerbung an der OvGU Magdeburg"Smartibot" im Einsatz bei der Studienwerbung an der OvGU Magdeburg
"Smartibot" im Einsatz bei der Studienwerbung an der OvGU Magdeburg
 
Connecting Android - Externe Hardware mit dem grünen Roboter verbinden
Connecting Android - Externe Hardware mit dem grünen Roboter verbindenConnecting Android - Externe Hardware mit dem grünen Roboter verbinden
Connecting Android - Externe Hardware mit dem grünen Roboter verbinden
 
Connecting Android - Externe Hardware mit dem grünen Roboter verbinden
Connecting Android - Externe Hardware mit dem grünen Roboter verbindenConnecting Android - Externe Hardware mit dem grünen Roboter verbinden
Connecting Android - Externe Hardware mit dem grünen Roboter verbinden
 
CSI: WP - Dem Windows Phone auf der Spur, Internetspecial: SDK & Development-...
CSI: WP - Dem Windows Phone auf der Spur, Internetspecial: SDK & Development-...CSI: WP - Dem Windows Phone auf der Spur, Internetspecial: SDK & Development-...
CSI: WP - Dem Windows Phone auf der Spur, Internetspecial: SDK & Development-...
 
2019 DNUG #46: Mobil bis Desktop auf einen Schlag – Web-Anwendungen zu Progre...
2019 DNUG #46: Mobil bis Desktop auf einen Schlag – Web-Anwendungen zu Progre...2019 DNUG #46: Mobil bis Desktop auf einen Schlag – Web-Anwendungen zu Progre...
2019 DNUG #46: Mobil bis Desktop auf einen Schlag – Web-Anwendungen zu Progre...
 
SAP Build Process Automation: Hands-on Session
SAP Build Process Automation: Hands-on SessionSAP Build Process Automation: Hands-on Session
SAP Build Process Automation: Hands-on Session
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
 
Mainframe-Zugriff via Java
Mainframe-Zugriff via JavaMainframe-Zugriff via Java
Mainframe-Zugriff via Java
 
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
 
DACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdfDACHNUG50 MX_Workshop.pdf
DACHNUG50 MX_Workshop.pdf
 
Net@night asp.net mvc
Net@night asp.net mvcNet@night asp.net mvc
Net@night asp.net mvc
 
Wie Sie den Projektabwicklungsplan als zentrales Dokument der Kollaboration n...
Wie Sie den Projektabwicklungsplan als zentrales Dokument der Kollaboration n...Wie Sie den Projektabwicklungsplan als zentrales Dokument der Kollaboration n...
Wie Sie den Projektabwicklungsplan als zentrales Dokument der Kollaboration n...
 
Magdeburger Developer Days 2018 - Warum warten auf die IDE?
Magdeburger Developer Days 2018 - Warum warten auf die IDE?Magdeburger Developer Days 2018 - Warum warten auf die IDE?
Magdeburger Developer Days 2018 - Warum warten auf die IDE?
 
Build Patterns - Patterns und Best Practices für den Build Prozess
Build Patterns - Patterns und Best Practices für den Build ProzessBuild Patterns - Patterns und Best Practices für den Build Prozess
Build Patterns - Patterns und Best Practices für den Build Prozess
 

Von UIKit zu SwiftUI - was beim Umstieg zu beachten ist

  • 1. VON UIKIT ZU SWIFTUI – WAS BEIM UMSTIEG ZU BEACHTEN IST contact@letsdev.de www.letsdev.de
  • 2. 06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner AGENDA 2 // Imperative und deklarative Programmierung // Aufbau von SwiftUI Views // Zusammenspiel mit UIKit // UIKit vs SwiftUI // Live Demo // Fazit
  • 3. 06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner IMPERATIV 3 // Zeile für Zeile wird nacheinander ausgeführt // UI nach State Changes manuell updaten
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11. 06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner DEKLARATIV 11 // SwiftUI View wird durch Code beschrieben // UI wird bei State Changes automatisch geupdatet
  • 12. 06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner 12
  • 13.
  • 14. 06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner 14 VStack ZStack HStack
  • 15.
  • 16.
  • 17. 06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner 17 .foregroundColor ViewModifiers .padding.frame .offset .background .cornerRadius .font .fontWeight .fill .lineLimit .lineSpacing .kerning
  • 18.
  • 19.
  • 20. 06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner Like the name implies, a property wrapper is essentially a type that wraps a given value in order to attach additional logic to it Quelle Definition: https://www.swiftbysundell.com/articles/property-wrappers-in-swift/ PROPERTY WRAPPERS 20
  • 21. 06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner PROPERTY WRAPPERS 21 // Swift 5.1 Feature // Spielen eine große Rolle in SwiftUI // Es können auch eigene Property Wrapper definiert werden
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30. 06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner OPAQUE RETURN TYPES 30 // Erfordern, dass immer der gleiche Typ zurückgegeben wird // Compiler Optimierung // Protokolle mit associatedTypes können zurückgegeben werden // Implementation Details bleiben dem Anwender verborgen
  • 31. Function declares an opaque return type, but has no return statements in its body from which to infer an underlying type
  • 32.
  • 33.
  • 34.
  • 35.
  • 36. 06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner 36 @ObservedObject
  • 37.
  • 38.
  • 39.
  • 40. 06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner ZUSAMMENSPIEL MIT UIKIT 40 // UIViewRepresentable // UIViewControllerRepresentable // UIHostingController
  • 41.
  • 42.
  • 43. 06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner LIMITIERUNGEN 43 // UICollectionView // NSAttributedString // UITextField // Modal Presentations
  • 44. 06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner 44 // Views sind Klassen und Models Structs // Vererbung // Über 10 Jahre im Einsatz // Storyboards/Xib Merge Konflikte // Sehr viel Auto Layout Code UIKit SwiftUI
  • 47. 06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner 47 // Views sind Klassen und Models Structs // Vererbung // Über 10 Jahre im Einsatz // Storyboards/Xib Merge Konflikte // Sehr viel Auto Layout Code // State Changes müssen manuell geupdated werden // Views sind Structs und Models Klassen // Composition // Auf der WWDC 2019 vorgestellt // Swift Code als Format // Meist weniger View Code // UI spiegelt immer den aktuellen State wider // In einigen Fällen muss noch auf UIKit zurückgegriffen werden UIKit SwiftUI
  • 49. 06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner 49
  • 50. 06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner FAZIT 50 // An einigen Stellen noch bemerkbar, dass SwiftUI sehr neu ist // Dort, wo nicht auf UIKit zurückgegriffen werden muss, schneller und weniger Code // iOS 13+ // Möglich, nach und nach auf SwiftUI umzustellen // Anfangen mit unkritischen Views
  • 51. let's dev GmbH & Co. KG Eimsbütteler Chaussee 21 20259 Hamburg Fon: +49 40 60 77 922 0 Fax: +49 40 60 77 922 1 let's dev GmbH & Co. KG Alter Schlachthof 33 76131 Karlsruhe Fon: +49 721 266 765 0 Fax: +49 721 266 765 1 VIELEN DANK. contact@letsdev.de www.letsdev.de
  • 52. 06.03.2020let's dev GmbH & Co. KG contact@letsdev.de// // //Nicolas Spinner REFERENZEN 52 // https://www.hackingwithswift.com/articles/187/how-to-use-opaque-return-types-in- swift-5-1 // https://medium.com/@PhiJay/whats-this-some-in-swiftui-34e2c126d4c4 // Eidhof, C., & Krugler, F. (2020). Thinking in SwiftUI (1. Aufl.). Abgerufen von https:// www.objc.io/books/thinking-in-swiftui/ // https://www.swiftbysundell.com/articles/property-wrappers-in-swift/ // https://www.hackingwithswift.com/