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


http://www

http://www

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


SortableFilterable

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+ LOCeigener 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-Frameworksabgedeckte Features

Anforderungender

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/22863837Dienstag, 8. Oktober 13

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 {

...}

Ext.define("HelloWorld", { 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}

Ext.define("HelloWorld", { 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.ElementHTML 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‘sExt.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.ContainerContainer‘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.Modelfields

Instanzen

Ext.data.Store

proxy associations

„Records“nachgeladen lokal erzeugt

sort filter group

Verwaltet in


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)


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


http://docs.seleniumhq.org/projects/ide/

http://docs.seleniumhq.org/projects/ide/

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/55486684Dienstag, 8. Oktober 13



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!


Technology

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