Folien des Vortrags von Aron Homberg am 7. Oktober 2013 vor der Java-Usergroup Berlin-Brandenburg zur Entwicklung von Richclients mit Ext JS.

1. Die fabelhafte Welt
Java(Script)-getriebener Enterprise-WebApps
Dienstag, 8. Oktober 13

2. Guten Abend!
Aron Homberg - http://www.aron-homberg.de
Dienstag, 8. Oktober 13

3. Enterprise
WebApps
Dienstag, 8. Oktober 13

4. Dienstag, 8. Oktober 13

5. Dienstag, 8. Oktober 13

6. Dienstag, 8. Oktober 13

7. Frontend-
Anforderungen
Mandantenfähigkeit
Mehrsprachigkeit
White-Label-fähig
Komplexes User/Rollen-Konzept
Komplexe Grids, Tree‘s und Charts
Statuspersistenz der Benutzeroberfläche
Responsive Design
HTML5, CSS3: Flat Design
Dienstag, 8. Oktober 13

8. Interactive Layouts
Responsive Design
Dienstag, 8. Oktober 13

9. AJAX-enabled
Client Pre- und Server-Validation
Dienstag, 8. Oktober 13

10. Sortable
Filterable
Pagination Grouping
Locking
User-
Customizable
Dienstag, 8. Oktober 13

11. Big Data?
Infinite Scrolling!
Dienstag, 8. Oktober 13

12. Buffered Loading
SortableFilterable
Dienstag, 8. Oktober 13

13. Plugin-Free
InteractiveAggregatable
Dienstag, 8. Oktober 13

14. Frameworks zur Auswahl
...und ca. 10-15 weitere
Dienstag, 8. Oktober 13

15. Dienstag, 8. Oktober 13

16. + +
CSS-FrameworkMicro-JS-Frameworks
10+ Plugins 100+ CSS-Classes
25.000+ LOC
eigener JS-Code
Gewählte Frameworks
+
Dienstag, 8. Oktober 13

17. 3 Monate später...
1000+ Entwicklerstunden
30 Tage hinter Roadmap
200+ offene JS-Bugs im Tracker
Cross-Browser-Probleme
Dienstag, 8. Oktober 13

18. Komplexitäts-Desaster
Dienstag, 8. Oktober 13

19. Rewrite!
Dienstag, 8. Oktober 13

20. Von Micro-Frameworks
abgedeckte Features
Anforderungen
der
Enterprise-Web-App
Dienstag, 8. Oktober 13

21. Micro Universell
etc.
Dienstag, 8. Oktober 13

22. HTML-Code muss selbst
entwickelt werden
CSS-Code muss selbst
entwickelt werden
Responsive Design,
Statefulness, Client/Server-
Kommunikation etc. muss
selbst entwickelt werden
etc.
Micro
Dienstag, 8. Oktober 13

23. Wenig vorgefertigte
Komponenten (Out-of-the-
Box) vorhanden:
Keine Grids
Keine Trees
Keine Menü/Toolbar‘s
Keine Layout-Manager
etc.
Micro
Dienstag, 8. Oktober 13

24. Daher oft Kombination mit
Drittanbieter-Komponenten:
- jqGrid
- jsTree
- Twitter Bootstrap etc.
- Make or Buy?
Konsequenzen:
- Komplexität?
- Mischung von Konzepten?
- Drittanbieter-Qualität?
etc.
Micro
Dienstag, 8. Oktober 13

25. Pro!
Geringer Footprint
Leicht erlernbar
Leichtgewichtiges MVC*
Leicht anzupassen
-> Für Websites / kleine
WebApps (Multi Page)
ausgelegt
etc.
Micro
Dienstag, 8. Oktober 13

26. HTML-Code wird zur
Laufzeit (im Browser) vom
Framework generiert
CSS-Code wird mitgeliefert
(„Themes“), lässt sich
aber auch anpassen
Viele Komponenten sind
bereits vorhanden und
bilden ein konsistentes
Gesamtwerk
Universell
Dienstag, 8. Oktober 13

27. Out-of-the-Box
MVC, Data-Binding
Layout-Manager
Grids, Trees
Menus & Toolbars
Forms
Cross-Browser-Shim
Universell
Dienstag, 8. Oktober 13

28. Einheitliche Code-Basis &
Qualität
Umfangreiche
Dokumentation
Wenige bis keine
Drittanbieter-Komponenten
Gutes Tooling
Universell
Dienstag, 8. Oktober 13

29. Con!
Größerer Footprint
Steile Lernkurve
Anpassungen erfordern
eher Eingriffe ins
Framework selbst
-> Eher für WebApps/
Single-Page ausgelegt
Universell
Dienstag, 8. Oktober 13

30. Dienstag, 8. Oktober 13

31. http://vimeo.com/22863837
Dienstag, 8. Oktober 13

32. Object-oriented
programming
1.
Dienstag, 8. Oktober 13

33. Ext JSJava
class HelloWorld {
protected String
text = null;
public HelloWorld() {
this.text = „Hello!“;
}
}
new HelloWorld();
Ext.define("HelloWorld", {
text: null,
constructor: function() {
this.text = "Hello!";
}
})
new HelloWorld();
Dienstag, 8. Oktober 13

34. Ext JSJava
class HelloWorld
extends WhatEver {
...
}
Ext.define("HelloWorld", {
extend: "WhatEver",
...
})
Dienstag, 8. Oktober 13

35. Ext JSJava
class HelloWorld
implements WhatEver {
...
}
Sorry!
No interfaces ;-)
Dienstag, 8. Oktober 13

36. Ext JSJava
namespace foo;
class HelloWorld {
...
}
Ext.define("foo.HelloWorld",
{
...
})
Dienstag, 8. Oktober 13

37. Autoloading
2.
Dienstag, 8. Oktober 13

38. Ext JSJava
import foo.Bar;
class HelloWorld {
...
// foo.Bar ist in
// Attributen und Methoden
// automatisch bekannt
}
Ext.define("HelloWorld", {
requires: ["foo.Bar"],
...
// foo.Bar ist in
// Methoden der Klasse
// automatisch bekannt
})
Dienstag, 8. Oktober 13

39. Ext JSJava
ClassLoader-Techniken zum
Nachladen von ByteCode
aus .class-Files oder JAR‘s.
<zu viel Code für diese
Slide>
Ext.require("foo.Bar",
function onClassLoaded() {
new foo.Bar();
});
Dienstag, 8. Oktober 13

40. Cross-Browser
abstraction layer
3.
Dienstag, 8. Oktober 13

41. Ext.dom.CompositeElement
Ext.dom.Element
HTML Inline Styles
Low-Level-Abstraction-API
Dienstag, 8. Oktober 13

42. Ext.dom.Element
Abstraktion des DOM-
Eventing (35 Events)
166 Methoden für die
Arbeit mit DOM-Elementen
(Cross-Browser-Shimed)*
AJAX-Helper Methods
Animations-Framework:
Ext.fx.*
CSS3-Selektor-basiertes
Querying
Cross-Browser Drag &
Drop-API mittels Ext.dd.
Mehr als das gesamte jQuery-Feature-Set!
Dienstag, 8. Oktober 13

43. Components &
Containers
4.
Dienstag, 8. Oktober 13

44. Ext.container.Container
Ext.Component‘s
Ext.dom.Element‘s
High-Level API: Konfiguration von
Oberflächen in JSON-Notation!
Dienstag, 8. Oktober 13

45. Remember: Swing?
Ext.define("App.view.Viewport", {
extend: "Ext.container.Viewport",
layout: "border",
items: [{
region: "west",
xtype: "panel",
title: "West",
width: 150,
}, {
region: "center",
html: "Hello, World!"
}]
});
Dienstag, 8. Oktober 13

46. Component‘sContainer‘s
Ext.button.Button
Ext.Img
Ext.LoadMask
Ext.menu.Item
Ext.form.Label
...
Ext.panel.Panel
Ext.container.Viewport
Ext.grid.Panel
Ext.menu.Menu
Ext.form.Panel
...
Dienstag, 8. Oktober 13

47. Observer-Pattern!
Jede Komponente „wirft“ zahlreiche Events (25+)
An jedes Ereignis dass eintritt, kann eigener
Programmcode gekoppelt werden
Eigener Programmcode kann das Standard-
Verhalten des Frameworks beeinflussen
Dienstag, 8. Oktober 13

48. Layouting
5.
Dienstag, 8. Oktober 13

49. Ext.container.Container
Container‘s / Component‘s
Ereigns-getriebenes-ReLayouting
-> Responsive Design
Out-of-the-Box!
Resize, Reposition, Visibility-Events
Re-Layout-Prozess
Dienstag, 8. Oktober 13

50. Swing-LayoutExt JS-Layout
Border
Box
Card
GridBag
Border
HBox, VBox
Card
SubLayouting
Accordion,
Absolute,
Anchor, ...
FlowAuto oder Anchor
Dienstag, 8. Oktober 13

51. Strong MVC
6.
Dienstag, 8. Oktober 13

52. Components / Container
„werfen“ Ereignisse
Design nach dem Observer-Pattern.
Controller‘s „fangen“ Ereignisse
Behandelnde Logik
Dienstag, 8. Oktober 13

53. Lose Kopplung
Ext.define("App.controller.FooGrid", {
extend: "Ext.app.Controller",
init: function() {
this.control({
"#fooGrid": {
"load": this.onGridLoad
}
});
},
onGridLoad: function(gridCmp) {
...
}
});
Dienstag, 8. Oktober 13

54. Client-Side
Data Management
7.
Dienstag, 8. Oktober 13

55. Ext.data.Model
fields
Instanzen
Ext.data.Store
proxy associations
„Records“
nachgeladen lokal erzeugt
sort filter group
Verwaltet in
Dienstag, 8. Oktober 13

56. Ext.data.Store
fields
Ext.grid.Panel
proxy associations
Ajax / REST / JSON-RPC
Ext.data.Operation
Ext.tree.Panel
„load“-Event
View-Komponenten „fangen“ das
„load“-Event des Store‘s
Server
HTTP(S)
Dienstag, 8. Oktober 13

57. Tools:
Next-Gen Theming
8.
Dienstag, 8. Oktober 13

58. Große Mengen CSS?
CSS3 wird aus der modularen SASS-Metasprache
generiert (Open Soure; http://sass-lang.org)
Ältere Browser (Internet Explorer) beherrschen
CSS3-Features nicht. Ext JS rendert CSS3-Effekte
automatisch als Image-Sprites.
Neue Themes (Custom CI) kann ohne Änderung
großer CSS-Codemengen durch „Vererbung“ und
Änderung von SCSS-Variablen erreicht werden.
Dienstag, 8. Oktober 13

59. Tools:
Building & Deploy
9.
Dienstag, 8. Oktober 13

60. Sencha CMD
cmd> sencha compile
Erkennt die Abhängigkeiten im Projekt
(Autoloader) und erstellt optimierte
Gesamt-Builds.
app-debug.js und app.js („compiled“)
Dienstag, 8. Oktober 13

61. Tools:
Testing
10.
Dienstag, 8. Oktober 13

62. Bryntum Siesta
bryntum.com/products/siesta
Ext JS-oriented Unit Testing
Spezielle API für Ext JS-Oberflächen-Tests
Automatisierbar (Continues Integration)
Oberfläche zum Interaktiven Ausführen der Tests
Tests müssen programmiert werden
kommerziell
Dienstag, 8. Oktober 13

63. Selenium IDE
docs.seleniumhq.org/projects/ide/
„Record & Replay“-Verfahren
Keine Implementierung von Tests notwending
Für einfache „Fire Tests“ geeignet (kann nicht alle
Komponenten-Ereignisse von Ext JS aufzeichnen)
Bei komplexen Ext JS-Oberflächen mit dynamisch
generierten Anteilen fehleranfällig.
Open Source
Dienstag, 8. Oktober 13

64. Royal Test Suite
In der Beta-Phase
„Record & Replay“-Verfahren
Keine Implementierung von Tests notwending
Durch intelligente Algorithmen können komplexeste
Web-Anwendungen getestet werden. (Ext JS, SAP
Web UI‘s, etc.)
Automatisierbar
kommerziell
Dienstag, 8. Oktober 13

65. Tools:
Documentation
11.
Dienstag, 8. Oktober 13

66. JSDuck
docs.sencha.com
Vollständige API-Dokumentation von Ext JS
Guides
Videos
Live-Examples in der API-Dokumentation
Code-Beispiele
Dienstag, 8. Oktober 13

67. JSDuck
cmd> jsduck
Generiert eine interaktive API-
Dokumentation auf Basis der eigenen
Quellcode-Dokumentation.
Dienstag, 8. Oktober 13

68. Mobile?
12.
Dienstag, 8. Oktober 13

69. Sencha Touch
Sencha Touch basiert auf Ext JS
Oberflächen-Komponenten angepasst
Zugriff auf Native API‘s
Via PhoneGap / Cordova auch „Quasi-Nativ“ /
App Store fähig
Für alle Mobile-Plattformen mit WebKit-basiertem
Web-Browser
Dienstag, 8. Oktober 13

70. FastBook
http://vimeo.com/55486684
Dienstag, 8. Oktober 13

71. Tooling:
Sencha Architect
13.
Dienstag, 8. Oktober 13

72. WYSIWYG für Ext JS
Dienstag, 8. Oktober 13

73. Lizensierung?
14.
Dienstag, 8. Oktober 13

74. Lizensierung
Ext JS
Non-Commercial: Free (GPLv3)
Commercial: per Developer/Major version
Sencha Touch
Commercial Free
Sencha Architect
Commercial
Dienstag, 8. Oktober 13

75. Building an App
in 15 Minutes
HURRY!
Dienstag, 8. Oktober 13