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...
Interactive Layouts
Responsive Design
Dienstag, 8. Oktober 13
AJAX-enabled
Client Pre- und Server-Validation
Dienstag, 8. Oktober 13
Sortable
Filterable
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+ LOC
eigener JS-Code
Gewählte Frameworks
+
Dienst...
3 Monate später...
1000+ Entwicklerstunden
30 Tage hinter Roadmap
200+ offene JS-Bugs im Tracker
Cross-Browser-Probleme
Di...
Komplexitäts-Desaster
Dienstag, 8. Oktober 13
Rewrite!
Dienstag, 8. Oktober 13
Von Micro-Frameworks
abgedeckte Features
Anforderungen
der
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/Ser...
Wenig vorgefertigte
Komponenten (Out-of-the-
Box) vorhanden:
Keine Grids
Keine Trees
Keine Menü/Toolbar‘s
Keine Layout-Man...
Daher oft Kombination mit
Drittanbieter-Komponenten:
- jqGrid
- jsTree
- Twitter Bootstrap etc.
- Make or Buy?
Konsequenze...
Pro!
Geringer Footprint
Leicht erlernbar
Leichtgewichtiges MVC*
Leicht anzupassen
-> Für Websites / kleine
WebApps (Multi ...
HTML-Code wird zur
Laufzeit (im Browser) vom
Framework generiert
CSS-Code wird mitgeliefert
(„Themes“), lässt sich
aber au...
Out-of-the-Box
MVC, Data-Binding
Layout-Manager
Grids, Trees
Menus & Toolbars
Forms
Cross-Browser-Shim
Universell
Dienstag...
Einheitliche Code-Basis &
Qualität
Umfangreiche
Dokumentation
Wenige bis keine
Drittanbieter-Komponenten
Gutes Tooling
Uni...
Con!
Größerer Footprint
Steile Lernkurve
Anpassungen erfordern
eher Eingriffe ins
Framework selbst
-> Eher für WebApps/
Si...
Dienstag, 8. Oktober 13
http://vimeo.com/22863837
Dienstag, 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 JSJava
class HelloWorld
extends WhatEver {
...
}
Ext.define("HelloWorld", {
extend: "WhatEver",
...
})
Dienstag, 8. Ok...
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
}
Ex...
Ext JSJava
ClassLoader-Techniken zum
Nachladen von ByteCode
aus .class-Files oder JAR‘s.
<zu viel Code für diese
Slide>
Ex...
Cross-Browser
abstraction layer
3.
Dienstag, 8. Oktober 13
Ext.dom.CompositeElement
Ext.dom.Element
HTML 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-Shi...
Components &
Containers
4.
Dienstag, 8. Oktober 13
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: "...
Component‘sContainer‘s
Ext.button.Button
Ext.Img
Ext.LoadMask
Ext.menu.Item
Ext.form.Label
...
Ext.panel.Panel
Ext.contain...
Observer-Pattern!
Jede Komponente „wirft“ zahlreiche Events (25+)
An jedes Ereignis dass eintritt, kann eigener
Programmco...
Layouting
5.
Dienstag, 8. Oktober 13
Ext.container.Container
Container‘s / Component‘s
Ereigns-getriebenes-ReLayouting
-> Responsive Design
Out-of-the-Box!
Res...
Swing-LayoutExt JS-Layout
Border
Box
Card
GridBag
Border
HBox, VBox
Card
SubLayouting
Accordion,
Absolute,
Anchor, ...
Flo...
Strong MVC
6.
Dienstag, 8. Oktober 13
Components / Container
„werfen“ Ereignisse
Design nach dem Observer-Pattern.
Controller‘s „fangen“ Ereignisse
Behandelnde ...
Lose Kopplung
Ext.define("App.controller.FooGrid", {
extend: "Ext.app.Controller",
init: function() {
this.control({
"#foo...
Client-Side
Data Management
7.
Dienstag, 8. Oktober 13
Ext.data.Model
fields
Instanzen
Ext.data.Store
proxy associations
„Records“
nachgeladen lokal erzeugt
sort filter group
Verw...
Ext.data.Store
fields
Ext.grid.Panel
proxy associations
Ajax / REST / JSON-RPC
Ext.data.Operation
Ext.tree.Panel
„load“-Eve...
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...
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.
a...
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
Automat...
Selenium IDE
docs.seleniumhq.org/projects/ide/
„Record & Replay“-Verfahren
Keine Implementierung von Tests notwending
Für ...
Royal Test Suite
In der Beta-Phase
„Record & Replay“-Verfahren
Keine Implementierung von Tests notwending
Durch intelligen...
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...
JSDuck
cmd> jsduck
Generiert eine interaktive API-
Dokumentation auf Basis der eigenen
Quellcode-Dokumentation.
Dienstag, ...
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 / Cor...
FastBook
http://vimeo.com/55486684
Dienstag, 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
Senc...
Building an App
in 15 Minutes
HURRY!
Dienstag, 8. Oktober 13
Nächste SlideShare
Wird geladen in …5
×

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

3.003 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
3.003
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1.402
Aktionen
Geteilt
0
Downloads
16
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

  1. 1. Die fabelhafte Welt Java(Script)-getriebener Enterprise-WebApps Dienstag, 8. Oktober 13
  2. 2. Guten Abend! Aron Homberg - http://www.aron-homberg.de Dienstag, 8. Oktober 13
  3. 3. Enterprise WebApps Dienstag, 8. Oktober 13
  4. 4. Dienstag, 8. Oktober 13
  5. 5. Dienstag, 8. Oktober 13
  6. 6. Dienstag, 8. Oktober 13
  7. 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. 8. Interactive Layouts Responsive Design Dienstag, 8. Oktober 13
  9. 9. AJAX-enabled Client Pre- und Server-Validation Dienstag, 8. Oktober 13
  10. 10. Sortable Filterable Pagination Grouping Locking User- Customizable Dienstag, 8. Oktober 13
  11. 11. Big Data? Infinite Scrolling! Dienstag, 8. Oktober 13
  12. 12. Buffered Loading SortableFilterable Dienstag, 8. Oktober 13
  13. 13. Plugin-Free InteractiveAggregatable Dienstag, 8. Oktober 13
  14. 14. Frameworks zur Auswahl ...und ca. 10-15 weitere Dienstag, 8. Oktober 13
  15. 15. Dienstag, 8. Oktober 13
  16. 16. + + CSS-FrameworkMicro-JS-Frameworks 10+ Plugins 100+ CSS-Classes 25.000+ LOC eigener JS-Code Gewählte Frameworks + Dienstag, 8. Oktober 13
  17. 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. 18. Komplexitäts-Desaster Dienstag, 8. Oktober 13
  19. 19. Rewrite! Dienstag, 8. Oktober 13
  20. 20. Von Micro-Frameworks abgedeckte Features Anforderungen der Enterprise-Web-App Dienstag, 8. Oktober 13
  21. 21. Micro Universell etc. Dienstag, 8. Oktober 13
  22. 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. 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. 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. 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. 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. 27. Out-of-the-Box MVC, Data-Binding Layout-Manager Grids, Trees Menus & Toolbars Forms Cross-Browser-Shim Universell Dienstag, 8. Oktober 13
  28. 28. Einheitliche Code-Basis & Qualität Umfangreiche Dokumentation Wenige bis keine Drittanbieter-Komponenten Gutes Tooling Universell Dienstag, 8. Oktober 13
  29. 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. 30. Dienstag, 8. Oktober 13
  31. 31. http://vimeo.com/22863837 Dienstag, 8. Oktober 13
  32. 32. Object-oriented programming 1. Dienstag, 8. Oktober 13
  33. 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. 34. Ext JSJava class HelloWorld extends WhatEver { ... } Ext.define("HelloWorld", { extend: "WhatEver", ... }) Dienstag, 8. Oktober 13
  35. 35. Ext JSJava class HelloWorld implements WhatEver { ... } Sorry! No interfaces ;-) Dienstag, 8. Oktober 13
  36. 36. Ext JSJava namespace foo; class HelloWorld { ... } Ext.define("foo.HelloWorld", { ... }) Dienstag, 8. Oktober 13
  37. 37. Autoloading 2. Dienstag, 8. Oktober 13
  38. 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. 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. 40. Cross-Browser abstraction layer 3. Dienstag, 8. Oktober 13
  41. 41. Ext.dom.CompositeElement Ext.dom.Element HTML Inline Styles Low-Level-Abstraction-API Dienstag, 8. Oktober 13
  42. 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. 43. Components & Containers 4. Dienstag, 8. Oktober 13
  44. 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. 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. 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. 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. 48. Layouting 5. Dienstag, 8. Oktober 13
  49. 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. 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. 51. Strong MVC 6. Dienstag, 8. Oktober 13
  52. 52. Components / Container „werfen“ Ereignisse Design nach dem Observer-Pattern. Controller‘s „fangen“ Ereignisse Behandelnde Logik Dienstag, 8. Oktober 13
  53. 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. 54. Client-Side Data Management 7. Dienstag, 8. Oktober 13
  55. 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. 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. 57. Tools: Next-Gen Theming 8. Dienstag, 8. Oktober 13
  58. 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. 59. Tools: Building & Deploy 9. Dienstag, 8. Oktober 13
  60. 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. 61. Tools: Testing 10. Dienstag, 8. Oktober 13
  62. 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. 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. 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. 65. Tools: Documentation 11. Dienstag, 8. Oktober 13
  66. 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. 67. JSDuck cmd> jsduck Generiert eine interaktive API- Dokumentation auf Basis der eigenen Quellcode-Dokumentation. Dienstag, 8. Oktober 13
  68. 68. Mobile? 12. Dienstag, 8. Oktober 13
  69. 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. 70. FastBook http://vimeo.com/55486684 Dienstag, 8. Oktober 13
  71. 71. Tooling: Sencha Architect 13. Dienstag, 8. Oktober 13
  72. 72. WYSIWYG für Ext JS Dienstag, 8. Oktober 13
  73. 73. Lizensierung? 14. Dienstag, 8. Oktober 13
  74. 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. 75. Building an App in 15 Minutes HURRY! Dienstag, 8. Oktober 13

×