Post on 16-Oct-2020
Hybride SchönheitDie (Wieder-)Entdeckung des Java/JavaScript Webframeworks Echo
Christof May Benjamin Schmid Barco eXXcellent solutions
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Willkommen!
https://secure.flickr.com/photos/7502393@N04 alborzshawn
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Java-Welt
Effizient
Einfach
Funktionalität vs. HTML
Prämissen
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
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“
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Swing-like
Single-Page
Effizient & Stabil
»Alternativlos«
Pfad nach JavaScript
Darum!
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
MPL oder LGPL
Lizenz
http://www.sxc.hu/browse.phtml?f=view&id=1068313
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
● Unterpunkt 1● Unterpunkt 2● ...
Überblick
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Pure Server
Server Pages with Ajax
Component-based Pages
Single-page (HTML)
Single-page (Components)
Pure Client
Entwicklung
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Models
Events
Properties
Echo Komponenten
button.setText(“foo”)
button.addActionListener(...)
button.setForeground(Color.RED)
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Gleiches Modell & Struktur auf Server & Client
Drei Programmiermodelle● Rein Client-seitig (JavaScript)● Rein Serverseitig (Java)● Mischbetrieb (Beides)
Hybride Client/Server API
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
● Unterpunkt 1● Unterpunkt 2● ...
Architektur
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Client-seitige JavaScript Anwendung
Web Renderer
CoreJS
Echo Engine (Fokus, Lifecycle, …)
Browser
CSS
DOMEcho Komponenten
Styles
Sync
Applikations-Logik
Komponenten-EventsModell
DOMEvents
HTML
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
1. Anwendungsentwicklung gegen Echo Komponenten.2. CoreJS mit JavaScript-Spracherweiterungen
a. Für klassenbasierte OO und weitere Java-Näheb. Ohne Eingriffe & damit maximal kompatibel
3. Echo API & Styling erlaubt und harmonisiert: a. HTML-freie, dynamische GUI-Entwicklungb. Keine Abhängigkeiten zum “Web Renderer” Modul
4. Sync-Layera. Adaptierte Umsetzung & Anbindung einer HTML/CSS-
Darstellungb. Behandelt von Browser-Bugs & Eigenheiten
5. Echo Engine steuert Komponenten-Lebenszyklus, Eingabefokus- und Fensterverwaltung, Event-Anbindung und mehr
Ein Blick unter die Haube (Client-App)
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Hello World mit JavaScript
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
ClientServer
Panel Panel
Button ButtonTextfield Textfield
… …
Half-Object Plus Protocol (HOPP)
DatenEvents Daten
Events
Siehe auch http://heise.de/-506386
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Web Renderer
Server-Side Anwendungen
Web Renderer
CoreJS
Echo Engine
Browser
Echo Komponenten
Styles
Sync
Remoting Engine
Echo Komponenten
Styles
Applikations-Logik
Servlet
Peers
AJAX/HOPP
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Server/Client Sync-Zyklus
Sync:
Translates changes fromDOM to Model
Update Manager:
Queued /ImmediateModel update
AJAX call:
Encode & send to server
Peers
Receive & Decode changes
Lifecycle
Trigger user events A
pplication LogicUpdate Manager:
Collectchanges
Peers:
Encode
Engine:
Decode &Update Models + Components
Sync:
Update DOM
Browser:
Display
Client Server
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
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“
Quellcode:https://github.com/exxcellent/echo3-todomvc
Wir sehen● Java API● Netzverkehr● Debugging● Styling
Live-Demo (“Todo Application”)
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
● Unterpunkt 1● Unterpunkt 2● ...
Features
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
RIA: “Native-like” Web-Anwendungen
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Transparenter Browser-Support
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Echo Extras
EchoPoint NG...
Komponenten
Echolot
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
● 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
“Dynamik”
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
...und was ist mit uns Entwicklern?
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Server-Push / Websockets
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Java:
Button btn = new Button(“Hello World!”);btn.setBackground(Color.gray);btn.addActionListener(...);panel.add(btn);
Gleiche Komponenten-API Client/Server
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“
JavaScript OO
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
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“
Echo Studio
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
● 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
Echo Studio
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
● Unterpunkt 1● Unterpunkt 2● ...
Live-DemoVerschiedene Echo Desktop und Tablet-Anwendungen
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Live: “Rent-a-Tank”
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Live: “Rent-a-Tank”
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Live: “Rent-a-Tank”
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Live: “Rent-a-Tank”
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Live: “Rent-a-Tank”
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
buslogistik.de
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Barco Applikation (auf Nexus 7)
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Hands-onErstellung einer eigenen Echo-Komponente
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Quellcode: https://github.com/chrismay2/echo3template
Entwicklung eigener Komponenten
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
● Unterpunkt 1● Unterpunkt 2● ...
Echo im Vergleich
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Technologischer ÜberblickAspekt GWT UI Vaadin ZK RAP Echo
Basistechnologie 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
Komponenten-Entwicklung
via GWT via GWT ? ? plain JavaScript
Abhängigkeiten SDK orEclipse Plugin
s. GWT ? Eclipse keine
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
GWT
+Grosse EntwicklerbasisCommunity SupportBeliebig skalierbar
-Benötigt IDE/Build ToolsKomplexe Projektstruktur Zeitaufwändiger KompiliervorgangMehr Client/Server Sync Code notwendig
“Endlose” Suche nach SerialisierungsproblemenKeine dynamische UISprachmix (Java, XML, HTML, CSS)
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Vaadin
+Grosse EntwicklerbasisKommerzieller SupportGerä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 langwierigGenerierte Artifakte im src-Folder...Sprachmix (Java, XML, HTML, CSS)
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
ZK
+Guter (schneller) SupportDeklarative 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ändlichErfordert “ungewohnten” Programmierstil
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Eclipse RAP/Tabris
+Kommerzieller SupportBekannte APINative Widgets
-Native WidgetsLizenzkosten für TabrisCustom-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“
Echo3
+Intuitive, effiziente APIClient-only oder Client/ServerSchnell, super-stabilSauberer Code/Architektur“It just works”
-(Noch?) kein kommerzieller SupportBisher abhängig von einer EinzelpersonBekanntheitsgrad, MarketingStandard-Themes nicht mehr zeitgemäß
hmm...
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Fazit
Fazit
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
● Umfrage-Wunschliste● Entwicklungstendenzen
○ Mobile○ HTML5○ Light-weight & Scripting○ Innovation im Java-Ökosystem?
Quo vadis Web-Entwicklung?
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
● 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
Echo Roadmap
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
● Einfach Benutzen, Feedback geben● Bugs oder Verbesserungen melden● Eigene Komponenten erstellen und
teilen● Bugfixes oder neue Featurtes per
GitHub● Neue Webseite● Auf Forum posten
Mitmachen!
Herbstcampus 2013 – Hybride Schönheit: Das Web-Framework „Echo“
Rede & AntwortIhre Fragen, Anmerkungen und Meinungen?
Vielen Dank!https://github.com/echo3
Christof MayBarco Control Rooms GmbH
Greschbachstraße 5aD-76229 Karlsruhe
mail@chrismay.de
Benjamin SchmideXXcellent solutionsBeim Alten Fritz 2D-89075 Ulm
Twitter: @bentolorb.schmid@exxcellent.de