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