Post on 29-May-2020
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
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
[...] Hoffentlich reiht es sich nicht in die Reihe der deutschen Prestige-projekte ein: Berliner Flughafen,
Stuttgart 21,Elbphilharmonie
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
Solide GrundarchitekturEchte Trennung View vs. Logik- Deklarative View (Direktiven)- Data Binding & Events- MVVM
Solide GrundarchitekturEchte Trennung View vs. Logik- Controller & Services- Dependency injection- Module
http://jsbin.com/jobisaye/edit Hello Kitty!
Scope-Objekt
showKitten: false,
greeting: “Hello Kitty”
Scope-Objekt
showKitten: false,
greeting: “Hello Kitty”
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
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'
});
» 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
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/HTTPKlare Trennung & DesignStateless; nur der Request zähltGute TestbarkeitFrontend wirklich austauschbar
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 KonservativenDependency ManagementBuild-/Laufzeit-UmgebungDokumentation & APIsSolides Engineering
[…] auf jeden Fall ein riesiger Fortschritt [..] verbindet was ich sonst noch so genutzt habe.
z.B. Facebook
Die letzte Seite …
Fragen, Flames, Lob?
Benjamin.Schmid@exxcellent.deRainer.Schneider@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