app-entwicklung mit react-native, react und redux...• entwicklung in bekannter sprache...
TRANSCRIPT
![Page 1: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/1.jpg)
© 2017 andrena objects ag
Experts in agile software engineering
Rouven Röhrig und Raphael Knecht
App-Entwicklung mit React-Native, React und Redux
- Ein Erfahrungsbericht
![Page 2: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/2.jpg)
© 2018 andrena objects ag
Experts in agile software engineering
andrena ─ Experts in agile software engineering
Standorte:
Köln FrankfurtMannheimKarlsruhe Stuttgart München
Mitarbeiter/innen:
rund 250
Technologien/Kernthemen:
2
![Page 3: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/3.jpg)
© 2018 andrena objects ag
• Rouven Röhrig
• Full-Stack-Entwickler • Java / JavaScript • ASE / Clean Code
Referenten
• Raphael Knecht
• Full-Stack-Entwickler • Java / JavaScript
3
![Page 4: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/4.jpg)
© 2017 andrena objects ag
Agenda
1. Motivation 2. Vorstellung der Frameworks 3. Unsere Erfahrungen mit der App-Entwicklung 4. Fazit
4
![Page 5: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/5.jpg)
© 2018 andrena objects ag
MotivationWarum App-Entwicklung mit React-Native/React/Redux?
5
![Page 6: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/6.jpg)
© 2018 andrena objects ag
Experts in agile software engineering
Motivation
• Gemeinsame Codebasis für Android und iOS: „learn once, write anywhere“ • Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten
(z.B. Asynchronität, „deklarative views“, „responsive design“) • Einsatz moderner Technologien • Große Community und stetige Weiterentwicklung der Frameworks
6
Warum App-Entwicklung mit React-Native/React/Redux?
![Page 7: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/7.jpg)
© 2018 andrena objects ag
React und React-Native
7
![Page 8: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/8.jpg)
© 2018 andrena objects ag
Experts in agile software engineering
React
• Ermöglicht deklarative Views • Komponentenbasiert • Effizientes Rendering • Deterministisches Rendering • Ist nur die View • Ermöglicht JSX
8
JavaScript-Framework für (Web)-User-Interfaces
![Page 9: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/9.jpg)
© 2018 andrena objects ag
Experts in agile software engineering
React-Native
• React-Komponenten (Button, Text, FlatList…)
• Glue-Code: JavaScript ⟷ Android/iOS
• Styling mit CSS und insb. Flexbox • Buildtools • Entwicklungstools
9
Framework zum Bau nativer Apps in JavaScript
![Page 10: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/10.jpg)
© 2018 andrena objects ag
Experts in agile software engineering
React-Native
• Komponenten • Text, Button, InputField,… • Slider, Picker, FlatList, ...
• APIs • Vibration, Gelocation, …
10
Komponenten und APIs
![Page 11: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/11.jpg)
© 2018 andrena objects ag
Experts in agile software engineering
React-Native
• Native App installieren • Native App bauen
• Live Reload • Hot Reload • Remote JavaScript Debugging • Inspector
11
Build- und Entwicklungstools
![Page 12: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/12.jpg)
© 2018 andrena objects ag
Experts in agile software engineering
React-Native mit React
• Beliebige Kombination von React-(Native)- Komponenten
• Ermöglicht Strukturierung und Wiederverwendung von Komponenten
12
![Page 13: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/13.jpg)
© 2018 andrena objects ag
Redux„Predictable state container“
13
![Page 14: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/14.jpg)
© 2018 andrena objects ag
Experts in agile software engineering
Redux
• “Single source of truth” • “State is read-only” • “Changes are made with pure functions”
• 3 Bausteine • Actions • State • Reducer
14
3 Prinzipien und 3 Bausteine
![Page 15: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/15.jpg)
© 2018 andrena objects ag
Experts in agile software engineering
Redux
• Eindeutiger Typ • z.B. „ADD_TODO“
• Beliebiger Payload • z.B. Titel
• Best Practice: Action-Creator • Funktion, die Actions erstellt
15
Actions – „Was soll sich ändern“
![Page 16: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/16.jpg)
© 2018 andrena objects ag
Experts in agile software engineering
Redux
• Ein einziger Zustand • Hierarchisch organisiert
• Store stellt Methoden zur Verfügung
• Best Practice: Selector • Funktion für Zugriff auf State
16
State – „Wo soll es sich ändern“
![Page 17: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/17.jpg)
© 2018 andrena objects ag
Experts in agile software engineering
Redux
• Reine Funktion (keine Seiteneffekte) • Berechnet nächsten Zustand für Teil-State • Deterministisch
17
Reducer – „Wie soll es sich ändern“
![Page 18: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/18.jpg)
© 2018 andrena objects ag
Experts in agile software engineering
Redux
• Reducer ist default export • Action Creator sind named exports • Action types haben die Form „app-name/reducer-name/ACTION_TYPE“ • Action types dürfen exportiert werden
• Empfehlung: Selectors sind named exports
Quelle: https://github.com/erikras/ducks-modular-redux
18
Ducks Pattern: Ein Modul → Eine Datei
![Page 19: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/19.jpg)
© 2018 andrena objects ag
Experts in agile software engineering
React + React-Native + Redux
19
![Page 20: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/20.jpg)
© 2018 andrena objects ag
ErfahrungsberichtUnsere Erfahrungen mit der App-Entwicklung und den Frameworks
20
![Page 21: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/21.jpg)
© 2018 andrena objects ag
Handhabung von Seiteneffekten
21
Z.B. Serveranfragen, Logging
![Page 22: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/22.jpg)
© 2018 andrena objects ag
Experts in agile software engineering
Redux
• Reducer sind reine Funktionen und dürfen/sollten keine Seiteneffekte beinhalten
• Eine Action sollte nur von einem Reducer behandelt werden • Seiteneffekte werden typischerweise über eine Middleware abgebildet
22
Wie und wo behandeln wir Seiteneffekte?
![Page 23: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/23.jpg)
© 2018 andrena objects ag
Redux
• Jede Middleware wird von jeder Action durchlaufen
• Erweiterungspunkt für verschiedene Anwendungsgebiete (z.B. Logging)
• Häufiges Anwendungsgebiet sind Seiteneffekte (z.B. Anfragen an eine API)
• Zu den bekanntesten zählen Redux-Thunk und Redux-Saga
23
Redux - Middleware
![Page 24: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/24.jpg)
© 2018 andrena objects ag
Redux
• Actions müssen nicht mehr nur „plain objects“ sein
• Actions können weitere Actions anstoßen
24
Redux - Thunk
![Page 25: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/25.jpg)
© 2018 andrena objects ag
Redux
• Eine Saga reagiert auf gewisse Actions und ergänzt/behandelt deren Seiteneffekte
• Verschiedene Saga-Effekte vereinfachen die Behandlung von Asynchronität und Synchronität bei Seiteneffekten
25
Redux - Saga
![Page 26: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/26.jpg)
© 2018 andrena objects ag
Warum haben wir uns für Sagas entschieden?
• Bessere Trennung zwischen Redux-Actions und Actions mit Seiteneffekten • Saga-Effekte unterstützen bei der Behandlung von Asynchronität in einem
synchronen Programmfluss (Stichwort: „Generatorfunction“) • Saga-Effekte kapseln Implementierungsdetails und unterstützen dabei,
übersichtlichen Code zu schreiben
26
![Page 27: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/27.jpg)
© 2018 andrena objects ag
Qualitätssicherung - CodeEinheitliche Codeformatierung und Design Pattern
27
![Page 28: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/28.jpg)
© 2018 andrena objects ag
Experts in agile software engineering
ESLint
• ESLint unterstützt eine einheitliche Formatierung und einheitliche Design Pattern
• Fördert „Best Practice“: • „comma dangle“ • „prefer stateless function“
28
![Page 29: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/29.jpg)
© 2018 andrena objects ag
Qualitätssicherung - UnittestsWelche Möglichkeiten bietet Jest?
29
![Page 30: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/30.jpg)
© 2018 andrena objects ag
Experts in agile software engineering
Jest - Automatisiertes Testen
• Auf React angepasstes Testing-Framework • Basierte ursprünglich auf Jasmine
• Wir verwenden Jest für Unittests • Schnelle Testausführung • Snapshottests • Zunehmend bessere IDE-Unterstützung
30
![Page 31: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/31.jpg)
© 2018 andrena objects ag
Experts in agile software engineering
Jest - Automatisiertes Testen
• Funktionalität (Enzyme)
31
React-Native, React - Komponenten
![Page 32: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/32.jpg)
© 2018 andrena objects ag
Experts in agile software engineering
Jest - Automatisiertes Testen
• Snapshot-Tests
React-Native, React - Komponenten
32
![Page 33: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/33.jpg)
© 2018 andrena objects ag
Experts in agile software engineering
Jest - Automatisiertes Testen
• Reducer sind „pure functions“ und somit sehr gut zu testen • Gemeinsame Tests mit Action Creator bieten sich an (weniger fragil) • Tests orientieren sich an https://redux.js.org
33
Redux - Reducer und Action Creator
![Page 34: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/34.jpg)
© 2018 andrena objects ag
Experts in agile software engineering
Jest - Automatisiertes Testen
34
Redux - Saga
• Abhängigkeiten können gemockt werden • Testen/Überprüfen der Actions (Blackbox-Test)
![Page 35: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/35.jpg)
© 2018 andrena objects ag
Experts in agile software engineering
Jest - Automatisiertes Testen
• Abhängigkeiten können gemockt werden • Testen/Überprüfen der Actions
35
Redux - Saga
![Page 36: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/36.jpg)
© 2018 andrena objects ag
Projektstrukturierung
36
![Page 37: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/37.jpg)
© 2018 andrena objects ag
Experts in agile software engineering
Projektstrukturierung
• Trennung Test- und Source-Code • Source-Code
• Module (Redux – Ducks-Pattern) • Sagas • Komponenten
• Container (Kennen Redux) • Darstellung (Kennen Redux nicht)
37
Verzeichnisstruktur
![Page 38: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/38.jpg)
© 2018 andrena objects ag
Experts in agile software engineering
Projektstrukturierung
• Container verdrahten Redux und React • State -> Properties • Actions -> Callbacks • (Strikt Action Creators und Selectors)
• Darstellungskomponenten können • Properties darstellen • Aktionen initiieren
38
Container- und Darstellungs-Komponenten
![Page 39: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/39.jpg)
© 2018 andrena objects ag
Experts in agile software engineering
Atomic Design
• Atome • TextInput, Image, Label, Button, …
• Moleküle • SearchPanel (TextInput + Button), ListItem, LoginButton, …
• Organismen • Header, Footer, Form, ImagePicker, …
• Templates • Seiten
Quelle „Atomic Design“: http://atomicdesign.bradfrost.com/
39
Komponenten-Design in Anlehnung an Atomic Design
![Page 40: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/40.jpg)
© 2018 andrena objects ag
Experts in agile software engineering
Projektstrukturierung
• Sagas strukturieren in Anlehnung an Ducks Pattern • Keine Sagas, die alles können • Eine Verantwortlichkeit pro Saga / Redux-Modul
40
Redux und Redux-Sagas
![Page 41: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/41.jpg)
© 2018 andrena objects ag
Build-AutomatisierungSind manuelle Schritte notwendig?
41
![Page 42: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/42.jpg)
© 2018 andrena objects ag
Build-Automatisierung
• Wir verwenden Jenkins und das Pipeline-Plugin • Automatisiert:
• Messung der Code-Qualität, • Build der Installationsdateien • Deployment
42
![Page 43: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/43.jpg)
© 2018 andrena objects ag
HerausforderungenKeine Erfahrung in der App-Entwicklung - unsere Herausforderungen
43
![Page 44: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/44.jpg)
© 2018 andrena objects ag
Herausforderungen
• Deployment in AppStore und PlayStore • Code-Signatur und automatisiertes Deployment
44
![Page 45: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/45.jpg)
© 2018 andrena objects ag
Herausforderungen
• Integration in native Android- und iOS-App • Nativer Glue-Code • Kommunikation zwischen nativer App
und JavaScript • Automatisierte Tests
45
![Page 46: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/46.jpg)
© 2018 andrena objects ag
Herausforderungen
• Natives Verhalten bzw. plattformspezifisches UX/UI • JavaScript-Package-Abhängigkeiten
• React-Native v. 0.55.0 • Alpha- und Beta-Versionen • Breaking Changes • Kompatibilität mit Testingframeworks
46
![Page 47: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/47.jpg)
© 2018 andrena objects ag
Argumente für React-NativeWelche Features überzeugen uns?
47
![Page 48: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/48.jpg)
© 2018 andrena objects ag
• Hot Reloading ermöglicht es Änderungen direkt anzuzeigen, dabei bleibt der App- bzw. Redux-Zustand erhalten
Hot Reloading
48
![Page 49: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/49.jpg)
© 2018 andrena objects ag
Debugging
49
![Page 50: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/50.jpg)
© 2018 andrena objects ag
Debugging
50
![Page 51: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/51.jpg)
© 2018 andrena objects ag
Schnelle Testausführung
• Direkte Testausführung ohne vorherigen Build • Dauer im Sekundenbereich • Ausführung über Command Line oder IDE
51
![Page 52: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/52.jpg)
© 2018 andrena objects ag
Snapshottests
• Snapshottests zeigen Änderungen bei der Darstellung direkt an
52
![Page 53: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/53.jpg)
© 2018 andrena objects ag
FazitApp-Entwicklung mit React-Native
53
![Page 54: App-Entwicklung mit React-Native, React und Redux...• Entwicklung in bekannter Sprache (JavaScript) mit bekannten Konzepten (z.B. Asynchronität, „deklarative views“, „responsive](https://reader034.vdocuments.net/reader034/viewer/2022051804/5fecb275206ad37e906769d4/html5/thumbnails/54.jpg)
© 2018 andrena objects ag
• Hohe Einstiegshürde ohne JavaScript Know-How • Niedrige Einstiegshürde mit JavaScript Know-How
• Ohne nativen Code geht es nicht immer • Echte native App, aber ohne natives UX-Knowhow bekommt man kein
natives UX geschenkt
• Regelmäßige Updates, gelegentlich Breaking Changes
• Weitgehend gemeinsame Code-Basis
Fazit
54