Slides: Software - uni-hamburg.de · • Große Anzahl an Optionen (AngularJS, ReactJS, Backbone,...

17
Language Archive Cologne 5. Juli 2016 Das Web als Plattform für wissenschaftliche Software Erfahrungen aus der Entwicklung und Pflege einer HTML5 Anwendung Felix Rau / Jonathan Blumtritt / Sebastian Zimmer Slides: https://tr.im/CMDIMakerForge 1

Transcript of Slides: Software - uni-hamburg.de · • Große Anzahl an Optionen (AngularJS, ReactJS, Backbone,...

Page 1: Slides: Software - uni-hamburg.de · • Große Anzahl an Optionen (AngularJS, ReactJS, Backbone, EmberJS, JQuery, …) • Grundsätzlich unterschiedliche Ansätze • Hohe Dynamik

Language Archive Cologne

5. Juli 2016

Das Web als Plattform für wissenschaftliche

SoftwareErfahrungen aus der Entwicklung und Pflege einer HTML5

AnwendungFelix Rau / Jonathan Blumtritt / Sebastian Zimmer

Slides: https://tr.im/CMDIMakerForge

1

Page 2: Slides: Software - uni-hamburg.de · • Große Anzahl an Optionen (AngularJS, ReactJS, Backbone, EmberJS, JQuery, …) • Grundsätzlich unterschiedliche Ansätze • Hohe Dynamik

Language Archive Cologne

5. Juli 2016

Wissenschaftliche Software

• Cross-Plattform• Nutzerfreundliche Interfaces• Nachhaltig wartbar• (Einsetzbar im Feld, also offline)

2

Page 3: Slides: Software - uni-hamburg.de · • Große Anzahl an Optionen (AngularJS, ReactJS, Backbone, EmberJS, JQuery, …) • Grundsätzlich unterschiedliche Ansätze • Hohe Dynamik

Language Archive Cologne

5. Juli 2016

ELAN (MPI Nijmegen, Java): Desktop-Tool (offline), Cross-Plattform, nicht-natives User InterfaceFLeX (SIL, C#): Desktop-Tool (offline), Windows (partiell auf Linux via Mono), natives User Interface (auf Windows)

Comedi (CLARINO, HTML/LISP): Webapp (nur online), Cross-Plattform, HTML User InterfaceArbil (MPI, Java): Desktop-Tool (offline), Cross-Plattform, nicht-natives User Interface

3

Page 4: Slides: Software - uni-hamburg.de · • Große Anzahl an Optionen (AngularJS, ReactJS, Backbone, EmberJS, JQuery, …) • Grundsätzlich unterschiedliche Ansätze • Hohe Dynamik

Language Archive Cologne

5. Juli 2016

Web als App-Technologieplattform

The “write once, deploy anywhere” promise of HTML5 and the Open Web platform

W3C

4

Page 5: Slides: Software - uni-hamburg.de · • Große Anzahl an Optionen (AngularJS, ReactJS, Backbone, EmberJS, JQuery, …) • Grundsätzlich unterschiedliche Ansätze • Hohe Dynamik

Language Archive Cologne

5. Juli 2016

CMDI Makereine offline-fa ̈hige HTML5-Anwendung zur schnellen Generierung von CMDI-Metadaten

5

Page 6: Slides: Software - uni-hamburg.de · • Große Anzahl an Optionen (AngularJS, ReactJS, Backbone, EmberJS, JQuery, …) • Grundsätzlich unterschiedliche Ansätze • Hohe Dynamik

Language Archive Cologne

5. Juli 20166

Page 7: Slides: Software - uni-hamburg.de · • Große Anzahl an Optionen (AngularJS, ReactJS, Backbone, EmberJS, JQuery, …) • Grundsätzlich unterschiedliche Ansätze • Hohe Dynamik

Language Archive Cologne

5. Juli 20167

Page 8: Slides: Software - uni-hamburg.de · • Große Anzahl an Optionen (AngularJS, ReactJS, Backbone, EmberJS, JQuery, …) • Grundsätzlich unterschiedliche Ansätze • Hohe Dynamik

Language Archive Cologne

5. Juli 20168

Page 9: Slides: Software - uni-hamburg.de · • Große Anzahl an Optionen (AngularJS, ReactJS, Backbone, EmberJS, JQuery, …) • Grundsätzlich unterschiedliche Ansätze • Hohe Dynamik

Language Archive Cologne

5. Juli 20169

Page 10: Slides: Software - uni-hamburg.de · • Große Anzahl an Optionen (AngularJS, ReactJS, Backbone, EmberJS, JQuery, …) • Grundsätzlich unterschiedliche Ansätze • Hohe Dynamik

Language Archive Cologne

5. Juli 2016

Offline HTML5 web apps

• Cross-plattform• Minimale Voraussetzungen an das System• Keine Installation• Web User-Interfaces• Reine HTML/CSS/Javascript-Anwendungen (ohne Backend) • Persistente Datenspeicherung (Web Storage)• Tool-Development durch Web-Entwickler

10

Page 11: Slides: Software - uni-hamburg.de · • Große Anzahl an Optionen (AngularJS, ReactJS, Backbone, EmberJS, JQuery, …) • Grundsätzlich unterschiedliche Ansätze • Hohe Dynamik

Language Archive Cologne

5. Juli 2016

Probleme von HTML5 web apps

• Konzeptuelle Probleme• Security-Features• Die Webplattform ist ein moving target• Hohe Dynamik bei Javascript frameworks

11

Page 12: Slides: Software - uni-hamburg.de · • Große Anzahl an Optionen (AngularJS, ReactJS, Backbone, EmberJS, JQuery, …) • Grundsätzlich unterschiedliche Ansätze • Hohe Dynamik

Language Archive Cologne

5. Juli 2016

Konzeptuelle Probleme

• Wo sind meine Daten?• Browser gewechselt• Computer gewechselt• Hohe Security-Settings (Storage wird automatisch gelöscht)

• Wo muss ich mich einloggen um meine Daten wiederzuholen?

• (Metadaten-Editor vs. Metadaten-Generator)

12

Page 13: Slides: Software - uni-hamburg.de · • Große Anzahl an Optionen (AngularJS, ReactJS, Backbone, EmberJS, JQuery, …) • Grundsätzlich unterschiedliche Ansätze • Hohe Dynamik

Language Archive Cologne

5. Juli 2016

Security-Features

• Warum gibt es kein automatisches Speichern?• Warum kann ich nicht einfach mit Dateien in meinem

Dokumenten-Ordner arbeiten?• Warum warnt die App mich nicht, wenn mein Browser alle

Daten löscht?

13

Page 14: Slides: Software - uni-hamburg.de · • Große Anzahl an Optionen (AngularJS, ReactJS, Backbone, EmberJS, JQuery, …) • Grundsätzlich unterschiedliche Ansätze • Hohe Dynamik

Language Archive Cologne

5. Juli 2016

Die Webplattform als Moving Target

• Web Storage • Deprecated• Storage size (Mozilla)

• Service Workers• unstable

• File API• Partielle Implementierung (Safari)

14

Page 15: Slides: Software - uni-hamburg.de · • Große Anzahl an Optionen (AngularJS, ReactJS, Backbone, EmberJS, JQuery, …) • Grundsätzlich unterschiedliche Ansätze • Hohe Dynamik

Language Archive Cologne

5. Juli 2016

Javascript Frameworks

• Große Anzahl an Optionen (AngularJS, ReactJS, Backbone, EmberJS, JQuery, …)

• Grundsätzlich unterschiedliche Ansätze• Hohe Dynamik macht Entscheidung schwierig (und

potentiell wenig nachhaltig)

15

Page 16: Slides: Software - uni-hamburg.de · • Große Anzahl an Optionen (AngularJS, ReactJS, Backbone, EmberJS, JQuery, …) • Grundsätzlich unterschiedliche Ansätze • Hohe Dynamik

Language Archive Cologne

5. Juli 2016

Mögliche Lösungen

• Daten-Sicherung und Synchronisations über Backend (bei Erhaltung der grundsätzlichen Offline-Fähigkeit)

• …?

16

Page 17: Slides: Software - uni-hamburg.de · • Große Anzahl an Optionen (AngularJS, ReactJS, Backbone, EmberJS, JQuery, …) • Grundsätzlich unterschiedliche Ansätze • Hohe Dynamik

Language Archive Cologne

5. Juli 2016

Danke!

CMDI Maker (App):http://cmdi-maker.uni-koeln.de/http://cmdi-maker.uni-koeln.de/help/

Source Code:https://github.com/cceh/CMDI-Maker

Slides: https://tr.im/CMDIMakerForge

Jonathan Blumtritt:[email protected]

Felix Rau:[email protected]

Sebastian Zimmer:[email protected]

17