SlideShare ist ein Scribd-Unternehmen logo
1 von 44
Django trifft Flutter
Thomas Aglassinger und Dominik Groß
25.10.2022
Agenda
 Über uns
 Wozu Flutter?
 Das Django und Flutter Ökosystem
 Django Backend
 Flutter Frontend
 Beispiel-Anwendung mit Code
 Von Python zu Flutter
 Pro und Contra
 Herausforderungen
 Dart
2
Thomas Aglassinger
 Senior Software and Requirements Engineer bei ITELL.SOLUTIONS für
Individualsoftware zu Prozessoptimierung und Automatisierung.
Produktübersicht: https://itell.solutions/referenzen
 20+ Jahre Berufserfahrung in Software-Entwicklung in verschiedenen Rollen
und Branchen (Bankwesen, Gesundheit, eCommerce, …)
 MSc in Information Processing Science
 Organisator des Python-Meetup in Graz
 Diverse Open-Source-Projekte und Konferenz-Beiträge https://roskakori.at/
 Gut wartbarer Quellcode ist ein besonderes Anliegen
3
Dominik Groß
 CEO bei Incibit, der Agentur für Flutter-App-Entwicklung. Mehr Informationen:
https://incibit.at/
 10+ Jahre Berufserfahrung in der App-Entwicklung sowie im agilen
Projektmanagement
 BSc in Software Design
 Organisator des Flutter-Meetup in Graz
 Ich poste zu Themen rund um die Flutter-App-Entwicklung auf Linkedin:
https://www.linkedin.com/in/grodo/
 Gute Apps funktionieren nicht nur, sondern sind auch einfach und intuitive
verwendbar
4
Wozu Flutter?
5
Wozu Flutter?
• Plattformunabhängig: Android, iOS; Web; macOS, Linux, Window
• Eine Code-Basis für alles
• 100 % Open Source
• Sehr aktive Community
• Unterschiedlichste Komponenten für Erweiterung online verfügbar
• #1 cross-platform mobile SDK (stackoverflow)
6
Wer nutzt Flutter?
7
Das Django und Flutter Ökosystem
8
Django Flutter Ökosystem
Datenhaltung Backend Interface Frontend
Django
9
Django Flutter Ökosystem
Datenhaltung Backend Interface Frontend
SQLite
- lokal, schnell
- nur 1 Schreibzugriff
Django
10
Django Flutter Ökosystem
Datenhaltung Backend Interface Frontend
SQLite
- lokal, schnell
- nur 1 Schreibzugriff
PostgreSQL
- benötigt Server
- Viele Features
(GIS, JSON, XML,
Volltextsuche)
Django
11
Django Flutter Ökosystem
Datenhaltung Backend Interface Frontend
SQLite
- lokal, schnell
- nur 1 Schreibzugriff
PostgreSQL
- benötigt Server
- Viele Features
(GIS, JSON, XML,
Volltextsuche)
Andere SQL
- MySQL
- Oracle
Django
12
Django Flutter Ökosystem
Datenhaltung Backend Interface Frontend
SQLite
- lokal, schnell
- nur 1 Schreibzugriff
PostgreSQL
- benötigt Server
- Viele Features
(GIS, JSON, XML,
Volltextsuche)
Andere SQL
- MySQL
- Oracle
Django
Django
templates
& forms
13
Django Flutter Ökosystem
Datenhaltung Backend Interface Frontend
SQLite
- lokal, schnell
- nur 1 Schreibzugriff
PostgreSQL
- benötigt Server
- Viele Features
(GIS, JSON, XML,
Volltextsuche)
Andere SQL
- MySQL
- Oracle
Django
Django
templates
& forms
HTMX
JavaScript
...
14
Django Flutter Ökosystem
Datenhaltung Backend Interface Frontend
SQLite
- lokal, schnell
- nur 1 Schreibzugriff
PostgreSQL
- benötigt Server
- Viele Features
(GIS, JSON, XML,
Volltextsuche)
Andere SQL
- MySQL
- Oracle
Django
Django
REST
Framework
Django
templates
& forms
HTMX
JavaScript
...
15
Django Flutter Ökosystem
Datenhaltung Backend Interface Frontend
SQLite
- lokal, schnell
- nur 1 Schreibzugriff
PostgreSQL
- benötigt Server
- Viele Features
(GIS, JSON, XML,
Volltextsuche)
Andere SQL
- MySQL
- Oracle
Django
Django
REST
Framework
Flutter
Django
templates
& forms
HTMX
JavaScript
...
16
Django Flutter Ökosystem
Datenhaltung Backend Interface Frontend
Firebase
- cloud service
SQLite
- lokal, schnell
- nur 1 Schreibzugriff
PostgreSQL
- benötigt Server
- Viele Features
(GIS, JSON, XML,
Volltextsuche)
Andere SQL
- MySQL
- Oracle
Django
Django
REST
Framework
Flutter
Django
templates
& forms
HTMX
JavaScript
...
17
Django Flutter Ökosystem
Datenhaltung Backend Interface Frontend
Firebase
- cloud service
SQLite
- lokal, schnell
- nur 1 Schreibzugriff
PostgreSQL
- benötigt Server
- Viele Features
(GIS, JSON, XML,
Volltextsuche)
Andere SQL
- MySQL
- Oracle
Django
Django
REST
Framework
Flutter
Django
templates
& forms
HTMX
JavaScript
...
18
Beispiel-Anwendung
19
Beispielanwendung
 „Personbook“ – einfache Personenverwaltung
 Personen anlegen und bearbeiten
 Klassische CRUD-Anwendung mit REST-API
 Nur Beispiel, Design und Sicherheitsaspekte
sekundär
 Quellcode:https://github.com/pygraz/django-flutter-
example
20
Django Backend
21
REST API
http://127.0.0.1:8077/persons/ http://127.0.0.1:8077/persons/?format=json
Benutzer: admin
Kennwort: deMo.123
22
Django Model
23
Generierte Django Datenbank-Migration
25
Datenbank Tabelle
26
Serializer
27
Viewset mit GET, POST, ...
28
Routen und URLs
29
Flutter Frontend
30
Entity
31
Retrofit API Client
32
UI
33
Flutter Pro👍 und Contra👎
34
Flutter Pro und Contra
• Pro 👍
 “Code once, run anywhere”
 Mobile Apps und Desktop sind
nativ
 Viele externe Pakete
 Google: Funding,
Dokumentation, technologisch
Solide
35
Flutter Pro und Contra
• Pro 👍
 “Code once, run anywhere”
 Mobile Apps und Desktop sind
nativ
 Viele externe Pakete
 Google: Funding,
Dokumentation, technologisch
Solide
• Contra 👎
 Junge Technologie, in
manchen Randbereichen
noch nicht voll ausgereift
 Google Friedhof → derzeit
unwahrscheinlich; Open
Source und damit ohne
Google wartbar
36
Flutter Herausforderungen
37
State Management
• Kein einheitlicher Ansatz, Standard-Bibliothek nur rudimentär
• Provider: https://pub.dev/packages/provider
• Riverpod: https://riverpod.dev/
• Bloc: https://bloclibrary.dev/
38
Navigation
• Standard-Bibliothek nur rudimentär
 Navigator 1.0: einfach aber beschränkt
 Navigator 2.0: Architektur-Desaster
• Verschiedene externe Pakete, um Navigation erträglich zu machen
• Routemaster
 Ähnlich urls.py in Django
 https://pub.dev/packages/routemaster
39
Beispiel routemaster
40
Von Python zu Dart
41
Werkzeuge
 poetry, pip
 black
 pylint, flake8
 PyCharm
 Visual Studio Code
 Django Debug Toolbar
 flutter pub
 flutter format
 flutter analyze
 Android Studio
 Visual Studio Code
 Flutter DevTools
42
Sprache
 C-ähnliche Syntax
 jede Menge { }
 hässliche Operatoren wie && || !
 Statisch typisiert mit kompakter Syntax ohne Redundanzen
 Typ “dynamic”
 Typinferenz: const x = 123; → impliziert int
 Code-Generatoren für Dateien *.g.dart (z.B. für JSON)
 Null-Safe mit zugehörigen Operatoren: ? ?. ??
 Wilde Konstruktor-Syntax
43
Zusammenfassung
44
Zusammenfassung
Die Kombination Django und Flutter bietet:
 Viel Funktionalität mit wenig Code
 Programmiersprachen, die Spaß machen
 kurze Entwicklungszyklen und ausgereiften Werkzeuge
 Viele externe Bibliotheken
 Für alle gängigen Plattformen
45

Weitere ähnliche Inhalte

Ähnlich wie Django trifft Flutter

Einsatz von Subversion bei der Entwicklung technisch-wissenschaftlicher Software
Einsatz von Subversion bei der Entwicklung technisch-wissenschaftlicher SoftwareEinsatz von Subversion bei der Entwicklung technisch-wissenschaftlicher Software
Einsatz von Subversion bei der Entwicklung technisch-wissenschaftlicher Software
Andreas Schreiber
 

Ähnlich wie Django trifft Flutter (20)

Kuck mal, Node.js! Einstieg für .NET Entwickler mit Visual Studio Code und Ty...
Kuck mal, Node.js! Einstieg für .NET Entwickler mit Visual Studio Code und Ty...Kuck mal, Node.js! Einstieg für .NET Entwickler mit Visual Studio Code und Ty...
Kuck mal, Node.js! Einstieg für .NET Entwickler mit Visual Studio Code und Ty...
 
Docker Workshop Experten Forum Stuttgart 2015, Agile Methoden GmbH
Docker Workshop Experten Forum Stuttgart 2015, Agile Methoden GmbHDocker Workshop Experten Forum Stuttgart 2015, Agile Methoden GmbH
Docker Workshop Experten Forum Stuttgart 2015, Agile Methoden GmbH
 
2008 - Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
2008 - Gewinnung von OPEN SOURCE Techniken für junge Unternehmen2008 - Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
2008 - Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
 
Apache Solr Revisited 2015
Apache Solr Revisited 2015Apache Solr Revisited 2015
Apache Solr Revisited 2015
 
C / C++ Api for Beginners
C / C++ Api for BeginnersC / C++ Api for Beginners
C / C++ Api for Beginners
 
Software-Engineering in der Luft- und Raumfahrt mit Open-Source-Tools
Software-Engineering in der Luft- und Raumfahrt mit Open-Source-ToolsSoftware-Engineering in der Luft- und Raumfahrt mit Open-Source-Tools
Software-Engineering in der Luft- und Raumfahrt mit Open-Source-Tools
 
Microsoft und die Open Source Community - Leaving the death star behind
Microsoft und die Open Source Community - Leaving the death star behindMicrosoft und die Open Source Community - Leaving the death star behind
Microsoft und die Open Source Community - Leaving the death star behind
 
Dnug 112014 modernization_openn_ntf_ersatzsession
Dnug 112014 modernization_openn_ntf_ersatzsessionDnug 112014 modernization_openn_ntf_ersatzsession
Dnug 112014 modernization_openn_ntf_ersatzsession
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
 
Templates, Code & Tools
Templates, Code & ToolsTemplates, Code & Tools
Templates, Code & Tools
 
Microservices mit Java und Go im Vergleich
Microservices mit Java und Go im VergleichMicroservices mit Java und Go im Vergleich
Microservices mit Java und Go im Vergleich
 
Froscamp2010_padre
Froscamp2010_padreFroscamp2010_padre
Froscamp2010_padre
 
20160229_ModernApplicationDevelopment_Python_KPatenge
20160229_ModernApplicationDevelopment_Python_KPatenge20160229_ModernApplicationDevelopment_Python_KPatenge
20160229_ModernApplicationDevelopment_Python_KPatenge
 
elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09
 
Eine Stunde was mit Api First!
Eine Stunde was mit Api First!Eine Stunde was mit Api First!
Eine Stunde was mit Api First!
 
Flutter 101 - eine kleine Einführung - Flutter Rhein-Main Meetup
Flutter 101 - eine kleine Einführung - Flutter Rhein-Main MeetupFlutter 101 - eine kleine Einführung - Flutter Rhein-Main Meetup
Flutter 101 - eine kleine Einführung - Flutter Rhein-Main Meetup
 
C API for Lotus Notes & Domino
C API for Lotus Notes & DominoC API for Lotus Notes & Domino
C API for Lotus Notes & Domino
 
Azure Notebooks
Azure NotebooksAzure Notebooks
Azure Notebooks
 
Einsatz von Subversion bei der Entwicklung technisch-wissenschaftlicher Software
Einsatz von Subversion bei der Entwicklung technisch-wissenschaftlicher SoftwareEinsatz von Subversion bei der Entwicklung technisch-wissenschaftlicher Software
Einsatz von Subversion bei der Entwicklung technisch-wissenschaftlicher Software
 
Automatischer Build mit Maven - OPITZ CONSULTING - Stefan Scheidt
Automatischer Build mit Maven - OPITZ CONSULTING - Stefan ScheidtAutomatischer Build mit Maven - OPITZ CONSULTING - Stefan Scheidt
Automatischer Build mit Maven - OPITZ CONSULTING - Stefan Scheidt
 

Mehr von roskakori

Mehr von roskakori (18)

Expanding skill sets - Broaden your perspective on design
Expanding skill sets - Broaden your perspective on designExpanding skill sets - Broaden your perspective on design
Expanding skill sets - Broaden your perspective on design
 
Multiple django applications on a single server with nginx
Multiple django applications on a single server with nginxMultiple django applications on a single server with nginx
Multiple django applications on a single server with nginx
 
Helpful pre commit hooks for Python and Django
Helpful pre commit hooks for Python and DjangoHelpful pre commit hooks for Python and Django
Helpful pre commit hooks for Python and Django
 
Startmeeting Interessengruppe NLP NLU Graz
Startmeeting Interessengruppe NLP NLU GrazStartmeeting Interessengruppe NLP NLU Graz
Startmeeting Interessengruppe NLP NLU Graz
 
Helpful logging with python
Helpful logging with pythonHelpful logging with python
Helpful logging with python
 
Helpful logging with Java
Helpful logging with JavaHelpful logging with Java
Helpful logging with Java
 
Einführung in Kommunikation und Konfliktmanagement für Software-Entwickler
Einführung in Kommunikation und Konfliktmanagement für Software-EntwicklerEinführung in Kommunikation und Konfliktmanagement für Software-Entwickler
Einführung in Kommunikation und Konfliktmanagement für Software-Entwickler
 
Analyzing natural language feedback using python
Analyzing natural language feedback using pythonAnalyzing natural language feedback using python
Analyzing natural language feedback using python
 
Microsoft SQL Server with Linux and Docker
Microsoft SQL Server with Linux and DockerMicrosoft SQL Server with Linux and Docker
Microsoft SQL Server with Linux and Docker
 
Migration to Python 3 in Finance
Migration to Python 3 in FinanceMigration to Python 3 in Finance
Migration to Python 3 in Finance
 
Introduction to pygments
Introduction to pygmentsIntroduction to pygments
Introduction to pygments
 
Lösungsorientierte Fehlerbehandlung
Lösungsorientierte FehlerbehandlungLösungsorientierte Fehlerbehandlung
Lösungsorientierte Fehlerbehandlung
 
XML namespaces and XPath with Python
XML namespaces and XPath with PythonXML namespaces and XPath with Python
XML namespaces and XPath with Python
 
Erste-Hilfekasten für Unicode mit Python
Erste-Hilfekasten für Unicode mit PythonErste-Hilfekasten für Unicode mit Python
Erste-Hilfekasten für Unicode mit Python
 
Introduction to trader bots with Python
Introduction to trader bots with PythonIntroduction to trader bots with Python
Introduction to trader bots with Python
 
Open source projects with python
Open source projects with pythonOpen source projects with python
Open source projects with python
 
Python builds mit ant
Python builds mit antPython builds mit ant
Python builds mit ant
 
Kanban zur Abwicklung von Reporting-Anforderungen
Kanban zur Abwicklung von Reporting-AnforderungenKanban zur Abwicklung von Reporting-Anforderungen
Kanban zur Abwicklung von Reporting-Anforderungen
 

Django trifft Flutter

  • 1. Django trifft Flutter Thomas Aglassinger und Dominik Groß 25.10.2022
  • 2. Agenda  Über uns  Wozu Flutter?  Das Django und Flutter Ökosystem  Django Backend  Flutter Frontend  Beispiel-Anwendung mit Code  Von Python zu Flutter  Pro und Contra  Herausforderungen  Dart 2
  • 3. Thomas Aglassinger  Senior Software and Requirements Engineer bei ITELL.SOLUTIONS für Individualsoftware zu Prozessoptimierung und Automatisierung. Produktübersicht: https://itell.solutions/referenzen  20+ Jahre Berufserfahrung in Software-Entwicklung in verschiedenen Rollen und Branchen (Bankwesen, Gesundheit, eCommerce, …)  MSc in Information Processing Science  Organisator des Python-Meetup in Graz  Diverse Open-Source-Projekte und Konferenz-Beiträge https://roskakori.at/  Gut wartbarer Quellcode ist ein besonderes Anliegen 3
  • 4. Dominik Groß  CEO bei Incibit, der Agentur für Flutter-App-Entwicklung. Mehr Informationen: https://incibit.at/  10+ Jahre Berufserfahrung in der App-Entwicklung sowie im agilen Projektmanagement  BSc in Software Design  Organisator des Flutter-Meetup in Graz  Ich poste zu Themen rund um die Flutter-App-Entwicklung auf Linkedin: https://www.linkedin.com/in/grodo/  Gute Apps funktionieren nicht nur, sondern sind auch einfach und intuitive verwendbar 4
  • 6. Wozu Flutter? • Plattformunabhängig: Android, iOS; Web; macOS, Linux, Window • Eine Code-Basis für alles • 100 % Open Source • Sehr aktive Community • Unterschiedlichste Komponenten für Erweiterung online verfügbar • #1 cross-platform mobile SDK (stackoverflow) 6
  • 8. Das Django und Flutter Ökosystem 8
  • 9. Django Flutter Ökosystem Datenhaltung Backend Interface Frontend Django 9
  • 10. Django Flutter Ökosystem Datenhaltung Backend Interface Frontend SQLite - lokal, schnell - nur 1 Schreibzugriff Django 10
  • 11. Django Flutter Ökosystem Datenhaltung Backend Interface Frontend SQLite - lokal, schnell - nur 1 Schreibzugriff PostgreSQL - benötigt Server - Viele Features (GIS, JSON, XML, Volltextsuche) Django 11
  • 12. Django Flutter Ökosystem Datenhaltung Backend Interface Frontend SQLite - lokal, schnell - nur 1 Schreibzugriff PostgreSQL - benötigt Server - Viele Features (GIS, JSON, XML, Volltextsuche) Andere SQL - MySQL - Oracle Django 12
  • 13. Django Flutter Ökosystem Datenhaltung Backend Interface Frontend SQLite - lokal, schnell - nur 1 Schreibzugriff PostgreSQL - benötigt Server - Viele Features (GIS, JSON, XML, Volltextsuche) Andere SQL - MySQL - Oracle Django Django templates & forms 13
  • 14. Django Flutter Ökosystem Datenhaltung Backend Interface Frontend SQLite - lokal, schnell - nur 1 Schreibzugriff PostgreSQL - benötigt Server - Viele Features (GIS, JSON, XML, Volltextsuche) Andere SQL - MySQL - Oracle Django Django templates & forms HTMX JavaScript ... 14
  • 15. Django Flutter Ökosystem Datenhaltung Backend Interface Frontend SQLite - lokal, schnell - nur 1 Schreibzugriff PostgreSQL - benötigt Server - Viele Features (GIS, JSON, XML, Volltextsuche) Andere SQL - MySQL - Oracle Django Django REST Framework Django templates & forms HTMX JavaScript ... 15
  • 16. Django Flutter Ökosystem Datenhaltung Backend Interface Frontend SQLite - lokal, schnell - nur 1 Schreibzugriff PostgreSQL - benötigt Server - Viele Features (GIS, JSON, XML, Volltextsuche) Andere SQL - MySQL - Oracle Django Django REST Framework Flutter Django templates & forms HTMX JavaScript ... 16
  • 17. Django Flutter Ökosystem Datenhaltung Backend Interface Frontend Firebase - cloud service SQLite - lokal, schnell - nur 1 Schreibzugriff PostgreSQL - benötigt Server - Viele Features (GIS, JSON, XML, Volltextsuche) Andere SQL - MySQL - Oracle Django Django REST Framework Flutter Django templates & forms HTMX JavaScript ... 17
  • 18. Django Flutter Ökosystem Datenhaltung Backend Interface Frontend Firebase - cloud service SQLite - lokal, schnell - nur 1 Schreibzugriff PostgreSQL - benötigt Server - Viele Features (GIS, JSON, XML, Volltextsuche) Andere SQL - MySQL - Oracle Django Django REST Framework Flutter Django templates & forms HTMX JavaScript ... 18
  • 20. Beispielanwendung  „Personbook“ – einfache Personenverwaltung  Personen anlegen und bearbeiten  Klassische CRUD-Anwendung mit REST-API  Nur Beispiel, Design und Sicherheitsaspekte sekundär  Quellcode:https://github.com/pygraz/django-flutter- example 20
  • 27. Viewset mit GET, POST, ... 28
  • 32. UI 33
  • 33. Flutter Pro👍 und Contra👎 34
  • 34. Flutter Pro und Contra • Pro 👍  “Code once, run anywhere”  Mobile Apps und Desktop sind nativ  Viele externe Pakete  Google: Funding, Dokumentation, technologisch Solide 35
  • 35. Flutter Pro und Contra • Pro 👍  “Code once, run anywhere”  Mobile Apps und Desktop sind nativ  Viele externe Pakete  Google: Funding, Dokumentation, technologisch Solide • Contra 👎  Junge Technologie, in manchen Randbereichen noch nicht voll ausgereift  Google Friedhof → derzeit unwahrscheinlich; Open Source und damit ohne Google wartbar 36
  • 37. State Management • Kein einheitlicher Ansatz, Standard-Bibliothek nur rudimentär • Provider: https://pub.dev/packages/provider • Riverpod: https://riverpod.dev/ • Bloc: https://bloclibrary.dev/ 38
  • 38. Navigation • Standard-Bibliothek nur rudimentär  Navigator 1.0: einfach aber beschränkt  Navigator 2.0: Architektur-Desaster • Verschiedene externe Pakete, um Navigation erträglich zu machen • Routemaster  Ähnlich urls.py in Django  https://pub.dev/packages/routemaster 39
  • 40. Von Python zu Dart 41
  • 41. Werkzeuge  poetry, pip  black  pylint, flake8  PyCharm  Visual Studio Code  Django Debug Toolbar  flutter pub  flutter format  flutter analyze  Android Studio  Visual Studio Code  Flutter DevTools 42
  • 42. Sprache  C-ähnliche Syntax  jede Menge { }  hässliche Operatoren wie && || !  Statisch typisiert mit kompakter Syntax ohne Redundanzen  Typ “dynamic”  Typinferenz: const x = 123; → impliziert int  Code-Generatoren für Dateien *.g.dart (z.B. für JSON)  Null-Safe mit zugehörigen Operatoren: ? ?. ??  Wilde Konstruktor-Syntax 43
  • 44. Zusammenfassung Die Kombination Django und Flutter bietet:  Viel Funktionalität mit wenig Code  Programmiersprachen, die Spaß machen  kurze Entwicklungszyklen und ausgereiften Werkzeuge  Viele externe Bibliotheken  Für alle gängigen Plattformen 45