Schnelle Winkel. 10x schnellere Webapps mit AngularJS und Jee

Größe: px

Ab Seite anzeigen:

Download "Schnelle Winkel. 10x schnellere Webapps mit AngularJS und Jee"

Ferdinand Buchholz
vor 8 Jahren
Abrufe

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

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

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

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

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! mehr JEE! mehr Client! JSP & Liferay pur Produkt ohne Schnick-Schnack JSF2 pur keine Portlets KISS 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 Browser Faces Bridge jquery Widgets PrimeFaces JSF Custom Portlets JEE Backend Kernel Glassfish Potlet Server CMS Social Features User Management Liferay

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

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

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 JAVA-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 Dedizierter REST-Layer Client DTO - formatted1 - value3 REST Layer 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 Frontend wirklich austauschbar

44 Lint your code

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

46 Know your tools Scaffolding/Seeds Development Build Package Management Test CSS ng-boilerplate, Yeoman, Mean.IO IntelliJ UE, Netbeans grunt, gulp npm & Bower Jasmine & Protractor 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

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 Fragen, Flames, Lob? @bentolor 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. Performantere JEE Webapps mit AngularJS

Schnelle Winkel. Performantere JEE Webapps mit AngularJS Schnelle Winkel Performantere JEE Webapps mit AngularJS Lernplattform mit sozialer Komponente Portal & CMS JEE-Basis Wir fangen dann schon mal an! Portal? Forum? Social? CMS? Da gibts doch schon was?!