1
Orientation in Objects GmbH
Weinheimer Str. 6868309 Mannheim
Das Web als Plattformfür
Anwendungsentwicklung
Orientierungspunkt 02/2013
1.0
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Ihr Sprecher
2
Sönke Sothmann
Trainer, Berater, Entwickler
SchwerpunkteAgile Entwicklungsprozesse,
Entwicklung von Web-Anwendungen,Web als Plattform
2
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Gliederung
• Das Web gestern und heute
• Das Web als Plattform
• Die Web Plattform heute und morgen
• Ausblick
3
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Gliederung
• Das Web gestern und heute• Das Web als Plattform
• Die Web Plattform heute und morgen
• Ausblick
4
3
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Das Web heute - aus Anwendersicht
• Benutzerfreundlich
• “Rich User Experience”
• Hohe Geschwindigkeit, geringe Latenz
• Gute Ideen
• Messlatte: z.B. Google-Dienste
5
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
(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
4
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Die höchste Verbreitung hat… (1)
7
(Quelle: wikipedia.org)
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Die höchste Verbreitung hat… (2)
8
(Quelle: wikipedia.org)
5
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Unterstützung wird stetig besser
9
(Quelle: html5test.com)
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
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
6
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Feature Detection
• Umgang mit alten Browsern durchFeature Detection
11
if (Modernizr.touch){// bind to touchstart, touchmove, etc.
} else {// bind to normal click, mousemove, etc.
}
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
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
7
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Adobe PhoneGap / Apache Cordova
13
(Quelle: phonegap.com)
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Der Browser als Betriebssystem?
14
FirefoxOS ChromeOS
8
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
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)
15
Chrome Web Store Mozilla Marketplace
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Webtechnologien für Desktop-Apps
• Desktopanwendungen mit HTML, CSS und JavaScript– Ritterschlag durch Microsoft
• Windows Store Apps
16
9
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Momentum
• Hype um HTML5, CSS3 und JavaScript
17
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
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
10
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Gliederung
• Das Web gestern und heute
• Das Web als Plattform• Die Web Plattform heute und morgen
• Ausblick
19
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Was ist die Web Plattform?
• Nicht das Web selbst
• Browser
• Webtechnologien– HTML– CSS– JavaScript
• Web Standards– JavaScript APIs
20
11
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Die Plattform…
21
Browser
HTML JS CSS APIs
Frameworks
APPArchitekturArchitektur Patterns
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
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
12
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
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
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
HTTP Server
Single-Page Applications
24
App-Dateien
HTMLCSS
JAVASCRIPTIMAGESXML Files
JavaScriptAnwendung
Servlet container
Services
Statisch
Dynam
isch
Einm
alige InitialisierungD
atenaufrufe
HTML
Ressourcen
RPC
13
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
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
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Thin Server Architecture - 2
26
Bro
wse
r
Server
Service A
Service B
Service C
Client
Sm
artp
hone
Clientz.B.
JSON HTTPSchnittstelle
14
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Gliederung
• Das Web gestern und heute
• Das Web als Plattform
• Die Web Plattform heute und morgen• Ausblick
27
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
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
15
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
CSS Transitions
• Animieren von CSS Property Änderungen– Deklarativ, ohne JavaScript
• Nicht zum Selbstzweck– Verschleiern der Latenz– Interaktionen unterbinden– As seen on MacOS, Windows, Android, iOS, …
29
div {
transition: width 1.5s;
}
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
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
16
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
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: http://www.w3.org/TR/css3-flexbox/)
31
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
CSS Layouting - Anwendungsfall Borderlayout
32
North
South
West EastCenter
17
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Mögliche Lösung für Borderlayout
33
North
South
West EastCenter
Horizontal Panel
Ver
tical
Pan
el
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Was ist HTML5?
34
(Quelle: wikimedia.org)
18
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
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
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
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
19
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
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
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
HTML5 Forms - Input Types
• Neue Input Types– Email– Tel– Url– Search– Color– Number– Range– Date, Time, Datetime,
Week, Month
• Fallback: Text
38
20
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
HTML5 Forms - Validierung
• Implizit– Type Attribut
• Explizit– Maxlength– Required– Pattern– Min (number)– Max (number)
39
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
HTML5 Forms - Styling mit CSS
:focus { }
:required { }
:optional { }
:valid { }
:invalid { }
:in-range { }
:out-of-range { }
40
21
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
HTML5 Offline
• Application Cache– Cache Manifest
• Persistenz
41
(Quelle: w3.org)
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Application Cache - Cache Manifest
CACHE MANIFEST
# 2012-12-13:v3
CACHE:
foo.html
NETWORK:
/remoteapi
FALLBACK:
images images/offline.jpg
/retrieveProducts products-top100.json
42
22
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Persistenz
• WebStorage– LocalStorage– SessionStorage
• Web SQL Database
• IndexedDB
43
localStorage.foo = 'bar';
localStorage.foo;
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Notifications
• Benutzer über Ereignis informieren
• Benachrichtigung auch sichtbar, wenn Browserfenster im Hintergrund / minimiert
44
23
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
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
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
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
24
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Sprachen - JavaScript
• Vorteile– Sehr elegant
• Nachteile– Fehlende statische Typisierung
• Schwaches Tooling
– Ungewohntes Vererbungskonzept– Magere „Klassen“-Bibliothek
• JavaScript wird uns noch ein Weilchen begleiten…
47
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
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
25
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
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ängig keiten
– Höhere Ausführungsgeschwindigkeit– Sicherer– Für Client und Server– Gutes Tooling (Eclipse)
49
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Sprachen - DART - Nachteile
• Neue Plattform
• Fehlende Bibliotheken
• Fehlende Community
• Kann JS aufrufen, ist aber umständlich
• Keine Unterstützung anderer Browserhersteller
50
26
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
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ängig keiten– Superset von JavaScript
• Projekte leicht migrierbar, bestehende JS Bibliothe ken nutzbar– Declaration Files
• Bestehende JavaScript Bibliotheken nachträglich typ isieren– Implementiert zukünftige JS Features schon heute, hält sich an Spec– Gutes Tooling (Visual Studio)– Compiler in TypeScript implementiert
51
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Frameworks
• Java– GWT, Vaadin
• JavaScript (MV* Frameworks, Client Side Templating)– Backbone– Ember– KnockoutJS– AngularJS– …
52
27
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Web Components - Bisher
• Komponentenbildung bisher– Nicht mit Boardmitteln– Über Frameworks– Meist serverseitig
53
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
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
28
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
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
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Gliederung
• Das Web gestern und heute
• Das Web als Plattform
• Die Web Plattform heute und morgen
• Ausblick
56
29
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
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
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
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
30
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Links
• Can I use…– http://caniuse.com
• HTML5 PLEASE– http://html5please.com
• HTML5 Rocks– http://www.html5rocks.com
• OIO Blog - Web as a platform– http://blog.oio.de/category/web-as-a-platform
59
Orientation in Objects GmbH
Weinheimer Str. 6868309 Mannheim
??
? ?
????
Fragen ?
31
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Folien zum Vortrag
• Die Folien werden auf unserer Website veröffentlicht– http://oio.de/tiny/orientierungspunkt-archiv
61
Das Web als Plattform für Anwendungsentwicklung© 2013 Orientation in Objects GmbH
Kommende Orientierungspunkte
• Nie mehr weltweites Warten: Performancetuning für JSF-Anwendungen– Freitag, 19. April 2013 - 17:00-18:00 Uhr
• JBoss 7 als Plattform für hochverfügbare Anwendungen– Freitag, 24. Mai 2013 - 17:00-18:00 Uhr
• Über den Tellerrand: Überblick JSF-Bibliotheken und Tools für den praktischen Einsatz– Freitag, 28. Juni 2013 - 16:00-17:00 Uhr
32
Orientation in Objects GmbH
Weinheimer Str. 6868309 Mannheim
Vielen Dank für ihre Aufmerksamkeit !
Top Related