Es gibt unzählige Web-Frameworks - also warum ein weniger bekanntes wie Echo3 aus der Mottenkiste herauskramen? Einfach deshalb, weil es – seiner Zeit weit voraus – bis heute kein Besseres gibt! Das zumindest glaubt eine eingeschworene Fan-Gemeinde, die entschlossen ist das Projekt nach einem kurzen Winterschlaf zu neuem Leben zu erwecken. Warum ein Blick auf das leichtgewichtige und kern-solide Framework lohnenswert ist, und welche attraktive Zukunft sein einzigartiger hybrider Ansatz mit einer server-seitigen Java-API und einer auch standalone nutzbaren client-seitigen JavaScript-API verspricht, das verrät dieser Vortrag. Technische Konzepte, Anwendungsgebiete und Code-Beispiele sollen das Framework illustrieren. Ein Vergleich mit den anderen gängigen Frameworks wie GWT, Vaadin, ZK und Eclipse RAP mit entsprechenden Erfahrungsberichten runden den Vortrag ab und geben auch weiterführende Orientierungshilfe. Zum Abschluss betrachten wir verschiedene Demo-Projekte die z. B. durch mobile Endgeräte und Echtzeitkommunikation glänzen.

1. Hybride Schönheit
Die (Wieder-)Entdeckung des Java/JavaScript Webframeworks Echo
Christof May
Barco
Benjamin Schmid
eXXcellent solutions

2. Willkommen!
https://secure.flickr.com/photos/7502393@N04 alborzshawn
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

3. Prämissen
Java-Welt
Effizient
Einfach
Funktionalität vs. HTML
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

4. UMFRAGE
"Perfektion entsteht nicht dann,
wenn man nichts mehr hinzuzufügen hat,
sondern wenn man nichts mehr wegnehmen kann.
Antoine de Saint-Exupéry
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

5. Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

6. Darum!
Swing-like
Single-Page
Effizient & Stabil
»Alternativlos«
Pfad nach JavaScript
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

7. Lizenz
MPL oder LGPL
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
http://www.sxc.hu/browse.phtml?f=view&id=1068313

8. Unterpunkt 1
● Unterpunkt 2
● ...
●
Überblick
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

9. Entwicklung
Pure Server
Server Pages with Ajax
Component-based Pages
Single-page (HTML)
Single-page (Components)
Pure Client
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

10. Echo Komponenten
Models
Events
Properties
button.setText(“foo”)
button.addActionListener(...)
button.setForeground(Color.RED)
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

11. Hybride Client/Server API
Gleiches Modell & Struktur
auf Server & Client
Drei Programmiermodelle
● Rein Client-seitig (JavaScript)
● Rein Serverseitig (Java)
● Mischbetrieb
(Beides)
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

12. Unterpunkt 1
● Unterpunkt 2
● ...
●
Architektur
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

13. Client-seitige JavaScript Anwendung
Browser
Applikations-Logik
Modell
Komponenten-Events
Echo
Komponenten
HTML
DOM
Sync
DOM
Events
Styles
Echo Engine (Fokus, Lifecycle, …)
CoreJS
Web Renderer
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
CSS

14. Ein Blick unter die Haube (Client-App)
1.
2.
Anwendungsentwicklung gegen Echo Komponenten.
CoreJS mit JavaScript-Spracherweiterungen
a. Für klassenbasierte OO und weitere Java-Nähe
b.
3.
Echo API & Styling erlaubt und harmonisiert:
a. HTML-freie, dynamische GUI-Entwicklung
b.
4.
Ohne Eingriffe & damit maximal kompatibel
Keine Abhängigkeiten zum “Web Renderer” Modul
Sync-Layer
a. Adaptierte Umsetzung & Anbindung einer HTML/CSSDarstellung
b.
5.
Behandelt von Browser-Bugs & Eigenheiten
Echo Engine steuert Komponenten-Lebenszyklus, Eingabefokusund Fensterverwaltung, Event-Anbindung und mehr
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

15. Hello World mit JavaScript
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

16. Half-Object Plus Protocol (HOPP)
Panel
Button
Textfield
…
Daten
Events
Server
Siehe auch http://heise.de/-506386
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Panel
Button
Textfield
…
Daten
Events
Client

17. Server-Side Anwendungen
Remoting Engine
Applikations-Logik
A
X
JA
P
OP
H
/
Echo
Komponenten
Echo
Komponenten
Peers
Sync
Styles
Styles
Echo Engine
Servlet
CoreJS
Web Renderer
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Web Renderer
Browser

18. Server/Client Sync-Zyklus
Update
Manager:
AJAX call:
Peers
Lifecycle
Translates
changes from
DOM to Model
Queued /
Immediate
Model
update
Encode &
send to
server
Receive &
Decode
changes
Trigger
user
events
Browser:
Sync:
Engine:
Display
Update
DOM
Decode &
Update
Models +
Components
Peers:
Update
Manager:
Encode
Collect
changes
Client
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Server
Application Logic
Sync:

19. Performance & Netzverkehr
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<smsg i="30" u="">
<libs>
<lib>Echo.Label</lib>
</libs>
<group i="init"/>
<group i="update">
<dir proc="CSyncRm">
<rm i="C.485" rm="C.486,C.487"/>
</dir>
<dir proc="CSyncUp">
<up i="C.501">
<c i="C.813" t="L">
<p n="text">Hello World!</p>
<p n="icon" t="I">!I!153b2cb_140da729c5a_6a</p>
</c>
</up>
</dir>
</group>
</smsg>
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

20. Live-Demo (“Todo Application”)
Quellcode:
https://github.com/exxcellent/echo3-todomvc
Wir sehen
●
●
●
●
Java API
Netzverkehr
Debugging
Styling
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

21. Unterpunkt 1
● Unterpunkt 2
● ...
●
Features
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

22. RIA: “Native-like” Web-Anwendungen
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

23. Transparenter Browser-Support
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

24. Komponenten
Echo Extras
Echolot
EchoPoint NG
...
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

25. “Dynamik”
●
●
●
●
Dynamisches Nachladen von Bibliotheken &
Komponenten
Schneller Anwendungsstart
Auch zu Laufzeit gernerierte Forms/UI möglich
(vs. HTML, ZK, GWT)
Beim Entwickeln: Meisten Änderungen ohne
Neustart sofort anwendbar
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

26. ...und was ist mit uns Entwicklern?
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

27. Server-Push / Websockets
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

28. Gleiche Komponenten-API Client/Server
Java:
Button btn = new Button(“Hello World!”);
btn.setBackground(Color.gray);
btn.addActionListener(...);
panel.add(btn);
JavaScript:
var btn = new Echo.Button({text: "Hello World!"});
btn.set("background", "#888888");
btn.addListener("action", function(e){alert("Hello")});
panel.add(btn);
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

29. JavaScript OO
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

30. Styling
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<ss>
<!-- Style 1 -->
<s n="MyButtonStyle" t="Button">
<p n="background">#e7e7e7</p>
<p n="insets">1px 8px</p>
<p n="border">1px ridge #414141</p>
<p n="backgroundImage">
<fi r="x" t="ResourceImageReference">
/image/fill/fill1.jpg
</fi>
</p>
<p n="lineWrap">false</p>
</s>
<s n="MyTextStyle" t="TextComponent">
</s>
<s n="MyRowStyle" t="nextapp.echo.app.Row">
<p n="alignment">
<a h="right" />
</p>
</s>
<s n="MyContentPaneStyle" t="ContentPane">
<p n="background">#c0c0c0</p>
</s>
</ss>
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

31. Echo Studio
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

32. Echo Studio
●
●
●
●
●
Eclipse-Plugin von NextApp
WYSIWYG Editor für Dialoge
Editor für Echo Stylesheets
Generierte Java-Views
wenig intrusiv und gut weiterverwendbar
In Planung: Open-Source
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

33. Unterpunkt 1
● Unterpunkt 2
● ...
●
Live-Demo
Verschiedene Echo Desktop und Tablet-Anwendungen
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

34. Live: “Rent-a-Tank”
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

35. Live: “Rent-a-Tank”
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

36. Live: “Rent-a-Tank”
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

37. Live: “Rent-a-Tank”
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

38. Live: “Rent-a-Tank”
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

39. buslogistik.de
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

40. Barco Applikation (auf Nexus 7)
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

41. Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

42. Hands-on
Erstellung einer eigenen Echo-Komponente
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

43. Entwicklung eigener Komponenten
Quellcode:
https://github.com/chrismay2/echo3template
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

44. Unterpunkt 1
● Unterpunkt 2
● ...
●
Echo im Vergleich
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

45. Technologischer Überblick
Aspekt
GWT UI
Vaadin
ZK
RAP
Echo
GWT
GWT
jQuery
quoxdoo
Echo
Client-side API
***
nein
nein
nein
ja
Java/JavaScript
Mischbetrieb
teils
ab 7.0
?
nein
voll
Programmiermodell
Java
Java
Java
Java
Java /
JavaScript
Cross-Compilation
notwendig
ja
(ja)
nein
nein
nein
Visueller Editor
ja
ja
ja
ja
ja
KomponentenEntwicklung
via GWT
via GWT
?
?
plain
JavaScript
SDK or
s. GWT
?
Eclipse
keine
Basistechnologie
Abhängigkeiten
Eclipse Plugin
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

46. GWT
+
Grosse Entwicklerbasis
Community Support
Beliebig skalierbar
-
Benötigt IDE/Build Tools
Komplexe Projektstruktur
Zeitaufwändiger Kompiliervorgang
Mehr Client/Server Sync Code
notwendig
“Endlose” Suche nach Serialisierungsproblemen
Keine dynamische UI
Sprachmix (Java, XML, HTML, CSS)
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

47. Vaadin
+
Grosse Entwicklerbasis
Kommerzieller Support
Geräteabh. Views
“Mainstream”
-
Benötigt IDE Tools (u.a. Facets)
Teurer Support (1000€/Jahr)
Komplexe Projektstruktur
Zeitaufwändiger Kompiliervorgang
Warum brauche ich Plugins (SpaceWrapper, CSSInject) um
einfachste Aufgaben auszuführen?
Widget-Entwicklung schwierig und langwierig
Generierte Artifakte im src-Folder...
Sprachmix (Java, XML, HTML, CSS)
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

48. ZK
+
Guter (schneller) Support
Deklarative UI (ZUL)
●
●
-
Teure Lizenz (1790$/y/dev)
Custom-Komponenten?
Optimiert für ZUL- suboptimal für Java-UI (Richlets)
API un-intuitive und schwer verständlich
Erfordert “ungewohnten” Programmierstil
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

49. Eclipse RAP/Tabris
+
Kommerzieller Support
Bekannte API
Native Widgets
-
Native Widgets
Lizenzkosten für Tabris
Custom-Komponenten dürften schwierig
sein (?)
Beschränkt auf Eclipse-API (pre-Java 1.4)
Sehr beschränkte Features (Animated Gif, Button Alignment etc.)
Styling extrem schwierig bis unmöglich
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

50. Echo3
+
Intuitive, effiziente API
Client-only oder Client/Server
Schnell, super-stabil
Sauberer Code/Architektur
“It just works”
-
(Noch?) kein kommerzieller Support
Bisher abhängig von einer Einzelperson
Bekanntheitsgrad, Marketing
Standard-Themes nicht mehr zeitgemäß
hmm...
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

51. Fazit
Fazit
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

52. Quo vadis Web-Entwicklung?
● Umfrage-Wunschliste
● Entwicklungstendenzen
○ Mobile
○ HTML5
○ Light-weight & Scripting
○ Innovation im Java-Ökosystem?
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

53. Echo Roadmap
● Sichtbarkeit & Coolness-Faktor
○
Neue Website
○
Flat-UI Theme
○
Annäherung an das JavaScript-Ökosystem
● Echo going
○
Mobile
○
Modern Browsers (legacy IE-Support)
○
HTML5
● Browser History & CSS3
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

54. Mitmachen!
● Einfach Benutzen, Feedback geben
● Bugs oder Verbesserungen melden
● Eigene Komponenten erstellen und
teilen
● Bugfixes oder neue Featurtes per
GitHub
● Neue Webseite
● Auf Forum posten
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

55. Rede & Antwort
Ihre Fragen, Anmerkungen und Meinungen?
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“

56. Vielen Dank!
https://github.com/echo3
Christof May
Barco Control Rooms GmbH
Greschbachstraße 5a
D-76229 Karlsruhe
mail@chrismay.de
Benjamin Schmid
eXXcellent solutions
Beim Alten Fritz 2
D-89075 Ulm
Twitter: @bentolor
b.schmid@exxcellent.de