Your SlideShare is downloading. ×
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE

590
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 …

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
590
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. SchnelleWinkel 10x schnellere Webapps mit AngularJS und Jee
  • 2. Lernplattform mit „sozialer Komponente“ Portal & CMS JEE-Basis
  • 3. Wir fangen dann schon mal an!
  • 4. Portal? Forum? Social? CMS? Da gibts doch schon was?!
  • 5. Browser Kernel JEEBackend Liferay PotletServer Glassfish CMS Social Features User Management
  • 6. Primefaces iss doch schön! Wir wollen aber noch….
  • 7. Browser Kernel JEEBackend Liferay PotletServer Glassfish CMS Social Features User Management
  • 8. Browser Kernel JEEBackend Liferay PotletServer Glassfish CMS Social Features User Management Custom Portlets jQuery Widgets PrimeFaces JSF FacesBridge
  • 9. Wantsome? GetSome! Loadbalancer Server: 24x CPU, 40GB RAM DB: 8x CPU, 40 GB RAM
  • 10. [...] noch nicht mal gestartet, Testphase erneut verschoben und plötzlich auch noch langsam?
  • 11. […] jeder "Neuling" denkt sich vermutlich: was'n das für ein Saftladen […]
  • 12. [...] Hoffentlich reiht es sich nicht in die Reihe der deutschen Prestige- projekte ein: Berliner Flughafen, Stuttgart 21, Elbphilharmonie
  • 13. HILFE!WASTUN?
  • 14. G‘scheid konfigurieren!
  • 15. An LR kann‘s nicht liegen!
  • 16. Messen, nicht raten! An LR kann‘s nicht liegen!
  • 17. mehr Portal! JSP & Liferay pur Produkt ohne Schnick-Schnack
  • 18. mehr Portal! JSP & Liferay pur Produkt ohne Schnick-Schnack mehr JEE! JSF2 pur keine Portlets KISS
  • 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. 0 2 4 6 8 10 12 Liferay JSF REST 300 Nutzer 1000 Nutzer mehr Portal mehr JEE mehr Client Sekunden/ Request
  • 21. Browser Kernel JEEBackend Liferay PotletServer Glassfish CMS Social Features User Management Custom Portlets jQuery Widgets PrimeFaces JSF FacesBridge
  • 22. Browser Kernel JEEBackend CMS Glassfish REST Service Singe-Page UI Kernel Social Features User Management
  • 23. Browser Kernel JEEBackend CMS Glassfish REST Service Singe-Page UI Kernel Social Features User Management
  • 24. ANGULARJSINANUTSHELL
  • 25. SPA&Client
  • 26. Google
  • 27. SolideGrundarchitektur
  • 28. SolideGrundarchitektur Echte Trennung View vs. Logik - Deklarative View (Direktiven) - Data Binding & Events - MVVM
  • 29. SolideGrundarchitektur Echte Trennung View vs. Logik - Controller & Services - Dependency injection - Module
  • 30. HANDS-ONANGULARJS
  • 31. http://jsbin.com/jobisaye/edit HelloKitty! Scope-Objekt showKitten: false, greeting: “Hello Kitty” Scope-Objekt showKitten: false, greeting: “Hello Kitty”
  • 32. Direktiven
  • 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. Modul (Javascript)Modul (Javascript) Referenz auf Module Module,ServicesundDependencyInjection Moduldefinition Service
  • 35. View (HTML)View (HTML) http://jsbin.com/cipafaho/edit KomplexeDirektiven
  • 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. TIPPSFÜRDENJAVA-ENTWICKLER Unsere Erfahrungen in der Dose
  • 38. »JavaScriptistheonlylanguagethatI’m awareofthatpeople feeltheydon’tneed tolearn beforetheystartusingit.« - Douglas Crockford
  • 39. Front-end first
  • 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. EmbraceREST/HTTP
  • 42. EmbraceREST/HTTP Klare Trennung & Design Stateless; nur der Request zählt Gute Testbarkeit Frontend wirklich austauschbar
  • 43. Lint your code
  • 44. Tests, Tests, Tests! E2E, E2M, Unit Frontend/Backend, REST
  • 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. Mut (& Wissen) zum Konservativen
  • 47. Mut (& Wissen) zum Konservativen Dependency Management Build-/Laufzeit-Umgebung Dokumentation & APIs Solides Engineering
  • 48. Framework vs. Anwendungsfall
  • 49. DERMÜHELOHN…
  • 50. 0 5 10 15 20 25 30 Nutzer 50 Nutzer 100 Nutzer 300 Nutzer Alte Anwendung Neue Anwendung
  • 51. 0 5 10 15 20 25 30 Nutzer 50 Nutzer 100 Nutzer 300 Nutzer Alte Anwendung Neue Anwendung
  • 52. [...] Kurz, ich bin echt begeistert. Es ist sehr übersichtlich mit schnellen Ladezeiten. [...]
  • 53. […] auf jeden Fall ein riesiger Fortschritt [..] verbindet was ich sonst noch so genutzt habe. z.B. Facebook
  • 54. Schön, modern und übersichtlich. Ein deutlicher Schritt nach vorne ... :-)
  • 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