Das Web als Plattform für Anwendungsentwicklung

Transkript

1 Das Web als Plattform für Anwendungsentwicklung Orientierungspunkt 02/2013 Version: 1.0 Orientation in Objects GmbH Weinheimer Str Mannheim Ihr Sprecher Sönke Sothmann Trainer, Berater, Entwickler Schwerpunkte Agile Entwicklungsprozesse, Entwicklung von Web-Anwendungen, Web als Plattform 2 1

2 Gliederung Das Web gestern und heute Das Web als Plattform Die Web Plattform heute und morgen Ausblick 3 Gliederung Das Web gestern und heute Das Web als Plattform Die Web Plattform heute und morgen Ausblick 4 2

3 Das Web heute - aus Anwendersicht Benutzerfreundlich Rich User Experience Hohe Geschwindigkeit, geringe Latenz Gute Ideen Messlatte: z.b. Google-Dienste 5 (Technische) Evolution des Webs 1. Web 1.0 Statisches HTML, Server liefert nur aus 2. Web 1.5 Dynamisches HTML, gerendert auf dem Server (statisch im Browser) PHP, JSP, 3. Web 2.0 Dynamisches HTML, gerendert auf dem Server (dynamisch im Browser) AJAX, JavaScript Schnipsel 4. HTML5 Statisches HTML, Server liefert nur aus (dynamisch im Browser) Single-Page Applications 6 3

4 Die höchste Verbreitung hat (1) (Quelle: wikipedia.org) 7 Die höchste Verbreitung hat (2) (Quelle: wikipedia.org) 8 4

5 Unterstützung wird stetig besser (Quelle: html5test.com) 9 Problemfeld alte Browser Gefahr der Stagnation bei techn. Möglichkeiten IE6 ist tot, IE7 und IE8 sterben aus Auto Updates Chrome, Firefox, IE10 Immer up to date Kurze Releasezyklen 10 5

6 Feature Detection Umgang mit alten Browsern durch Feature Detection if (Modernizr.touch){ // bind to touchstart, touchmove, etc. } else { // bind to normal click, mousemove, etc. } 11 Mobile Zielplattform häufig nicht nur Desktop-Rechner, sondern auch mobile Geräte Mobile Geräte haben sehr moderne Browser Eine Web-Anwendung für Desktop und Mobile Smartphone Apps mit Webtechnologien 12 6

7 Adobe PhoneGap / Apache Cordova (Quelle: phonegap.com) 13 Der Browser als Betriebssystem? FirefoxOS ChromeOS 14 7

8 Stores für Web Apps Konkurrenz zu Apples AppStore, Google Play und co. Store Apps werden leichter gefunden Höhere Bereitschaft, Geld für eine App auszugeben Niedrigere Hürde, Geld auszugeben (Bezahlvorgang über die Plattform) Web Apps können "installiert" werden (ein besserer Bookmark) Chrome Web Store Mozilla Marketplace 15 Webtechnologien für Desktop-Apps Desktopanwendungen mit HTML, CSS und JavaScript Ritterschlag durch Microsoft Windows Store Apps 16 8

9 Momentum Hype um HTML5, CSS3 und JavaScript 17 Grundaussagen Der Browser wird immer mehr zur mächtigen Anwendungsplattform Web Anwendungen werden immer konkurrenzfähiger zu Desktop Anwendungen Weg von Server-seitigen und hin zu Client-seitige Ansätzen 18 9

10 Gliederung Das Web gestern und heute Das Web als Plattform Die Web Plattform heute und morgen Ausblick 19 Was ist die Web Plattform? Nicht das Web selbst Browser Webtechnologien HTML CSS JavaScript Web Standards JavaScript APIs 20 10

11 Die Plattform Architektur APP Patterns Frameworks HTML JS CSS APIs Browser 21 Vorteile der Web Plattform Reichweite läuft auf "allen" Systemen (Desktop und Mobile) Geringere Entwicklungskosten, wenn viele Betriebssysteme und Geräte unterstützt werden sollen Niedrige Hürde Benutzer müssen nichts installieren Einfache Verteilung Ausliefern neuer Client-Versionen auf die Endbenutzersysteme (wie man es von Desktop-Anwendungen kennt) entfällt 22 11

12 Nachteile der Web Plattform Schlechtere User-Experience (wird immer besser) Schlechteres Programmiermodell (wird immer besser) Schwächen der Sprache JavaScript Magere Klassen -Bibliothek von JavaScript Schwaches Tooling Technische Beschränkungen (immer weniger) Hardwarezugriffe (z.b. DVD-Brennprogramm) Dinge, die Clientseitig viel Speicher fressen (Videoschnitt) 23 Single-Page Applications JavaScript Anwendung Einmalige Initialisierung Datenaufrufe HTML Ressourcen RPC HTTP Server App-Dateien HTML CSS JAVASCRIPT IMAGES XML Files Servlet container Services Statisch Dynamisch 24 12

13 Thin Server Architecture - 1 Putting the View on the Client (Yes, you have one. It's the browser, silly!) Clientseitige Logik wird vom Server auf den Client verlagert Kein serverseitiges Templating Klassisches Client-Server Modell Client läuft im Browser Datenaustausch zwischen Client und Server Server liefert nur noch Daten über Schnittstellen aus Vorteile Server skaliert besser Komplexität sinkt Geschwindigkeit / Responsiveness steigt Weitere Clients (z.b. Smartphone App) leichter zu realisieren 25 Thin Server Architecture - 2 Browser Client Server Service A Service B Smartphone Client z.b. JSON HTTP Schnittstelle Service C 26 13

14 Gliederung Das Web gestern und heute Das Web als Plattform Die Web Plattform heute und morgen Ausblick 27 CSS3 Allgemein Box-sizing Text-overflow Opacity Media Queries CSS3 Selectors Animationen Transitions Animations Gestaltung Multiple Backgrounds Background-image options Border-radius Border images Box-shadow Transforms 3D Transforms 28 14

15 CSS Transitions Animieren von CSS Property Änderungen Deklarativ, ohne JavaScript div { transition: width 1.5s; } Nicht zum Selbstzweck Verschleiern der Latenz Interaktionen unterbinden As seen on MacOS, Windows, Android, ios, 29 CSS Layouting Problem CSS perfekt für Styling, aber schlecht für User Interface Design, da Layouting unintuitiv und teuer Es gibt keine Layout-Manager Workaround Floats oder Layer CSS Layouting am Horizont Multi-column Layout Flexible Box Layout Grid Layout 30 15

16 CSS Flexible Box Layout Module The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. [ ] Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions. (Quelle: 31 CSS Layouting - Anwendungsfall Borderlayout North West Center East South 32 16

17 Mögliche Lösung für Borderlayout North Horizontal Panel Vertical Panel West Center East South 33 Was ist HTML5? (Quelle: wikimedia.org) 34 17

18 Wann ist HTML5 fertig? HTML5 schon lange in Arbeit noch lange nicht fertig manche Specs sind noch Working Draft, aber in allen Browsern implementiert und schon vielfach eingesetzt andere Specs sind schon fertig, aber noch nicht in allen Browsern implementiert 35 Neue technische Möglichkeiten durch HTML5 Früher nur durch Browser-Plugins 2D Grafik: Canvas 3D Grafik: WebGL Audio Video Real Time Communication Zugriff auf Mikrofon und Kamera Peer-to-Peer Verbindungen Multi Threading: Web Workers 36 18

19 HTML5 für Business Anwendungen potentiell relevant Formularelemente und -validierung Offline-Fähigkeiten / Persistenz Notifications Geolocation Erweiterte DOM-API File API Drag and Drop Web Sockets Touch Events Clipboard API Fullscreen-API Cross Document Messaging 37 HTML5 Forms - Input Types Neue Input Types Tel Url Search Color Number Range Date, Time, Datetime, Week, Month Fallback: Text 38 19

20 HTML5 Forms - Validierung Implizit Type Attribut Explizit Maxlength Required Pattern Min (number) Max (number) 39 HTML5 Forms - Styling mit CSS :focus { } :required { } :optional { } :valid { } :invalid { } :in-range { } :out-of-range { } 40 20

21 HTML5 Offline Application Cache Cache Manifest Persistenz (Quelle: w3.org) 41 Application Cache - Cache Manifest CACHE MANIFEST # :v3 CACHE: foo.html NETWORK: /remoteapi FALLBACK: images images/offline.jpg /retrieveproducts products-top100.json 42 21

22 Persistenz WebStorage LocalStorage SessionStorage Web SQL Database IndexedDB localstorage.foo = 'bar'; localstorage.foo; 43 Notifications Benutzer über Ereignis informieren Benachrichtigung auch sichtbar, wenn Browserfenster im Hintergrund / minimiert 44 22

23 Geolocation Ort des Benutzers feststellen Bewegung des Benutzers verfolgen Nutzt verschiedene Informationen GPS WLAN/Mobilfunknetz IP-Adresse vom Benutzer definierter Standort Anwendungsbeispiele Nächste Filiale in der Nähe Umkreissuche 45 Programmiermodell im Web Technisch ist viel möglich, aber Entwicklung ist Aufwändig / teuer Fehleranfällig Nervenzehrend Verantwortlich dafür Schwächen der Sprache JavaScript Tooling Browserinkompatibilitäten Kein standardisiertes Komponentenmodell 46 23

24 Sprachen - JavaScript Vorteile Sehr elegant Nachteile Fehlende statische Typisierung Schwaches Tooling Ungewohntes Vererbungskonzept Magere Klassen -Bibliothek JavaScript wird uns noch ein Weilchen begleiten 47 Sprachen - Umgang mit JavaScript Sprache lernen! Strict Mode einsetzen Einsatz geeigneter Entwurfsmuster Tooling Google Closure Compiler und JSDoc Annotations JSLint/JSHint IDEs wie WebStorm/IntelliJ, Netbeans, 48 24

25 Sprachen - DART Enthüllt 10/2011 von Google Ausführung In Laufzeitumgebung Cross-compiled zu JavaScript Ziele / Vorteile Strukturierter / large scale application development Statische Typisierung, Klassen, Module und Abhängigkeiten Höhere Ausführungsgeschwindigkeit Sicherer Für Client und Server Gutes Tooling (Eclipse) 49 Sprachen - DART - Nachteile Neue Plattform Fehlende Bibliotheken Fehlende Community Kann JS aufrufen, ist aber umständlich Keine Unterstützung anderer Browserhersteller 50 25

26 Sprachen - TypeScript Enthüllt 10/2012 von Microsoft Ausführung Cross-compiled zu JavaScript Generiert idiomatisches JavaScript Ziele / Vorteile Strukturierter / large scale application development Statische Typisierung, Klassen, Module und Abhängigkeiten Superset von JavaScript Projekte leicht migrierbar, bestehende JS Bibliotheken nutzbar Declaration Files Bestehende JavaScript Bibliotheken nachträglich typisieren Implementiert zukünftige JS Features schon heute, hält sich an Spec Gutes Tooling (Visual Studio) Compiler in TypeScript implementiert 51 Frameworks Java GWT, Vaadin JavaScript (MV* Frameworks, Client Side Templating) Backbone Ember KnockoutJS AngularJS 52 26

27 Web Components - Bisher Komponentenbildung bisher Nicht mit Boardmitteln Über Frameworks Meist serverseitig 53 Web Components - Wunsch Darstellung der Komponente deklarativ festlegen Deklarative Einbindung der Komponente Tags Innere Struktur der Komponente verbergen Klare Schnittstelle / API Bestehende Komponenten / Elemente erweitern können 54 27

28 Web Components Templates HTML für die Darstellung einer Komponente Custom Elements Shadow DOM Verbergen des DOM Baums einer Komponente Änderungen überwachen Mutation Observers, Object.observe() 55 Gliederung Das Web gestern und heute Das Web als Plattform Die Web Plattform heute und morgen Ausblick 56 28

29 Offene Probleme Fehlende GUI Komponenten Browserinkompatibilitäten Programmiermodell Schwächen der Sprache JavaScript Fehlende Typisierung Prototypische Vererbung (Klassen kommen aber) Performance Magere Klassen -Bibliothek von JavaScript Spezifikationswald unübersichtlich 57 Fazit Immer weniger Gründe gegen das Web / für eine klassische Desktopanwendung Technische Grenzen schwinden Programmiermodell verbessert sich Schon jetzt modernere Frontend-Mechanismen als Swing, konkurriert eher mit.net/wpf und JavaFX Styling per CSS Layouting kommt Transforms, Transitions, Animations, Media Queries 58 29

30 Links Can I use HTML5 PLEASE HTML5 Rocks OIO Blog - Web as a platform 59?? Fragen??? Orientation Objects GmbH Weinheimer Str Mannheim info@oio.de?? 30

31 Folien zum Vortrag Die Folien werden auf unserer Website veröffentlicht 61 Kommende Orientierungspunkte Nie mehr weltweites Warten: Performancetuning für JSF- Anwendungen Freitag, 19. April :00-18:00 Uhr JBoss 7 als Plattform für hochverfügbare Anwendungen Freitag, 24. Mai :00-18:00 Uhr Über den Tellerrand: Überblick JSF-Bibliotheken und Tools für den praktischen Einsatz Freitag, 28. Juni :00-17:00 Uhr 31

32 Vielen Dank für ihre Aufmerksamkeit! Orientation in Objects GmbH Weinheimer Str Mannheim 32