Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps (mit Ext JS)

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

Guten Abend!
Aron Homberg - http://www.aron-homberg.de

Enterprise
WebApps

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

Interactive Layouts
Responsive Design

AJAX-enabled
Client Pre- und Server-Validation

Sortable
Filterable
Pagination Grouping
Locking
User-
Customizable

Big Data?
Infinite Scrolling!

Buffered Loading
SortableFilterable

Plugin-Free
InteractiveAggregatable

Frameworks zur Auswahl
...und ca. 10-15 weitere

+ +
CSS-FrameworkMicro-JS-Frameworks
10+ Plugins 100+ CSS-Classes
25.000+ LOC
eigener JS-Code
Gewählte Frameworks
+

3 Monate später...
1000+ Entwicklerstunden
30 Tage hinter Roadmap
200+ offene JS-Bugs im Tracker
Cross-Browser-Probleme

Komplexitäts-Desaster

Rewrite!

Von Micro-Frameworks
abgedeckte Features
Anforderungen
der
Enterprise-Web-App

Micro Universell
etc.

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

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

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

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

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

Out-of-the-Box
MVC, Data-Binding
Layout-Manager
Grids, Trees
Menus & Toolbars
Forms
Cross-Browser-Shim
Universell

Einheitliche Code-Basis &
Qualität
Umfangreiche
Dokumentation
Wenige bis keine
Drittanbieter-Komponenten
Gutes Tooling
Universell

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

http://vimeo.com/22863837

Object-oriented
programming
1.

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();

Ext JSJava
class HelloWorld
extends WhatEver {
...
}
extend: "WhatEver",
...
})

Ext JSJava
class HelloWorld
implements WhatEver {
...
}
Sorry!
No interfaces ;-)

Ext JSJava
namespace foo;
class HelloWorld {
...
}
Ext.define("foo.HelloWorld",
{
...
})

Autoloading
2.

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

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();
});

Cross-Browser
abstraction layer
3.

Ext.dom.CompositeElement
Ext.dom.Element
HTML Inline Styles
Low-Level-Abstraction-API

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!

Components &
Containers
4.

Ext.container.Container
Ext.Component‘s
Ext.dom.Element‘s
High-Level API: Konfiguration von
Oberflächen in JSON-Notation!

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!"
}]
});

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

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

Layouting
5.

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

Swing-LayoutExt JS-Layout
Border
Box
Card
GridBag
Border
HBox, VBox
Card
SubLayouting
Accordion,
Absolute,
Anchor, ...
FlowAuto oder Anchor

Strong MVC
6.

Components / Container
„werfen“ Ereignisse
Design nach dem Observer-Pattern.
Controller‘s „fangen“ Ereignisse
Behandelnde Logik

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

Client-Side
Data Management
7.

Ext.data.Model
ﬁelds
Instanzen
Ext.data.Store
proxy associations
„Records“
nachgeladen lokal erzeugt
sort ﬁlter group
Verwaltet in

Ext.data.Store
ﬁelds
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)

Tools:
Next-Gen Theming
8.

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.

Tools:
Building & Deploy
9.

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

Tools:
Testing
10.

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

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

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

Tools:
Documentation
11.

JSDuck
docs.sencha.com
Vollständige API-Dokumentation von Ext JS
Guides
Videos
Live-Examples in der API-Dokumentation
Code-Beispiele

JSDuck
cmd> jsduck
Generiert eine interaktive API-
Dokumentation auf Basis der eigenen
Quellcode-Dokumentation.

Mobile?
12.

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

FastBook
http://vimeo.com/55486684

Tooling:
Sencha Architect
13.

WYSIWYG für Ext JS

Lizensierung?
14.

Lizensierung
Ext JS
Non-Commercial: Free (GPLv3)
Commercial: per Developer/Major version
Sencha Touch
Commercial Free
Sencha Architect
Commercial

Building an App
in 15 Minutes
HURRY!

Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps (mit Ext JS)

Weitere ähnliche Inhalte

Andere mochten auch

Ähnlich wie Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps (mit Ext JS)

Mehr von Java Usergroup Berlin-Brandenburg

Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps (mit Ext JS)