![Page 1: Slides: Software - uni-hamburg.de · • Große Anzahl an Optionen (AngularJS, ReactJS, Backbone, EmberJS, JQuery, …) • Grundsätzlich unterschiedliche Ansätze • Hohe Dynamik](https://reader033.vdocuments.pub/reader033/viewer/2022060903/609f88b01dc07529c66786e7/html5/thumbnails/1.jpg)
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](https://reader033.vdocuments.pub/reader033/viewer/2022060903/609f88b01dc07529c66786e7/html5/thumbnails/2.jpg)
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](https://reader033.vdocuments.pub/reader033/viewer/2022060903/609f88b01dc07529c66786e7/html5/thumbnails/3.jpg)
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](https://reader033.vdocuments.pub/reader033/viewer/2022060903/609f88b01dc07529c66786e7/html5/thumbnails/4.jpg)
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](https://reader033.vdocuments.pub/reader033/viewer/2022060903/609f88b01dc07529c66786e7/html5/thumbnails/5.jpg)
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](https://reader033.vdocuments.pub/reader033/viewer/2022060903/609f88b01dc07529c66786e7/html5/thumbnails/6.jpg)
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](https://reader033.vdocuments.pub/reader033/viewer/2022060903/609f88b01dc07529c66786e7/html5/thumbnails/7.jpg)
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](https://reader033.vdocuments.pub/reader033/viewer/2022060903/609f88b01dc07529c66786e7/html5/thumbnails/8.jpg)
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](https://reader033.vdocuments.pub/reader033/viewer/2022060903/609f88b01dc07529c66786e7/html5/thumbnails/9.jpg)
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](https://reader033.vdocuments.pub/reader033/viewer/2022060903/609f88b01dc07529c66786e7/html5/thumbnails/10.jpg)
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](https://reader033.vdocuments.pub/reader033/viewer/2022060903/609f88b01dc07529c66786e7/html5/thumbnails/11.jpg)
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](https://reader033.vdocuments.pub/reader033/viewer/2022060903/609f88b01dc07529c66786e7/html5/thumbnails/12.jpg)
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](https://reader033.vdocuments.pub/reader033/viewer/2022060903/609f88b01dc07529c66786e7/html5/thumbnails/13.jpg)
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](https://reader033.vdocuments.pub/reader033/viewer/2022060903/609f88b01dc07529c66786e7/html5/thumbnails/14.jpg)
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](https://reader033.vdocuments.pub/reader033/viewer/2022060903/609f88b01dc07529c66786e7/html5/thumbnails/15.jpg)
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](https://reader033.vdocuments.pub/reader033/viewer/2022060903/609f88b01dc07529c66786e7/html5/thumbnails/16.jpg)
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](https://reader033.vdocuments.pub/reader033/viewer/2022060903/609f88b01dc07529c66786e7/html5/thumbnails/17.jpg)
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