Schnelle Winkel. Performantere JEE Webapps mit AngularJS

Größe: px

Ab Seite anzeigen:

Download "Schnelle Winkel. Performantere JEE Webapps mit AngularJS"

Martha Bösch
vor 10 Jahren
Abrufe

1 Schnelle Winkel Performantere JEE Webapps mit AngularJS

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 JEE Backend Glassfish Potlet Server Liferay Browser CMS Kernel Social Features User Management

6 Wir wollen aber noch. Primefaces iss doch schön!

7 JEE Backend Glassfish Potlet Server Liferay Browser CMS Kernel Social Features User Management

8 JEE Backend Glassfish Potlet Server Liferay Faces Bridge Browser jquery Widgets PrimeFaces JSF Custom Portlets CMS Kernel Social Features User Management

10 Want some? Get Some! 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 Prestigeprojekte ein: Berliner Flughafen, Stuttgart 21, Elbphilharmonie

14 HILFE! WAS TUN?

15 G scheid konfigurieren!

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 Sekunden/ Request Nutzer 1000 Nutzer Liferay JSF REST mehr Portal mehr JEE mehr Client

22 JEE Backend Glassfish Potlet Server Liferay Faces Bridge Browser jquery Widgets PrimeFaces JSF Custom Portlets CMS Kernel Social Features User Management

23 JEE Backend Glassfish CMS Singe-Page UI Browser REST Service Kernel Social Kernel Features User Management

24 JEE Backend Glassfish CMS Singe-Page UI Browser REST Service Kernel Social Kernel Features User Management

25 ANGULARJS IN A NUTSHELL

26 SPA & Client

27 Google

28 Solide Grundarchitektur

29 Solide Grundarchitektur Echte Trennung View vs. Logik - Deklarative View (Direktiven) - Data Binding & Events - MVVM

30 Solide Grundarchitektur Echte Trennung View vs. Logik - Controller & Services - Dependency injection - Module

31 HANDS-ON ANGULARJS

32 Scope-Objekt showkitten: false, greeting: Hello Kitty Hello Kitty!

33 Direktiven

34 View (HTML) Controller (Javascript) Model (Scope-Objekt) greeting: Katzen? hugkitty: function() Controller & Dependency Injection

35 Moduldefinition Referenz auf Module Modul (Javascript) Service Module, Services und Dependency Injection

36 View (HTML) Komplexe Direktiven

37 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> Controller.js $routeprovider. when('/sport', { templateurl: 'sport.html' }). when('/nature', { templateurl: 'nature.html' }). otherwise({ }); redirectto: '/Sport' nature.html <img src= tree.jpg /> sport.html <img src= surfer.jpg /> Templating & Routing

38 Unsere Erfahrungen in der Dose TIPPS FÜR DEN ROUTINIERTEN ENTWICKLER

39 » JavaScript is the only language that I m aware of that people feel they don t need to learn before they start using it. «- Douglas Crockford

40 Front-end first

41 REST Layer Dedizierter REST-Layer Client DTO - formatted1 - value3 Error Handling Cache Control Transformierung Authorisierung Validierung Entity #1 - value1 - value2 Entity #2 - value3 JEE Services

42 Embrace REST/HTTP

43 Embrace REST/HTTP Klare Trennung & Design Stateless; nur der Request zählt Gute Testbarkeit & Diagnose Frontend wirklich austauschbar

44 Lint your code

45 Tests, Tests, Tests! E2E, E2M, Unit Frontend/Backend, REST

46 Know your tools 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 Superdetaillierter Vergleich der diversen Seed/Scaffolding-Kits:

47 Mut (& Wissen) zum Konservativen

48 Mut (& Wissen) zum Konservativen Dependency Management Build-/Laufzeit-Umgebung Dokumentation & APIs Solides Engineering

49 Framework vs. Anwendungsfall

50 DER MÜHE LOHN

51 25 Alte Anwendung Neue Anwendung Nutzer 50 Nutzer 100 Nutzer 300 Nutzer

25 Alte Anwendung Neue Anwendung 20 15 10 5

52 25 Alte Anwendung Neue Anwendung Nutzer 50 Nutzer 100 Nutzer 300 Nutzer

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 ANGULARJS 2.0

58 View (HTML) Controller (Javascript) Model (Scope-Objekt) greeting: Katzen? hugkitty: function() Controller & Dependency Injection

59 View (HTML) Controller (Javascript) Model (Scope-Objekt) greeting: Katzen? hugkitty: function() Controller & Dependency Injection

60 Moduldefinition Modul (Javascript) Module, Services und Dependency Injection

61 Modul (Javascript) Module, Services und Dependency Injection

62 Angular 2.x Verlustängste 1. $scope entfällt 2. Controller entfällt 3. DI geändert 4. angular.module entfällt 5. JavaScript (ES5) entfällt 6. jqlite entfällt 7. Direktiven-API entfällt

63 Angular 2.x Veränderungen 1. $scope 2. Controller 3. DI 4. angular.module 5. JavaScript (ES5) 6. jqlite 7. Direktiven-API (Web) Components via Typen ES6 Module ES6 TypeScript AtScript nicht mehr notwendig Annotations

64 2.x Motive Performance Neue Technologien (Evergreen Browser; IE11) Mobile first Ease of Use Focus on business

65 2.x Relevanz 2.0: ~2016? 1.x.x: mind Jahre Google: x AngularJS Apps

66 Fragen, Flames, Die letzte Seite Materialien zum Einstieg angularjs.de/buch/ AngularJS Konzepte erklärt ebook, deutsch d.punkt, deutsch Image-Credits subtlepatterns.com sxc.hu Death to the Stock Photo

Ähnliche Dokumente

Schnelle Winkel. 10x schnellere Webapps mit AngularJS und Jee

Schnelle Winkel. 10x schnellere Webapps mit AngularJS und Jee Schnelle Winkel 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?!