Das Web als Plattform für Anwendungsentwicklung · 2020-05-25 · – manche Specs sind noch...

1

Orientation in Objects GmbH

Weinheimer Str. 6868309 Mannheim

[email protected]:

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


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


• Ausblick

4

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

4


Die höchste Verbreitung hat… (1)

7

(Quelle: wikipedia.org)


Die höchste Verbreitung hat… (2)

8

(Quelle: wikipedia.org)

5


Unterstützung wird stetig besser

9

(Quelle: html5test.com)


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


Feature Detection

• Umgang mit alten Browsern durchFeature Detection

11

if (Modernizr.touch){// bind to touchstart, touchmove, etc.

} else {// bind to normal click, mousemove, etc.

}


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


Adobe PhoneGap / Apache Cordova

13

(Quelle: phonegap.com)


Der Browser als Betriebssystem?

14

FirefoxOS ChromeOS

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)

15

Chrome Web Store Mozilla Marketplace


Webtechnologien für Desktop-Apps

• Desktopanwendungen mit HTML, CSS und JavaScript– Ritterschlag durch Microsoft

• Windows Store Apps

16

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

10


Gliederung


• 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

11


Die Plattform…

21

Browser

HTML JS CSS APIs

Frameworks

APPArchitekturArchitektur Patterns


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


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


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


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

26

Bro

wse

r

Server

Service A

Service B

Service C

Client

Sm

artp

hone

Clientz.B.

JSON HTTPSchnittstelle

14


Gliederung



• 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

15


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;

}


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


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


CSS Layouting - Anwendungsfall Borderlayout

32

North

South

West EastCenter

17


Mögliche Lösung für Borderlayout

33

North

South

West EastCenter

Horizontal Panel

Ver

tical

Pan

el


Was ist HTML5?

34

(Quelle: wikimedia.org)

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

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– Email– Tel– Url– Search– Color– Number– Range– Date, Time, Datetime,

Week, Month

• Fallback: Text

38

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

21


HTML5 Offline

• Application Cache– Cache Manifest

• Persistenz

41

(Quelle: w3.org)


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


Persistenz

• WebStorage– LocalStorage– SessionStorage

• Web SQL Database

• IndexedDB

43

localStorage.foo = 'bar';

localStorage.foo;


Notifications

• Benutzer über Ereignis informieren

• Benachrichtigung auch sichtbar, wenn Browserfenster im Hintergrund / minimiert

44

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

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

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ängig keiten

– 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

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ä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


Frameworks

• Java– GWT, Vaadin

• JavaScript (MV* Frameworks, Client Side Templating)– Backbone– Ember– KnockoutJS– AngularJS– …

52

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

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




• Ausblick

56

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

30


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



[email protected]

??

? ?

????

Fragen ?

31


Folien zum Vortrag

• Die Folien werden auf unserer Website veröffentlicht– http://oio.de/tiny/orientierungspunkt-archiv

61


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



[email protected]

Vielen Dank für ihre Aufmerksamkeit !

Das Web als Plattform für Anwendungsentwicklung · 2020-05-25 · – manche Specs sind noch...

Documents

Transcript of Das Web als Plattform für Anwendungsentwicklung · 2020-05-25 · – manche Specs sind noch...