SchnelleWinkel
10x schnellere Webapps
mit AngularJS und Jee
Lernplattform
mit „sozialer Komponente“
Portal & CMS
JEE-Basis
Wir fangen dann schon mal an!
Portal? Forum? Social? CMS?
Da gibts doch schon was?!
Browser
Kernel
JEEBackend
Liferay
PotletServer
Glassfish
CMS
Social Features
User Management
Primefaces
iss doch
schön!
Wir wollen aber noch….
Browser
Kernel
JEEBackend
Liferay
PotletServer
Glassfish
CMS
Social Features
User Management
Browser
Kernel
JEEBackend
Liferay
PotletServer
Glassfish
CMS
Social Features
User Management
Custom Portlets
jQuery Widget...
Wantsome?
GetSome!
Loadbalancer
Server: 24x CPU, 40GB RAM
DB: 8x CPU, 40 GB RAM
[...] noch nicht mal gestartet,
Testphase erneut verschoben
und plötzlich auch noch langsam?
[…] jeder "Neuling" denkt sich
vermutlich: was'n das für ein
Saftladen […]
[...] Hoffentlich reiht es sich nicht
in die Reihe der deutschen Prestige-
projekte ein: Berliner Flughafen,
Stuttgart 21,...
HILFE!WASTUN?
G‘scheid konfigurieren!
An LR kann‘s nicht liegen!
Messen, nicht raten!
An LR kann‘s nicht liegen!
mehr Portal!
JSP & Liferay pur
Produkt ohne
Schnick-Schnack
mehr Portal!
JSP & Liferay pur
Produkt ohne
Schnick-Schnack
mehr JEE!
JSF2 pur
keine Portlets
KISS
mehr Portal!
JSP & Liferay pur
Produkt ohne
Schnick-Schnack
mehr JEE!
JSF2 pur
keine Portlets
KISS
mehr Client!
JEE & REST...
0
2
4
6
8
10
12
Liferay JSF REST
300 Nutzer
1000 Nutzer
mehr Portal mehr JEE mehr Client
Sekunden/
Request
Browser
Kernel
JEEBackend
Liferay
PotletServer
Glassfish
CMS
Social Features
User Management
Custom Portlets
jQuery Widget...
Browser
Kernel
JEEBackend
CMS
Glassfish
REST Service
Singe-Page UI
Kernel
Social Features
User Management
Browser
Kernel
JEEBackend
CMS
Glassfish
REST Service
Singe-Page UI
Kernel
Social Features
User Management
ANGULARJSINANUTSHELL
SPA&Client
Google
SolideGrundarchitektur
SolideGrundarchitektur
Echte Trennung View vs. Logik
- Deklarative View (Direktiven)
- Data Binding & Events
- MVVM
SolideGrundarchitektur
Echte Trennung View vs. Logik
- Controller & Services
- Dependency injection
- Module
HANDS-ONANGULARJS
http://jsbin.com/jobisaye/edit HelloKitty!
Scope-Objekt
showKitten: false,
greeting: “Hello Kitty”
Scope-Objekt
showKitten...
Direktiven
Controller(Javascript)Controller(Javascript)
View (HTML)View (HTML)
http://jsbin.com/rufut/4/edit Controller&DependencyInj...
Modul (Javascript)Modul (Javascript)
Referenz auf Module
Module,ServicesundDependencyInjection
Moduldefinition
Service
View (HTML)View (HTML)
http://jsbin.com/cipafaho/edit KomplexeDirektiven
index.html
<body ng-app="exampleApp1">
<div ng-include="'navtemplate.html'"/>
<div ng-view=""/>
</body>
index.html
<body n...
TIPPSFÜRDENJAVA-ENTWICKLER
Unsere Erfahrungen in der Dose
»JavaScriptistheonlylanguagethatI’m
awareofthatpeople feeltheydon’tneed
tolearn beforetheystartusingit.«
- Douglas Crockfo...
Front-end first
Dedizierter REST-Layer
Client
JEE Services
- value1
- value2
Entity #1
Validierung
Transformierung
Error Handling
Cache Co...
EmbraceREST/HTTP
EmbraceREST/HTTP
Klare Trennung & Design
Stateless; nur der Request zählt
Gute Testbarkeit
Frontend wirklich austauschbar
Lint your code
Tests, Tests, Tests!
E2E, E2M, Unit Frontend/Backend, REST
Knowyourtools
Scaffolding/Seeds ng-boilerplate, Yeoman, Mean.IO
Development IntelliJ UE, Netbeans
Build grunt, gulp
Packag...
Mut (& Wissen) zum Konservativen
Mut (& Wissen) zum Konservativen
Dependency Management
Build-/Laufzeit-Umgebung
Dokumentation & APIs
Solides Engineering
Framework
vs.
Anwendungsfall
DERMÜHELOHN…
0
5
10
15
20
25
30 Nutzer 50 Nutzer 100 Nutzer 300 Nutzer
Alte Anwendung Neue Anwendung
0
5
10
15
20
25
30 Nutzer 50 Nutzer 100 Nutzer 300 Nutzer
Alte Anwendung Neue Anwendung
[...] Kurz, ich bin echt begeistert.
Es ist sehr übersichtlich mit
schnellen Ladezeiten. [...]
[…] auf jeden Fall ein riesiger
Fortschritt [..] verbindet was ich
sonst noch so genutzt habe.
z.B. Facebook
Schön, modern und übersichtlich.
Ein deutlicher Schritt nach
vorne ... :-)
DieletzteSeite…
Fragen,Flames,Lob?
Benjamin.Schmid@exxcellent.de
Rainer.Schneider@exxcellent.de
@bentolor
https://www.exxc...
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Upcoming SlideShare
Loading in …5
×

Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE

960 views
860 views

Published on

Serverseitige Web-Technologien waren lange Zeit das Mittel der Wahl für Java-basierte Webanwendungen. Der Trend jedoch geht immer mehr zu JavaScript-basierten und damit Clientseitigen Web-GUIs. Wir werfen dazu einen Blick auf Google's AngularJS und erläutern an plastischen Beispielen seine Kernkonzepte und Funktionsweise. Was zeichnet AngularJS für die Realisierung der im Java-Umfeld häufig vertretenen, datengetriebenen Anwendungen besonders aus und wie fühlt sich die Entwicklung damit im direkten Vergleich dazu an?

Ein konkretes Fallbeispiel aus der Praxis, bei dem wir durch den Wechsel von einer JSF/Portlet-basierten Portal-Lösung hin zu einem AngularJS-basiertem Ansatz bei identischem JEE-Backend und Funktionalität Performance-Gewinne im Bereich von Zehnerpotenzen realisieren konnte, zeigt dabei auf, daß sich dieser Paradigmentwechsel durchaus lohnen kann!

Published in: Software
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
960
On SlideShare
0
From Embeds
0
Number of Embeds
74
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE

  1. 1. SchnelleWinkel 10x schnellere Webapps mit AngularJS und Jee
  2. 2. Lernplattform mit „sozialer Komponente“ Portal & CMS JEE-Basis
  3. 3. Wir fangen dann schon mal an!
  4. 4. Portal? Forum? Social? CMS? Da gibts doch schon was?!
  5. 5. Browser Kernel JEEBackend Liferay PotletServer Glassfish CMS Social Features User Management
  6. 6. Primefaces iss doch schön! Wir wollen aber noch….
  7. 7. Browser Kernel JEEBackend Liferay PotletServer Glassfish CMS Social Features User Management
  8. 8. Browser Kernel JEEBackend Liferay PotletServer Glassfish CMS Social Features User Management Custom Portlets jQuery Widgets PrimeFaces JSF FacesBridge
  9. 9. Wantsome? GetSome! Loadbalancer Server: 24x CPU, 40GB RAM DB: 8x CPU, 40 GB RAM
  10. 10. [...] noch nicht mal gestartet, Testphase erneut verschoben und plötzlich auch noch langsam?
  11. 11. […] jeder "Neuling" denkt sich vermutlich: was'n das für ein Saftladen […]
  12. 12. [...] Hoffentlich reiht es sich nicht in die Reihe der deutschen Prestige- projekte ein: Berliner Flughafen, Stuttgart 21, Elbphilharmonie
  13. 13. HILFE!WASTUN?
  14. 14. G‘scheid konfigurieren!
  15. 15. An LR kann‘s nicht liegen!
  16. 16. Messen, nicht raten! An LR kann‘s nicht liegen!
  17. 17. mehr Portal! JSP & Liferay pur Produkt ohne Schnick-Schnack
  18. 18. mehr Portal! JSP & Liferay pur Produkt ohne Schnick-Schnack mehr JEE! JSF2 pur keine Portlets KISS
  19. 19. mehr Portal! JSP & Liferay pur Produkt ohne Schnick-Schnack mehr JEE! JSF2 pur keine Portlets KISS mehr Client! JEE & RESTful Services rein client-seitige UI Innovativ & Riskant
  20. 20. 0 2 4 6 8 10 12 Liferay JSF REST 300 Nutzer 1000 Nutzer mehr Portal mehr JEE mehr Client Sekunden/ Request
  21. 21. Browser Kernel JEEBackend Liferay PotletServer Glassfish CMS Social Features User Management Custom Portlets jQuery Widgets PrimeFaces JSF FacesBridge
  22. 22. Browser Kernel JEEBackend CMS Glassfish REST Service Singe-Page UI Kernel Social Features User Management
  23. 23. Browser Kernel JEEBackend CMS Glassfish REST Service Singe-Page UI Kernel Social Features User Management
  24. 24. ANGULARJSINANUTSHELL
  25. 25. SPA&Client
  26. 26. Google
  27. 27. SolideGrundarchitektur
  28. 28. SolideGrundarchitektur Echte Trennung View vs. Logik - Deklarative View (Direktiven) - Data Binding & Events - MVVM
  29. 29. SolideGrundarchitektur Echte Trennung View vs. Logik - Controller & Services - Dependency injection - Module
  30. 30. HANDS-ONANGULARJS
  31. 31. http://jsbin.com/jobisaye/edit HelloKitty! Scope-Objekt showKitten: false, greeting: “Hello Kitty” Scope-Objekt showKitten: false, greeting: “Hello Kitty”
  32. 32. Direktiven
  33. 33. Controller(Javascript)Controller(Javascript) View (HTML)View (HTML) http://jsbin.com/rufut/4/edit Controller&DependencyInjection Model (Scope-Objekt) greeting: “Katzen?” hugKitty: function() Model (Scope-Objekt) greeting: “Katzen?” hugKitty: function()
  34. 34. Modul (Javascript)Modul (Javascript) Referenz auf Module Module,ServicesundDependencyInjection Moduldefinition Service
  35. 35. View (HTML)View (HTML) http://jsbin.com/cipafaho/edit KomplexeDirektiven
  36. 36. index.html <body ng-app="exampleApp1"> <div ng-include="'navtemplate.html'"/> <div ng-view=""/> </body> index.html <body ng-app="exampleApp1"> <div ng-include="'navtemplate.html'"/> <div ng-view=""/> </body> navtemplate.html <ul class='nav nav-tabs'> <li><a href='#/Sport'>Sport</a></li> <li><a href='#/Nature'>Nature</a></li> </ul> navtemplate.html <ul class='nav nav-tabs'> <li><a href='#/Sport'>Sport</a></li> <li><a href='#/Nature'>Nature</a></li> </ul> sport.html <img src=„surfer.jpg“/> sport.html <img src=„surfer.jpg“/> nature.html <img src=„tree.jpg“/> nature.html <img src=„tree.jpg“/> Templating&Routing Controller.js $routeProvider. when('/Sport', { templateUrl: 'sport.html' }). when('/Nature', { templateUrl: 'nature.html' }). otherwise({ redirectTo: '/Sport' }); Controller.js $routeProvider. when('/Sport', { templateUrl: 'sport.html' }). when('/Nature', { templateUrl: 'nature.html' }). otherwise({ redirectTo: '/Sport' });
  37. 37. TIPPSFÜRDENJAVA-ENTWICKLER Unsere Erfahrungen in der Dose
  38. 38. »JavaScriptistheonlylanguagethatI’m awareofthatpeople feeltheydon’tneed tolearn beforetheystartusingit.« - Douglas Crockford
  39. 39. Front-end first
  40. 40. Dedizierter REST-Layer Client JEE Services - value1 - value2 Entity #1 Validierung Transformierung Error Handling Cache Control Authorisierung RESTLayer - value3 Entity #2 - formatted1 - value3 DTO
  41. 41. EmbraceREST/HTTP
  42. 42. EmbraceREST/HTTP Klare Trennung & Design Stateless; nur der Request zählt Gute Testbarkeit Frontend wirklich austauschbar
  43. 43. Lint your code
  44. 44. Tests, Tests, Tests! E2E, E2M, Unit Frontend/Backend, REST
  45. 45. Knowyourtools Scaffolding/Seeds ng-boilerplate, Yeoman, Mean.IO Development IntelliJ UE, Netbeans Build grunt, gulp Package Management npm & Bower Test Jasmine & Protractor CSS LESS/SASS & Bootstrap © http://pixabay.com/en/deadman-ranch-ancient-buildings-223774/ Superdetaillierter Vergleich der diversen Seed/Scaffolding-Kits:http://goo.gl/zz7XvC
  46. 46. Mut (& Wissen) zum Konservativen
  47. 47. Mut (& Wissen) zum Konservativen Dependency Management Build-/Laufzeit-Umgebung Dokumentation & APIs Solides Engineering
  48. 48. Framework vs. Anwendungsfall
  49. 49. DERMÜHELOHN…
  50. 50. 0 5 10 15 20 25 30 Nutzer 50 Nutzer 100 Nutzer 300 Nutzer Alte Anwendung Neue Anwendung
  51. 51. 0 5 10 15 20 25 30 Nutzer 50 Nutzer 100 Nutzer 300 Nutzer Alte Anwendung Neue Anwendung
  52. 52. [...] Kurz, ich bin echt begeistert. Es ist sehr übersichtlich mit schnellen Ladezeiten. [...]
  53. 53. […] auf jeden Fall ein riesiger Fortschritt [..] verbindet was ich sonst noch so genutzt habe. z.B. Facebook
  54. 54. Schön, modern und übersichtlich. Ein deutlicher Schritt nach vorne ... :-)
  55. 55. DieletzteSeite… Fragen,Flames,Lob? Benjamin.Schmid@exxcellent.de Rainer.Schneider@exxcellent.de @bentolor https://www.exxcellent.de/ Image-Credits subtlepatterns.com sxc.hu Death to the StockPhoto Materialien zum Einstieg www.angularbasics.co.uk/ Konzepteerklärt angularjs.de/buch/ eBook,deutsch AngularJS d.punkt,deutsch

×