Post on 05-Dec-2014
description
Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps
Dienstag, 8. Oktober 13
Guten Abend!
Aron Homberg - http://www.aron-homberg.de
Dienstag, 8. Oktober 13
Enterprise WebApps
Dienstag, 8. Oktober 13
Dienstag, 8. Oktober 13
Dienstag, 8. Oktober 13
Dienstag, 8. Oktober 13
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
Interactive Layouts
Responsive Design
Dienstag, 8. Oktober 13
AJAX-enabled
Client Pre- und Server-Validation
Dienstag, 8. Oktober 13
SortableFilterable
Pagination Grouping
Locking
User-Customizable
Dienstag, 8. Oktober 13
Big Data?
Infinite Scrolling!
Dienstag, 8. Oktober 13
Buffered Loading
SortableFilterable
Dienstag, 8. Oktober 13
Plugin-Free
InteractiveAggregatable
Dienstag, 8. Oktober 13
Frameworks zur Auswahl
...und ca. 10-15 weitere
Dienstag, 8. Oktober 13
Dienstag, 8. Oktober 13
+ +
CSS-FrameworkMicro-JS-Frameworks
10+ Plugins 100+ CSS-Classes
25.000+ LOCeigener JS-Code
Gewählte Frameworks
+
Dienstag, 8. Oktober 13
3 Monate später...
1000+ Entwicklerstunden
30 Tage hinter Roadmap
200+ offene JS-Bugs im Tracker
Cross-Browser-Probleme
Dienstag, 8. Oktober 13
Komplexitäts-Desaster
Dienstag, 8. Oktober 13
Rewrite!
Dienstag, 8. Oktober 13
Von Micro-Frameworksabgedeckte Features
Anforderungender
Enterprise-Web-App
Dienstag, 8. Oktober 13
Micro Universell
etc.
Dienstag, 8. Oktober 13
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
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
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
Pro!
Geringer Footprint
Leicht erlernbar
Leichtgewichtiges MVC*
Leicht anzupassen
-> Für Websites / kleine WebApps (Multi Page) ausgelegt
etc.
Micro
Dienstag, 8. Oktober 13
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
Out-of-the-Box
MVC, Data-Binding
Layout-Manager
Grids, Trees
Menus & Toolbars
Forms
Cross-Browser-Shim
Universell
Dienstag, 8. Oktober 13
Einheitliche Code-Basis & Qualität
Umfangreiche Dokumentation
Wenige bis keine Drittanbieter-Komponenten
Gutes Tooling
Universell
Dienstag, 8. Oktober 13
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
Dienstag, 8. Oktober 13
http://vimeo.com/22863837Dienstag, 8. Oktober 13
Object-oriented programming
1.
Dienstag, 8. Oktober 13
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
Ext JSJava
class HelloWorld extends WhatEver {
...}
Ext.define("HelloWorld", { extend: "WhatEver",
...})
Dienstag, 8. Oktober 13
Ext JSJava
class HelloWorld implements WhatEver {
...}
Sorry!
No interfaces ;-)
Dienstag, 8. Oktober 13
Ext JSJava
namespace foo;
class HelloWorld { ...}
Ext.define("foo.HelloWorld", { ...})
Dienstag, 8. Oktober 13
Autoloading
2.
Dienstag, 8. Oktober 13
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
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
Cross-Browser abstraction layer
3.
Dienstag, 8. Oktober 13
Ext.dom.CompositeElement
Ext.dom.ElementHTML Inline Styles
Low-Level-Abstraction-API
Dienstag, 8. Oktober 13
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
Components & Containers
4.
Dienstag, 8. Oktober 13
Ext.container.Container
Ext.Component‘sExt.dom.Element‘s
High-Level API: Konfiguration von Oberflächen in JSON-Notation!
Dienstag, 8. Oktober 13
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
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
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
Layouting
5.
Dienstag, 8. Oktober 13
Ext.container.ContainerContainer‘s / Component‘s
Ereigns-getriebenes-ReLayouting-> Responsive Design
Out-of-the-Box!
Resize, Reposition, Visibility-Events
Re-Layout-Prozess
Dienstag, 8. Oktober 13
Swing-LayoutExt JS-Layout
Border
Box
Card
GridBag
Border
HBox, VBox
Card
SubLayouting
Accordion, Absolute, Anchor, ...
FlowAuto oder Anchor
Dienstag, 8. Oktober 13
Strong MVC
6.
Dienstag, 8. Oktober 13
Components / Container„werfen“ Ereignisse
Design nach dem Observer-Pattern.
Controller‘s „fangen“ Ereignisse
Behandelnde Logik
Dienstag, 8. Oktober 13
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
Client-Side Data Management
7.
Dienstag, 8. Oktober 13
Ext.data.Modelfields
Instanzen
Ext.data.Store
proxy associations
„Records“nachgeladen lokal erzeugt
sort filter group
Verwaltet in
Dienstag, 8. Oktober 13
Ext.data.Storefields
Ext.grid.Panel
proxy associations
Ajax / REST / JSON-RPCExt.data.Operation
Ext.tree.Panel„load“-Event
View-Komponenten „fangen“ das „load“-Event des Store‘s
ServerHTTP(S)
Dienstag, 8. Oktober 13
Tools:Next-Gen Theming
8.
Dienstag, 8. Oktober 13
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
Tools:Building & Deploy
9.
Dienstag, 8. Oktober 13
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
Tools:Testing
10.
Dienstag, 8. Oktober 13
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
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
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
Tools:Documentation
11.
Dienstag, 8. Oktober 13
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
JSDuck
cmd> jsduck
Generiert eine interaktive API-Dokumentation auf Basis der eigenen
Quellcode-Dokumentation.
Dienstag, 8. Oktober 13
Mobile?
12.
Dienstag, 8. Oktober 13
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
FastBook
http://vimeo.com/55486684Dienstag, 8. Oktober 13
Tooling:Sencha Architect
13.
Dienstag, 8. Oktober 13
WYSIWYG für Ext JS
Dienstag, 8. Oktober 13
Lizensierung?
14.
Dienstag, 8. Oktober 13
Lizensierung
Ext JS
Non-Commercial: Free (GPLv3)
Commercial: per Developer/Major version
Sencha Touch
Commercial Free
Sencha Architect
Commercial
Dienstag, 8. Oktober 13
Building an App in 15 Minutes
HURRY!
Dienstag, 8. Oktober 13