Schnelle Winkel - eXXcellent solutions€¦ · Schnelle Winkel 10x schnellere Webapps mit...

56
Schnelle Winkel 10x schnellere Webapps mit AngularJS und Jee

Transcript of Schnelle Winkel - eXXcellent solutions€¦ · Schnelle Winkel 10x schnellere Webapps mit...

Schnelle Winkel

10x schnellere Webappsmit 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

JEE

Bac

ken

d

Life

ray

Pot

let

Serv

er

Gla

ssfi

sh

CMS

Social Features

User Management

Primefaces

iss doch schön!

Wir wollen aber noch….

Browser

Kernel

JEE

Bac

ken

d

Life

ray

Pot

let

Serv

er

Gla

ssfi

sh

CMS

Social Features

User Management

Browser

Kernel

JEE

Bac

ken

d

Life

ray

Pot

let

Serv

er

Gla

ssfi

sh

CMS

Social Features

User Management

Custom Portlets

jQuery Widgets

PrimeFaces

JSFFace

sB

rid

ge

Want some?Get Some!

LoadbalancerServer: 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,Elbphilharmonie

HILFE! WAS TUN?

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 & RESTful Servicesrein client-seitige UI

Innovativ & Riskant

0

2

4

6

8

10

12

Liferay JSF REST

300 Nutzer

1000 Nutzer

mehr Portal mehr JEE mehr Client

Sekunden/Request

Browser

Kernel

JEE

Bac

ken

d

Life

ray

Pot

let

Serv

er

Gla

ssfi

sh

CMS

Social Features

User Management

Custom Portlets

jQuery Widgets

PrimeFaces

JSFFace

sB

rid

ge

Browser

Kernel

JEE

Bac

ken

d

CM

S

Gla

ssfi

sh

REST Service

Singe-Page UI

Kernel

Social Features

User Management

Browser

Kernel

JEE

Bac

ken

d

CM

S

Gla

ssfi

sh

REST Service

Singe-Page UI

Kernel

Social Features

User Management

ANGULARJS IN A NUTSHELL

SPA & Client

Google

Solide Grundarchitektur

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

Solide GrundarchitekturEchte Trennung View vs. Logik- Controller & Services- Dependency injection- Module

HANDS-ON ANGULARJS

http://jsbin.com/jobisaye/edit Hello Kitty!

Scope-Objekt

showKitten: false,

greeting: “Hello Kitty”

Scope-Objekt

showKitten: false,

greeting: “Hello Kitty”

Direktiven

Controller (Javascript)Controller (Javascript)

View (HTML)View (HTML)

http://jsbin.com/rufut/4/edit Controller & Dependency Injection

Model (Scope-Objekt)

greeting: “Katzen?”

hugKitty: function()

Model (Scope-Objekt)

greeting: “Katzen?”

hugKitty: function()

Modul (Javascript)Modul (Javascript)

Referenz auf Module

Module, Services und Dependency Injection

Moduldefinition

Service

View (HTML)View (HTML)

http://jsbin.com/cipafaho/edit Komplexe Direktiven

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'

});

TIPPS FÜR DEN JAVA-ENTWICKLERUnsere Erfahrungen in der Dose

» 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

Front-end first

Dedizierter REST-LayerClient

JEE Services

- value1- value2

Entity #1

Validierung

Transformierung

Error Handling

Cache Control

Authorisierung

RES

T La

yer

- value3

Entity #2

- formatted1- value3

DTO

Embrace REST/HTTP

Embrace REST/HTTPKlare Trennung & DesignStateless; nur der Request zähltGute TestbarkeitFrontend wirklich austauschbar

Lint your code

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

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

© http://pixabay.com/en/deadman-ranch-ancient-buildings-223774/

Superdetaillierter Vergleich der diversen Seed/Scaffolding-Kits: http://goo.gl/zz7XvC

Mut (& Wissen) zum Konservativen

Mut (& Wissen) zum KonservativenDependency ManagementBuild-/Laufzeit-UmgebungDokumentation & APIsSolides Engineering

Frameworkvs.

Anwendungsfall

DER MÜHE LOHN…

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 ... :-)

Die letzte Seite …

Fragen, Flames, Lob?

[email protected]@exxcellent.de

@bentolor

https://www.exxcellent.de/

Image-Credits

subtlepatterns.com

sxc.hu

Death to the Stock Photo

Materialien zum Einstiegwww.angularbasics.co.uk/ Konzepte erklärtangularjs.de/buch/ eBook, deutschAngularJS d.punkt, deutsch